diff --git a/package.json b/package.json index b339866..ae0ca8a 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "version": "0.1.0", "type": "module", - "homepage": "https://dgmstuart.github.io/bingo-frontend", + "homepage": "https://teamlindybingo.com", "dependencies": { "@vitejs/plugin-react-swc": "^3.6.0", "classnames": "^2.5.1", diff --git a/public/404.html b/public/404.html index c004def..6ab9b6d 100644 --- a/public/404.html +++ b/public/404.html @@ -7,7 +7,7 @@ // Single Page Apps for GitHub Pages // MIT License // https://github.com/rafgraph/spa-github-pages - var pathSegmentsToKeep = 1; + var pathSegmentsToKeep = 0; var l = window.location; l.replace( diff --git a/public/CNAME b/public/CNAME new file mode 100644 index 0000000..0480bf0 --- /dev/null +++ b/public/CNAME @@ -0,0 +1 @@ +teamlindybingo.com diff --git a/src/App.tsx b/src/App.tsx index c4d5e0f..65c9e3d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import QRCode from "./components/QRCode"; import { defaultConfigLoader, configLoader } from "./loaders/configLoaders"; const App: React.FC = () => { - const rootPath = "/bingo-frontend"; + const rootPath = "/"; const router = createBrowserRouter([ { diff --git a/src/components/Card.test.tsx b/src/components/Card.test.tsx index f7439ee..a9b91d8 100644 --- a/src/components/Card.test.tsx +++ b/src/components/Card.test.tsx @@ -5,8 +5,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", () => { diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 3d0dfb2..b73ea19 100644 --- a/src/components/Card.tsx +++ b/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( diff --git a/src/components/Cell.css b/src/components/Cell.css index cad171c..8427737 100644 --- a/src/components/Cell.css +++ b/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); +} diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx index ee97ebd..249f9a4 100644 --- a/src/components/Cell.tsx +++ b/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; -export type CellData = { word: string; stamped: boolean }; +export type CellData = StyledWord & { stamped: boolean }; export type CellProps = CellData & { toggleStamped: CellClickHandler }; -const Cell: React.FC = ({ word, stamped, toggleStamped }) => { - const classes = classNames("Cell", { stamped: stamped }); +const Cell: React.FC = ({ + word, + stamped, + toggleStamped, + cssClasses, +}) => { + console.log(cssClasses); + const classes = classNames("Cell", { stamped: stamped }, cssClasses); return ( diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index fdafc7e..37017af 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -20,10 +20,11 @@ const Grid: React.FC<{ cellPropsList: CellProps[] }> = ({ cellPropsList }) => { const Row: React.FC<{ cellPropsList: CellProps[] }> = ({ cellPropsList }) => { return ( - {cellPropsList.map(({ word, stamped, toggleStamped }) => ( + {cellPropsList.map(({ word, cssClasses, stamped, toggleStamped }) => ( diff --git a/src/data/config.d.ts b/src/data/config.d.ts index 67a874c..7517fe8 100644 --- a/src/data/config.d.ts +++ b/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[]; }; diff --git a/src/data/teamLindy.json b/src/data/teamLindy.json index b35b387..6854318 100644 --- a/src/data/teamLindy.json +++ b/src/data/teamLindy.json @@ -28,41 +28,52 @@ "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": "Around the back/ Lindy flip (air step)", "description": "other names inlcude: Lamppost, Frankie flip", - "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": "Side-flip or Knicker­bocker (air step)", "description": "we'll count any flip where the flyer goes backwards over the thrower's arm. Other names include: Hourglass, Baby Flip, Basket toss", - "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"] + } ] }, { @@ -159,9 +170,12 @@ "description": "If you're not sure where someone comes from, ask your neighbour!", "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!" diff --git a/src/hooks/useCard.ts b/src/hooks/useCard.ts index 70d1fc5..1443c6e 100644 --- a/src/hooks/useCard.ts +++ b/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 }; }); }; diff --git a/src/images/lt.svg b/src/images/lt.svg new file mode 100644 index 0000000..1367792 --- /dev/null +++ b/src/images/lt.svg @@ -0,0 +1,62 @@ + + + + + + + + + + diff --git a/src/images/se.svg b/src/images/se.svg new file mode 100644 index 0000000..1511239 --- /dev/null +++ b/src/images/se.svg @@ -0,0 +1,42 @@ + + + + + + + diff --git a/src/lib/flattenWordList.ts b/src/lib/flattenWordList.ts index c7c7202..0afbada 100644 --- a/src/lib/flattenWordList.ts +++ b/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); }, [], diff --git a/vite.config.mjs b/vite.config.mjs index ca56526..e896c06 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -4,7 +4,7 @@ import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ - base: "/bingo-frontend", + base: "/", plugins: [react()], test: { globals: true,