Premiers ajustements UI

public/index.html

@@ -43,7 +43,7 @@
           </a>
         </div>
       </header>
-      <div id="notification"> </div>
+      <div id="notification-area"><div id="notification-label"></div></div>
       <div id="panel-area">
         <div id="panel-fenetre">
           <div id="panel-fenetre-header">
@@ -56,7 +56,7 @@
               </a>
             </div>
           </div>
-          <div id="panel-fenetre-notification"> </div>
+          <div id="panel-fenetre-notification-area"><div id="panel-fenetre-notification-label"></div></div>
           <div id="panel-fenetre-contenu"></div>
         </div>
       </div>

public/jeu.css

@@ -2,9 +2,9 @@
   --taille-cellule: 48px;
   --epaisseur-bordure-cellule: 1px;
   --epaisseur-padding-cellule: 2px;
-  --couleur-bien-place: #e7002a;
+  --couleur-bien-place: rgb(231, 0, 42);
-  --couleur-mal-place: #ffbd00;
+  --couleur-mal-place: rgb(255, 189, 0);
-  --couleur-fond-grille: #0077c7;
+  --couleur-fond-grille: rgb(0, 119, 199);
   --couleur-non-trouve: rgb(112, 112, 112);
   --couleur-icone: rgb(200, 200, 200);
   --couleur-fond-rgb: 43, 43, 43;
@@ -12,21 +12,33 @@
   --couleur-bordure: rgb(200, 200, 200);
   --couleur-bordure-grille: #ffffff;
   --couleur-police: #ffffff;
-  --couleur-police-grille: #ffffff;
+  --couleur-police-grille: rgb(255, 255, 255);
+  --couleur-police-grille-pas-curseur: rgb(255, 255, 255, 0.65);
+  --couleur-lettre-speciale: rgb(75, 75, 75);
+  --couleur-lettre-survole: rgba(75, 75, 75, 0.65);
+  --couleur-lettre-speciale-survole: rgba(75, 75, 75, 0.65);
+  --couleur-lettre-survole-bien-place: rgba(231, 0, 42, 0.65);
+  --couleur-lettre-survole-mal-place: rgba(255, 189, 0, 0.65);
   --taille-icone: 24px;
   --taille-icone-zone: 48px;
 }
 
 @font-face {
-  font-family: "Roboto Medium";
+  font-family: "Roboto Regular";
-  src: url("/fonts/Roboto-Medium.ttf");
+  src: url("/fonts/Roboto-Regular.ttf");
+}
+
+@font-face {
+  font-family: "RobotoMono Regular";
+  src: url("/fonts/RobotoMono-Regular.ttf");
 }
 
 body {
-  font-family: "Roboto Medium", Ubuntu, Arial, Helvetica, sans-serif;
+  font-family: "Roboto Regular", Ubuntu, Arial, Helvetica, sans-serif;
   font-size: 32px;
   background-color: var(--couleur-fond);
-  height: 100vh;
+  min-height: 100vh;
+  min-height: -webkit-fill-available; /* Seulement pour safari et sa flotting bar */
   text-align: center;
   color: var(--couleur-police);
   margin: 0;
@@ -86,7 +98,7 @@ h1 {
   margin-left: auto;
   margin-right: auto;
   background-color: var(--couleur-fond-grille);
-  min-height: calc(6 * var(--taille-cellule) + 12 * var(--epaisseur-bordure-cellule));
+  min-height: calc(6 * var(--taille-cellule) + 10 * var(--epaisseur-bordure-cellule));
 }
 
 .grille table {
@@ -101,7 +113,7 @@ h1 {
   position: relative;
   padding: var(--epaisseur-padding-cellule);
   color: var(--couleur-police-grille);
-  border: 1px solid var(--couleur-bordure-grille);
+  border: var(--epaisseur-bordure-cellule) solid var(--couleur-bordure-grille);
   z-index: 0;
 }
 
@@ -141,7 +153,7 @@ h1 {
 #input-area {
   margin: 0.5em auto 2em;
   max-width: 100%;
-  width: calc(100% - 20px);
+  width: calc(100% - 5px);
   max-width: 500px;
 }
 
@@ -168,7 +180,7 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: monospace;
+  font-family: "RobotoMono Regular", monospace;
 }
 
 .input-lettre.input-lettre-vide,
@@ -197,6 +209,17 @@ h1 {
 .input-lettre:hover,
 .input-lettre:active {
   cursor: pointer;
+  background-color: var(--couleur-lettre-survole);
+}
+
+.input-lettre.lettre-bien-place:hover,
+.input-lettre.lettre-bien-place:active {
+  background-color: var(--couleur-lettre-survole-bien-place);
+}
+
+.input-lettre.lettre-mal-place:hover,
+.input-lettre.lettre-mal-place:active {
+  background-color: var(--couleur-lettre-survole-mal-place);
 }
 
 .input-lettre.input-lettre-vide:hover,
@@ -204,6 +227,27 @@ h1 {
   cursor: initial;
 }
 
+.input-lettre.input-lettre-effacer {
+  font-size: 28px;
+}
+
+.input-lettre.input-lettre-effacer,
+.input-lettre.input-lettre-entree {
+  background-color: var(--couleur-lettre-speciale);
+  border-color: var(--couleur-lettre-speciale);
+}
+
+.input-lettre.input-lettre-effacer:active,
+.input-lettre.input-lettre-effacer:hover,
+.input-lettre.input-lettre-entree:active,
+.input-lettre.input-lettre-entree:hover {
+  background-color: var(--couleur-lettre-speciale-survole);
+}
+
+.grille td.cellule-lettre-pas-curseur {
+  color: var(--couleur-police-grille-pas-curseur);
+}
+
 .regles-panel table {
   font-size: 32px;
 }
@@ -223,10 +267,24 @@ h1 {
   color: var(--couleur-police);
 }
 
-#notification,
+#notification-area,
-#panel-fenetre-notification {
+#panel-fenetre-notification-area {
   opacity: 0;
   transition: opacity linear 1s;
+  min-height: 50px;
+}
+
+#notification-label,
+#panel-fenetre-notification-label {
+  font-size: 22px;
+  background-color: #bdbdbd;
+  width: calc(100% - 5px);
+  max-width: 500px;
+  margin: 0px auto;
+  border-radius: 0.5em;
+  padding: 5px 0px;
+  color: black;
+  font-weight: bold;
 }
 
 #panel-area {

