AAAA

apps/frontend/src/routes/index.lazy.tsx

@@ -1,4 +1,4 @@
-import { createLazyFileRoute, Link } from "@tanstack/react-router";
+import { createLazyFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { SectionHello } from "~/components/section-hello";
 import { Hero } from "~/components/hero-old";
 
@@ -14,6 +14,7 @@ export const Route = createLazyFileRoute("/")({
 });
 
 function Index() {
+  const navigate = useNavigate({ from: "/" });
   return (
     <main>
       <div className={styles["wrapper"]}>
@@ -31,11 +32,12 @@ function Index() {
                 </p>
               </div>
               <div className={styles["hero__actions"]}>
-                <Button variant="filled" leadingIcon={<MaterialSymbol name="stadia_controller" />} label="Играть!" />
+                {/* <Button variant="filled" leadingIcon={<MaterialSymbol name="stadia_controller" />} label="Играть!" /> */}
                 <ActionButton
+                  onClick={() => navigate({ to: "/play" })}
                   icon={<ArrowForward />}
                   label="Играть!" />
-                <HeroButton />
+                {/* <HeroButton /> */}
               </div>
             </div>
           </Theme>

apps/frontend/src/routes/play/index.module.sass

@@ -168,7 +168,7 @@
   display: flex
   align-items: center
   justify-content: center
-  gap: 16px
+  gap: 24px
 
   padding-inline: 16px
   padding-block: 24px
@@ -180,6 +180,12 @@
       color: star4.color(primary)
     &--error
       color: star4.color(error)
+  &__answers
+    display: flex
+    flex-direction: column
+    align-items: stretch
+    justify-content: center
+    gap: 16px
   &__answer
     border-radius: star4.shape(medium)
     background-color: star4.color(surface-container-highest)

apps/frontend/src/routes/play/index.tsx

@@ -9,6 +9,7 @@ import introImage from "~/assets/images/person.jpg";
 import homeImage from "~/assets/images/home.jpeg";
 import shopImage from "~/assets/images/shop.jpeg";
 import streetImage from "~/assets/images/street.jpeg";
+import clsx from "clsx";
 
 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -293,19 +294,26 @@ const EndingComponent = function(
   return (
     <div>
       {session.data.result === "win" && (
-        <h1>
+        <h1 className={clsx(
+          styles["ending__heading"],
+          styles["ending__heading--success"],
+
+        )}>
           Победа!
         </h1>
       )}
       {session.data.result === "lose" && (
-        <h1>
+        <h1 className={clsx(
+          styles["ending__heading"],
+          styles["ending__heading--error"],
+        )}>
           Поражение...
         </h1>
       )}
-      <div>
+      <div className={styles["ending__answers"]}>
         {answers.map(
           (answer, index) => (
-            <div className={styles["ending__answer"]}>
+            <div key={index} className={styles["ending__answer"]}>
               {answer}
             </div>
           )