Add mobile UI

SuveenE · Jan 16, 2025 · 505791d · 505791d
1 parent e8cc51f
commit 505791d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 26 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,5 @@
 OPENAI_API_KEY=
-ENVIRONMENT=development
+NEXT_PUBLIC_ENVIRONMENT=development
 LANGFUSE_SECRET_KEY="sk-lf-..."
 LANGFUSE_PUBLIC_KEY="pk-lf-..."
 LANGFUSE_BASEURL="https://us.cloud.langfuse.com"
diff --git a/app/page.tsx b/app/page.tsx
@@ -35,7 +35,7 @@ export default function Home() {
   const [isO1, setIsO1] = useState(false);
   useEffect(() => {
     const uuid = crypto.randomUUID().slice(0, 6);
-    setSessionId(uuid);
+    setSessionId("Game 8 - gpt-4o");
   }, []);
 
   const handleCustomGame = (words: string[], cardTypes: CardType[]) => {
@@ -450,21 +450,21 @@ export default function Home() {
 
   return (
     <main className="min-h-screen p-8">
-      <div className="md:hidden min-h-screen flex items-center justify-center p-8">
+      {/* <div className="md:hidden min-h-screen flex items-center justify-center p-8">
         <div className="text-center space-y-4">
           <h1 className="text-2xl font-bold">Codenames AI</h1>
           <p className="text-gray-600">
             Please view this experience on a desktop browser for the best
             experience.
           </p>
         </div>
-      </div>
-      <div className="hidden md:block max-w-7xl mx-auto">
+      </div> */}
+      <div className="max-w-7xl mx-auto">
         <div className="relative">
           {process.env.NODE_ENV !== "production" && (
             <button
               onClick={replayTestGame}
-              className="fixed right-4 top-4 inline-flex items-center justify-center rounded-xl
+              className="hidden md:block fixed right-4 top-4 inline-flex items-center justify-center rounded-xl
                        bg-gradient-to-r from-indigo-600 to-blue-600 
                      px-4 py-2 text-xs font-semibold text-white shadow-sm 
                      hover:from-indigo-500 hover:to-blue-500
@@ -476,9 +476,9 @@ export default function Home() {
           )}
         </div>
         <div className="mb-8 flex items-center flex-row gap-8 justify-center">
-          <div className=" space-y-3">
+          <div className="ml-6 md:ml-0 space-y-3">
             <div className="space-y-2">
-              <h1 className="text-3xl font-bold tracking-tight">
+              <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
                 Codenames AI
               </h1>
               <p className="text-gray-600 text-sm">
@@ -488,7 +488,7 @@ export default function Home() {
             <div className="flex gap-4">
               {!isGameStarted &&
                 !isReplaying &&
-                process.env.NODE_ENV !== "production" && (
+                process.env.NEXT_PUBLIC_ENVIRONMENT !== "production" && (
                   <>
                     <button
                       onClick={() => setDialogOpen(true)}
@@ -520,12 +520,12 @@ export default function Home() {
                     </div>
                   </>
                 )}
-              {process.env.NODE_ENV === "production" && (
+              {process.env.NEXT_PUBLIC_ENVIRONMENT === "production" && (
                 <button
                   onClick={replayTestGame}
                   className="inline-flex items-center justify-center rounded-xl
                              bg-gradient-to-r from-indigo-600 to-blue-600 
-                             px-4 py-2 text-xs font-semibold text-white shadow-sm 
+                             px-4 py-2 text-xs md:text-sm font-semibold text-white shadow-sm 
                              hover:from-indigo-500 hover:to-blue-500
                              transition-all duration-200 mb-3"
                   disabled={isReplaying}
@@ -539,7 +539,7 @@ export default function Home() {
               onOpenChange={setDialogOpen}
               onStartCustomGame={handleCustomGame}
             />
-            <div className="flex items-center gap-8 text-lg font-medium">
+            <div className="flex items-center gap-8 text-sm md:text-lg font-medium">
               <div className="flex items-center gap-4">
                 <p className="text-neutral-500 text-sm">Score:</p>
                 <div className="flex items-center gap-2">
@@ -553,7 +553,7 @@ export default function Home() {
                   </span>
                 </div>
               </div>
-              <div className="text-sm">
+              <div className="text-xs md:text-sm">
                 {isProcessingTurn && !isGameEnded ? (
                   <div className="flex items-center gap-2 animate-pulse">
                     <div
@@ -599,9 +599,9 @@ export default function Home() {
           <SpymasterView cards={gameState?.cards ?? []} />
         </div>
 
-        <div className="flex flex-row gap-8 justify-center">
+        <div className="flex flex-col md:flex-row gap-8 justify-center">
           <div
-            className={`flex justify-center w-fit transition-all duration-500 ease-in-out bg-gray-100 rounded-xl ${
+            className={`flex flex-col md:flex-row justify-center w-fit transition-all duration-500 ease-in-out bg-gray-100 rounded-xl ${
               isGameStarted || isReplaying ? "justify-start" : "justify-center"
             }`}
           >
@@ -616,6 +616,9 @@ export default function Home() {
                 isSpymaster={false}
               />
             </div>
+            <p className="md:hidden text-[9px] text-center md:text-sm text-neutral-500">
+              Check the website on desktop for the best experience
+            </p>
             {(isGameStarted || isReplaying || isReplayEnd) && (
               <div className="w-120 space-y-4 transition-all duration-500 ease-in-out animate-fade-in">
                 <GameHistory

diff --git a/components/GameBoard.tsx b/components/GameBoard.tsx
@@ -18,8 +18,8 @@ export default function GameBoard({
           key={index}
           onClick={() => onCardClick(index)}
           className={`
-            aspect-[4/3] p-2 w-24 h-24 rounded-xl shadow-md flex items-center justify-center
-            text-center font-medium transition-all text-xs
+            aspect-[4/3] p-2 w-16 h-16 md:w-24 md:h-24 rounded-xl shadow-md flex items-center justify-center
+            text-center font-medium transition-all md:text-xs text-[8px]
             ${
               card.revealed
                 ? getRevealedCardStyle(card.type)

diff --git a/components/GameHistory.tsx b/components/GameHistory.tsx
@@ -10,7 +10,7 @@ export default function GameHistory({ history, winner }: GameHistoryProps) {
   const blueTurns = history.filter((turn) => turn.team === "blue");
 
   return (
-    <div className="bg-neutral-100 rounded-lg p-4 h-fit overflow-y-auto min-w-[500px]">
+    <div className="bg-neutral-100 rounded-lg p-4 h-fit overflow-y-auto min-w-[360px] md:min-w-[500px]">
       <h2 className="text-md font-bold mb-4 text-neutral-800">Game History</h2>
       {winner && (
         <div
@@ -24,11 +24,14 @@ export default function GameHistory({ history, winner }: GameHistoryProps) {
         </div>
       )}
       <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-1 text-xs">
+        <div className="space-y-1 text-[9px] md:text-xs">
           <h3 className="font-semibold text-red-500 mb-2">Red Team</h3>
           {redTurns.length > 0 ? (
             redTurns.map((turn, index) => (
-              <div key={index} className="bg-white rounded-xl p-3 shadow-sm">
+              <div
+                key={index}
+                className="bg-white rounded-xl p-2 md:p-3 shadow-sm"
+              >
                 <div className="flex">
                   <div className="w-1.5 rounded mr-3 bg-red-500" />
                   <div className="">
@@ -44,7 +47,7 @@ export default function GameHistory({ history, winner }: GameHistoryProps) {
                       <span className="font-semibold text-neutral-700">
                         Guesses:
                       </span>
-                      <div className="flex flex-wrap gap-2">
+                      <div className="flex flex-wrap gap-2 max-w-[120px] md:max-w-full">
                         {turn.guesses.map((guess, guessIndex) => (
                           <span
                             key={guessIndex}
@@ -75,7 +78,7 @@ export default function GameHistory({ history, winner }: GameHistoryProps) {
             </div>
           )}
         </div>
-        <div className="space-y-1 text-xs">
+        <div className="space-y-1 text-[9px] md:text-xs">
           <h3 className="font-semibold text-blue-500 mb-2">Blue Team</h3>
           {blueTurns.length > 0 ? (
             blueTurns.map((turn, index) => (
@@ -95,7 +98,7 @@ export default function GameHistory({ history, winner }: GameHistoryProps) {
                       <span className="font-semibold text-neutral-700">
                         Guesses:
                       </span>
-                      <div className="flex flex-wrap gap-2">
+                      <div className="flex flex-wrap gap-2 max-w-[100px] md:max-w-full">
                         {turn.guesses.map((guess, guessIndex) => (
                           <span
                             key={guessIndex}

diff --git a/components/SpymasterView.tsx b/components/SpymasterView.tsx
@@ -6,9 +6,11 @@ interface SpymasterViewProps {
 
 export default function SpymasterView({ cards }: SpymasterViewProps) {
   return (
-    <div className="border rounded-lg p-4">
-      <h2 className="text-sm font-bold text-center mb-2">Spymaster View</h2>
-      <div className="grid grid-cols-5 gap-1 w-[120px]">
+    <div className="border rounded-lg p-2 md:p-4">
+      <h2 className="text-[9px] md:text-sm font-bold text-center mb-2">
+        Spymaster View
+      </h2>
+      <div className="grid grid-cols-5 gap-1 w-[90px] md:w-[120px]">
         {cards.map((card, index) => (
           <div
             key={index}