Fixes #291 allow to save and restore board positions

src/components/Board/PanZoomRotate.jsx

@@ -11,6 +11,7 @@ import styled from "styled-components";
 import debounce from "lodash.debounce";
 
 import Gesture from "./Gesture";
+import usePositionNavigator from "./usePositionNavigator";
 
 const TOLERANCE = 100;
 
@@ -31,6 +32,8 @@ const PanZoomRotate = ({ children, moveFirst }) => {
   const setBoardState = useSetRecoilState(BoardStateAtom);
   const prevDim = usePrevious(dim);
 
+  usePositionNavigator();
+
   const [scale, setScale] = React.useState({
     scale: 1,
     x: 0,

src/components/Board/usePositionNavigator.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+
+import { useSetRecoilState, useRecoilCallback } from "recoil";
+import { PanZoomRotateAtom } from "./";
+
+const digitCodes = [...Array(5).keys()].map((id) => `Digit${id}`);
+
+const usePositionNavigator = () => {
+  const { t } = useTranslation();
+  const setDim = useSetRecoilState(PanZoomRotateAtom);
+  const [positions, setPositions] = React.useState({});
+
+  const onKeyUp = useRecoilCallback(
+    ({ snapshot }) => async (e) => {
+      if (digitCodes.includes(e.code)) {
+        const positionKey = e.code;
+        const dim = await snapshot.getPromise(PanZoomRotateAtom);
+        if (e.altKey || e.metaKey || e.ctrlKey) {
+          setPositions((prev) => ({ ...prev, [positionKey]: { ...dim } }));
+          toast.info(t("Position saved!"), {
+            autoClose: 800,
+            hideProgressBar: true,
+          });
+        } else {
+          if (positions[positionKey]) {
+            setDim((prev) => ({ ...prev, ...positions[positionKey] }));
+          }
+        }
+        e.preventDefault();
+      }
+    },
+    [positions, setDim, t]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener("keyup", onKeyUp);
+    return () => {
+      document.removeEventListener("keyup", onKeyUp);
+    };
+  }, [onKeyUp]);
+
+  return null;
+};
+
+export default usePositionNavigator;

src/i18n/en.json

@@ -59,7 +59,7 @@
   "Close": "Close",
   "Board interactions": "Board interactions",
   "Item interactions": "Item interactions",
-  "helpBoard": "<0><0>Move the board with middle mouse button click. Alternatively you can use left button with alt key.</0><1>Zoom with mouse wheel.</1><2>Switch to edit mode with top button to be able to edit the game.</2><3>You can save and reload game by clicking the burger menu.</3></0>",
+  "helpBoard": "<0><0>Move the board with middle mouse button click. Alternatively you can use left button with alt key.</0><1>Zoom with mouse wheel.</1><2>Switch to edit mode with top button to be able to edit the game.</2><3>You can save and reload game by clicking the burger menu.</3><4>Use <5>Ctrl</5> + <5>1</5>…<5>9</5> to save a position and <5>1</5>…<5>9</5> to restore it.</4></0>",
   "helpItem": "<0><0>Double click on any item that can be flipped to flip it.</0><1><0>t</0> key to tap/untap selected items.</1><2><0>f</0> key to flip/unflip selected items.</2><3><0>o</0> key to reveal front side of selected flipped items ONLY to you.</3><4><0>l</0> key to be able to selected previously locked item.</4></0>",
   "Name": "Name",
   "Size": "Size",
@@ -248,5 +248,6 @@
   "Change game": "Change game",
   "Go back": "Back",
   "Add new table": "Add a new table",
-  "Session loading...": "Session loading..."
+  "Session loading...": "Session loading...",
+  "Position saved!": "Position saved!"
 }

src/i18n/fr.json

@@ -58,7 +58,7 @@
   "Close": "Fermer",
   "Board interactions": "Interactions avec le plateau",
   "Item interactions": "Interactions avec les éléments",
-  "helpBoard": "<0><0>Déplacez le plateau en cliquant avec le bouton du milieu de la souris. vous pouvez également utiliser le bouton gauche tout en maintenant la touche Alt de votre clavier.</0><1>Utilisez la molette pour zoomer.</1><2>Basculer en mode édition avec le bouton dédié afin d'éditer les éléments du jeu.</2><3>Vous pouvez enregistrer et charger vos parties en ouvrant le menu.</3></0>",
+  "helpBoard": "<0><0>Déplacez le plateau en cliquant avec le bouton du milieu de la souris. vous pouvez également utiliser le bouton gauche tout en maintenant la touche Alt de votre clavier.</0><1>Utilisez la molette pour zoomer.</1><2>Basculer en mode édition avec le bouton dédié afin d'éditer les éléments du jeu.</2><3>Vous pouvez enregistrer et charger vos parties en ouvrant le menu.</3><4>Utilisez <5>Ctrl</5> + <5>1</5>…<5>9</5> pour enregistrer une position et <5>1</5>…<5>9</5> la restaurer.</4></0>",
   "helpItem": "<0><0>Double cliquez sur un élément pour le retourner.</0><1>La touche <0>t</0> vous permet d'engager les éléments sélectionnés</1><2>La touche <0>f</0> permet de retourner les éléments sélectionnés.</2><3>La touche <0>o</0> permet de révéler les éléments sélectionnés uniquement pour vous.</3><4>La touche <0>l</0> permet de pouvoir cliquer et doc sélectionner un élément préalablement figé.</4></0>",
   "Name": "Nom",
   "Size": "Taille",
@@ -246,5 +246,6 @@
   "Change game": "Changer de jeu",
   "Go back": "Retour",
   "Add new table": "Ajouter une table",
-  "Session loading...": "Chargement de la partie..."
+  "Session loading...": "Chargement de la partie...",
+  "Position saved!": "Position enregistrée !"
 }

src/views/BoardView/InfoModal.jsx

@@ -86,6 +86,11 @@ const InfoModal = ({ show, setShow }) => {
               Switch to edit mode with top button to be able to edit the game.
             </li>
             <li>You can save and reload game by clicking the burger menu.</li>
+            <li>
+              Use <Kbd>Ctrl</Kbd> + <Kbd>1</Kbd>-<Kbd>9</Kbd> to save a position
+              and <Kbd>1</Kbd>-<Kbd>9</Kbd>
+              to restore it.
+            </li>
           </ul>
         </Trans>
       </section>