Dudo: translate rules to French

lefun-fun · Jul 7, 2024 · 7b7ac3c · 7b7ac3c
1 parent fb4fbf8
commit 7b7ac3c
Show file tree

Hide file tree

Showing 11 changed files with 330 additions and 106 deletions.
diff --git a/game/package.json b/game/package.json
@@ -18,8 +18,8 @@
     "test": "pnpm vitest run src"
   },
   "dependencies": {
-    "@lefun/core": "1.4.0",
-    "@lefun/game": "1.4.0",
+    "@lefun/core": "1.5.0",
+    "@lefun/game": "1.5.0",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/package.json b/ui/package.json
@@ -26,11 +26,11 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
-    "@lefun/core": "^1.4.0",
-    "@lefun/dev-server": "^1.4.0",
-    "@lefun/game": "^1.4.0",
-    "@lefun/ui": "^1.4.0",
-    "@lefun/ui-testing": "^1.4.0",
+    "@lefun/core": "^1.5.0",
+    "@lefun/dev-server": "^1.5.0",
+    "@lefun/game": "^1.5.0",
+    "@lefun/ui": "^1.5.0",
+    "@lefun/ui-testing": "^1.5.0",
     "@lingui/cli": "^4.11.1",
     "@lingui/conf": "^4.11.1",
     "@lingui/macro": "^4.11.1",

diff --git a/ui/src/Board.tsx b/ui/src/Board.tsx
@@ -31,27 +31,13 @@ import {
 } from "dudo-game";
 
 import { Die } from "./Die";
+import { useFonts } from "./hooks";
 import {
   iAmAliveSelector,
   iHaveRolledSelector,
   itsMyTurnSelector,
 } from "./selectors";
 
-const useSetFont = () => {
-  // Add the google font. This is a bit hacky but we have no other way to control the
-  // "outer" HTML.
-  useEffect(() => {
-    const parent = document.getElementsByTagName("head")[0];
-    parent.insertAdjacentHTML(
-      "beforeend",
-      `
-      <link rel="preconnect" href="https://fonts.gstatic.com">
-      <link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap" rel="stylesheet">
-      `,
-    );
-  }, []);
-};
-
 type PlayerColor = {
   text: string;
   bg: string;
@@ -867,7 +853,7 @@ const Header = () => {
 };
 
 const Board = () => {
-  useSetFont();
+  useFonts();
 
   const playerOrder = useSelectorShallow((state) => {
     return state.board.playerOrder;

diff --git a/ui/src/Rules.tsx b/ui/src/Rules.tsx
@@ -1,7 +1,9 @@
+import { Trans } from "@lingui/macro";
 import classNames from "classnames";
 import { ReactNode } from "react";
 
 import { Die as _Die } from "./Die";
+import { useFonts } from "./hooks";
 
 const Die = ({ value }: { value: number }) => {
   return (
@@ -12,7 +14,7 @@ const Die = ({ value }: { value: number }) => {
 };
 
 const Dudo = () => {
-  return <button className="rounded-md py-0 px-1">Dudo</button>;
+  return <button className="rounded-md py-0 px-1 my-auto">Dudo</button>;
 };
 
 const Increase = ({
@@ -61,38 +63,62 @@ const Arrow = ({ className = "" }: { className?: string }) => {
 };
 
 const Rules = () => {
+  useFonts();
+
   return (
-    <div className="h-full w-full flex flex-col">
-      <h1 className="mx-auto">Rules of Dudo</h1>
-      <h2>Overview</h2>
+    <div className="rules w-full flex flex-col">
+      <h1 className="mx-auto">
+        <Trans>Rules of Dudo</Trans>
+      </h1>
+      <h2>
+        <Trans>Overview</Trans>
+      </h2>
       <p>
-        Each player starts with a set number of dice, hidden from the other
-        players.
+        <Trans>
+          Each player starts with a set number of dice, hidden from the other
+          players.
+        </Trans>
       </p>
       <P>
-        The first player makes a bid about how many dice of a certain value are
-        showing <b>among all players</b>, at a minimum. Ones (<Die value={1} />)
-        are wild. For example, a bid of <b>5</b> <Die value={3} /> is a claim
-        that between all players, there are <b>at least</b> <b>5</b>{" "}
-        <Die value={3} /> or <Die value={1} />.
+        <Trans>
+          The first player makes a bid about how many dice of a certain value
+          are showing <b>among all players</b>, at a minimum. Ones (
+          <Die value={1} />) are wild. For example, a bid of <b>5</b>{" "}
+          <Die value={3} /> is a claim that between all players, there are{" "}
+          <b>at least</b> <b>5</b> <Die value={3} /> or <Die value={1} />.
+        </Trans>
       </P>
       <p>
-        The next player must either raise the bid or call <Dudo />.
+        <Trans>
+          The next player must either raise the bid or call <Dudo />.
+        </Trans>
+      </p>
+      <p>
+        <Trans>
+          Calling <Dudo /> ends the round. If the bidder's claim is met, the
+          player who called <Dudo /> loses one die. If not, then the bidder
+          loses one die. The loosing player starts the next round.
+        </Trans>
       </p>
+      <h2>
+        <Trans>Raising the bid</Trans>
+      </h2>
       <p>
-        Calling <Dudo /> ends the round. If the bidder's claim is met, the
-        player who called <Dudo /> loses one die. If not, then the bidder loses
-        one die. The loosing player starts the next round.
+        <Trans>The player raising must</Trans>
       </p>
-      <h2>Raising the bid</h2>
-      <p>The player raising must</p>
-      <ul>
-        <li>Increase the quantity and/or the value of the dice.</li>
-        <li>Not lower the quantity of dice.</li>
+      <ul className="ml-6 list-disc list-outside">
+        <li>
+          <Trans>Increase the quantity and/or the value of the dice.</Trans>
+        </li>
+        <li>
+          <Trans>Not lower the quantity of dice.</Trans>
+        </li>
       </ul>
       <div className="grid grid-cols-2">
         <div className="flex flex-col">
-          <h3 className="m-auto">Valid raises</h3>
+          <h3 className="m-auto">
+            <Trans>Valid raises</Trans>
+          </h3>
           <P>
             <div className="flex">
               <div className="flex flex-col m-auto">
@@ -105,7 +131,9 @@ const Rules = () => {
         </div>
         <div>
           <div className="flex flex-col">
-            <h3 className="m-auto">Invalid raises</h3>
+            <h3 className="m-auto">
+              <Trans>Invalid raises</Trans>
+            </h3>
             <P>
               <div className="flex">
                 <div className="flex flex-col m-auto">
@@ -118,26 +146,38 @@ const Rules = () => {
           </div>
         </div>
       </div>
-      <h2>Bidding wilds</h2>
+      <h2>
+        <Trans>Bidding wilds</Trans>
+      </h2>
       <P>
-        You can also bid the total number of <Die value={1} />. When doing so,
-        you can halve (rounded up) the number of dice of a non-wild bid. You can
-        go back to a non-wild bid by doubling and adding one to the quantity of
-        dice.
+        <Trans>
+          You can also bid the total number of <Die value={1} />. When doing so,
+          you can halve (rounded up) the number of dice of a non-wild bid. You
+          can go back to a non-wild bid by doubling and adding one to the
+          quantity of dice.
+        </Trans>
       </P>
-      <h3>Valid raises</h3>
-      <P>
-        <div className="flex flex-col m-auto">
-          <Increase fromTo={[5, 3, 3, 1]} />
-          <Increase fromTo={[6, 3, 3, 1]} />
-          <Increase fromTo={[3, 1, 7, 2]} />
-          <Increase fromTo={[3, 1, 7, 3]} />
-        </div>
-      </P>
-      <h2>End of the game</h2>
+      <div className="flex flex-col items-center">
+        <h3>
+          <Trans>Valid raises</Trans>
+        </h3>
+        <P>
+          <div className="flex flex-col">
+            <Increase fromTo={[5, 3, 3, 1]} />
+            <Increase fromTo={[6, 3, 3, 1]} />
+            <Increase fromTo={[3, 1, 7, 2]} />
+            <Increase fromTo={[3, 1, 7, 3]} />
+          </div>
+        </P>
+      </div>
+      <h2>
+        <Trans>End of the game</Trans>
+      </h2>
       <p>
-        Once you have lost all your dice, you are eliminated. The last player
-        left wins.
+        <Trans>
+          Once you have lost all your dice, you are eliminated. The last player
+          left wins.
+        </Trans>
       </p>
     </div>
   );