jshaver/potty-chart
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add sound and animations

Browse source
This commit is contained in:
John Shaver 2023-01-18 08:19:30 -08:00
parent e36bb1adb2
commit 83cd4b2d78
2 changed files with 96 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/App.css
View file

@ -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
View file

@ -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>