refactor operation area

huoyijie · Nov 7, 2023 · 99061fe · 99061fe
1 parent b1789d2
commit 99061fe
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/src/components/Operation.jsx b/src/components/Operation.jsx
@@ -6,28 +6,31 @@ export default function () {
   const { gameOver, newGame, fallDown } = useContext(Context)
 
   const btnNewGameDisabled = !gameOver
-  const btnFallDownDisabled = gameOver
 
   return (
     <div className='flex flex-col gap-8 items-center'>
 
-      <div className='w-full'>
-        <button className={`w-full border rounded-lg px-6 py-3 bg-slate-400 text-white focus:outline-none ${btnNewGameDisabled ? 'opacity-50' : 'hover:bg-slate-600 active:bg-slate-400'}`} onClick={newGame} disabled={btnNewGameDisabled}>New Game (N)</button>
-      </div>
-
-      <div className='flex flex-col gap-2 items-center'>
-        <div className='border rounded-lg bg-slate-400 text-white px-6 py-3 max-w-min'><ChevronUpIcon className='w-6' /></div>
-        <div className='flex gap-2'>
-          <div className='border rounded-lg bg-slate-400 text-white px-6 py-3 max-w-min'><ChevronLeftIcon className='w-6' /></div>
-          <div className='border rounded-lg bg-slate-400 text-white px-6 py-3 max-w-min'><ChevronDownIcon className='w-6' /></div>
-          <div className='border rounded-lg bg-slate-400 text-white px-6 py-3 max-w-min'><ChevronRightIcon className='w-6' /></div>
+      {gameOver && (
+        <div className='w-full'>
+          <button className='w-full border rounded-lg px-6 py-3 bg-slate-400 text-white focus:outline-none hover:bg-slate-600 active:bg-slate-400' onClick={newGame}>New Game (N)</button>
         </div>
-      </div>
+      )}
 
       {!gameOver && (
-        <div className='w-full'>
-          <button className='w-full border rounded-lg px-6 py-3 bg-slate-400 text-white focus:outline-none hover:bg-slate-600 active:bg-slate-400' onClick={fallDown}>Fall down (Space)</button>
-        </div>
+        <>
+          <div className='flex flex-col gap-2 items-center'>
+            <div className='border rounded-lg bg-gray-300 text-white px-6 py-3 max-w-min'><ChevronUpIcon className='w-6' /></div>
+            <div className='flex gap-2'>
+              <div className='border rounded-lg bg-gray-300 text-white px-6 py-3 max-w-min'><ChevronLeftIcon className='w-6' /></div>
+              <div className='border rounded-lg bg-gray-300 text-white px-6 py-3 max-w-min'><ChevronDownIcon className='w-6' /></div>
+              <div className='border rounded-lg bg-gray-300 text-white px-6 py-3 max-w-min'><ChevronRightIcon className='w-6' /></div>
+            </div>
+          </div>
+
+          <div className='w-full'>
+            <button className='w-full border rounded-lg px-6 py-3 bg-slate-400 text-white focus:outline-none hover:bg-slate-600 active:bg-slate-400' onClick={fallDown}>Fall down (Space)</button>
+          </div>
+        </>
       )}
 
     </div>