Allow to rotate the board

package.json

@@ -40,7 +40,7 @@
     "react-icons": "^4.8.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.8.0",
-    "react-sync-board": "^1.1.6",
+    "react-sync-board": "^1.2.0",
     "react-toastify": "^6.1.0",
     "recoil": "^0.7.4",
     "socket.io-client": "^4.1.2",

src/i18n/en.json

@@ -211,10 +211,10 @@
   "You've locked your first element. Long click to select it again.": "You've locked your first element. Long click on it to select it again.",
   "Your games": "Your games",
   "Zone": "Zone",
-  "about": "<0>Air Board Game is a plateform designed to play any board games with your friends online. For more information or to access source code visit <1>Github</1>.</0><1>Legal mentions</1><2>This site is hosted by Netlify (San Francisco, US) and OVH (2, rue Kellermann, 59100 Roubaix)</2><3>Abuse report</3><4>To report abuse, please email at abu<1>anti-span</1>se-report@airboardgame.com</4><5>RGPD</5><6>No personnal data are collected. When you use your email to login, this information is lost and not used for anything else than sending you an authentication link.</6><7>Credits</7><8>Thanks to everybody !</8>",
+  "about": "<0>Air Board Game is a platform designed to play any board games with your friends online. For more information or to access source code visit <1>Github</1>.</0><1>Legal mentions</1><2>This site is hosted by Netlify (San Francisco, US) and OVH (2, rue Kellermann, 59100 Roubaix)</2><3>Abuse report</3><4>To report abuse, please email at abu<1>anti-span</1>se-report@airboardgame.com</4><5>RGPD</5><6>No personnal data are collected. When you use your email to login, this information is lost and not used for anything else than sending you an authentication link.</6><7>Credits</7><8>Thanks to everybody !</8>",
   "baseline": "<0>Play board games online<1></1>with your friends - for free!</0><1>Choose from our selection or create your own.<1></1>No need to sign up. Just start a game and share the link with your friends.</1>",
   "games-available": "{{ nbOfGames }} games available",
-  "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><4>Press <5>space</5> to zoom temporally.</4></0>",
+  "helpBoard": "<0><0>Move the board with the left mouse button. Alternatively you can use right button with alt key.</0><1>Zoom with mouse wheel.</1><2>Switch to edit mode with the bottom button button bar to be able to edit an item.</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><4>Press <5>space</5> to zoom temporally.</4></0>",
   "helpItem": "<0><0>Double click on any item to execute his main action.</0><1>Long click an item to select a locked item</1><2>See other shortcut on action menu</2></0>",
   "items": "One item",
   "items_plural": "{{count}} items",
@@ -355,5 +355,6 @@
   "Die": "Die",
   "Image die": "Image die",
   "Include files": "Include files",
-  "An error occurred. Try again!": "An error occurred. Try again!"
+  "An error occurred. Try again!": "An error occurred. Try again!",
+  "Rotate board": "Rotate board"
 }

src/i18n/fr.json

@@ -211,10 +211,10 @@
   "You've locked your first element. Long click to select it again.": "Vous avez figé votre premier élément. Un long click sur celui-ci permet de le sélectionner de nouveau.",
   "Your games": "Vos jeux",
   "Zone": "Zone",
-  "about": "<0>Air Board Game is a plateform designed to play any board games with your friends online. For more information or to access source code visit <1>Github</1>.</0><1>Legal mentions</1><2>This site is hosted by Netlify (San Francisco, US) and OVH (2, rue Kellermann, 59100 Roubaix)</2><3>Abuse report</3><4>To report abuse, please email at abu<1>anti-span</1>se-report@airboardgame.com</4><5>RGPD</5><6>No personnal data are collected. When you use your email to login, this information is lost and not used for anything else than sending you an authentication link.</6><7>Credits</7><8>Thanks to everybody !</8>",
+  "about": "<0>Airboardgame est une plateforme pour jouer avec vos amis en ligne. For more information or to access source code visit <1>Github</1>.</0><1>Legal mentions</1><2>This site is hosted by Netlify (San Francisco, US) and OVH (2, rue Kellermann, 59100 Roubaix)</2><3>Abuse report</3><4>To report abuse, please email at abu<1>anti-span</1>se-report@airboardgame.com</4><5>RGPD</5><6>No personnal data are collected. When you use your email to login, this information is lost and not used for anything else than sending you an authentication link.</6><7>Credits</7><8>Thanks to everybody !</8>",
   "baseline": "<0>Jouez aux jeux de société en ligne<1></1>avec vos amis - gratuitement !</0><1>Choisissez parmi notre sélection ou ajoutez le votre.<1></1>Pas besoin de compte, démarrez un jeu et partagez le lien avec vos amis.</1>",
   "games-available": "{{ nbOfGames }} jeux disponibles",
-  "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><4>Pressez <5>espace</5> pour zoomer temporairement.</4></0>",
+  "helpBoard": "<0><0>Déplacez le plateau en cliquant avec le bouton de gauche de la souris. vous pouvez également utiliser le bouton de droite 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 dans la barre en bas de l'écran 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><4>Pressez <5>espace</5> pour zoomer temporairement.</4></0>",
   "helpItem": "<0><0>Double cliquez sur un élément pour exécuter son action principale.</0><1>Cliquez longuement sur un élément afin de le déverrouiller</1><2>Découvrez les autres raccourcis dans le menu d'actions.</2></0>",
   "items": "Un élément",
   "items_plural": "{{count}} éléments",
@@ -355,5 +355,6 @@
   "Die": "Dé",
   "Image die": "Dé image",
   "Include files": "Inclure les fichiers",
-  "An error occurred. Try again!": "Une erreur est survenue. Veuillez réessayer !"
+  "An error occurred. Try again!": "Une erreur est survenue. Veuillez réessayer !",
+  "Rotate board": "Tourner le plateau"
 }

src/views/BoardView/NavBar.jsx

@@ -13,9 +13,12 @@ import {
   FiMousePointer,
   FiHome,
   FiMaximize,
+  FiRotateCw,
 } from "react-icons/fi";
 import { GiPokerHand } from "react-icons/gi";
 
+import { useBoardPosition } from "react-sync-board";
+
 import BoardForm from "./BoardForm";
 import SessionForm from "./SessionForm";
 import NavButton from "../../ui/NavButton";
@@ -46,6 +49,8 @@ const NavBar = ({ editMode, itemLibraries, moveFirst, setMoveFirst }) => {
   const { t } = useTranslation();
   const { isVassalSession } = useSession();
 
+  const { rotateBoard } = useBoardPosition();
+
   const { toggleFullScreen, active: isFullScreen } = useFullScreen();
 
   const { isSpaceMaster: isMaster } = useUsers();
@@ -173,6 +178,12 @@ const NavBar = ({ editMode, itemLibraries, moveFirst, setMoveFirst }) => {
             Icon={moveFirst ? FiMove : FiMousePointer}
           />
         </div>
+        <NavButton
+          Icon={FiRotateCw}
+          onClick={() => rotateBoard((prev) => prev + 90)}
+          alt={t("Rotate board")}
+          title={t("Rotate board")}
+        />
         <NavButton
           Icon={FiMaximize}
           onClick={toggleFullScreen}