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