From f985cc49dab5ecafbcb75056a78e97c2663fba86 Mon Sep 17 00:00:00 2001
From: evermake <vladeryabkin@gmail.com>
Date: Sat, 30 Nov 2024 23:13:01 +0500
Subject: [PATCH] minor style fixes and next level button

---
 frontend/src/api/me.ts                      |  2 +-
 frontend/src/components/mahjong/Mahjong.tsx | 25 ++++++++++++++-------
 frontend/src/components/ui/dialog.tsx       |  4 ++--
 frontend/src/routes/index.tsx               | 10 ++++-----
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/frontend/src/api/me.ts b/frontend/src/api/me.ts
index 21e514f..246cd87 100644
--- a/frontend/src/api/me.ts
+++ b/frontend/src/api/me.ts
@@ -16,7 +16,7 @@ export function useMe() {
     {},
     {
       refetchInterval: 1000 * 60 * 5, // 5 minutes
-      retry: false
+      retry: false,
     },
   )
 
diff --git a/frontend/src/components/mahjong/Mahjong.tsx b/frontend/src/components/mahjong/Mahjong.tsx
index 4e6350d..1402df3 100644
--- a/frontend/src/components/mahjong/Mahjong.tsx
+++ b/frontend/src/components/mahjong/Mahjong.tsx
@@ -2,7 +2,7 @@ import type { DotLottieWorker } from '@lottiefiles/dotlottie-react'
 import type { Coordinate, Tile as TileT } from './game'
 import { $api } from '@/api'
 import { useMe } from '@/api/me'
-import { getLevelById, type LevelInfo } from '@/components/mahjong/levels.ts'
+import { getLevelById, type LevelInfo, levels } from '@/components/mahjong/levels.ts'
 import { calculateScore } from '@/components/mahjong/score.ts'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.tsx'
@@ -426,7 +426,7 @@ export function Mahjong({ level }: { level: LevelInfo }) {
       </Dialog>
 
       <Dialog open={finishResults !== null} onOpenChange={() => {}}>
-        <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-[425px] lg:max-w-[625px]" noCloseIcon>
+        <DialogContent className="max-h-[calc(100vh-2rem)] min-w-0 max-w-[min(100%-24px,425px)] overflow-y-auto rounded-lg lg:max-w-[625px]" noCloseIcon>
           <DialogHeader>
             <DialogTitle>Поздравляем!</DialogTitle>
           </DialogHeader>
@@ -451,6 +451,8 @@ function Results({
   score?: number
 }) {
   const level = getLevelById(levelId)
+  const levelIndex = levels.findIndex(l => l.id === levelId)
+  const nextLevel = levels[levelIndex + 1]
 
   const me = useMe()
   const refSent = useRef(false)
@@ -540,7 +542,7 @@ function Results({
                 </div>
               </CardContent>
               <CardHeader className="px-4 py-2">
-                <CardTitle className="text-center text-lg">
+                <CardTitle className="text-center text-sm lg:text-lg">
                   Без подсказок!
                 </CardTitle>
               </CardHeader>
@@ -555,7 +557,7 @@ function Results({
                 </div>
               </CardContent>
               <CardHeader className="px-4 py-2">
-                <CardTitle className="text-center text-lg">
+                <CardTitle className="text-center text-sm lg:text-lg">
                   Без лишних кликов!
                 </CardTitle>
               </CardHeader>
@@ -570,7 +572,7 @@ function Results({
                 </div>
               </CardContent>
               <CardHeader className="px-4 py-2">
-                <CardTitle className="text-center text-lg">
+                <CardTitle className="text-center text-sm lg:text-lg">
                   Очень быстро!
                 </CardTitle>
               </CardHeader>
@@ -585,7 +587,7 @@ function Results({
                 </div>
               </CardContent>
               <CardHeader className="px-4 py-2">
-                <CardTitle className="text-center text-lg">
+                <CardTitle className="text-center text-sm lg:text-lg">
                   Идеально!
                 </CardTitle>
               </CardHeader>
@@ -625,8 +627,15 @@ function Results({
           ))}
         </div>
       </CardContent>
-      <CardFooter>
-        <Button asChild className="w-full">
+      <CardFooter className="flex gap-2">
+        {nextLevel && (
+          <Button asChild className="w-full">
+            <Link to="/info" search={{ level: nextLevel.id }}>
+              Следующий уровень
+            </Link>
+          </Button>
+        )}
+        <Button asChild className="w-full" variant="outline">
           <Link to="/">
             В меню
           </Link>
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 9e20bc8..84909bf 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -29,7 +29,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { noCloseIcon?: boolean}
->(({ className, children, ...props }, ref) => (
+>(({ className, children, noCloseIcon, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      {!props.noCloseIcon && (
+      {!noCloseIcon && (
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <span className="iconify ph--x h-4 w-4"></span>
         <span className="sr-only">Close</span>
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index b89bbf1..118e5f8 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -22,10 +22,10 @@ function RouteComponent() {
         <div className="mt-8 flex justify-center">
           <img src="/favicon.png" className="w-48" />
         </div>
-        <h1 className="mb-8 mt-6 text-center text-4xl font-bold">
+        <h1 className="mb-8 mt-6 text-center text-3xl font-bold lg:text-4xl">
           АВТОМАДЖИК
         </h1>
-        <div className="mb-8 mt-6 px-4 text-center text-xl font-semibold">
+        <div className="mb-8 mt-6 px-4 text-center text-lg text-muted-foreground lg:text-xl">
           Сыграйте в увлекательную игру и ближе познакомьтесь с ведущими автомобильными компаниями мира
         </div>
         <div className="flex flex-row flex-wrap justify-center gap-8">
@@ -49,8 +49,8 @@ function LevelCard({ level }: { level: LevelInfo }) {
   const isUnlocked = !level.requiredLevel || results?.some(result => result.level_name === level.requiredLevel || result.level_name === level.id)
 
   return (
-    <Card className="max-w-2xl bg-black bg-opacity-40 backdrop-blur-md transition-all hover:border-[#00D0C5]">
-      <CardHeader>
+    <Card className="flex max-w-[min(300px,100%-24px)] flex-col bg-black bg-opacity-40 backdrop-blur-md transition-all hover:border-[#00D0C5]">
+      <CardHeader className="grow">
         <CardTitle>{level.title}</CardTitle>
         <CardDescription>
           {diceCount}
@@ -62,7 +62,7 @@ function LevelCard({ level }: { level: LevelInfo }) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="mx-auto flex aspect-video h-[175px] items-center justify-center rounded-xl border border-[rgba(255,255,255,0.075)] bg-[#191919] p-2 shadow-inner lg:h-[200px]">
+        <div className="flex aspect-video w-full items-center justify-center rounded-xl border border-[rgba(255,255,255,0.075)] bg-[#191919] p-2 shadow-inner">
           <img
             src={`/preview/${level.id}.png`}
             className="size-full rounded-xl object-contain object-center"