Update prompts, id mapping, icon
This commit is contained in:
Dominic Zimmer
parent
2e48c23eaa
commit
781921efd7
BIN
public/bingo.ico
Normal file
BIN
public/bingo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/bingo.png
Normal file
BIN
public/bingo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
||||
13
src/App.css
13
src/App.css
@ -1,9 +1,18 @@
|
||||
:root {
|
||||
--cs-orange: #F9A700;
|
||||
--cs-black: #1B2031;
|
||||
--pgl-grey: #4A4E57;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "csregular";
|
||||
src: url(./cs_regular.ttf);
|
||||
/*font-weight: normal;
|
||||
font-style: normal;*/
|
||||
}
|
||||
body {
|
||||
background-color: var(--pgl-grey);
|
||||
color: white;
|
||||
}
|
||||
h1, span {
|
||||
user-select: none;
|
||||
}
|
||||
@ -28,7 +37,7 @@ h1, span {
|
||||
width: 100%;
|
||||
}
|
||||
.bingo-board > 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 {
|
||||
|
||||
78
src/App.tsx
78
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 = <T,>(array: T[]): T[] => {
|
||||
return array
|
||||
@ -16,36 +17,53 @@ const shuffle = <T,>(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<number[]>([]);
|
||||
const saveLines = <T,>(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| number>(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<boolean[]>(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<{}> = () => {
|
||||
<hr/>
|
||||
<div className="legend">
|
||||
<div className="header">
|
||||
<span>Letter</span>
|
||||
<h2>Id</h2>
|
||||
</div>
|
||||
<div className="header">
|
||||
<span>Goal</span>
|
||||
<h2>Letter</h2>
|
||||
</div>
|
||||
{lines.map(([category, line], index)=>
|
||||
<div className="header">
|
||||
<h2>Goal</h2>
|
||||
</div>
|
||||
{linesP.map((permutation, index)=>
|
||||
<Fragment key={index}>
|
||||
<div className="entry-letter" id={"letter-" + alphabet[index]}>
|
||||
<span>{alphabet[index]}</span>
|
||||
<div className="entry-letter" id={`letter-${alphabet[reverseLookup[index]]}`}>
|
||||
<span>{index}</span>
|
||||
</div>
|
||||
<div className={"entry-text" + (highlighted === index ? " highlighted" : "")} >
|
||||
<span>{line}</span>
|
||||
<div className="entry-letter" >
|
||||
<span>{alphabet[reverseLookup[index]]}</span>
|
||||
</div>
|
||||
<div className={"entry-text" + (highlighted === reverseLookup[index] ? " highlighted" : "")} >
|
||||
<span>{prompts[index][1]}</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
@ -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 {};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user