Tests works

cypress/integration/selection.spec.js

@@ -48,7 +48,7 @@ describe("Selection action", () => {
     cy.get(".selector").should(
       "have.css",
       "transform",
-      "matrix(1, 0, 0, 1, 291.667, 312.5)"
+      "matrix(1, 0, 0, 1, 291.667, 187.5)"
     );
 
     cy.get(".board").trigger("pointermove", {

cypress/integration/session.spec.js

@@ -33,6 +33,8 @@ describe("Session management", () => {
       .parent()
       .should("have.css", "transform", "matrix(1, 0, 0, 1, 420, 400)");
 
+    cy.wait(300);
+
     // Select card
     cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
@@ -50,7 +52,7 @@ describe("Session management", () => {
       }
     ).as("postSession");
 
-    cy.wait(1000);
+    cy.wait(300);
 
     cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")

package.json

@@ -56,8 +56,8 @@
     "prettier": "prettier --write src/",
     "server": "echo 'This command is deprecated. Please, see Readme for more information.'",
     "i18n:scanner": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.{js,jsx}'",
-    "cypress:open": "LANGUAGE=en cypress open",
-    "cypress:run": "LANGUAGE=en cypress run"
+    "cypress:open": "VITE_CI=1 LANGUAGE=en cypress open",
+    "cypress:run": "VITE_CI=1 LANGUAGE=en cypress run"
   },
   "browserslist": {
     "production": [

src/components/mediaLibrary/ImageDropNPaste.jsx

@@ -72,13 +72,9 @@ const ImageDropNPaste = ({ children }) => {
   return (
     <div
       {...getRootProps()}
-      sstyle={{
-        position: "absolute",
-        top: "0",
-        left: "0",
-        right: "0",
-        bottom: "0",
-        pointerEvents: "none",
+      style={{
+        position: "fixed",
+        inset: 0,
       }}
     >
       {children}

src/views/GameView.jsx

@@ -45,8 +45,15 @@ const adaptAvailableItems = (nodes) => {
   });
 };
 
-export const GameView = () => {
-  const { setGame, gameLoaded, gameId, availableItems } = useGame();
+const newGameData = {
+  items: [],
+  availableItems: [],
+  board: { size: 2000, scale: 1 },
+};
+
+export const GameView = ({ create = false }) => {
+  const [gameLoaded, setGameLoaded] = React.useState(false);
+  const { setGame, gameId, availableItems } = useGame();
 
   const gameLoadingRef = React.useRef(false);
 
@@ -56,10 +63,24 @@ export const GameView = () => {
     async (isMounted) => {
       if (!gameLoaded && !gameLoadingRef.current) {
         gameLoadingRef.current = true;
-        const gameData = await getGame(gameId);
+        try {
+          let gameData;
 
-        if (!isMounted) return;
-        setGame(gameData);
+          if (create) {
+            // Create new game
+            newGameData.board.defaultName = t("New game");
+            gameData = JSON.parse(JSON.stringify(newGameData));
+          } else {
+            // Load game from server
+            gameData = await getGame(gameId);
+          }
+          if (!isMounted) return;
+
+          setGame(gameData);
+          setGameLoaded(true);
+        } catch (e) {
+          console.log(e);
+        }
       }
     },
     [gameLoaded]
@@ -106,6 +127,8 @@ export const GameView = () => {
 const ConnectedGameView = ({ gameId }) => {
   const [sessionId] = React.useState(nanoid());
 
+  const [realGameId] = React.useState(() => gameId || nanoid());
+
   return (
     <BoardWrapper
       room={`room_${sessionId}`}
@@ -113,14 +136,13 @@ const ConnectedGameView = ({ gameId }) => {
       itemTemplates={itemTemplates}
       actions={actionMap}
       style={{
-        position: "relative",
-        width: "100vw",
-        height: "100vh",
+        position: "fixed",
+        inset: 0,
         overflow: "hidden",
       }}
     >
-      <GameProvider gameId={gameId}>
-        <GameView />
+      <GameProvider gameId={realGameId} create={!gameId}>
+        <GameView create={!gameId} />
       </GameProvider>
     </BoardWrapper>
   );

src/views/Session.jsx

@@ -161,9 +161,10 @@ const ConnectedSessionView = ({ sessionId, fromGame }) => {
       itemTemplates={itemTemplates}
       actions={actionMap}
       style={{
-        position: "relative",
-        width: "100vw",
-        height: "100vh",
+        position: "fixed",
+        inset: "0",
+        //width: "100vw",
+        //height: "100vh",
         overflow: "hidden",
       }}
     >