Merge branch 'main' of https://github.com/Aplank14/things

andyplank · Dec 12, 2023 · 1702a13 · 1702a13
2 parents ebeb7ca + 92c7d6f
commit 1702a13
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 34 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -63,6 +63,7 @@ html, body {
     margin: 0;
     padding: 0;
     font-family: 'DM Sans', sans-serif;   
+    max-height: 100vh;
     color: var(--black);
 }
 

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -66,14 +66,14 @@ export default function App() {
 			</div> */}
 
 
-			<div className='bg-black pt-10'>
+			{/* <div className='bg-black pt-10'>
 				<h4>Debugging</h4>
 				<div>
 				<p>WebSocket Status: {ReadyState[readyState]}</p>
-				{/* <p>Last Message: {lastMessage && lastMessage.data}</p>
-				{roomCode && <p>Room Code: {roomCode}</p>} */}
-			</div>
-			</div>
+				<p>Last Message: {lastMessage && lastMessage.data}</p>
+				{roomCode && <p>Room Code: {roomCode}</p>}
+			</div> 
+			</div>*/}
 		</div>
   	);
 }
diff --git a/client/src/components/Game.tsx b/client/src/components/Game.tsx
@@ -36,7 +36,7 @@ function Game({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
     }
 
     return (
-        <div className="h-full">
+        <div className="h-[calc(100vh-150px)]">
             <div className='grid grid-cols-4 gap-4 h-full hidden sm:grid'>
                 <div className='bg-light-purple pb-4 pr-4'>
                     <h3 className='p-4'>Players</h3>

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -1,36 +1,31 @@
-import { Disclosure,  } from '@headlessui/react'
 import Logo from '../images/Logo.png'
 
 const Header = ({roomCode}: {roomCode:string}) => {
+
+const roomCodeUpper = roomCode.toUpperCase();
+
   return (
     <>
-    <Disclosure as="nav" className="bg-white">
-      {({ open }) => (
-        <>
-          <div className="px-2">
-            <div className="relative flex h-32 items-center justify-between">             
-              <div className="flex flex-1 items-center sm:justify-start">
-                <div className="flex flex-shrink-0 items-center">
-                    <a href="/">
-                        <img
-                            className="h-48 w-auto"
-                            src={Logo}
-                            alt="Things and Strings"
-                        />
-                    </a>
-                </div>
-              </div>
-              {roomCode !== "" && 
-              <div className="flex items-center pr-10 sm:static sm:ml-6">
-                <p>Room Code: {roomCode}</p>
-              </div>}
+      <div className="px-2 h-[130px]">
+        <div className="flex h-32 items-center justify-between">             
+          <div className="flex flex-1 items-center sm:justify-start">
+            <div className="flex flex-shrink-0 items-center">
+                <a href="/">
+                    <img
+                        className="h-48 w-auto"
+                        src={Logo}
+                        alt="Things and Strings"
+                    />
+                </a>
             </div>
           </div>
-
-        </>
-      )}
-    </Disclosure>
-    <div className='py-4 bg-purple' />
+          {roomCode !== "" && 
+          <div className="flex items-center pr-10 sm:static sm:ml-6">
+            <p>Room Code: {roomCodeUpper}</p>
+          </div>}
+        </div>
+      </div>
+    <div className='py-[10px] bg-purple' />
     </>
   )
 }

diff --git a/client/src/components/Join.tsx b/client/src/components/Join.tsx
@@ -19,8 +19,8 @@ function Join({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, r
     };
 
     return (
-        <div className='flex bg-light-purple h-full'>
-            <div className='bg-white drop-shadow-lg shadow-sm p-10 text-center m-auto min-w-4xl rounded-2xl'>
+        <div className='flex bg-light-purple h-[calc(100vh-150px)] overflow-hidden'>
+            <div className='bg-white drop-shadow-lg shadow-sm p-5 md:p-10 text-center m-auto min-w-4xl rounded-2xl'>
                 <div className='pb-6'>
                     <h2>Hello!</h2>
                     <h3>Let's get started</h3>