Merge branch 'develop'

Author: Perlkonig

public/locales/en/apfront.json

@@ -6,6 +6,7 @@
     "AcceptDraw": "Accept draw offer",
     "Accepted": "Accepted!",
     "All": "All",
+    "AlternativeDisplays": "Alternative display options",
     "and": "and",
     "Annotate": "Show last move indicators",
     "AnnotationLevel": "Where would you like this choice applied?",
@@ -887,4 +888,4 @@
     "YourGames": "Your games",
     "YourMove": "Your move",
     "EnableZoom": "Enable zoom"
-}
+}

src/components/GameDisplays.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import { gameinfo, GameFactory, addResource } from "@abstractplay/gameslib";
+import { useTranslation } from "react-i18next";
+
+/**
+ * This component parses a metaGame's displays definition and displays them.
+ * Selection is done in RenderOptionsModal.js.
+ * Give it the metaGame.
+ */
+function GameDisplays({ metaGame }) {
+  const [displays, displaysSetter] = useState([]);
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    addResource(i18n.language);
+  }, [i18n.language]);
+
+  // This does the initial parse of the data
+  useEffect(() => {
+    if (metaGame !== undefined && metaGame !== null && metaGame !== "") {
+      // load game info
+      // need an engine if we want to translate the strings
+      const info = gameinfo.get(metaGame);
+      if (info !== undefined) {
+        let gameEngine;
+        if (info.playercounts.length > 1) {
+          gameEngine = GameFactory(info.uid, 2);
+        } else {
+          gameEngine = GameFactory(info.uid);
+        }
+
+        // Don't need to filter out `experimental` displays unless that gets implemented.
+        let displays = gameEngine.alternativeDisplays();
+
+        // Don't need to deal with grouping.
+        if (displays && displays !== undefined) {
+          displaysSetter(displays);
+        } else {
+          displaysSetter([]);
+        }
+      } else {
+        displaysSetter([]);
+      }
+    }  else {
+      displaysSetter([]);
+    }
+  }, [metaGame]);
+
+  if ( displays.length === 0 ) {
+    return null;
+  } else {
+    return (
+      <>
+        <div className="field">
+          <label className="label">
+            {t("AlternativeDisplays")}
+          </label>
+        </div>
+        <div className="indentedContainer">
+          {displays.map((v) => (
+           <div className="control" key={v.uid}>
+              <label className="radio">
+                <input
+                  type="radio"
+                  id={v.uid}
+                  value={v.uid}
+                  disabled="disabled"
+                />
+                {v.description === undefined ||
+                 v.description.length === 0 ? (
+                   v.name
+                 ) : (
+                   v.description
+                )}
+              </label>
+           </div>
+          ))}
+        </div>
+      </>
+    );
+  }
+}
+
+export default GameDisplays;

src/components/MetaContainer/MetaItem.js

@@ -14,6 +14,7 @@ import Ratings from "../Ratings";
 import StandingChallenges from "../StandingChallenges";
 import ListGames from "../ListGames";
 import Tournaments from "../Tournaments/Tournaments";
+import GameDisplays from "../GameDisplays";
 import GameVariants from "../GameVariants";
 import Thumbnail from "../Thumbnail";
 
@@ -227,6 +228,9 @@ const MetaItem = React.forwardRef(
                       variantsSetter={setSelectedVariants}
                       disableFields={true}
                     />
+                    <GameDisplays
+                      metaGame={game.uid}
+                    />
                     <ReactMarkdown
                       rehypePlugins={[rehypeRaw]}
                       className="content"

src/components/StandingChallenges.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useMemo } from "react";
+import React, { useState, useEffect, useContext, useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams, Link } from "react-router-dom";
 import { gameinfo, GameFactory } from "@abstractplay/gameslib";
@@ -228,7 +228,12 @@ function StandingChallenges(props) {
   const metaGameName = gameinfo.get(metaGame).name;
   console.log(metaGame);
   const showRespond = loggedin && challenges;
-  const variantMap = useMemo(() => {
+
+  const [variantMap, setVariantMap] = useState(new Map());
+  const [variantGroups, setVariantGroups] = useState(new Set());
+  const [varId2Group, setVarId2Group] = useState(new Map());
+
+  useEffect(() => {
     const info = gameinfo.get(metaGame);
     let gameEngine;
     if (info.playercounts.length > 1) {
@@ -238,14 +243,50 @@ function StandingChallenges(props) {
     }
     const all = gameEngine.allvariants();
     if (all !== undefined) {
-      return new Map(
-        gameEngine.allvariants().map((rec) => [rec.uid, rec.name])
-      );
+      setVariantMap(new Map(
+        all.map((rec) => [rec.uid, rec.name])
+      ));
+      setVariantGroups(new Set(
+        all.map((rec) => rec.group).filter(Boolean)
+      ));
+      setVarId2Group(new Map(
+        all.map((rec) => [rec.uid, rec.group])
+      ));
     } else {
-      return new Map();
+      setVariantMap(new Map());
+      setVariantGroups(new Set());
+      setVarId2Group(new Map());
     }
   }, [metaGame]);
 
+
+  const vars2string = useCallback((vars) => {
+    // if the string is empty, return all the group defaults
+    if (vars.length === 0) {
+      return [...variantMap.entries()]
+        .filter(([k]) => k.startsWith("#"))
+        .map(([, v]) => v)
+        .filter(Boolean);
+    }
+    // otherwise add any missing defaults and just look up the rest
+    else {
+        const groups = new Set([...variantGroups]);
+        for (const v of vars) {
+            const g = varId2Group.get(v);
+            if (g !== undefined) {
+                groups.delete(g);
+            }
+        }
+        console.log(`Some groups not defined: ${[...groups]}`);
+        // if any groups are not defined, add the defaults to vars
+        for (const g of groups) {
+            vars.push(`#${g}`);
+        }
+        console.log(`About to return: ${vars}`);
+        return vars.map((v) => variantMap.get(v)).filter(Boolean);
+    }
+  }, [variantMap, variantGroups, varId2Group]);
+
   const data = useMemo(
     () =>
       challenges.map((rec) => {
@@ -270,13 +311,11 @@ function StandingChallenges(props) {
           players: rec.players.filter((p) => p.id !== rec.challenger?.id),
           rated: rec.rated,
           seating: rec.seating,
-          variants: rec.variants.map((id) =>
-            variantMap.has(id) ? variantMap.get(id) : id
-          ),
+          variants: vars2string(rec.variants),
           comment: rec.comment,
         };
       }),
-    [challenges, allUsers, variantMap]
+    [challenges, allUsers, vars2string]
   );
 
   const columnHelper = createColumnHelper();