Add sound and animations

src/App.css

@@ -3,7 +3,11 @@ body {
   color: #161a19; 
 }
 
-.score-board {
+.header {
+  display: flex;
+}
+
+.name-plate, .score-board {
   font-size: 75px;
   padding: 30px;
   margin: 20px 30px;
@@ -12,6 +16,11 @@ body {
   box-shadow: 3px 3px 15px 0px rgba(10,11,25,0.16);
   border-radius: 5px;
 }
+
+.score-board {
+  flex-grow:1;
+}
+
 .row {
   display: flex;
   font-size: 50px;

src/App.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
+import {useSpring, animated} from '@react-spring/web';
 
 import LoginForm from './LoginForm';
 import ScoreCounter from './ScoreCounter';
+import Icon from './Icon';
 
 import { useJSONLocalStorage, useLocalStorage } from './hooks/useLocalStorage';
+import {toot, starman, flush, getCheer} from './sound';
 
 import './App.css';
 
+
 const COLUMNS = [1,2,3,4,5,6,7,8,9,10];
 
 interface Stats {
@@ -36,20 +40,92 @@ function App() {
 
   return !name || !password ? <LoginForm /> :(
     <div className="App">
-      <div className="score-board">
+      <div className="header">
-        Points: <ScoreCounter stats={stats}/>
+        <div className="name-plate">Hello Pax!</div>
+        <div className="score-board">
+          Points: <ScoreCounter stats={stats}/>
+        </div>
       </div>
-      <div className="row attempt" onClick={() => setStats({...stats, attempts: attempts + 1 })}>
+      <div className="row attempt" onClick={() => {
-        {COLUMNS.map(i => <div className={`attempt cell ${i <= attempts ? "checked" : ""}`}>{i <= attempts ? "🚽" : ""}</div>)}
+        setStats({...stats, attempts: attempts + 1 });
+        flush.play();
+        setTimeout(() => getCheer().play(), 1800)
+      }}>
+        {COLUMNS.map(i =>
+          i <= attempts ?
+            <Icon key={i} emoji="🚽" className="attempt" />
+            : <div key={i} className="attempt cell"/>
+        )}
+        <div
+          className="delete cell checked"
+          onClick={e => {
+            e.stopPropagation();
+            setStats({...stats, attempts: Math.max(0, attempts - 1)});
+            console.log("BLARG");
+          }}
+        >
+            🚫
+        </div>
       </div>
-      <div className="row scheduled-poops" onClick={() => setStats({...stats, scheduledPoops: scheduledPoops + 1 })}>
+      <div className="row scheduled-poops" onClick={() => {
-        {COLUMNS.map(i => <div className={`scheduled cell ${i <= scheduledPoops ? "checked" : ""}`}>{i <= scheduledPoops ? "💩" : ""}</div>)}
+        setStats({...stats, scheduledPoops: scheduledPoops + 1 });
+        toot.play();
+        setTimeout(() => getCheer().play(), 1800)
+      }}>
+        {COLUMNS.map(i =>
+          i <= scheduledPoops ?
+            <Icon key={i} emoji="💩" className="scheduled" />
+            : <div key={i} className="scheduled cell"/>
+        )}
+        <div
+          className="delete cell checked"
+          onClick={e => {
+            e.stopPropagation();
+            setStats({...stats, scheduledPoops: Math.max(0, scheduledPoops - 1)});
+          }}
+        >
+            🚫
+        </div>
       </div>
-      <div className="row self-poops" onClick={() => setStats({...stats, selfPoops: selfPoops + 1 })}>
+      <div className="row self-poops" onClick={() => {
-        {COLUMNS.map(i => <div className={`self cell ${i <= selfPoops ? "checked" : ""}`}>{i <= selfPoops ? "💩" : ""}</div>)}
+        setStats({...stats, selfPoops: selfPoops + 1 });
+        toot.play();
+        setTimeout(() => getCheer().play(), 1800)
+      }}>
+        {COLUMNS.map(i =>
+          i <= selfPoops ?
+            <Icon emoji="💩" className="self" />
+            : <div key={i} className="self cell"/>
+        )}
+        <div
+          className="delete cell checked"
+          onClick={e => {
+            e.stopPropagation();
+            setStats({...stats, selfPoops: Math.max(0, selfPoops - 1)});
+          }}
+        >
+            🚫
+        </div>
       </div>
-      <div className="row clean-undies" onClick={() => setStats({...stats, cleanUndies: cleanUndies + 1 })}>
+      <div className="row clean-undies" onClick={() => {
-        {COLUMNS.map(i => <div className={`clean-undies cell ${i <= cleanUndies ? "checked" : ""}`}>{i <= cleanUndies ? "🩲" : ""}</div>)}
+        setStats({...stats, cleanUndies: cleanUndies + 1 })
+        starman.play();
+        setTimeout(() => getCheer().play(), 1800)
+      }}>
+        {COLUMNS.map(i =>
+          i <= cleanUndies ?
+            <Icon emoji="🩲" className="clean-undies" />
+            : <div key={i} className="clean-undies cell"/>
+        )}
+        <div
+          className="delete cell checked"
+          onClick={e => {
+            e.stopPropagation();
+            setStats({...stats, cleanUndies: Math.max(0, cleanUndies - 1)});
+          }}
+        >
+            🚫
+        </div>
       </div>
       <div className="streak-counter"></div>
     </div>