better formatting

src/games/GameCore.tsx

@@ -27,7 +27,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
 }) {
     // TODO: report pass with id to user info
     const rewardRef = useRef<RewardElement | null>(null);
-    const { user } = useUser();
+    const { user, pullUser } = useUser();
     const [finish, setFinish] = useState<null | "pass" | "fail" | "time out">(null);
     const [current, setCurrent] = useState<Current<T> | undefined>(undefined);
     const [questionBox, setQuestionBox] = useState<QuestionGenerator<T>>(questions());
@@ -50,7 +50,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
     function handleFinish() {
         setFinish("pass");
         rewardRef.current?.rewardMe();
-        if (user) {
+        if (!user) return;
         const result: AT.TestResult = {
             done: true,
             time: getTimestamp(),
@@ -58,9 +58,11 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         };
         console.log("will post result", JSON.stringify(result));
         postTestResults([result])
-                .then(console.log)
-                .catch(console.error);
+            .then((res) => {
+                if (res.ok) {
+                    pullUser();
                 }
+            }).catch(console.error);
     }
     function handleQuit() {
         setFinish(null);

src/games/GameDisplay.tsx

@@ -7,7 +7,12 @@ function GameDisplay({ record: { title, Game, id } }: { record: GameRecord }) {
         (t.done === true) && (t.id === id)
     ));
     return <div>
-        <h4 className="my-4"><span role="img" aria-label="">🎮</span> {title} {completed ? "✅" : ""}</h4>
+        <div className="d-flex flex-row justify-content-between">
+            <div>
+                <h4 className="my-4"><span role="img" aria-label="">🎮</span> {title}</h4>
+            </div>
+            <div>{completed ? "✅" : ""}</div>
+        </div>
         <Game />
     </div>
 }