diff --git a/public/bingo.ico b/public/bingo.ico new file mode 100644 index 0000000..68eb43a Binary files /dev/null and b/public/bingo.ico differ diff --git a/public/bingo.png b/public/bingo.png new file mode 100644 index 0000000..327ec9e Binary files /dev/null and b/public/bingo.png differ diff --git a/public/index.html b/public/index.html index 1c01e35..2cd2c81 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + div > div { - background: #E48720; + background: var(--cs-orange); display: grid; border-radius: .5rem; aspect-ratio: 1; @@ -40,7 +49,7 @@ h1, span { } .legend { display: grid; - grid-template-columns: auto 1fr; + grid-template-columns: auto auto 1fr; column-gap: 2rem; } .legend .header span { diff --git a/src/App.tsx b/src/App.tsx index b551ed0..d3fd9a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ -import React, { Fragment, useEffect, useState } from 'react'; +import { reverse } from 'dns'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; import './App.css'; -import {prompts} from './prompts'; +import {prompts, Categories} from './prompts'; const alphabet = "ABCDEFGHIKLMNOPQRSTUVWXYZ"; -const lskey_prompts = "cs_bingo_prompts-day2"; -const lskey_ticked = "cs_bingo_ticked-day2"; +const lskey_prompts = "cs_bingo_prompts-day3"; +const lskey_ticked = "cs_bingo_ticked-day3"; const shuffle = (array: T[]): T[] => { return array @@ -16,36 +17,53 @@ const shuffle = (array: T[]): T[] => { const App: React.FC<{}> = () => { const [resetCounter, setResetCounter] = useState(0); - const [lines, setLines] = useState<[string,string][]>([]); - const saveLines = (lines: [string,string][]) => { - localStorage.setItem(lskey_prompts, JSON.stringify(lines)); + //const [lines, setLines] = useState<[Categories,string][]>([]); + const [linesP, setLinesP] = useState([]); + const saveLines = (theLines: T[]) => { + localStorage.setItem(lskey_prompts, JSON.stringify(theLines)); }; - const saveTicks = (lines: boolean[]) => { - localStorage.setItem(lskey_ticked, JSON.stringify(lines)); + const saveTicks = (theLines: boolean[]) => { + localStorage.setItem(lskey_ticked, JSON.stringify(theLines)); }; const [highlighted, setHighlighted] = useState(null); const highlight = (index: number) => { setHighlighted(index); - setTimeout(() => setHighlighted(null), 3000); - document.getElementById("letter-" + alphabet[index])?.scrollIntoView(); + setTimeout(() => setHighlighted(null), 1500); + document.getElementById(`letter-${alphabet[index]}`)?.scrollIntoView(); }; useEffect(() => { console.log("no lines"); - if (lines.length !== 0) return; + if (linesP.length !== 0) return; const loadLines = localStorage.getItem(lskey_prompts); const loadTicks = localStorage.getItem(lskey_ticked); if (loadLines === null || loadTicks === null) { - const newPrompts = shuffle(prompts).slice(0, 25) + const newPromptsP = shuffle([...(new Array(prompts.length)).fill(0).map((_, i ) => i)]); + console.log(newPromptsP); const newTicks = new Array(25).fill(false); - setLines(newPrompts); + setLinesP(newPromptsP); setTicked(newTicks); - saveLines(newPrompts); + saveLines(newPromptsP); saveTicks(newTicks); } else { - setLines(JSON.parse(loadLines)); + setLinesP(JSON.parse(loadLines)); setTicked(JSON.parse(loadTicks)); } - }, [lines]) + }, [linesP]) + + const reverseLookup: {[x: number]: number} = useMemo(() => { + const x= Object.fromEntries(linesP.map((val, ind) => [val, ind])); + console.log("x", x); + return x; + }, [linesP]); + const reverseAlphabetLookup: {[x: string]: number} = useMemo(() => { + const x= Object.fromEntries(linesP.flatMap((_, ind) => { + const e = alphabet[reverseLookup[ind]]; + if (!e) return []; + return [[e, ind]] + } )); + console.log("x", x); + return x; + }, [linesP]); const [ticked, setTicked] = useState(new Array(25).fill(false) ); const toggleField = (index: number) => { @@ -59,11 +77,11 @@ const App: React.FC<{}> = () => { const incCounter = () => { setResetCounter((old) => { if (old === 15) { - const newPrompts = shuffle(prompts).slice(0, 25) + const newPromptsP = shuffle([...(new Array(prompts.length)).fill(0).map((_, i ) => i)]); const newTicked = new Array(25).fill(false) ; - setLines(newPrompts); + setLinesP(newPromptsP); setTicked(newTicked); - saveLines(newPrompts); + saveLines(newPromptsP); saveTicks(newTicked) } return old + 1; @@ -92,18 +110,24 @@ const App: React.FC<{}> = () => {
- Letter +

Id

- Goal +

Letter

- {lines.map(([category, line], index)=> +
+

Goal

+
+ {linesP.map((permutation, index)=> -
- {alphabet[index]} +
+ {index}
-
- {line} +
+ {alphabet[reverseLookup[index]]} +
+
+ {prompts[index][1]}
)} diff --git a/src/prompts.ts b/src/prompts.ts index 8599ddd..99c3614 100644 --- a/src/prompts.ts +++ b/src/prompts.ts @@ -1,33 +1,44 @@ -type Categories = "kills" | "rounds" | "fails" | "epic" | "meta" | "unexpected"; +export type Categories = "kills" | "rounds" | "fails" | "epic" | "meta" | "unexpected"; export const prompts: [Categories, string][] = [ ["kills", "Zeus Kill"], ["kills", "Knife Kill"], ["kills", "Team Kill"], ["kills", "HE Kill"], ["kills", "Molotov Kill"], - ["rounds", "9 rounds in a row"], - ["rounds", "10 rounds in one half"], - ["fails", "Ninja Defuse"], + ["kills", "Kill in Molotov"], + ["kills", "Peek-a-Boo"], + ["kills", "Non-Meta Gun Kill"], + + ["rounds", "8 rounds in a row"], + ["rounds", "9 rounds in one half"], + + ["fails", "Oops, my Shadow"], ["fails", "Eco win vs Full Buy"], + ["fails", "Cannot convert Pistol Round"], ["fails", "Trigger discipline moment"], ["fails", "Underestimated bomb radius"], ["fails", "T dies after time"], - ["fails", "4:3 Moment"], ["fails", "CT forgot defuser"], + ["fails", "Where'd the time go?"], ["fails", "CS2 is bug free"], ["fails", "Death while throwing util"], - //["fails", "#Chicken Moment"], + ["fails", "Bad Timing!"], + ["epic", "Ace"], - ["epic", "IGL > 15 kills"], + ["epic", "Kill Feed: Gun+3"], + ["epic", "IGL ≥ 15 kills"], ["epic", "30 bomb"], ["epic", "AWP Collat"], ["epic", "Clutch 1v3"], ["epic", "Clutch 2v5"], ["epic", "Get down Mr. President!"], - ["meta", "Inferno picked"], + ["epic", "Sick Defuse"], + + ["meta", "Player plays fans"], ["meta", "Double OT"], ["meta", "Rush B Blyat"], - ["meta", "5 CTs save"], + ["meta", "4 CTs save"], + ["unexpected", "Ladder kill"], ["unexpected", "Kill while flashed"], ["unexpected", "AWP noscope"], @@ -35,6 +46,7 @@ export const prompts: [Categories, string][] = [ ["unexpected", "Player hiding in smoke"], ["unexpected", "150 damage with 1 HE"], ["unexpected", "2:0 and bye!"], + ["unexpected", "Hug in Smoke"], ] export default {};