more dashboard stuff

swizzard · Mar 27, 2020 · b7f523a · b7f523a
1 parent ffdb598
commit b7f523a
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 21 deletions.
diff --git a/app/migrations/0005-game-name.sql b/app/migrations/0005-game-name.sql
@@ -0,0 +1 @@
+ALTER TABLE quiz ADD COLUMN IF NOT EXISTS name VARCHAR(255) NOT NULL;
diff --git a/app/migrations/0006-question-no.sql b/app/migrations/0006-question-no.sql
@@ -0,0 +1,3 @@
+ALTER TABLE question ADD COLUMN IF NOT EXISTS question_no SMALLINT NOT NULL DEFAULT 1;
+ALTER TABLE quiz_round ALTER COLUMN round_no SET DEFAULT 1;
+ALTER TABLE quiz_round ALTER COLUMN round_no SET NOT NULL;
diff --git a/app/src/DraftDash.js b/app/src/DraftDash.js
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import DraftGame from './DraftGame';
+import { getHostGames } from './db/games';
+import HostGameSummary from './HostGameSummary';
+
+function newGame({ display_name, id }) {
+  return {
+    name: '',
+    creator: {
+      display_name,
+      id,
+    },
+    quiz_rounds: [],
+  };
+}
+
+export default function DraftDash({ setDashState, user }) {
+  const [error, setError] = useState(null);
+  const [games, setGames] = useState(null);
+  const [selectedGame, setSelectedGame] = useState(null);
+
+  useEffect(() => {
+    getHostGames(user.id)
+      .then((resp) => {
+        if (resp.ok) {
+          return resp.json();
+        } else {
+          throw new Error('There was a problem retrieving your games.');
+        }
+      })
+      .then((games) => setGames(games))
+      .catch((e) => setError(e));
+  }, [games]);
+
+  return selectedGame ? (
+    <DraftGame game={selectedGame} user={user} />
+  ) : (
+    <div>
+      {error ? <div>{error}</div> : null}
+      <div>
+        {games.length > 0 ? (
+          games.map((g) => (
+            <HostGameSummary game={g} select={setSelectedGame} user={user} />
+          ))
+        ) : (
+          <h4>No Games</h4>
+        )}
+      </div>
+      <div>
+        <button onClick={() => setSelectedGame(newGame(user))}>
+          Create Game
+        </button>
+      </div>
+      <div>
+        <button onClick={() => setDashState(null)}>Back</button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/HostDash.js b/app/src/HostDash.js
@@ -1,24 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import HostGame from './HostGame';
 import { getHostGames } from './db/games';
-
-function countQuestions(game) {
-  let numQs = 0;
-  game.rounds.forEach((r) => (numQs += r.questions.length));
-  return numQs;
-}
-
-function HostSummary({ game, selectGame }) {
-  return (
-    <div>
-      <h3>{game.name}</h3>
-      <p>Rounds: {game.rounds.length}</p>
-      <p>Questions: {countQuestions(game)}</p>
-      <p>Code: {game.code}</p>
-      <button onClick={() => selectGame(game)}>Start!</button>
-    </div>
-  );
-}
+import HostGameSummary from './HostGameSummary';
 
 export default function HostDash({ setDashState, user }) {
   const [error, setError] = useState(null);
@@ -42,9 +25,19 @@ export default function HostDash({ setDashState, user }) {
     <HostGame game={selectedGame} user={user} />
   ) : (
     <div>
-      {games.map((g) => (
-        <HostSummary game={g} selectGame={setSelectedGame} />
-      ))}
+      {error ? <div>{error}</div> : null}
+      <div>
+        {games.length > 0 ? (
+          games.map((g) => (
+            <HostGameSummary game={g} select={setSelectedGame} user={user} />
+          ))
+        ) : (
+          <h4>No Games</h4>
+        )}
+      </div>
+      <div>
+        <button onClick={() => setDashState(null)}>Back</button>
+      </div>
     </div>
   );
 }
diff --git a/app/src/HostGameSummary.js b/app/src/HostGameSummary.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { deleteGame } from './db/games';
+
+function countQuestions(game) {
+  let numQs = 0;
+  game.rounds.forEach((r) => (numQs += r.questions.length));
+  return numQs;
+}
+export default function HostGameSummary({ game, select, selectLabel, user }) {
+  return (
+    <div>
+      <h3>{game.name}</h3>
+      <p>Rounds: {game.quiz_round.length}</p>
+      <p>Questions: {countQuestions(game)}</p>
+      <button onClick={() => select(game)}>{selectLabel}</button>
+      <button onClick={() => deleteGame(game, user)}>Delete</button>
+    </div>
+  );
+}
diff --git a/app/src/PlayerGame.js b/app/src/PlayerGame.js
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { postAnswers } from './db/game';
+
+function newAnswers(game, { display_name, id }) {
+  return {
+    player: {
+      display_name,
+      id,
+    },
+    answers: game.quiz_round.map(() => []),
+  };
+}
+
+function setAnswer(roundNo, questionNo) {
+  return (ans, response, setAns) => {
+    ans[roundNo - 1][questionNo] = response;
+    setAns(ans);
+  };
+}
+
+function submitAnswers(answers, user, setError, setPosted) {
+  setError(null);
+  postAnswers(answers, user).then((resp) => {
+    if (resp.ok) {
+      setPosted(true);
+    } else {
+      setError('There was an error submitting your answers');
+    }
+  });
+}
+
+function PlayerAnswer({ answers, game, roundNo, questionNo, setAnswers }) {
+  const sa = setAnswer(roundNo, questionNo);
+  return (
+    <div key={`${game.quiz_code}-${roundNo}-${questionNo}`}>
+      <input
+        type="text"
+        placeholder="Your Answer"
+        onChange={(e) => sa(answers, e.target.value, setAnswers)}
+      />
+    </div>
+  );
+}
+
+export default function PlayerGame({ game, user }) {
+  const [currentRound, setCurrentRound] = useState(1);
+  const [answers, setAnswers] = useState(newAnswers(game, user));
+  const [posted, setPosted] = useState(false);
+  const [error, setError] = useState(null);
+  const finalRound = game.quiz_round.length - 1;
+
+  return (
+    <div>
+      <h3>
+        {game.name} - Round {currentRound}
+      </h3>
+      {error ? <div>{error}</div> : null}
+      {posted ? (
+        <div>
+          <h4>Your answers have been submitted! Thanks for playing!</h4>
+        </div>
+      ) : (
+        <div>
+          <div>
+            {game.quiz_round[currentRound].map((_, ix) => (
+              <PlayerAnswer
+                answers={answers}
+                game={game}
+                roundNo={currentRound}
+                questionNo={ix}
+                setAnswers={setAnswers}
+              />
+            ))}
+          </div>
+          <div>
+            {currentRound < finalRound ? (
+              <button onClick={() => setCurrentRound(currentRound++)}>
+                Next Round
+              </button>
+            ) : null}
+            {currentRound > 1 ? (
+              <button onClick={() => setCurrentRound(currentRound--)}>
+                Previous Round
+              </button>
+            ) : null}
+          </div>
+        </div>
+      )}
+      {currentRound === finalRound ? (
+        <div>
+          <button onClick={() => postAnswers(answers, user)}>
+            Submit Answers
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE quiz ADD COLUMN IF NOT EXISTS name VARCHAR(255) NOT NULL;