Add premade item library

README.md

@@ -146,7 +146,7 @@ npm run watch
 you also need an instance of `wire.io` so in another terminal, execute:
 
 ```sh
-# Need npm >= v7
+# /!\ Need npm >= v7
 PORT=4051 npx wire.io
 ```
 

src/gameComponents/index.jsx

@@ -1,3 +1,5 @@
 export { default as itemTemplates, itemLibrary } from "./itemTemplates";
 
 export { default as ItemForm } from "./ItemForm";
+
+export { default as premadeItems } from "./premadeItems";

src/gameComponents/premadeItems.js

@@ -0,0 +1,116 @@
+import i18n from "../i18n";
+
+const colors = [
+  { name: i18n.t("Black"), value: "#111111" },
+  { name: i18n.t("White"), value: "#EEEEEE" },
+  { name: i18n.t("Red"), value: "#D82735" },
+  { name: i18n.t("Orange"), value: "#FF7435" },
+  { name: i18n.t("Yellow"), value: "#F9DF00" },
+  { name: i18n.t("Green"), value: "#006B2A" },
+  { name: i18n.t("Blue"), value: "#275791" },
+  { name: i18n.t("Purple"), value: "#5F3581" },
+];
+
+const premade = [];
+
+const pawns = {
+  name: i18n.t("Pawn"),
+  items: [],
+};
+premade.push(pawns);
+
+colors.forEach(({ name, value }) => {
+  pawns.items.push({
+    type: "pawn",
+    name: i18n.t("{{color}} pawn", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const token = {
+  name: i18n.t("Token"),
+  items: [],
+};
+premade.push(token);
+
+colors.forEach(({ name, value }) => {
+  token.items.push({
+    type: "token",
+    name: i18n.t("{{color}} token", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const cube = {
+  name: i18n.t("Cube"),
+  items: [],
+};
+premade.push(cube);
+
+colors.forEach(({ name, value }) => {
+  cube.items.push({
+    type: "cube",
+    name: i18n.t("{{color}} cube", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const cylinder = {
+  name: i18n.t("Cylinder"),
+  items: [],
+};
+premade.push(cylinder);
+
+colors.forEach(({ name, value }) => {
+  cylinder.items.push({
+    type: "cylinder",
+    name: i18n.t("{{color}} cylinder", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const meeple = {
+  name: i18n.t("Meeple"),
+  items: [],
+};
+premade.push(meeple);
+
+colors.forEach(({ name, value }) => {
+  meeple.items.push({
+    type: "meeple",
+    name: i18n.t("{{color}} meeple", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const jewel = {
+  name: i18n.t("Jewel"),
+  items: [],
+};
+premade.push(jewel);
+
+colors.forEach(({ name, value }) => {
+  jewel.items.push({
+    type: "jewel",
+    name: i18n.t("{{color}} jewel", { color: name.toLocaleLowerCase() }),
+    color: value,
+  });
+});
+
+const boards = {
+  name: i18n.t("Board"),
+  items: [],
+};
+premade.push(boards);
+
+boards.items.push({
+  type: "checkerboard",
+  name: i18n.t("8x8 board"),
+  color: colors[0].value,
+  alternateColor: colors[1].value,
+  width: 500,
+  colCount: 8,
+  rowCount: 8,
+});
+
+export default premade;

src/i18n/en.json

@@ -228,5 +228,22 @@
   "Double click to roll": "Double click to roll",
   "Check it to activate roll on double click instead of moving.": "check it to activate roll on double click instead of moving.",
   "Dice image {{index}}": "Side #{{index}}",
-  "Image dice": "Image dice"
+  "Image dice": "Image dice",
+  "Black": "Black",
+  "White": "White",
+  "Red": "Red",
+  "Orange": "Orange",
+  "Yellow": "Yellow",
+  "Green": "Green",
+  "Blue": "Blue",
+  "Purple": "Purple",
+  "{{color}} pawn": "{{color}} pawn",
+  "{{color}} token": "{{color}} token",
+  "{{color}} cube": "{{color}} cube",
+  "{{color}} cylinder": "{{color}} cylinder",
+  "{{color}} meeple": "{{color}} meeple",
+  "{{color}} jewel": "{{color}} jewel",
+  "Board": "Board",
+  "8x8 board": "8x8 board",
+  "Premade": "Premade"
 }

src/i18n/fr.json

@@ -228,5 +228,22 @@
   "Double click to roll": "Double clic pour lancer",
   "Check it to activate roll on double click instead of moving.": "Cocher pour activer le lancé au double clic à la place du déplacement.",
   "Dice image {{index}}": "Face n° {{index}}",
-  "Image dice": "Dé avec image"
+  "Image dice": "Dé avec image",
+  "Black": "Noir",
+  "White": "Blanc",
+  "Red": "Rouge",
+  "Orange": "Orange",
+  "Yellow": "Jaune",
+  "Green": "Vert",
+  "Blue": "Bleu",
+  "Purple": "Violet",
+  "{{color}} pawn": "Pion {{ color }}",
+  "{{color}} token": "Jeton {{color}}",
+  "{{color}} cube": "Cube {{color}}",
+  "{{color}} cylinder": "Cylindre {{color}}",
+  "{{color}} meeple": "Meeple {{color}}",
+  "{{color}} jewel": "Ressource {{color}}",
+  "Board": "Plateau",
+  "8x8 board": "Échiquier",
+  "Premade": "Prêt à jouer"
 }

src/views/GameView.jsx

@@ -4,7 +4,7 @@ import useAsyncEffect from "use-async-effect";
 import { BoardWrapper } from "react-sync-board";
 import { nanoid } from "nanoid";
 
-import { itemTemplates, itemLibrary } from "../gameComponents";
+import { itemTemplates, itemLibrary, premadeItems } from "../gameComponents";
 import Waiter from "../ui/Waiter";
 
 import BoardView from "./BoardView";
@@ -36,12 +36,12 @@ const adaptItem = (item) => ({
   uid: nanoid(),
 });
 
-const adaptAvailableItems = (nodes) => {
+const adaptItems = (nodes) => {
   return nodes.map((node) => {
     if (node.type) {
       return adaptItem(node);
     } else {
-      return { ...node, items: adaptAvailableItems(node.items) };
+      return { ...node, items: adaptItems(node.items) };
     }
   });
 };
@@ -92,15 +92,22 @@ export const GameView = ({ create = false }) => {
     if (itemList?.length && itemList[0].groupId) {
       itemList = migrateAvailableItemList(itemList);
     }
-    return adaptAvailableItems(itemList);
+    return adaptItems(itemList);
   }, [availableItems]);
 
+  const premadeLibrary = React.useMemo(() => adaptItems(premadeItems), []);
+
   const itemLibraries = [
     {
       name: t("Standard"),
       key: "standard",
       items: itemLibrary,
     },
+    {
+      name: t("Premade"),
+      key: "premade",
+      items: premadeLibrary,
+    },
   ];
 
   if (availableItems.length) {

src/views/Session.jsx

@@ -4,7 +4,7 @@ import useAsyncEffect from "use-async-effect";
 import { BoardWrapper, useWire } from "react-sync-board";
 import { nanoid } from "nanoid";
 
-import { itemTemplates, itemLibrary } from "../gameComponents";
+import { itemTemplates, itemLibrary, premadeItems } from "../gameComponents";
 
 import BoardView from "./BoardView";
 import Waiter from "../ui/Waiter";
@@ -36,12 +36,12 @@ const adaptItem = (item) => ({
   uid: nanoid(),
 });
 
-const adaptAvailableItems = (nodes) => {
+const adaptItems = (nodes) => {
   return nodes.map((node) => {
     if (node.type) {
       return adaptItem(node);
     } else {
-      return { ...node, items: adaptAvailableItems(node.items) };
+      return { ...node, items: adaptItems(node.items) };
     }
   });
 };
@@ -101,15 +101,22 @@ export const Session = () => {
     if (itemList.length && itemList[0].groupId) {
       itemList = migrateAvailableItemList(itemList);
     }
-    return adaptAvailableItems(itemList);
+    return adaptItems(itemList);
   }, [availableItems]);
 
+  const premadeLibrary = React.useMemo(() => adaptItems(premadeItems), []);
+
   const itemLibraries = [
     {
       name: t("Standard"),
       key: "standard",
       items: itemLibrary,
     },
+    {
+      name: t("Premade"),
+      key: "premade",
+      items: premadeLibrary,
+    },
   ];
 
   if (availableItems.length) {