From 6055930198d486fae95aa72047c152028804afaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dhiego=20Cassiano=20Foga=C3=A7a=20Barbosa?=
 <modscleo4@outlook.com>
Date: Fri, 6 May 2022 00:25:58 -0300
Subject: [PATCH] Improve UI - Only block Singleplayer/Engine Analysis when
 loading engine

---
 public/index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 66f2ae6..1677744 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,7 +31,7 @@
     <script type="text/javascript" src="js/theme.js"></script>
 
     <div id="app">
-        <div v-if="!engine.loaded" class="blur-background"></div>
+        <!-- <div v-if="!engine.loaded" class="blur-background"></div> -->
 
         <div class="modal fade" id="modal" data-bs-backdrop="static" data-bs-keyboard="false"
              tabindex="-1" aria-labelledby="modal" aria-hidden="true">
@@ -142,7 +142,7 @@ <h1>Chess.js</h1>
 
         <div v-if="!game.start" class="mainMenu">
             <div class="gamemodes" v-if="!game.gamemode">
-                <button v-if="analysisEnabled" type="button" class="btn btn-secondary"
+                <button v-if="analysisEnabled" type="button" class="btn btn-secondary" :disabled="!engine.loaded"
                         @click="game.gamemode = 'sp'; selectMode = false; selectVariant = true; createGame = true;">
                     Singleplayer (vs Engine)</button>
                 <button type="button" class="btn btn-primary"
@@ -204,16 +204,16 @@ <h1>Chess.js</h1>
                                required />
                         <label for="inputPlayerColor">Jogar de:</label>
                         <div class="playerColor">
-                            <button type="button" class="btn btn-secondary" @click="game.playerColor = 'white'"
-                                    :class="{'active': game.playerColor === 'white'}">
+                            <button type="button" class="btn" @click="game.playerColor = 'white'"
+                                    :class="[game.playerColor === 'white' ? 'active btn-primary' : 'btn-secondary']">
                                 <img src="assets/KingW.png" alt="White">
                             </button>
-                            <button type="button" class="btn btn-secondary" @click="game.playerColor = 'black'"
-                                    :class="{'active': game.playerColor === 'black'}">
+                            <button type="button" class="btn" @click="game.playerColor = 'black'"
+                                    :class="[game.playerColor === 'black' ? 'active btn-primary' : 'btn-secondary']">
                                 <img src="assets/KingB.png" alt="Black">
                             </button>
-                            <button type="button" class="btn btn-secondary random" @click="game.playerColor = 'random'"
-                                    :class="{'active': game.playerColor === 'random'}">
+                            <button type="button" class="btn random" @click="game.playerColor = 'random'"
+                                    :class="[game.playerColor === 'random' ? 'active btn-primary' : 'btn-secondary']">
                                 <img src="assets/KingW.png" alt="White">
                                 <img src="assets/KingB.png" alt="Black">
                             </button>
@@ -440,8 +440,8 @@ <h1>Chess.js</h1>
                     <div class="engine">
                         <p v-if="engine.calculating" class="calculating">Calculando...</p>
 
-                        <template v-if="analysisEnabled && ['spec', 'analysis'].includes(game.gamemode)">
-                            <div v-if="engine" class="labels">
+                        <template v-if="engine.loaded && analysisEnabled && ['spec', 'analysis'].includes(game.gamemode)">
+                            <div class="labels">
                                 <span>{{ engine.name }} {{ engine.ver }} <span
                                           class="tag">{{ engine.tag }}</span></span>
                                 <span>Profundidade: {{ currDepth }}/{{ config.depth }}</span>