New design

src/components/Board/PanZoomRotate.js

@@ -158,23 +158,6 @@ const PanZoomRotate = ({ children, moveFirst }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dim, updateBoardStatePanningDelay, updateBoardStateZoomingDelay]);
 
-  React.useEffect(() => {
-    // Chrome-related issue.
-    // Making the wheel event non-passive, which allows to use preventDefault() to prevent
-    // the browser original zoom  and therefore allowing our custom one.
-    // More detail at https://github.com/facebook/react/issues/14856
-    const cancelWheel = (event) => {
-      //if (insideClass(event.target, "board"))
-      event.preventDefault();
-    };
-
-    document.body.addEventListener("wheel", cancelWheel, { passive: false });
-
-    return () => {
-      document.body.removeEventListener("wheel", cancelWheel);
-    };
-  }, []);
-
   const onZoom = ({ clientX, clientY, scale }) => {
     setScale((prevScale) => {
       let newScale = prevScale.scale * (1 - scale / 200);

src/components/BoardConfig.js

@@ -197,6 +197,16 @@ const BoardConfig = () => {
             </Label>
 
             <Label>
+              {t("Baseline")}
+              <Field
+                name="defaultBaseline"
+                component="input"
+                initialValue={boardConfig.defaultBaseline}
+                style={{ width: "100%" }}
+              />
+            </Label>
+
+            <Label>
               {t("Description")}
               <Field
                 name="defaultDescription"
@@ -254,6 +264,16 @@ const BoardConfig = () => {
                   </Label>
 
                   <Label>
+                    {t("Baseline")}
+                    <Field
+                      name={`translations[${index}].baseline`}
+                      component="input"
+                      initialValue={boardConfig.translations[index].baseline}
+                      style={{ width: "100%" }}
+                    />
+                  </Label>
+
+                  <Label>
                     {t("Description")}
                     <Field
                       name={`translations[${index}].description`}

src/games/perfGame.js

@@ -1,11 +1,4 @@
 import { nanoid } from "nanoid";
-const infoText = `# Test game
-
-This is a test game.
-
-With a [link](https://github.com/jrmi/airboardgame/).
-
-`;
 
 const genGame = () => {
   const items = [...Array(2000)].map((e, index) => ({
@@ -29,9 +22,26 @@ const genGame = () => {
       },
     ],
     board: {
-      size: 3000,
-      scale: 1,
-      info: infoText,
+      size: 4000,
+      scale: 0.5,
+      name: "Perf Game",
+      published: true,
+      translations: [
+        {
+          language: "fr",
+          name: "1 Jeu test de performances et des extrèmes",
+          description: "Un jeu pour tester",
+        },
+      ],
+      playerCount: [1, 9],
+      defaultName: "1 Performance game to test strange things and other",
+      defaultLanguage: "en",
+      defaultDescription: "A classic",
+      materialLanguage: "Multi-lang",
+      minAge: "10",
+      duration: [30, 90],
+      imageUrl: "/games/testgame.png",
+      gridSize: 1,
     },
   };
 };

src/games/testGame.js

@@ -1,11 +1,3 @@
-const infoText = `# Test game
-
-This is a test game.
-
-With a [link](https://github.com/jrmi/airboardgame/).
-
-`;
-
 const genGame = () => {
   const items = [];
 
@@ -167,9 +159,25 @@ const genGame = () => {
     ],
     board: {
       size: 1000,
-      scale: 1,
-      info: infoText,
-      name: "Test game",
+      scale: 0.5,
+      name: "Test Game",
+      published: true,
+      translations: [
+        {
+          language: "fr",
+          name: "0 Jeu test",
+          description: "Un jeu pour tester",
+        },
+      ],
+      playerCount: [2, 4],
+      defaultName: "0 Test game",
+      defaultLanguage: "en",
+      defaultDescription: "A classic",
+      materialLanguage: "Multi-lang",
+      minAge: "10",
+      duration: [30, 90],
+      imageUrl: "/games/testgame.png",
+      gridSize: 1,
     },
   };
 };

src/utils/api.js

@@ -86,6 +86,7 @@ export const getGames = async () => {
         data: testGame,
         id: "test",
         published: true,
+        ...testGame.board,
       },
       {
         ...perfGame,
@@ -93,6 +94,7 @@ export const getGames = async () => {
         data: perfGame,
         id: "perf",
         published: true,
+        ...perfGame.board,
       },
       ...gameList,
     ];

src/views/BoardView.js

@@ -15,6 +15,8 @@ import { getComponent } from "../components/boardComponents";
 import { useGame } from "../hooks/useGame";
 import AddItemButton from "../components/AddItemButton";
 
+import { insideClass } from "../utils";
+
 const StyledBoardView = styled.div`
   width: 100vw;
   height: 100vh;
@@ -50,6 +52,22 @@ export const BoardView = ({ namespace, edit: editMode = false }) => {
   const [moveFirst, setMoveFirst] = React.useState(false);
   const { gameLoaded } = useGame();
 
+  React.useEffect(() => {
+    // Chrome-related issue.
+    // Making the wheel event non-passive, which allows to use preventDefault() to prevent
+    // the browser original zoom  and therefore allowing our custom one.
+    // More detail at https://github.com/facebook/react/issues/14856
+    const cancelWheel = (event) => {
+      if (!insideClass(event.target, "modal-content")) event.preventDefault();
+    };
+
+    document.body.addEventListener("wheel", cancelWheel, { passive: false });
+
+    return () => {
+      document.body.removeEventListener("wheel", cancelWheel);
+    };
+  }, []);
+
   return (
     <StyledBoardView>
       <NavBar editMode={editMode} />

src/views/GameListItem.js

@@ -6,22 +6,13 @@ import { getBestTranslationFromConfig } from "../utils/api";
 
 const Game = styled.li`
   position: relative;
-  //min-width: 240px;
-  //max-width: 22%;
-  //height: 150px;
   padding: 0em;
-  //margin: 0.3em;
   margin: 0px;
   margin-bottom: 3em;
   flex: 1;
-  //box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-
-  //border: 1px dashed blue;
 
   & .game-name {
     max-width: 80%;
-    /*text-overflow: ellipsis;
-    white-space: nowrap;*/
     line-height: 1.2em;
     overflow: hidden;
     margin-bottom: 3px;
@@ -59,19 +50,18 @@ const Game = styled.li`
   }
 
   & .img {
-    //max-width: 25vw;
     width: 100%;
     min-width: 300px;
     max-width: 600px;
-    //padding-top: 60%;
     background-color: #333;
+    border-radius: 5px;
   }
 
   & .details {
     display: flex;
     flex-direction: row;
     color: var(--font-color2);
-    font-size: 12px;
+    font-size: 14px;
     padding-top: 1em;
   }
   & .details > span {
@@ -89,8 +79,6 @@ const Game = styled.li`
   }
 `;
 
-const backgroundImage = false;
-
 const GameListItem = ({
   game: {
     published,
@@ -112,8 +100,8 @@ const GameListItem = ({
     [game, i18n.languages]
   );
 
-  let playerCountDisplay;
-  if (playerCount) {
+  let playerCountDisplay = undefined;
+  if (playerCount && playerCount.length) {
     const [min, max] = playerCount;
     if (min === max) {
       if (max === 9) {
@@ -130,8 +118,8 @@ const GameListItem = ({
     }
   }
 
-  let durationDisplay;
-  if (duration) {
+  let durationDisplay = undefined;
+  if (duration && duration.length) {
     const [min, max] = duration;
     if (min === max) {
       if (max === 90) {
@@ -150,13 +138,15 @@ const GameListItem = ({
 
   let materialLanguageDisplay = t(materialLanguage);
 
+  console.log(playerCountDisplay, playerCount);
+
   return (
-    <Game back={backgroundImage ? imageUrl : null}>
+    <Game>
       <Link to={`/game/${id}/session/`}>
         {imageUrl ? (
           <img className="img" src={imageUrl} />
         ) : (
-          <img className="img" src="/default.png" />
+          <img className="img" src="/default-game.png" />
         )}
       </Link>
       {!published && (
@@ -167,7 +157,7 @@ const GameListItem = ({
         />
       )}
       <div className="details">
-        {playerCount && (
+        {playerCountDisplay && (
           <span>
             {playerCountDisplay.length === 2 &&
               t("{{min}} - {{max}} players", {
@@ -180,8 +170,9 @@ const GameListItem = ({
               })}
           </span>
         )}
-        {duration && <span>{durationDisplay} mins</span>}
-        {minAge !== undefined && <span>age {minAge}+</span>}
+        {durationDisplay && <span>{durationDisplay} mins</span>}
+        {minAge && <span>age {minAge}+</span>}
+        {materialLanguageDisplay && <span>{materialLanguageDisplay}</span>}
       </div>
 
       <h2 className="game-name">{translation.name}</h2>
@@ -200,10 +191,4 @@ const GameListItem = ({
   );
 };
 
-/*
-      <Link to={`/game/${id}/session/`} className="button play">
-        {t("Play")}
-      </Link>;
-*/
-
 export default GameListItem;

src/views/GameListView.js

@@ -9,8 +9,6 @@ import Account from "../components/Account";
 import useAuth from "../hooks/useAuth";
 
 import "react-confirm-alert/src/react-confirm-alert.css";
-import logo from "../images/logo-mono.png";
-import header from "../images/header.jpg";
 import useLocalStorage from "../hooks/useLocalStorage";
 import GameListItem from "./GameListItem";
 
@@ -32,10 +30,9 @@ const GameView = styled.div`
 const Brand = styled.div`
   position: relative;
   display: inline-block;
-  margin-bottom: 12vh;
   & h1 {
     font-weight: 700;
-    font-size: 32px;
+    font-size: 24px;
     & a {
       color: var(--font-color);
     }
@@ -43,9 +40,10 @@ const Brand = styled.div`
   & .beta {
     position: absolute;
     top: 5px;
-    right: -40px;
+    left: 175px;
     text-transform: uppercase;
     font-weight: 300;
+    font-size: 0.9em;
   }
 
   @media screen and (max-width: 640px) {
@@ -56,32 +54,58 @@ const Brand = styled.div`
   }
 `;
 
-const Header = styled.div`
-  padding-top: 1em;
-  margin-bottom: 12vh;
+const Nav = styled.nav`
   background-color: var(--bg-color);
   position: relative;
   padding: 0 5%;
+  display: flex;
+  align-items: center;
+
+  & .brand {
+    flex: 1;
+  }
+
+  & button,
+  & .button {
+    background: none;
+    text-transform: uppercase;
+    font-weight: 300;
+    font-size: 1.3em;
+    border-radius: 0;
+    color: var(--font-color2);
+  }
+
+  & button:hover,
+  & .button:hover {
+    color: var(--font-color);
+    border-bottom: 1px solid var(--color-primary);
+  }
+`;
+
+const Header = styled.header`
+  background-color: var(--bg-color);
+  position: relative;
+  background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 0.6) 40%,
+      rgba(0, 0, 0, 0.6) 60%,
+      rgba(0, 0, 0, 1) 100%
+    ),
+    100% 50% / contain no-repeat url(/hero.png);
+  padding: 14vh 5%;
+  margin-bottom: 20px;
+
   & .baseline {
     font-weigth: 800;
-    font-size: 3.5vw;
+    font-size: 3.2vw;
     line-height: 1.2em;
   }
   & .subbaseline {
     color: var(--font-color2);
-    font-size: 1.5vw;
-  }
-  & .login {
-    position: absolute;
-    right: 0;
-  }
-  & .login button {
-  }
-  & .new-game {
-    position: absolute;
-    top: 2em;
-    right: 0;
+    font-size: 1.4vw;
   }
+
   @media screen and (max-width: 640px) {
     & {
     }
@@ -100,6 +124,7 @@ const Filter = styled.div`
     text-align: center;
     font-size: 3.5vw;
     padding: 0.5em;
+    margin: 0;
   }
 `;
 
@@ -176,19 +201,21 @@ const GameListView = () => {
   return (
     <>
       <GameView>
-        <Header>
-          {isAuthenticated && (
-            <Link to={`/game/`} className="button new-game">
-              {t("Create new game")}
-            </Link>
-          )}
-          <Account className="login" disabled={!cookieConsent} />
+        <Nav>
           <Brand className="brand">
             <h1>
               <a href="/">Air Board Game</a>
             </h1>
             <span className="beta">Beta</span>
           </Brand>
+          {isAuthenticated && (
+            <Link to={`/game/`} className="button new-game">
+              {t("Create new game")}
+            </Link>
+          )}
+          <Account className="login" disabled={!cookieConsent} />
+        </Nav>
+        <Header>
           <Trans i18nKey="baseline">
             <h2 className="baseline">
               Play board games online