Merge pull request #12 from Timur233/SOK-24_game-over-page

[SOK-24] game over
Timur233 · Oct 3, 2024 · f5937d3 · f5937d3
2 parents 2b4debc + 6e1251c
commit f5937d3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/packages/client/src/assets/images/game-over.png b/packages/client/src/assets/images/game-over.png
diff --git a/packages/client/src/pages/Game/Game.scss b/packages/client/src/pages/Game/Game.scss
@@ -151,3 +151,22 @@ $border-color: #70842f;
   inset: 12px;
   background-color: $overlay-color;
 }
+
+.game-over-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  inset: 12px;
+  background-color: $overlay-color;
+  background-image: url('@/assets/images/game-over.png');
+  background-size: cover;
+
+  &__title {
+    font-size: 40px;
+    font-weight: 900;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+  }
+}
diff --git a/packages/client/src/pages/Game/Game.tsx b/packages/client/src/pages/Game/Game.tsx
@@ -84,9 +84,13 @@ export const Game = () => {
               <div className="game-wrapper__decor-hr"></div>
               <div className="game-wrapper__decor-vr"></div>
               Воот тут игра
-              <div className="start-screen">
+              <div className="start-screen" style={{ display: 'none' }}>
                 <Button text="Начать игру" useFixWidth />
               </div>
+              <div className="game-over-screen">
+                <span className="game-over-screen__title">Game Over</span>
+                <Button text="Начать заново" useFixWidth />
+              </div>
             </div>
           </div>
           <div className="column col-4">