diff --git a/src/App.css b/src/App.css
index 9883cc6..dbf5259 100644
--- a/src/App.css
+++ b/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;
diff --git a/src/App.tsx b/src/App.tsx
index b4dd5ef..c51634e 100644
--- a/src/App.tsx
+++ b/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 ? :(
-
- Points:
+
+
Hello Pax!
+
+ Points:
+
- setStats({...stats, attempts: attempts + 1 })}>
- {COLUMNS.map(i =>
{i <= attempts ? "🚽" : ""}
)}
+
{
+ setStats({...stats, attempts: attempts + 1 });
+ flush.play();
+ setTimeout(() => getCheer().play(), 1800)
+ }}>
+ {COLUMNS.map(i =>
+ i <= attempts ?
+
+ :
+ )}
+
{
+ e.stopPropagation();
+ setStats({...stats, attempts: Math.max(0, attempts - 1)});
+ console.log("BLARG");
+ }}
+ >
+ 🚫
+
-
setStats({...stats, scheduledPoops: scheduledPoops + 1 })}>
- {COLUMNS.map(i =>
{i <= scheduledPoops ? "💩" : ""}
)}
+
{
+ setStats({...stats, scheduledPoops: scheduledPoops + 1 });
+ toot.play();
+ setTimeout(() => getCheer().play(), 1800)
+ }}>
+ {COLUMNS.map(i =>
+ i <= scheduledPoops ?
+
+ :
+ )}
+
{
+ e.stopPropagation();
+ setStats({...stats, scheduledPoops: Math.max(0, scheduledPoops - 1)});
+ }}
+ >
+ 🚫
+
-
setStats({...stats, selfPoops: selfPoops + 1 })}>
- {COLUMNS.map(i =>
{i <= selfPoops ? "💩" : ""}
)}
+
{
+ setStats({...stats, selfPoops: selfPoops + 1 });
+ toot.play();
+ setTimeout(() => getCheer().play(), 1800)
+ }}>
+ {COLUMNS.map(i =>
+ i <= selfPoops ?
+
+ :
+ )}
+
{
+ e.stopPropagation();
+ setStats({...stats, selfPoops: Math.max(0, selfPoops - 1)});
+ }}
+ >
+ 🚫
+
-
setStats({...stats, cleanUndies: cleanUndies + 1 })}>
- {COLUMNS.map(i =>
{i <= cleanUndies ? "🩲" : ""}
)}
+
{
+ setStats({...stats, cleanUndies: cleanUndies + 1 })
+ starman.play();
+ setTimeout(() => getCheer().play(), 1800)
+ }}>
+ {COLUMNS.map(i =>
+ i <= cleanUndies ?
+
+ :
+ )}
+
{
+ e.stopPropagation();
+ setStats({...stats, cleanUndies: Math.max(0, cleanUndies - 1)});
+ }}
+ >
+ 🚫
+