diff --git a/frontend/src/components/mahjong/Controls.tsx b/frontend/src/components/mahjong/Controls.tsx index eb4fb1d..a08680a 100644 --- a/frontend/src/components/mahjong/Controls.tsx +++ b/frontend/src/components/mahjong/Controls.tsx @@ -1,4 +1,5 @@ import { cn } from '@/lib/utils' +import React, { useEffect, useState } from 'react' import useSound from 'use-sound' import clickSound from './assets/click.mp3' import styles from './Mahjong.module.scss' @@ -16,27 +17,60 @@ export function Controls({ platesMiddle, platesTrailing, className, + startTime, }: { platesLeading?: Plate[] platesMiddle?: Plate[] platesTrailing?: Plate[] className?: string + startTime: number }) { return (
- {platesLeading && } - {platesMiddle && } - {platesTrailing && } + {platesLeading && } + {platesMiddle && } + {platesTrailing && }
) } +function Timer_({ startTime }: { startTime: number }) { + const [elapsedTime, setElapsedTime] = useState(0) + + useEffect(() => { + const interval = setInterval(() => { + setElapsedTime(Date.now() - startTime) + }, 1000) + return () => clearInterval(interval) + }, [startTime]) + + return ( +
+
+ +
+
+ {new Date(elapsedTime).toISOString().substring(14, 19)} +
+
+ + ) +} + +const Timer = React.memo(Timer_) + function PlatesGroup({ plates, className, + startTime, }: { plates: Plate[] className?: string + startTime: number }) { const [playClick] = useSound(clickSound) @@ -55,6 +89,7 @@ function PlatesGroup({ role={plate.clickable ? 'button' : undefined} tabIndex={plate.clickable ? 0 : undefined} > + {plate.id === 'time' ? : null} {plate.items.map((item, i) => (
{item.icon &&
{item.icon}
} diff --git a/frontend/src/components/mahjong/Mahjong.tsx b/frontend/src/components/mahjong/Mahjong.tsx index 6af18d0..4e6350d 100644 --- a/frontend/src/components/mahjong/Mahjong.tsx +++ b/frontend/src/components/mahjong/Mahjong.tsx @@ -43,7 +43,6 @@ const MAX_SCALE = 1.25 export function Mahjong({ level }: { level: LevelInfo }) { const navigate = useNavigate() const [startTime] = useState(() => Date.now()) - const [elapsedTime, setElapsedTime] = useState(0) const [tiles, setTiles] = useState([]) const [selected, setSelected] = useState(null) @@ -111,13 +110,6 @@ export function Mahjong({ level }: { level: LevelInfo }) { } }, [mergedAt, lottie]) - useEffect(() => { - const interval = setInterval(() => { - setElapsedTime(Date.now() - startTime) - }, 1000) - return () => clearInterval(interval) - }, [startTime]) - useEffect(() => { if (tiles.length === 0) { setFinishResults({ @@ -281,7 +273,6 @@ export function Mahjong({ level }: { level: LevelInfo }) { id: 'time', items: [ // mm:ss - { icon: , text: new Date(elapsedTime).toISOString().substring(14, 19) }, { icon: , text: tiles.length.toString() }, { icon: , text: score.toString() }, ], @@ -321,6 +312,7 @@ export function Mahjong({ level }: { level: LevelInfo }) { }, }, ]} + startTime={startTime} />
+ + +
+ {brand} +
+ + + ) +} + +const BrandTile = React.memo(_BrandTile) + +export function Tile({ className, brand, closed, @@ -21,7 +45,6 @@ function _({ coord: Coordinate onClick?: () => void }) { - const imgPath = `/logos/${brand}-logo.png` return (
- - -
- {brand} -
- +
) } - -export const Tile = memo(_) diff --git a/frontend/src/components/mahjong/brands.ts b/frontend/src/components/mahjong/brands.ts index 1fa07fa..567a9d3 100644 --- a/frontend/src/components/mahjong/brands.ts +++ b/frontend/src/components/mahjong/brands.ts @@ -234,18 +234,21 @@ export const brands = { title: 'Kamaz', url: 'logos/kamaz-logo.png', description: 'Крупнейший российский производитель грузовиков, известный своими победами в ралли Дакар и надежной спецтехникой для сложных условий.', + history: 'Основан в 1969 году. Первая победа в ралли Дакар в 1988 году. Специализируется на грузовиках и спецтехнике.', types: ['Грузовики'], }, 'lada': { title: 'Lada', url: 'logos/lada-logo.png', description: 'Крупнейший российский автопроизводитель, выпускающий доступные и практичные автомобили. Известен моделями Granta, Vesta и легендарной Niva.', + history: 'Основан в 1966 году как Волжский автомобильный завод. Lada Niva 1977 года стала первым внедорожником массового производства в СССР.', types: ['Компактный', 'Внедорожник'], }, 'uaz': { title: 'UAZ', url: 'logos/uaz-logo.png', description: 'Российский производитель легендарных внедорожников повышенной проходимости. Модели Hunter и Patriot популярны среди любителей бездорожья.', + history: 'Основан в 1941 году. Первый автомобиль УАЗ-469 выпущен в 1971 году. Специализируется на внедорожниках и коммерческой технике.', types: ['Внедорожник'], }, }