41 lines
924 B
TypeScript
41 lines
924 B
TypeScript
|
import React from 'react';
|
||
|
|
||
|
import { getCheer } from './sound';
|
||
|
|
||
|
import Icon from './Icon';
|
||
|
|
||
|
const COLUMNS = [1,2,3,4,5,6,7,8,9,10];
|
||
|
interface RowProps {
|
||
|
stats: Stats;
|
||
|
setStats: (s: Stats) => void;
|
||
|
name: keyof Stats;
|
||
|
emoji: string;
|
||
|
sound: HTMLAudioElement;
|
||
|
}
|
||
|
|
||
|
const Row = ({stats, setStats, name, emoji, sound}: RowProps) => {
|
||
|
const stat = stats[name];
|
||
|
return <div className={`row ${name}`} onClick={() => {
|
||
|
setStats({...stats, [name]: stat + 1 });
|
||
|
sound.play();
|
||
|
setTimeout(() => getCheer().play(), 1800)
|
||
|
}}>
|
||
|
{COLUMNS.map(i =>
|
||
|
i <= stat ?
|
||
|
<Icon key={i} emoji={emoji} className={name} />
|
||
|
: <div key={i} className={`${name} cell`} />
|
||
|
)}
|
||
|
<div
|
||
|
className="delete cell checked"
|
||
|
onClick={e => {
|
||
|
e.stopPropagation();
|
||
|
setStats({...stats, [name]: Math.max(0, stat - 1)});
|
||
|
}}
|
||
|
>
|
||
|
🚫
|
||
|
</div>
|
||
|
</div>
|
||
|
};
|
||
|
|
||
|
export default Row;
|