Add sound and animations
This commit is contained in:
parent
e36bb1adb2
commit
83cd4b2d78
2 changed files with 96 additions and 11 deletions
11
src/App.css
11
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;
|
||||
|
|
96
src/App.tsx
96
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">
|
||||
Points: <ScoreCounter stats={stats}/>
|
||||
<div className="header">
|
||||
<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 })}>
|
||||
{COLUMNS.map(i => <div className={`attempt cell ${i <= attempts ? "checked" : ""}`}>{i <= attempts ? "🚽" : ""}</div>)}
|
||||
<div className="row attempt" onClick={() => {
|
||||
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 })}>
|
||||
{COLUMNS.map(i => <div className={`scheduled cell ${i <= scheduledPoops ? "checked" : ""}`}>{i <= scheduledPoops ? "💩" : ""}</div>)}
|
||||
<div className="row scheduled-poops" onClick={() => {
|
||||
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 })}>
|
||||
{COLUMNS.map(i => <div className={`self cell ${i <= selfPoops ? "checked" : ""}`}>{i <= selfPoops ? "💩" : ""}</div>)}
|
||||
<div className="row self-poops" onClick={() => {
|
||||
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 })}>
|
||||
{COLUMNS.map(i => <div className={`clean-undies cell ${i <= cleanUndies ? "checked" : ""}`}>{i <= cleanUndies ? "🩲" : ""}</div>)}
|
||||
<div className="row clean-undies" onClick={() => {
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue