From 82e0600241c22797d9731a524a1fb5bb60e8fa56 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com>
Date: Sat, 13 Mar 2021 23:13:32 +0100
Subject: [PATCH] Enhance welcome modal

---
 cypress/integration/board.spec.js   |  3 +-
 src/components/LoadLastGameLink.jsx | 38 -------------
 src/i18n/en.json                    | 11 ++--
 src/i18n/fr.json                    | 12 ++---
 src/index.css                       |  2 +-
 src/views/BoardView.jsx             |  1 +
 src/views/HelpModal.jsx             | 82 -----------------------------
 src/views/InfoModal.jsx             | 16 ++++++
 src/views/LoadSessionModal.jsx      | 14 +++--
 src/views/WelcomeModal.jsx          | 82 +++++++++++------------------
 10 files changed, 65 insertions(+), 196 deletions(-)
 delete mode 100644 src/components/LoadLastGameLink.jsx
 delete mode 100644 src/views/HelpModal.jsx

diff --git a/cypress/integration/board.spec.js b/cypress/integration/board.spec.js
index d83f049..877c7c2 100644
--- a/cypress/integration/board.spec.js
+++ b/cypress/integration/board.spec.js
@@ -19,8 +19,7 @@ describe("Board interactions", () => {
   it("Load game page", () => {
     cy.contains("0 Test game");
     cy.get("[alt=Save]");
-    cy.get("[alt=Help]");
-    cy.get("[alt=Information]");
+    cy.get("[alt='Help & info']");
     cy.get("[title='Add an item']");
   });
 
diff --git a/src/components/LoadLastGameLink.jsx b/src/components/LoadLastGameLink.jsx
deleted file mode 100644
index a4015d0..0000000
--- a/src/components/LoadLastGameLink.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-import { useC2C } from "../hooks/useC2C";
-import { nanoid } from "nanoid";
-
-import useGameStorage from "./Board/game/useGameStorage";
-
-export const LoadLastGameLink = () => {
-  const { t } = useTranslation();
-  const [c2c] = useC2C();
-
-  const [gameLocalSave] = useGameStorage();
-
-  const loadGame = React.useCallback(
-    (game) => {
-      game.items = game.items.map((item) => ({ ...item, id: nanoid() }));
-      c2c.publish("loadGame", game, true);
-    },
-    [c2c]
-  );
-
-  const loadLocalSavedGame = React.useCallback(() => {
-    loadGame({ ...gameLocalSave });
-  }, [loadGame, gameLocalSave]);
-
-  return (
-    <button
-      className="bm-item button"
-      style={{ display: "block", width: "100%" }}
-      onClick={loadLocalSavedGame}
-    >
-      {t("Load last game")}
-    </button>
-  );
-};
-
-export default LoadLastGameLink;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d23f23e..10a332c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,8 +1,7 @@
 {
   "Please select or load a game": "Please select or load a game…",
   "Games": "Games",
-  "Save/Load": "Save/Load",
-  "Save game": "Save game",
+  "Save game": "Save",
   "Box Content": "Box Content",
   "Load last game": "Load last game",
   "Dragn drop file here": "Drop file here to load it",
@@ -72,8 +71,6 @@
   "What is it?": "What is it?",
   "Invite your friends": "Invite your friends",
   "More information": "More information",
-  "welcomeText": "<0>Airboardgame is a tabletop simulator to play your favorite board games with your friends online.</0>",
-  "InviteFriends": "<0>To invite other players to play with you, share the following link with your friends.</0>",
   "moreInformation": "<0>For more information, visit <2>github repository</2>.</0>",
   "I want to play...": "I want to play...",
   "Zone": "Zone",
@@ -103,8 +100,6 @@
   "Create new game": "New game",
   "Play your favorite games online with your friends": "Play your favorite games online with your friends",
   "Game loading...": "Game loading...",
-  "Go to home": "Home",
-  "Configure game": "Configure game",
   "Ready to play ?": "Ready to play ?",
   "Add all": "Add all",
   "Enter your email here": "Enter your email here",
@@ -218,5 +213,7 @@
   "You can also save it to your computer.": "You can also save it to your computer.",
   "Export": "Export",
   "You game will be saved and you can access it later in the studio!": "You game will be saved and you can access it later in the studio!",
-  "If you have checked the publish checkbox your game will be public.": "If you have checked the publish checkbox your game will be public."
+  "If you have checked the publish checkbox your game will be public.": "If you have checked the publish checkbox your game will be public.",
+  "Share this link with your friends": "Share this link with your friends",
+  "welcomeTip": "<0>Tip: Use an audio conferencing system to talk with other players, like <1>Jitsi</1> (free & open-source).</0>"
 }
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 3ba872a..d4cd0ff 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -1,10 +1,8 @@
 {
   "Please select or load a game": "Veuillez choisir un jeu…",
   "Games": "Jeux",
-  "Save/Load": "Sauvegardes",
   "Save game": "Sauvegarder",
   "Box Content": "Boite",
-  "Load last game": "Dernière partie",
   "Dragn drop file here": "Cliquez ou déposez un fichier ici pour charger une sauvegarde",
   "Confirmation": "Confirmation",
   "Do you really want to remove selected items ?": "Souhaitez-vous supprimer la sélection ?",
@@ -72,8 +70,6 @@
   "What is it?": "Qu'est-ce que c'est ?",
   "Invite your friends": "Invitez vos amis",
   "More information": "Plus d'informations",
-  "welcomeText": "<0>Airboardgame est un simulateur de table de jeu qui vous permet de jouer en ligne avec vos amis à vos jeux de société préférés.</0>",
-  "InviteFriends": "<0>Pour inviter d'autres joueurs, partagez le lien suivant avec vos amis.</0>",
   "moreInformation": "<0>Pour plus d'informations, visitez le <2>dépôt github</2>.</0>",
   "I want to play...": "Je veux jouer...",
   "Zone": "Zone",
@@ -94,7 +90,7 @@
   "Standard": "Standard",
   "Other": "Autre",
   "Export game": "Exporter le jeu",
-  "Uploading image(s)...": "Envoi des image(s) en cours…",
+  "Uploading image(s)...": "Envoi des images en cours…",
   "Items": "Élements",
   "Edit": "Éditer",
   "No image": "Pas d'image",
@@ -102,8 +98,6 @@
   "Click or drag'n'drop file here": "Cliquez ou déposez des fichiers dans cette zone",
   "Create new game": "Nouveau jeu",
   "Game loading...": "Chargement…",
-  "Go to home": "Accueil",
-  "Configure game": "Configurer le jeu",
   "Ready to play ?": "Prêt à jouer ?",
   "Add all": "Ajouter tout",
   "Enter your email here": "Saisissez votre email…",
@@ -217,5 +211,7 @@
   "You can also save it to your computer.": "Vous pouvez également le sauvegarder sur votre ordinateur.",
   "Export": "Exporter",
   "You game will be saved and you can access it later in the studio!": "Votre jeu sera sauvegardé et vous pourrez de nouveau y accéder via le studio de création.",
-  "If you have checked the publish checkbox your game will be public.": "Si vous avait coché l'option « Publier », votre jeu sera visibile publiquement." 
+  "If you have checked the publish checkbox your game will be public.": "Si vous avait coché l'option « Publier », votre jeu sera visibile publiquement.",
+  "Share this link with your friends": "Partagez ce lien avec vos amis",
+  "welcomeTip": "<0>Astuce: Utilisez un système de conférence audio pour parler avec vos amis, comme <1>Jitsi</1> (libre & gratuit).</0>"
 }
diff --git a/src/index.css b/src/index.css
index 7fb1591..09fb9eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -35,7 +35,7 @@ body {
 button {
   padding: 1rem 2.5rem;
   color: var(--font-color);
-  background: var(--color-lightGrey);
+  background: var(--color-midGrey);
   border-radius: 0;
 }
 
diff --git a/src/views/BoardView.jsx b/src/views/BoardView.jsx
index c7bb069..9aa2665 100644
--- a/src/views/BoardView.jsx
+++ b/src/views/BoardView.jsx
@@ -65,6 +65,7 @@ const ActionBar = styled.div`
 export const BoardView = ({ namespace, edit: editMode = false, session }) => {
   const { t } = useTranslation();
   const { currentUser, users } = useUsers();
+
   const [showWelcomeModal, setShowWelcomeModal] = React.useState(
     SHOW_WELCOME && !editMode
   );
diff --git a/src/views/HelpModal.jsx b/src/views/HelpModal.jsx
deleted file mode 100644
index 72b2650..0000000
--- a/src/views/HelpModal.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Trans } from "react-i18next";
-
-import styled from "styled-components";
-
-import Modal from "../ui/Modal";
-
-const Kbd = styled.kbd`
-  background-color: #eee;
-  border-radius: 3px;
-  border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
-    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
-  color: #333;
-  display: inline-block;
-  font-family: consolas, "Liberation Mono", courier, monospace;
-  font-size: 0.85em;
-  font-weight: 700;
-  line-height: 1;
-  padding: 2px 4px;
-  white-space: nowrap;
-`;
-
-const HelpModal = ({ show, setShow }) => {
-  const { t } = useTranslation();
-  return (
-    <Modal
-      title={t("Help")}
-      setShow={setShow}
-      show={show}
-      footer={
-        <div style={{ display: "flex", justifyContent: "end" }}>
-          <button
-            onClick={() => {
-              setShow(false);
-            }}
-            className="button"
-          >
-            {t("Close")}
-          </button>
-        </div>
-      }
-    >
-      <h3>{t("Board interactions")}</h3>
-      <Trans i18nKey="helpBoard">
-        <ul>
-          <li>
-            Move the board with middle mouse button click. Alternatively you can
-            use left button with alt key.
-          </li>
-          <li>Zoom with mouse wheel.</li>
-          <li>
-            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>
-        </ul>
-      </Trans>
-      <h3>{t("Item interactions")}</h3>
-      <Trans i18nKey="helpItem">
-        <ul>
-          <li>Double click on any item that can be flipped to flip it.</li>
-          <li>
-            <Kbd>t</Kbd> key to tap/untap selected items.
-          </li>
-          <li>
-            <Kbd>f</Kbd> key to flip/unflip selected items.
-          </li>
-          <li>
-            <Kbd>o</Kbd> key to reveal front side of selected flipped items ONLY
-            to you.
-          </li>
-          <li>
-            <Kbd>l</Kbd> key to be able to selected previously locked item.
-          </li>
-        </ul>
-      </Trans>
-    </Modal>
-  );
-};
-
-export default HelpModal;
diff --git a/src/views/InfoModal.jsx b/src/views/InfoModal.jsx
index c1f4358..47c5d19 100644
--- a/src/views/InfoModal.jsx
+++ b/src/views/InfoModal.jsx
@@ -94,6 +94,22 @@ const InfoModal = ({ show, setShow }) => {
             </ul>
           </Trans>
         </section>
+
+        <header>
+          <h3>{t("More information")}</h3>
+        </header>
+
+        <section>
+          <Trans i18nKey="moreInformation">
+            <p>
+              For more information, visit{" "}
+              <a href="https://github.com/jrmi/airboardgame/">
+                github repository
+              </a>
+              .
+            </p>
+          </Trans>
+        </section>
       </>
     </Modal>
   );
diff --git a/src/views/LoadSessionModal.jsx b/src/views/LoadSessionModal.jsx
index d975374..0ff1073 100644
--- a/src/views/LoadSessionModal.jsx
+++ b/src/views/LoadSessionModal.jsx
@@ -23,14 +23,12 @@ const LoadSessionModal = ({ show, setShow }) => {
 
   return (
     <Modal title={t("Load session")} setShow={setShow} show={show}>
-      <>
-        <header>
-          <h3>{t("Continue a saved game session?")}</h3>
-        </header>
-        <section>
-          <LoadGame onLoad={loadGame} />
-        </section>
-      </>
+      <header>
+        <h3>{t("Continue a saved game session?")}</h3>
+      </header>
+      <section>
+        <LoadGame onLoad={loadGame} />
+      </section>
     </Modal>
   );
 };
diff --git a/src/views/WelcomeModal.jsx b/src/views/WelcomeModal.jsx
index 504a92f..51c33f0 100644
--- a/src/views/WelcomeModal.jsx
+++ b/src/views/WelcomeModal.jsx
@@ -10,25 +10,24 @@ import Modal from "../ui/Modal";
 
 import { useC2C } from "../hooks/useC2C";
 
-const WelcomeContent = styled.div`
-  & .url {
-    background-color: var(--bg-color);
-    padding: 0.5em;
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+const StyledUrl = styled.div`
+  background-color: var(--color-midGrey);
+  padding: 0.5em;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2em;
 
-    & span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  & span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-    & img {
-      margin-left: 1em;
-      cursor: pointer;
-    }
+  & img {
+    margin-left: 1em;
+    cursor: pointer;
   }
 `;
 
@@ -65,16 +64,11 @@ const WelcomeModal = ({ show, setShow }) => {
         </button>
       }
     >
-      <WelcomeContent>
-        <h3>{t("Invite your friends")}</h3>
-        <Trans i18nKey="InviteFriends">
-          <p>
-            To invite other players to play with you, share the following link
-            with your friends.
-          </p>
-        </Trans>
-
-        <div className="url">
+      <header>
+        <h3>{t("Share this link with your friends")}</h3>
+      </header>
+      <section>
+        <StyledUrl>
           <span>{currentUrl}</span>
           <img
             className="copy"
@@ -82,33 +76,21 @@ const WelcomeModal = ({ show, setShow }) => {
             alt={t("Copy")}
             onClick={handleCopy}
           />
-        </div>
+        </StyledUrl>
 
-        <h3>{t("Talk with your friends")}</h3>
-        <Trans i18nKey="useAudioConf">
+        <Trans i18nKey="welcomeTip">
           <p>
-            We recommend you to use any audio conferencing system to talk with
-            your friends. For example you can use <a href={meetUrl}>Jitsi</a>.
+            Tip: Use an audio conferencing system to talk with other players,
+            like <a href={meetUrl}>Jitsi</a> (free & open-source).
           </p>
         </Trans>
-
-        <h3>{t("More information")}</h3>
-        <Trans i18nKey="moreInformation">
-          <p>
-            For more information, visit{" "}
-            <a href="https://github.com/jrmi/airboardgame/">
-              github repository
-            </a>
-            .
-          </p>
-        </Trans>
-        <input
-          value={currentUrl}
-          readOnly
-          ref={inputRef}
-          style={{ display: "none" }}
-        />
-      </WelcomeContent>
+      </section>
+      <input
+        value={currentUrl}
+        readOnly
+        ref={inputRef}
+        style={{ display: "none" }}
+      />
     </Modal>
   );
 };