cek/airboardgame
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Enhance welcome modal

Browse source
This commit is contained in:
Jeremie Pardou-Piquemal 2021-03-13 23:13:32 +01:00 committed by Jérémie Pardou-Piquemal
parent 601b98d38d
commit 82e0600241
10 changed files with 65 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
cypress/integration/board.spec.js
View file

@ -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']");
});

38
src/components/LoadLastGameLink.jsx
View file

@ -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;

11
src/i18n/en.json
View file

@ -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>"
}

12
src/i18n/fr.json
View file

@ -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>"
}

2
src/index.css
View file

@ -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;
}

1
src/views/BoardView.jsx
View file

@ -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
);

82
src/views/HelpModal.jsx
View file

@ -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;

16
src/views/InfoModal.jsx
View file

@ -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>
);

14
src/views/LoadSessionModal.jsx
View file

@ -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>
);
};

82
src/views/WelcomeModal.jsx
View file

@ -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>
);
};