Premiers ajustements UI

2024-05-02 06:02:58 +02:00 · 2023-05-16 23:21:31 +02:00 · 2023-05-16 23:21:31 +02:00 · e452c26724
parent 34e16f9799
commit e452c26724
9 changed files with 129 additions and 47 deletions
--- a/public/fonts/Roboto-Medium.ttf
+++ b/public/fonts/Roboto-Medium.ttf
--- a/public/fonts/Roboto-Regular.ttf
+++ b/public/fonts/Roboto-Regular.ttf
--- a/public/fonts/RobotoMono-Regular.ttf
+++ b/public/fonts/RobotoMono-Regular.ttf
--- a/public/index.html
+++ b/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>
--- a/public/jeu.css
+++ b/public/jeu.css
@ -2,9 +2,9 @@
  --taille-cellule: 48px;
  --epaisseur-bordure-cellule: 1px;
  --epaisseur-padding-cellule: 2px;
-  --couleur-bien-place: #e7002a;
-  --couleur-mal-place: #ffbd00;
-  --couleur-fond-grille: #0077c7;
+  --couleur-bien-place: rgb(231, 0, 42);
+  --couleur-mal-place: rgb(255, 189, 0);
+  --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";
-  src: url("/fonts/Roboto-Medium.ttf");
+  font-family: "Roboto Regular";
+  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,
-#panel-fenetre-notification {
+#notification-area,
+#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 {
--- a/ts/grille.ts
+++ b/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;
-          else contenuCellule = ".";
+          if (lettreIndice !== undefined) {
+            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];
--- a/ts/input.ts
+++ b/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 = "↲";
--- a/ts/notificationMessage.ts
+++ b/ts/notificationMessage.ts
@ -1,28 +1,31 @@
 export default class NotificationMessage {
-  private static _notificationArea: HTMLElement = document.getElementById("notification") as HTMLElement;
-  private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification") as HTMLElement;
+  private static _notificationArea: HTMLElement = document.getElementById("notification-area") 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;
-    div.style.opacity = "1";
+    divLabel.innerHTML = message;
+    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
--- a/ts/themeManager.ts
+++ b/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-mal-place", "#db7c00");
-        root.style.setProperty("--couleur-fond-rgb", "255, 254, 246");
+        root.style.setProperty("--couleur-fond-rgb", "245, 245, 220");
        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.SombreAccessible:
-        root.style.setProperty("--couleur-bien-place", "#096800");
-        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)");
+        root.style.setProperty("--couleur-lettre-speciale", "rgb(210, 210, 210)");
+        root.style.setProperty("--couleur-lettre-survole", "rgb(140, 140, 140)");
+        root.style.setProperty("--couleur-lettre-speciale-survole", "rgb(140, 140, 140)");
        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)");
    }
  }
 }