remove game code

open-game-collective · Nov 11, 2024 · 96f411f · 96f411f
1 parent ec63887
commit 96f411f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 116 deletions.
diff --git a/app/components/host-view.tsx b/app/components/host-view.tsx
@@ -332,11 +332,13 @@ const LobbyControls = ({
           Game Lobby
         </h1>
 
-        <PlayerList 
-          players={players} 
-          hostId={gameState.hostId}
-          onRemovePlayer={(playerId) => send({ type: "REMOVE_PLAYER", playerId })}
-        />
+        <div className="mb-8">
+          <PlayerList 
+            players={players} 
+            hostId={gameState.hostId}
+            onRemovePlayer={(playerId) => send({ type: "REMOVE_PLAYER", playerId })}
+          />
+        </div>
 
         <div className="space-y-3">
           <motion.button

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -9,7 +9,7 @@ import {
   useSearchParams,
 } from "@remix-run/react";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowRight, Dice1, HelpCircle, Plus } from "lucide-react";
+import { Dice1, HelpCircle, Plus } from "lucide-react";
 import { atom } from "nanostores";
 import { QRCodeSVG } from "qrcode.react";
 import { useState } from "react";
@@ -46,64 +46,28 @@ export type LoaderData = {
 
 export default function Index() {
   const { gameId } = useLoaderData<LoaderData>();
-  const [searchParams] = useSearchParams();
-  const code = searchParams.get("code");
-
-  // Create local atoms
-  const [$gameCode] = useState(() => atom<string>(code || ""));
   const [$showHelp] = useState(() => atom<boolean>(false));
-  const [$isJoining] = useState(() => atom<boolean>(false));
 
   return (
     <HomePageContent
       newGameId={gameId}
-      $gameCode={$gameCode}
       $showHelp={$showHelp}
-      $isJoining={$isJoining}
     />
   );
 }
 
 type HomePageContentProps = {
   newGameId: string;
-  $gameCode: ReturnType<typeof atom<string>>;
   $showHelp: ReturnType<typeof atom<boolean>>;
-  $isJoining: ReturnType<typeof atom<boolean>>;
 };
 
 function HomePageContent({
   newGameId,
-  $gameCode,
   $showHelp,
-  $isJoining,
 }: HomePageContentProps) {
   const { deviceType, host } = useLoaderData<LoaderData>();
   const isMobile = deviceType === "mobile";
   const showHelp = useStore($showHelp);
-  const isJoining = useStore($isJoining);
-  const gameCode = useStore($gameCode);
-  const client = SessionContext.useClient();
-  const navigate = useNavigate();
-
-  const handleJoinGame = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const gameCode = $gameCode.get();
-    if (!gameCode) return;
-
-    $isJoining.set(true);
-    const [error] = await catchError(
-      client.waitFor((state) => !!state.public.gameIdsByJoinCode[gameCode])
-    );
-    if (error) {
-      console.warn(error);
-    }
-    const gameId = client.getState().public.gameIdsByJoinCode[gameCode];
-    if (gameId) {
-      navigate(`/games/${gameId}`);
-    }
-
-    $isJoining.set(false);
-  };
 
   const HelpModal = () => (
     <motion.div
@@ -191,74 +155,22 @@ function HomePageContent({
         </div>
 
         {isMobile ? (
-          // Mobile view - show game controls
-          <>
-            <div className="bg-white/10 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-6 border border-white/20">
-              <h2 className="text-2xl font-semibold text-indigo-300 mb-4">
-                Join a Game
-              </h2>
-              <form onSubmit={handleJoinGame}>
-                <div className="mb-4">
-                  <label
-                    htmlFor="gameCode"
-                    className="block text-sm font-medium text-white/80 mb-1"
-                  >
-                    Game Code
-                  </label>
-                  <input
-                    type="text"
-                    id="gameCode"
-                    aria-label="Game Code"
-                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                    value={gameCode}
-                    onChange={(e) =>
-                      $gameCode.set(e.target.value.toUpperCase())
-                    }
-                    placeholder="Enter game code"
-                    maxLength={6}
-                    disabled={isJoining}
-                  />
-                </div>
-                <motion.button
-                  type="submit"
-                  whileHover={{ scale: isJoining ? 1 : 1.02 }}
-                  whileTap={{ scale: isJoining ? 1 : 0.98 }}
-                  className={`w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-xl transition duration-300 flex items-center justify-center ${
-                    isJoining ? "opacity-75 cursor-not-allowed" : ""
-                  }`}
-                  disabled={isJoining}
-                >
-                  {isJoining ? (
-                    <>
-                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
-                      Joining...
-                    </>
-                  ) : (
-                    <>
-                      <ArrowRight className="mr-2" size={20} />
-                      Join Game
-                    </>
-                  )}
-                </motion.button>
-              </form>
-            </div>
-
-            <div className="bg-white/10 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-white/20">
-              <h2 className="text-2xl font-semibold text-indigo-300 mb-4">
-                Start a New Game
-              </h2>
-              <a href={`/games/${newGameId}`}>
-                <motion.button
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-xl transition duration-300 flex items-center justify-center"
-                >
-                  <Plus className="mr-2" size={20} />
-                  Create New Game
-                </motion.button>
-              </a>
-            </div>
-          </>
+          // Mobile view - show only create game option
+          <div className="bg-white/10 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-white/20">
+            <h2 className="text-2xl font-semibold text-indigo-300 mb-4">
+              Start a New Game
+            </h2>
+            <a href={`/games/${newGameId}`}>
+              <motion.button
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-xl transition duration-300 flex items-center justify-center"
+              >
+                <Plus className="mr-2" size={20} />
+                Create New Game
+              </motion.button>
+            </a>
+          </div>
         ) : (
           // Desktop view - show TV mode message
           <div className="bg-white/10 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-white/20 text-center">

diff --git a/stories/_index.stories.tsx b/stories/_index.stories.tsx
@@ -110,9 +110,8 @@ export const MobileView: Story = {
   },
 };
 
-/**
- * Story demonstrating the mobile view with a pre-filled game code
- */
+// Commenting out join game related stories
+/*
 export const MobileWithGameCode: Story = {
   parameters: {
     remix: {
@@ -135,9 +134,6 @@ export const MobileWithGameCode: Story = {
   },
 };
 
-/**
- * Interactive story demonstrating the game joining flow on mobile
- */
 export const JoinGameInteraction: Story = {
   decorators: [
     (Story) => {
@@ -205,3 +201,4 @@ export const JoinGameInteraction: Story = {
     });
   },
 };
+*/