dominic/cs-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update prompts, id mapping, icon

Browse Source
This commit is contained in:
Dominic Zimmer 2024-03-30 12:33:49 +01:00
parent 2e48c23eaa
commit 781921efd7
6 changed files with 84 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/bingo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
public/bingo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

2
public/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/bingo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

13
src/App.css
View File

@ -1,9 +1,18 @@
:root {
--cs-orange: #F9A700;
--cs-black: #1B2031;
--pgl-grey: #4A4E57;
}
@font-face { @font-face {
font-family: "csregular"; font-family: "csregular";
src: url(./cs_regular.ttf); src: url(./cs_regular.ttf);
/*font-weight: normal; /*font-weight: normal;
font-style: normal;*/ font-style: normal;*/
} }
body {
background-color: var(--pgl-grey);
color: white;
}
h1, span { h1, span {
user-select: none; user-select: none;
} }
@ -28,7 +37,7 @@ h1, span {
width: 100%; width: 100%;
} }
.bingo-board > div > div { .bingo-board > div > div {
background: #E48720; background: var(--cs-orange);
display: grid; display: grid;
border-radius: .5rem; border-radius: .5rem;
aspect-ratio: 1; aspect-ratio: 1;
@ -40,7 +49,7 @@ h1, span {
} }
.legend { .legend {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto auto 1fr;
column-gap: 2rem; column-gap: 2rem;
} }
.legend .header span { .legend .header span {

78
src/App.tsx
View File

@ -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 './App.css';
import {prompts} from './prompts'; import {prompts, Categories} from './prompts';
const alphabet = "ABCDEFGHIKLMNOPQRSTUVWXYZ"; const alphabet = "ABCDEFGHIKLMNOPQRSTUVWXYZ";
const lskey_prompts = "cs_bingo_prompts-day2"; const lskey_prompts = "cs_bingo_prompts-day3";
const lskey_ticked = "cs_bingo_ticked-day2"; const lskey_ticked = "cs_bingo_ticked-day3";
const shuffle = <T,>(array: T[]): T[] => { const shuffle = <T,>(array: T[]): T[] => {
return array return array
@ -16,36 +17,53 @@ const shuffle = <T,>(array: T[]): T[] => {
const App: React.FC<{}> = () => { const App: React.FC<{}> = () => {
const [resetCounter, setResetCounter] = useState(0); const [resetCounter, setResetCounter] = useState(0);
const [lines, setLines] = useState<[string,string][]>([]); //const [lines, setLines] = useState<[Categories,string][]>([]);
const saveLines = (lines: [string,string][]) => { const [linesP, setLinesP] = useState<number[]>([]);
localStorage.setItem(lskey_prompts, JSON.stringify(lines)); const saveLines = <T,>(theLines: T[]) => {
localStorage.setItem(lskey_prompts, JSON.stringify(theLines));
}; };
const saveTicks = (lines: boolean[]) => { const saveTicks = (theLines: boolean[]) => {
localStorage.setItem(lskey_ticked, JSON.stringify(lines)); localStorage.setItem(lskey_ticked, JSON.stringify(theLines));
}; };
const [highlighted, setHighlighted] = useState<null| number>(null); const [highlighted, setHighlighted] = useState<null| number>(null);
const highlight = (index: number) => { const highlight = (index: number) => {
setHighlighted(index); setHighlighted(index);
setTimeout(() => setHighlighted(null), 3000); setTimeout(() => setHighlighted(null), 1500);
document.getElementById("letter-" + alphabet[index])?.scrollIntoView(); document.getElementById(`letter-${alphabet[index]}`)?.scrollIntoView();
}; };
useEffect(() => { useEffect(() => {
console.log("no lines"); console.log("no lines");
if (lines.length !== 0) return; if (linesP.length !== 0) return;
const loadLines = localStorage.getItem(lskey_prompts); const loadLines = localStorage.getItem(lskey_prompts);
const loadTicks = localStorage.getItem(lskey_ticked); const loadTicks = localStorage.getItem(lskey_ticked);
if (loadLines === null || loadTicks === null) { 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); const newTicks = new Array(25).fill(false);
setLines(newPrompts); setLinesP(newPromptsP);
setTicked(newTicks); setTicked(newTicks);
saveLines(newPrompts); saveLines(newPromptsP);
saveTicks(newTicks); saveTicks(newTicks);
} else { } else {
setLines(JSON.parse(loadLines)); setLinesP(JSON.parse(loadLines));
setTicked(JSON.parse(loadTicks)); 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<boolean[]>(new Array(25).fill(false) ); const [ticked, setTicked] = useState<boolean[]>(new Array(25).fill(false) );
const toggleField = (index: number) => { const toggleField = (index: number) => {
@ -59,11 +77,11 @@ const App: React.FC<{}> = () => {
const incCounter = () => { const incCounter = () => {
setResetCounter((old) => { setResetCounter((old) => {
if (old === 15) { 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) ; const newTicked = new Array(25).fill(false) ;
setLines(newPrompts); setLinesP(newPromptsP);
setTicked(newTicked); setTicked(newTicked);
saveLines(newPrompts); saveLines(newPromptsP);
saveTicks(newTicked) saveTicks(newTicked)
} }
return old + 1; return old + 1;
@ -92,18 +110,24 @@ const App: React.FC<{}> = () => {
<hr/> <hr/>
<div className="legend"> <div className="legend">
<div className="header"> <div className="header">
<span>Letter</span> <h2>Id</h2>
</div> </div>
<div className="header"> <div className="header">
<span>Goal</span> <h2>Letter</h2>
</div> </div>
{lines.map(([category, line], index)=> <div className="header">
<h2>Goal</h2>
</div>
{linesP.map((permutation, index)=>
<Fragment key={index}> <Fragment key={index}>
<div className="entry-letter" id={"letter-" + alphabet[index]}> <div className="entry-letter" id={`letter-${alphabet[reverseLookup[index]]}`}>
<span>{alphabet[index]}</span> <span>{index}</span>
</div> </div>
<div className={"entry-text" + (highlighted === index ? " highlighted" : "")} > <div className="entry-letter" >
<span>{line}</span> <span>{alphabet[reverseLookup[index]]}</span>
</div>
<div className={"entry-text" + (highlighted === reverseLookup[index] ? " highlighted" : "")} >
<span>{prompts[index][1]}</span>
</div> </div>
</Fragment> </Fragment>
)} )}

30
src/prompts.ts
View File

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