Add disabled state for level selector

benjaminbours · Oct 8, 2023 · 73a0e5c · 73a0e5c
1 parent d9a5b5d
commit 73a0e5c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/front/app/Menu/LevelItem.tsx b/front/app/Menu/LevelItem.tsx
@@ -1,11 +1,13 @@
 import { Levels, QueueInfo } from '@benjaminbours/composite-core';
 import React from 'react';
 import { QueueInfoText } from './QueueInfo';
+import classNames from 'classnames';
 
 interface IProps {
     id: Levels;
     name: string;
     img: string;
+    disabled: boolean;
     onClick: (level: Levels) => void;
     queueInfo?: QueueInfo;
 }
@@ -16,12 +18,27 @@ export default function LevelItem({
     img,
     onClick,
     queueInfo,
+    disabled,
 }: IProps) {
+    const cssClass = classNames({
+        'level-item': true,
+        'level-item--disabled': disabled,
+    });
     return (
-        <div className="level-item" onClick={() => onClick(id)}>
+        <div
+            className={cssClass}
+            onClick={() => {
+                if (!disabled) {
+                    onClick(id);
+                }
+            }}
+        >
             <img src={img} alt={`screenshot of the level ${name}`} />
             <div className="queue-space" />
-            <h3>{name}</h3>
+            <div className="level-item__center">
+                <h3>{name}</h3>
+                {disabled && <p>Coming soong</p>}
+            </div>
             <div className="queue-space">
                 {queueInfo && (
                     <QueueInfoText side="light" value={queueInfo.light} />

diff --git a/front/app/Menu/Menu.tsx b/front/app/Menu/Menu.tsx
@@ -257,16 +257,19 @@ export function Menu({ setMainState, mainState }: Props) {
                 id: Levels.CRACK_THE_DOOR,
                 name: 'Crack the door',
                 img: '/crack_the_door.png',
+                disabled: false,
             },
             {
                 id: Levels.LEARN_TO_FLY,
                 name: 'Learn to fly',
                 img: '/learn_to_fly.png',
+                disabled: true,
             },
             {
                 id: Levels.THE_HIGH_SPHERES,
                 name: 'The hight spheres',
                 img: '/the_hight_spheres.png',
+                disabled: true,
             },
         ],
         [],

diff --git a/front/app/styles/levelScene.scss b/front/app/styles/levelScene.scss
@@ -27,6 +27,7 @@
     height: 200px;
     display: flex;
     align-items: center;
+    color: white;
 
     &::after {
         content: '';
@@ -56,15 +57,18 @@
         }
     }
 
+    p,
     h3 {
         position: relative;
-        flex: 2;
         z-index: 10;
-        color: white;
         text-transform: uppercase;
         letter-spacing: 5px;
-        font-size: 24px;
         font-weight: 100;
+    }
+
+    h3 {
+        flex: 2;
+        font-size: 24px;
         width: 100%;
         text-align: center;
         padding: 0 10px;
@@ -102,4 +106,15 @@
             }
         }
     }
+
+    &--disabled {
+        cursor: not-allowed;
+    }
+}
+
+.level-item__center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }