60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import LoginForm from './LoginForm';
|
|
import ScoreCounter from './ScoreCounter';
|
|
|
|
import { useJSONLocalStorage, useLocalStorage } from './hooks/useLocalStorage';
|
|
|
|
import './App.css';
|
|
|
|
const COLUMNS = [1,2,3,4,5,6,7,8,9,10];
|
|
|
|
interface Stats {
|
|
attempts: number;
|
|
scheduledPoops: number;
|
|
selfPoops: number;
|
|
cleanUndies: number;
|
|
streaks: number[];
|
|
currentStreakSince: number;
|
|
};
|
|
|
|
const initialStats:Stats = {
|
|
attempts: 1,
|
|
scheduledPoops: 1,
|
|
selfPoops: 1,
|
|
cleanUndies: 1,
|
|
streaks: [0,0,0,0],
|
|
currentStreakSince: Date.now()
|
|
};
|
|
|
|
function App() {
|
|
|
|
const [stats, setStats] = useJSONLocalStorage<Stats>("stats", initialStats);
|
|
const [name] = useLocalStorage<string>("name", {});
|
|
const [password] = useLocalStorage<string>("password", {});
|
|
const { attempts, scheduledPoops, selfPoops, cleanUndies, streaks, currentStreakSince } = stats;
|
|
|
|
return !name || !password ? <LoginForm /> :(
|
|
<div className="App">
|
|
<div className="score-board">
|
|
Points: <ScoreCounter stats={stats}/>
|
|
</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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<div className="streak-counter"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|