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}
/>
+
+
+
+
+
+
+ >
+ )
+}
+
+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 (
-
-
-
-
-
-
+
)
}
-
-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: ['Внедорожник'],
},
}