WIP Concept: flags on SE and LT squares

src/components/Card.test.tsx

@@ -6,8 +6,9 @@ import { BrowserRouter } from "react-router-dom";
 import stripIndent from "strip-indent";
 import teamLindy from "../data/teamLindy.json";
 import flattenWordList from "../lib/flattenWordList";
+import type { StyledWord } from "../data/config";
 
-const wordList: string[] = flattenWordList(teamLindy.wordList);
+const wordList: StyledWord[] = flattenWordList(teamLindy.wordList);
 
 describe("'New card' button", () => {
   test("changes the words on the card", () => {

src/components/Card.tsx

@@ -6,13 +6,14 @@ import MainLayout from "../layouts/MainLayout";
 import emojiGrid from "../lib/emojiGrid";
 import share from "../lib/share";
 import type { CellProps } from "./Cell";
+import type { StyledWord } from "../data/config";
 import type { ButtonClickHandler } from "../clickHandler";
 
 const Card: React.FC<{
   id: string;
   name?: string;
   url: string;
-  wordList: string[];
+  wordList: StyledWord[];
   videoListUrl?: string;
 }> = ({ id, name, url, wordList, videoListUrl }) => {
   const [cellDataList, toggleStamped, setNewWords, clearAllCells] = useCard(

src/components/Cell.css

@@ -11,3 +11,36 @@
 .Cell.stamped {
   background-color: lightblue;
 }
+
+.Cell.highlighted {
+  background-image: linear-gradient(135deg, rgba(255,206,0, .8), rgba(255,206,0, .8) 12px, transparent 15px, transparent);
+}
+
+.Cell.flag {
+  position: relative;
+}
+
+.Cell.flag::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.Cell.flag.stamped::before {
+  background-image: none;
+}
+
+.Cell.flag-lt::before {
+  background-image: url(/bingo-frontend/src/images/lt.svg);
+}
+
+.Cell.flag-se::before {
+  background-image: url(/bingo-frontend/src/images/se.svg);
+}

src/components/Cell.tsx

@@ -3,13 +3,20 @@ import "./Cell.css";
 import classNames from "classnames";
 import normaliseWord from "../lib/normaliseWord";
 import type { ClickHandler } from "../clickHandler";
+import type { StyledWord } from "../data/config";
 
 export type CellClickHandler = ClickHandler<HTMLTableDataCellElement>;
-export type CellData = { word: string; stamped: boolean };
+export type CellData = StyledWord & { stamped: boolean };
 export type CellProps = CellData & { toggleStamped: CellClickHandler };
 
-const Cell: React.FC<CellProps> = ({ word, stamped, toggleStamped }) => {
-  const classes = classNames("Cell", { stamped: stamped });
+const Cell: React.FC<CellProps> = ({
+  word,
+  stamped,
+  toggleStamped,
+  cssClasses,
+}) => {
+  console.log(cssClasses);
+  const classes = classNames("Cell", { stamped: stamped }, cssClasses);
 
   return (
     <td role="gridcell" className={classes} onClick={toggleStamped}>

src/components/Grid.tsx

@@ -20,10 +20,11 @@ const Grid: React.FC<{ cellPropsList: CellProps[] }> = ({ cellPropsList }) => {
 const Row: React.FC<{ cellPropsList: CellProps[] }> = ({ cellPropsList }) => {
   return (
     <tr className="Row">
-      {cellPropsList.map(({ word, stamped, toggleStamped }) => (
+      {cellPropsList.map(({ word, cssClasses, stamped, toggleStamped }) => (
         <Cell
           key={word}
           word={word}
+          cssClasses={cssClasses}
           stamped={stamped}
           toggleStamped={toggleStamped}
         />

src/data/config.d.ts

@@ -15,4 +15,9 @@ export type WordData = {
   url?: string;
   emoji?: string;
   description?: string;
+  cssClasses?: string[];
+};
+export type StyledWord = {
+  word: string;
+  cssClasses?: string[];
 };

src/data/teamLindy.json

@@ -28,40 +28,51 @@
       "words": [
         {
           "word": "A-frame/ Kick through (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02YC4vJ8dk6hFhzCZ7DpUZDizk4u5RD87GucoGuV5gnhC1SPib98kWEJC1YXtWGvkjl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02YC4vJ8dk6hFhzCZ7DpUZDizk4u5RD87GucoGuV5gnhC1SPib98kWEJC1YXtWGvkjl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "The Pancake (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02GhobQkT4E6aFuzcSA65Xh7vuhFNFKke4QfoxtND6M5W4Ph9d6Cxnb2twELp4oWmKl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02GhobQkT4E6aFuzcSA65Xh7vuhFNFKke4QfoxtND6M5W4Ph9d6Cxnb2twELp4oWmKl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "The Snatch (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02WrC2URf9ymSaz5HeFf2sHFn1DEU7kKvFEePa5tZhScJECTGeWkYPjcCkM2KNvjGyl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02WrC2URf9ymSaz5HeFf2sHFn1DEU7kKvFEePa5tZhScJECTGeWkYPjcCkM2KNvjGyl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "Lindy flip/ Lamppost/ Around the back (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02aPcc6Qg8QG1Qn7tT9x57rqn3naQrD6bTmmStRDYXPfChAjtpmoYCj7GuDVUK8q1Rl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02aPcc6Qg8QG1Qn7tT9x57rqn3naQrD6bTmmStRDYXPfChAjtpmoYCj7GuDVUK8q1Rl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "Fly toss/ Popover/ Coochie toss (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid0fyeCLwscJhJNztmUssHMM7UGSH5xsgcJ8p5SV3jh6EAGHqz88QfHDHorEWGB4e4Al"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid0fyeCLwscJhJNztmUssHMM7UGSH5xsgcJ8p5SV3jh6EAGHqz88QfHDHorEWGB4e4Al",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "Waterfall (air step)",
           "description": "any air step where the flyer dives down the thrower's back and ends up between their legs",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid0szHyFmKxNim2YkyytE23gMZzoxmJfNH5ZzdLbTgEFEjeyNKypfRfJrH9ie71gzGkl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid0szHyFmKxNim2YkyytE23gMZzoxmJfNH5ZzdLbTgEFEjeyNKypfRfJrH9ie71gzGkl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "Knicker­bocker or Baby flip (air step)",
           "description": "we'll count any flip where the flyer goes backwards over the thrower's arm. Names include: Hourglass, Side-flip",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02DfYEzswugCzMMs3W1KAh9U4ez5N8GinH7hYYgZLMPAeCGuTt7c5VdXaCioGyKsXBl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid02DfYEzswugCzMMs3W1KAh9U4ez5N8GinH7hYYgZLMPAeCGuTt7c5VdXaCioGyKsXBl",
+          "cssClasses": ["highlighted"]
         },
         {
           "word": "Kay flip (air step)",
-          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid017Db7GsyyXKECRubM93hivcwRKUx1HQ64pBa9cedLgnJwGa7j6wX9bk2S9AdcBKpl"
+          "url": "https://www.facebook.com/robertwhiteiii/posts/pfbid017Db7GsyyXKECRubM93hivcwRKUx1HQ64pBa9cedLgnJwGa7j6wX9bk2S9AdcBKpl",
+          "cssClasses": ["highlighted"]
         },
         { "word": "Leapfrog (Hoppa bock)" },
-        { "word": "An air step involving more than two people" }
+        {
+          "word": "An air step involving more than two people",
+          "cssClasses": ["highlighted"]
+        }
       ]
     },
     {
@@ -154,9 +165,12 @@
       "title": "Who is that?",
       "words": [
         { "word": "Mixed-nationality team" },
-        { "word": "All-Swedish Team" },
-        { "word": "A Swede not in Sweden" },
-        { "word": "A Lithuanian not in Lithuania" },
+        { "word": "All-Swedish Team", "cssClasses": ["flag", "flag-se"] },
+        { "word": "A Swede not in Sweden", "cssClasses": ["flag", "flag-se"] },
+        {
+          "word": "A Lithuanian not in Lithuania",
+          "cssClasses": ["flag", "flag-lt"]
+        },
         {
           "word": "Somebody you have personally taken class from",
           "description": "or that you will take class from at this event!"

src/hooks/useCard.ts

@@ -1,5 +1,6 @@
 import useSession from "../hooks/useSession";
 import shuffle from "../lib/shuffle";
+import type { StyledWord } from "../data/config";
 import type { CellData, CellClickHandler } from "../components/Cell";
 import type { ButtonClickHandler } from "../clickHandler";
 
@@ -10,12 +11,12 @@ type GetterSetters = [
   ButtonClickHandler,
 ];
 
-const useCard = (id: string, wordList: string[]): GetterSetters => {
-  const newWords = (): string[] => shuffle(wordList).slice(0, 25);
+const useCard = (id: string, wordList: StyledWord[]): GetterSetters => {
+  const newWords = (): StyledWord[] => shuffle(wordList).slice(0, 25);
 
   const newCellDataList = function (): CellData[] {
     return newWords().map((word) => {
-      return { word: word, stamped: false };
+      return { stamped: false, ...word };
     });
   };
 

src/lib/flattenWordList.ts

@@ -1,9 +1,11 @@
-import type { WordListGroupData } from "../data/config";
+import type { StyledWord, WordListGroupData } from "../data/config";
 
-const flattenWordList = (wordList: WordListGroupData[]): string[] => {
+const flattenWordList = (wordList: WordListGroupData[]): StyledWord[] => {
   return wordList.reduce(
-    (accumulator: string[], currentValue: WordListGroupData) => {
-      const wordListGroupWords = currentValue["words"].map(({ word }) => word);
+    (accumulator: StyledWord[], currentValue: WordListGroupData) => {
+      const wordListGroupWords = currentValue["words"].map(
+        ({ word, cssClasses }) => ({ word, cssClasses }),
+      );
       return accumulator.concat(wordListGroupWords);
     },
     [],