diff --git a/public/fonts/Roboto-Medium.ttf b/public/fonts/Roboto-Medium.ttf
deleted file mode 100644
index e89b0b7..0000000
Binary files a/public/fonts/Roboto-Medium.ttf and /dev/null differ
diff --git a/public/fonts/Roboto-Regular.ttf b/public/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..3033308
Binary files /dev/null and b/public/fonts/Roboto-Regular.ttf differ
diff --git a/public/fonts/RobotoMono-Regular.ttf b/public/fonts/RobotoMono-Regular.ttf
new file mode 100644
index 0000000..2ab8f34
Binary files /dev/null and b/public/fonts/RobotoMono-Regular.ttf differ
diff --git a/public/index.html b/public/index.html
index 72c0c8f..b2b03c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -43,7 +43,7 @@
-
+
diff --git a/public/jeu.css b/public/jeu.css
index 3a52f07..646a025 100644
--- 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 {
diff --git a/ts/grille.ts b/ts/grille.ts
index 5d03f6d..1ce0d60 100644
--- 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];
diff --git a/ts/input.ts b/ts/input.ts
index f17113c..780d59f 100644
--- 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 = "↲";
diff --git a/ts/notificationMessage.ts b/ts/notificationMessage.ts
index b34f36e..7d63c81 100644
--- 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
diff --git a/ts/themeManager.ts b/ts/themeManager.ts
index db3b0fc..29ae0c9 100644
--- 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)");
}
}
}