Hotkeys for starting game (#144)

* Closes #136

is this how you add a newline in JSX i have no idea lol

* Also hotkey for RoomPage.js

* drop: remove hotkey labels

* feat: play again hotkey

* doc: put hotkey shortcut in help

Author: vEnhance

src/pages/GamePage.js

@@ -22,6 +22,7 @@ import User from "../components/User";
 import { SettingsContext, UserContext } from "../context";
 import firebase, { createGame, fetchStaleGame, finishGame } from "../firebase";
 import useFirebaseRef from "../hooks/useFirebaseRef";
+import useKeydown from "../hooks/useKeydown";
 import {
   checkSet,
   checkSetUltra,
@@ -151,6 +152,16 @@ function GamePage() {
     }
   }, [loadingGame, loadingGameData, game, gameData, fetchingStaleGame, gameId]);
 
+  useKeydown((event) => {
+    if (
+      event.ctrlKey === true &&
+      event.keyCode === 13 &&
+      game.status === "done"
+    ) {
+      handlePlayAgain();
+    }
+  });
+
   if (redirect) return <Navigate push to={redirect} />;
 
   if (

src/pages/HelpPage.js

@@ -171,7 +171,12 @@ function HelpPage() {
           shortcuts by selecting your keyboard layout in the settings. The
           shortcuts specific to your layout will then be reflected here.
         </Typography>
-
+        <Typography variant="body1" gutterBottom>
+          You can start a room with the <code>Ctrl + Enter</code> shortcut from
+          the lobby, and start or restart a game with <code>Ctrl + Enter</code>.
+          From the lobby you can also start a private room with{" "}
+          <code>Shift + Enter</code>.
+        </Typography>
         <hr />
         <Typography variant="h5" gutterBottom>
           Game modes

src/pages/LobbyPage.js

@@ -25,6 +25,7 @@ import { UserContext } from "../context";
 import firebase, { createGame } from "../firebase";
 import useFirebaseQuery from "../hooks/useFirebaseQuery";
 import useFirebaseRef from "../hooks/useFirebaseRef";
+import useKeydown from "../hooks/useKeydown";
 
 const useStyles = makeStyles((theme) => ({
   mainGrid: {
@@ -155,6 +156,23 @@ function LobbyPage() {
     setTabValue(newValue);
   };
 
+  useKeydown((event) => {
+    if (
+      event.ctrlKey === true &&
+      event.shiftKey === false &&
+      event.keyCode === 13
+    ) {
+      newRoom("public");
+    }
+    if (
+      event.ctrlKey === false &&
+      event.shiftKey === true &&
+      event.keyCode === 13
+    ) {
+      newRoom("private");
+    }
+  });
+
   if (redirect) return <Navigate push to={redirect} />;
 
   async function newRoom(access) {

src/pages/RoomPage.js

@@ -25,6 +25,7 @@ import Subheading from "../components/Subheading";
 import { UserContext } from "../context";
 import firebase from "../firebase";
 import useFirebaseRef from "../hooks/useFirebaseRef";
+import useKeydown from "../hooks/useKeydown";
 import LoadingPage from "./LoadingPage";
 import NotFoundPage from "./NotFoundPage";
 
@@ -89,6 +90,12 @@ function RoomPage() {
     }
   }, [user.id, game, gameId, leaving]);
 
+  useKeydown((event) => {
+    if (event.ctrlKey === true && event.keyCode === 13) {
+      startGame();
+    }
+  });
+
   if (loadingGame) {
     return <LoadingPage />;
   }
@@ -131,7 +138,6 @@ function RoomPage() {
         setLeaving(false);
       });
   }
-
   return (
     <Container sx={{ pb: 2 }}>
       <Grid container spacing={2}>