Minor edits

staadecker · Mar 10, 2024 · d5f6fc3 · d5f6fc3
1 parent 5d19f86
commit d5f6fc3
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 148 deletions.
diff --git a/src/components/GameInProgress.tsx b/src/components/GameInProgress.tsx
@@ -20,10 +20,10 @@ export function GameWrapper() {
   return (
     <div className="flex flex-col items-center">
       <GameToolbar />
-      <div className="px-10 py-4 max-w-screen-xl">
+      <div className="px-10 py-4 max-w-screen-xl space-y-8">
         {works.map(({ userId, state: editorState }) => {
           return (
-            <div key={userId}>
+            <div key={userId} className="space-y-2" >
               <EditorLabel userId={userId} />
               <EditorContext>
                 <RegisterEditor id={userId}>
@@ -44,7 +44,7 @@ export function GameWrapper() {
 }
 
 const EditorLabel = ({ userId }: { userId: string }) => {
-  if (userId === PROFS_KEY) return <h1>Question for students:</h1>;
+  if (userId === PROFS_KEY) return <h1 className="text-xl bold">Question</h1>;
 
   return <UserCard userId={userId} />;
 };
diff --git a/src/components/GameStatus.tsx b/src/components/GameStatus.tsx
diff --git a/src/components/GameToolbar.tsx b/src/components/GameToolbar.tsx
@@ -1,9 +1,77 @@
-import Status from "./GameStatus";
-
 export const GameToolbar = () => {
   return (
-    <div className="bg-slate-100 w-full h-10 shadow-lg shadow-black">
-      <Status />
+    <div className="w-full shadow-md">
+      <div className="text-center text-3xl py-4 bg-surface w-full">
+        <GameStatusText />
+      </div>
     </div>
   );
 };
+
+import { useEffect, useState } from "react";
+import { Context, useGame } from "../game_logic/GameContext";
+import { getExpectedState } from "../game_logic/state_machine";
+import Loading from "./Loading";
+
+const getTimeInfo = (context: Context): string => {
+  const { state, timeToChange } = getExpectedState(context);
+
+  let prefix = "";
+  switch (state) {
+    case "waiting":
+      prefix = "Game starts in %s";
+      break;
+    case "in_progress":
+      prefix = "Swap in %s";
+      break;
+    case "saving_work":
+      prefix = "Saving your work %s";
+      break;
+    case "finished":
+      return "Game ended";
+    default:
+      throw new Error("Don't know how to handle status: " + state);
+  }
+
+  const minutes = Math.floor(timeToChange! / 60000);
+  const seconds = ((timeToChange! % 60000) / 1000).toFixed(0).padStart(2, "0");
+  return prefix.replace("%s", `${minutes}:${seconds}`);
+};
+
+function GameStatusText() {
+  const { state } = useGame();
+
+  const [timeInfo, setTimeInfo] = useState(getTimeInfo(state.context));
+
+  useEffect(() => {
+    if (!["waiting", "in_progress", "saving_work"].includes(state.value)) {
+      setTimeInfo(getTimeInfo(state.context));
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setTimeInfo(getTimeInfo(state.context));
+    }, 500);
+    return () => clearInterval(timer);
+  }, [state.value, state.context.meta]);
+
+  switch (state.value) {
+    case "game_not_found":
+      return <p>Game not found!</p>;
+    case "loading_game":
+    case "loading_work":
+      return <Loading />;
+    case "loaded":
+    case "waiting":
+    case "in_progress":
+    case "finished":
+    case "saving_work":
+      return (
+        <p>
+          <strong>{timeInfo}</strong>
+        </p>
+      );
+    default:
+      throw new Error("Don't know how to handle status: " + state.value);
+  }
+}
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
@@ -6,14 +6,16 @@ export const UserCard = ({ userId }: { userId: string }) => {
   const you = userId === state.context.currentUserUid;
 
   return (
-    <div className="p-2 shrink bg-white rounded-lg shadow hover:shadow-md justify-start items-center gap-2 flex transition-height ease-in duration-500">
-      <div
-        className={`w-6 h-6 rounded-full justify-center items-center flex ${user.displayColor}`}
-      >
-        <img src={`/avatars/${user.displayName}.png`} />
-      </div>
-      <div className="text-black text-xs cursor-default">
-        Anonymous {user.displayName} {you ? "(You)" : ""}
+    <div className="flex flex-row">
+      <div className="flex flex-row p-2 bg-white rounded-lg shadow hover:shadow-md justify-start items-center gap-2 transition-height ease-in duration-500">
+        <div
+          className={`w-6 h-6 rounded-full justify-center items-center flex ${user.displayColor}`}
+        >
+          <img src={`/avatars/${user.displayName}.png`} />
+        </div>
+        <div className="text-black text-xs cursor-default">
+          Anonymous {user.displayName} {you ? "(You)" : ""}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/WaitingRoom.tsx b/src/components/WaitingRoom.tsx
@@ -2,18 +2,16 @@ import { useGame } from "../game_logic/GameContext";
 import { addUserToDb } from "../firebase/db_queries";
 import { UserCard } from "./UserCard";
 import { useState } from "react";
-import GameStatus from "./GameStatus";
 import { LoadingButton } from "@mui/lab";
+import { GameToolbar } from "./GameToolbar";
 
 export function GameWaitingRoom() {
   return (
     <div className="h-full w-full flex flex-col">
-      <GameStatus />
-      <div className="grow bg-background flex justify-center px-4 py-8">
-        <div className="max-w-3xl flex flex-col space-y-4">
-          <UserList />
-          <JoinButton />
-        </div>
+      <GameToolbar />
+      <div className="grow flex flex-col space-y-4 px-4 py-8">
+        <UserList />
+        <JoinButton />
       </div>
     </div>
   );
@@ -23,15 +21,17 @@ export const UserList = () => {
   const { state } = useGame();
   const users = Object.keys(state.context.users);
   return (
-    <div className="min-w-40 grow flex flex-col bg-surface rounded-xl overflow-y-scroll border-stone-400 border-8 text-center py-4 px-2 gap-4">
-      <p className="text-xl">
-        {users.length} {users.length == 1 ? "player has" : "players have"}{" "}
-        joined
-      </p>
-      <div className="grow flex flex-wrap bg-surface rounded-xl items-start content-start justify-center gap-4">
-        {users.map((userId) => (
-          <UserCard userId={userId} key={userId} />
-        ))}
+    <div className="grow flex justify-center align-center">
+      <div className="grow max-w-xl flex flex-col bg-surface rounded-xl overflow-y-scroll border-stone-400 border-8 text-center py-4 px-2 gap-4">
+        <p className="text-xl">
+          {users.length} {users.length == 1 ? "player has" : "players have"}{" "}
+          joined
+        </p>
+        <div className="grow flex flex-wrap bg-surface rounded-xl items-start content-start justify-center gap-4">
+          {users.map((userId) => (
+            <UserCard userId={userId} key={userId} />
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -54,8 +54,7 @@ export const JoinButton = () => {
     <>
       <div className="flex justify-center h-14">
         <LoadingButton
-          color="primary"
-          className="grow flex rounded-2xl max-w-md justify-center items-center gap-3"
+          className="grow flex rounded-2xl max-w-md justify-center items-center gap-3 bg-primarycontainer"
           variant="contained"
           onClick={joinGame}
           disabled={joining || joined}

diff --git a/src/components/index.css b/src/components/index.css
@@ -24,6 +24,7 @@ body {
   position: relative;
   line-height: 1.7;
   font-weight: 400;
+  min-width: 1000px;
 }
 
 .editor-shell .editor-container {

diff --git a/src/components/lexical/plugins/ComponentPickerPlugin/index.tsx b/src/components/lexical/plugins/ComponentPickerPlugin/index.tsx
@@ -188,12 +188,12 @@ function getBaseOptions(editor: LexicalEditor, showModal: ShowModal) {
       onSelect: () =>
         editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
     }),
-    new ComponentPickerOption("Check List", {
-      icon: <i className="icon check" />,
-      keywords: ["check list", "todo list"],
-      onSelect: () =>
-        editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
-    }),
+    // new ComponentPickerOption("Check List", {
+    //   icon: <i className="icon check" />,
+    //   keywords: ["check list", "todo list"],
+    //   onSelect: () =>
+    //     editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+    // }),
     new ComponentPickerOption("Quote", {
       icon: <i className="icon quote" />,
       keywords: ["block quote"],

diff --git a/src/components/lexical/plugins/ToolbarPlugin/index.tsx b/src/components/lexical/plugins/ToolbarPlugin/index.tsx
@@ -94,7 +94,7 @@ import FontSize from "./fontSize";
 
 const blockTypeToBlockName = {
   bullet: "Bulleted List",
-  check: "Check List",
+  // check: "Check List",
   code: "Code Block",
   h1: "Heading 1",
   h2: "Heading 2",
@@ -324,13 +324,13 @@ function BlockFormatDropDown({
         <i className="icon numbered-list" />
         <span className="text">Numbered List</span>
       </DropDownItem>
-      <DropDownItem
+      {/* <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "check")}
         onClick={formatCheckList}
       >
         <i className="icon check-list" />
         <span className="text">Check List</span>
-      </DropDownItem>
+      </DropDownItem> */}
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "quote")}
         onClick={formatQuote}
@@ -889,13 +889,13 @@ export default function ToolbarPlugin({
         </DropDown>
       ) : (
         <>
-          <FontDropDown
+          {/* <FontDropDown
             disabled={!isEditable}
             style={"font-family"}
             value={fontFamily}
             editor={editor}
           />
-          <Divider />
+          <Divider /> */}
           <FontSize
             selectionFontSize={fontSize.slice(0, -2)}
             editor={editor}

diff --git a/src/routes/CreateGame.tsx b/src/routes/CreateGame.tsx
@@ -18,8 +18,9 @@ const CreateGame = () => {
   const onSubmit = async (e: React.FormEvent) => {
     // This is necessary since some of the Editor events bubble up and will trigger the form submission :/
     e.preventDefault();
-    if (submitButton.current !== (e.nativeEvent as SubmitEvent).submitter) return;
-
+    if (submitButton.current !== (e.nativeEvent as SubmitEvent).submitter)
+      return;
+
     setSubmitting(true);
     const formData = new FormData(e.target as HTMLFormElement);
 
@@ -37,8 +38,7 @@ const CreateGame = () => {
   return (
     <div className="w-full flex flex-col items-center p-5">
       <form onSubmit={onSubmit}>
-        <div className="flex flex-col space-y-8 max-w-screen-xl items-left">
-
+        <div className="flex flex-col space-y-8 max-w-screen-xl items-stretch">
           <div>
             <h1 className="text-lg">Question for students</h1>
             <Editor placeholderText="Enter your question..." fileIO />
@@ -74,16 +74,19 @@ const CreateGame = () => {
               }}
             />
           </div>
-
-          <LoadingButton
-            loading={submitting}
-            type="submit"
-            color="primary"
-            variant="contained"
-            ref={submitButton}
-          >
-            Start Game
-          </LoadingButton>
+          <div className="flex flex-row justify-center">
+            <LoadingButton
+              className="grow flex rounded-2xl max-w-xl justify-center items-center gap-3 bg-primarycontainer"
+              loading={submitting}
+              type="submit"
+              variant="contained"
+              ref={submitButton}
+            >
+              <div className="text-onprimarycontainer text-lg font-bold">
+                Start Game
+              </div>
+            </LoadingButton>
+          </div>
         </div>
       </form>
     </div>