ts/grille.ts

@@ -39,13 +39,20 @@ export default class Grille {
         if (nbMot < this._motActuel || (nbMot === this._motActuel && mot.length !== 0)) {
           if (mot.length <= nbLettre) {
             contenuCellule = ".";
+            cellule.classList.add("cellule-lettre-pas-curseur");
           } else {
             contenuCellule = mot[nbLettre].toUpperCase();
+            cellule.classList.remove("cellule-lettre-pas-curseur");
           }
         } else if (nbMot === this._motActuel) {
           let lettreIndice = this._indice[nbLettre];
-          if (lettreIndice !== undefined) contenuCellule = lettreIndice;
+          if (lettreIndice !== undefined) {
-          else contenuCellule = ".";
+            contenuCellule = lettreIndice;
+            cellule.classList.remove("cellule-lettre-pas-curseur");
+          } else {
+            contenuCellule = ".";
+            cellule.classList.add("cellule-lettre-pas-curseur");
+          }
         }
         if (this._resultats.length > nbMot && this._resultats[nbMot][nbLettre]) {
           let resultat = this._resultats[nbMot][nbLettre];

ts/input.ts

@@ -51,6 +51,7 @@ export default class Input {
           case "_effacer":
             lettreDiv.dataset["lettre"] = lettre;
             lettreDiv.innerText = "⌫";
+            lettreDiv.classList.add("input-lettre-effacer");
             break;
           case "_entree":
             lettreDiv.innerText = "↲";

ts/notificationMessage.ts

@@ -1,28 +1,31 @@
 export default class NotificationMessage {
-  private static _notificationArea: HTMLElement = document.getElementById("notification") as HTMLElement;
+  private static _notificationArea: HTMLElement = document.getElementById("notification-area") as HTMLElement;
-  private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification") as HTMLElement;
+  private static _notificationLabel: HTMLElement = document.getElementById("notification-label") as HTMLElement;
+  private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification-area") as HTMLElement;
+  private static _notificationPanelLabel: HTMLElement = document.getElementById("panel-fenetre-notification-label") as HTMLElement;
   private static _currentTimeout: NodeJS.Timeout | undefined;
+
   public static ajouterNotification(message: string): void {
-    this.ajouterNotificationDiv(this._notificationArea, message);
+    this.ajouterNotificationDiv(this._notificationArea, this._notificationLabel, message);
   }
 
   public static ajouterNotificationPanel(message: string): void {
-    this.ajouterNotificationDiv(this._notificationPanelArea, message);
+    this.ajouterNotificationDiv(this._notificationPanelArea, this._notificationPanelLabel, message);
   }
 
-  private static ajouterNotificationDiv(div: HTMLElement, message: string): void {
+  private static ajouterNotificationDiv(divArea: HTMLElement, divLabel: HTMLElement, message: string): void {
     if (this._currentTimeout) {
       clearTimeout(this._currentTimeout);
       this._currentTimeout = undefined;
     }
-    div.innerHTML = message;
+    divLabel.innerHTML = message;
-    div.style.opacity = "1";
+    divArea.style.opacity = "1";
     this._currentTimeout = setTimeout(
       (() => {
-        div.style.opacity = "0";
+        divArea.style.opacity = "0";
         this._currentTimeout = setTimeout(
           (() => {
-            div.innerHTML = " ";
+            divLabel.innerHTML = "";
             this._currentTimeout = undefined;
           }).bind(this),
           1000

ts/themeManager.ts

@@ -10,36 +10,49 @@ export default class ThemeManager {
     const root = document.documentElement;
     switch (theme) {
       case Theme.Clair:
-        root.style.setProperty("--couleur-bien-place", "#e7002a");
-        root.style.setProperty("--couleur-mal-place", "#ffbd00");
-        root.style.setProperty("--couleur-fond-rgb", "255, 254, 246");
-        root.style.setProperty("--couleur-police", "#000000");
-        root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
-        root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
-        break;
       case Theme.ClairAccessible:
-        root.style.setProperty("--couleur-bien-place", "#096800");
+        root.style.setProperty("--couleur-fond-rgb", "245, 245, 220");
-        root.style.setProperty("--couleur-mal-place", "#db7c00");
-        root.style.setProperty("--couleur-fond-rgb", "255, 254, 246");
         root.style.setProperty("--couleur-police", "#000000");
         root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
         root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
-        break;
+        root.style.setProperty("--couleur-lettre-speciale", "rgb(210, 210, 210)");
-      case Theme.SombreAccessible:
+        root.style.setProperty("--couleur-lettre-survole", "rgb(140, 140, 140)");
-        root.style.setProperty("--couleur-bien-place", "#096800");
+        root.style.setProperty("--couleur-lettre-speciale-survole", "rgb(140, 140, 140)");
-        root.style.setProperty("--couleur-mal-place", "#db7c00");
-        root.style.setProperty("--couleur-fond-rgb", "43, 43, 43");
-        root.style.setProperty("--couleur-police", "#ffffff");
-        root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
-        root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
         break;
       default:
-        root.style.setProperty("--couleur-bien-place", "#e7002a");
-        root.style.setProperty("--couleur-mal-place", "#ffbd00");
         root.style.setProperty("--couleur-fond-rgb", "43, 43, 43");
         root.style.setProperty("--couleur-police", "#ffffff");
         root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
         root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
+        root.style.setProperty("--couleur-lettre-speciale", "rgb(75, 75, 75)");
+        root.style.setProperty("--couleur-lettre-survole", "rgba(75, 75, 75, 0.65)");
+        root.style.setProperty("--couleur-lettre-speciale-survole", "rgba(75, 75, 75, 0.65)");
+    }
+    switch (theme) {
+      case Theme.ClairAccessible:
+      case Theme.SombreAccessible:
+        root.style.setProperty("--couleur-bien-place", "rgb(9, 104, 0)");
+        root.style.setProperty("--couleur-mal-place", "rgb(219, 124, 0)");
+        break;
+      default:
+        root.style.setProperty("--couleur-bien-place", "rgb(231, 0, 42)");
+        root.style.setProperty("--couleur-mal-place", "rgb(255, 189, 0)");
+    }
+    switch (theme) {
+      case Theme.ClairAccessible:
+        root.style.setProperty("--couleur-lettre-survole-bien-place", "rgb(5, 61, 0)");
+        root.style.setProperty("--couleur-lettre-survole-mal-place", "rgb(128, 72, 0)");
+        break;
+      case Theme.SombreAccessible:
+        root.style.setProperty("--couleur-lettre-survole-bien-place", "rgba(9, 104, 0, 0.65)");
+        root.style.setProperty("--couleur-lettre-survole-mal-place", "rgba(219, 124, 0, 0.65)");
+        break;
+      case Theme.Clair:
+        root.style.setProperty("--couleur-lettre-survole-bien-place", "rgb(153, 0, 28)");
+        root.style.setProperty("--couleur-lettre-survole-mal-place", "rgb(153, 112, 0)");
+      default:
+        root.style.setProperty("--couleur-lettre-survole-bien-place", "rgba(231, 0, 42, 0.65)");
+        root.style.setProperty("--couleur-lettre-survole-mal-place", "rgba(255, 189, 0, 0.65)");
     }
   }
 }