Add makefile

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+bingo.zip

Makefile

@@ -0,0 +1,17 @@
+all: clean build upload deploy
+
+build: bingo.zip
+	PUBLIC_URL="/bingo" npm run build
+	(cd build && zip -r ../bingo.zip *)
+
+clean:
+	rm -f build.zip
+
+upload:
+	scp bingo.zip oreburgh:www
+
+deploy:
+	ssh oreburgh rm -r www/bingo
+	ssh oreburgh unzip www/bingo.zip -d www/bingo
+
+bingo.zip:

public/index.html

@@ -9,7 +9,7 @@
       name="description"
       content="CS Copenhagen Major Bingo"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/bingo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -1,25 +1,25 @@
 {
-  "short_name": "CS Tournament Bingo",
+  "short_name": "PGL Bingo",
-  "name": "CS Copenhagen Major Bingo",
+  "name": "CS2 Copenhagen Major Bingo",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "bingo.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "bingo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "bingo.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#f9a700",
-  "background_color": "#ffffff"
+  "background_color": "#4A4E57"
 }

src/App.css

@@ -51,12 +51,16 @@ h1, span {
   display: grid;
   grid-template-columns: auto auto 1fr;
   column-gap: 2rem;
+  overflow: hidden;
 }
 .legend .header span {
   font-weight: bold;
 }
+.header * {
+  user-select: none;
+}
 div.highlighted {
-  animation: fadeinout 1.5s ease-in-out;
+  animation: fadeinout .8s ease-in-out;
 }
 div > div.begone {
   animation: disappear 1s forwards;
@@ -64,6 +68,10 @@ div > div.begone {
 .entry-letter {
   text-align: center;
 }
+.entry-text {
+  border-radius: 5px;
+  padding: 2px;
+}
 
 @keyframes fadeinout {
   0% {
@@ -74,7 +82,7 @@ div > div.begone {
   50% {
     transform: scale(1.2);
     transform-origin: center;
-    background-color: yellow;
+    background-color: var(--cs-orange);
   }
   100% {
     transform: scale(1);

src/App.tsx

@@ -2,7 +2,7 @@ import { reverse } from 'dns';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import './App.css';
 
-import {prompts, Categories} from './prompts';
+import {prompts, Categories, emojis} from './prompts';
 
 const alphabet = "ABCDEFGHIKLMNOPQRSTUVWXYZ";
 const lskey_prompts = "cs_bingo_prompts-day3";
@@ -19,6 +19,13 @@ const App: React.FC<{}> = () => {
   const [resetCounter, setResetCounter] = useState(0);
   //const [lines, setLines] = useState<[Categories,string][]>([]);
   const [linesP, setLinesP] = useState<number[]>([]);
+  const [emoji, setEmoji] = useState(false);
+  useEffect(() => {
+    const read = localStorage.getItem("emoji");
+    if (read === null) return;
+    const val = JSON.parse(read);
+    setEmoji(val);
+  });
   const saveLines = <T,>(theLines: T[]) => {
     localStorage.setItem(lskey_prompts, JSON.stringify(theLines));
   };
@@ -28,7 +35,7 @@ const App: React.FC<{}> = () => {
   const [highlighted, setHighlighted] = useState<null| number>(null);
   const highlight = (index: number) => {
     setHighlighted(index);
-    setTimeout(() => setHighlighted(null), 1500);
+    setTimeout(() => setHighlighted(null), 800);
     document.getElementById(`letter-${alphabet[index]}`)?.scrollIntoView();
   };
   useEffect(() => {
@@ -115,13 +122,16 @@ const App: React.FC<{}> = () => {
         <div className="header">
           <h2>Letter</h2>
         </div>
-        <div className="header">
+        <div className="header" onDoubleClick={() => setEmoji((old) => {
+          localStorage.setItem("emoji", JSON.stringify(!old));
+          return !old;
+        })}>
           <h2>Goal</h2>
         </div>
         {linesP.map((permutation, index)=> 
            <Fragment key={index}>
               <div className="entry-letter" id={`letter-${alphabet[reverseLookup[index]]}`}>
-                <span>{index}</span>
+                <span>{emoji ? `${emojis[index]}` : index}</span>
               </div>
               <div className="entry-letter" >
                 <span>{alphabet[reverseLookup[index]]}</span>

src/prompts.ts

@@ -1,4 +1,13 @@
 export type Categories = "kills" | "rounds" | "fails" | "epic" | "meta" | "unexpected";
+const emojiToUnicodeEscape = (emoji: string) => {
+    return emoji
+        .split('')
+        .map(char => "\\u" + char.charCodeAt(0).toString(16))
+        .join('');
+}
+//export const emojis = "😆🥹😅😂🥲☺️😇🙃😍😌😉🥰😘😋😜🥸😎🤓🤩🥳🤬😤😭🤯🥵🥶😶‍🌫️😱🙄😴🤮😵😵‍💫🤒🤑🤠🤔💩🙊🙈❤️🤷‍♂️👍🔥🤖".map(emojiToUnicodeEscape);
+export const emojis = ["😀", 
+"😆", "🥹", "😅", "😂", "🥲", "☺️", "😇", "🙃", "😍", "😌", "😉", "🥰", "😘", "😋", "😜", "🥸", "😎", "🤓", "🤩", "🥳", "🤬", "😤", "😭", "🤯", "🥵", "🥶", "😶‍🌫️", "😱", "🙄", "😴", "🤮", "😵", "😵‍💫", "🤒", "🤑", "🤠", "🤔", "💩", "🙊", "🙈", "❤️", "🤷", "‍", "♂️", "👍", "🔥", "🤖"];
 export const prompts: [Categories, string][] = [
   ["kills", "Zeus Kill"],
   ["kills", "Knife Kill"],