mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-06-10 09:52:13 +02:00
Premiers ajustements UI
This commit is contained in:
parent
34e16f9799
commit
e452c26724
Binary file not shown.
BIN
public/fonts/Roboto-Regular.ttf
Normal file
BIN
public/fonts/Roboto-Regular.ttf
Normal file
Binary file not shown.
BIN
public/fonts/RobotoMono-Regular.ttf
Normal file
BIN
public/fonts/RobotoMono-Regular.ttf
Normal file
Binary file not shown.
|
@ -43,7 +43,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div id="notification"> </div>
|
<div id="notification-area"><div id="notification-label"></div></div>
|
||||||
<div id="panel-area">
|
<div id="panel-area">
|
||||||
<div id="panel-fenetre">
|
<div id="panel-fenetre">
|
||||||
<div id="panel-fenetre-header">
|
<div id="panel-fenetre-header">
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</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 id="panel-fenetre-contenu"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,9 +2,9 @@
|
||||||
--taille-cellule: 48px;
|
--taille-cellule: 48px;
|
||||||
--epaisseur-bordure-cellule: 1px;
|
--epaisseur-bordure-cellule: 1px;
|
||||||
--epaisseur-padding-cellule: 2px;
|
--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-non-trouve: rgb(112, 112, 112);
|
||||||
--couleur-icone: rgb(200, 200, 200);
|
--couleur-icone: rgb(200, 200, 200);
|
||||||
--couleur-fond-rgb: 43, 43, 43;
|
--couleur-fond-rgb: 43, 43, 43;
|
||||||
|
@ -12,21 +12,33 @@
|
||||||
--couleur-bordure: rgb(200, 200, 200);
|
--couleur-bordure: rgb(200, 200, 200);
|
||||||
--couleur-bordure-grille: #ffffff;
|
--couleur-bordure-grille: #ffffff;
|
||||||
--couleur-police: #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: 24px;
|
||||||
--taille-icone-zone: 48px;
|
--taille-icone-zone: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@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 {
|
body {
|
||||||
font-family: "Roboto Medium", Ubuntu, Arial, Helvetica, sans-serif;
|
font-family: "Roboto Regular", Ubuntu, Arial, Helvetica, sans-serif;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
background-color: var(--couleur-fond);
|
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;
|
text-align: center;
|
||||||
color: var(--couleur-police);
|
color: var(--couleur-police);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -86,7 +98,7 @@ h1 {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
background-color: var(--couleur-fond-grille);
|
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 {
|
.grille table {
|
||||||
|
@ -101,7 +113,7 @@ h1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: var(--epaisseur-padding-cellule);
|
padding: var(--epaisseur-padding-cellule);
|
||||||
color: var(--couleur-police-grille);
|
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;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -141,7 +153,7 @@ h1 {
|
||||||
#input-area {
|
#input-area {
|
||||||
margin: 0.5em auto 2em;
|
margin: 0.5em auto 2em;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 5px);
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -168,7 +180,7 @@ h1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-family: monospace;
|
font-family: "RobotoMono Regular", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-lettre.input-lettre-vide,
|
.input-lettre.input-lettre-vide,
|
||||||
|
@ -197,6 +209,17 @@ h1 {
|
||||||
.input-lettre:hover,
|
.input-lettre:hover,
|
||||||
.input-lettre:active {
|
.input-lettre:active {
|
||||||
cursor: pointer;
|
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,
|
.input-lettre.input-lettre-vide:hover,
|
||||||
|
@ -204,6 +227,27 @@ h1 {
|
||||||
cursor: initial;
|
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 {
|
.regles-panel table {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
@ -223,10 +267,24 @@ h1 {
|
||||||
color: var(--couleur-police);
|
color: var(--couleur-police);
|
||||||
}
|
}
|
||||||
|
|
||||||
#notification,
|
#notification-area,
|
||||||
#panel-fenetre-notification {
|
#panel-fenetre-notification-area {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity linear 1s;
|
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 {
|
#panel-area {
|
||||||
|
|
11
ts/grille.ts
11
ts/grille.ts
|
@ -39,13 +39,20 @@ export default class Grille {
|
||||||
if (nbMot < this._motActuel || (nbMot === this._motActuel && mot.length !== 0)) {
|
if (nbMot < this._motActuel || (nbMot === this._motActuel && mot.length !== 0)) {
|
||||||
if (mot.length <= nbLettre) {
|
if (mot.length <= nbLettre) {
|
||||||
contenuCellule = ".";
|
contenuCellule = ".";
|
||||||
|
cellule.classList.add("cellule-lettre-pas-curseur");
|
||||||
} else {
|
} else {
|
||||||
contenuCellule = mot[nbLettre].toUpperCase();
|
contenuCellule = mot[nbLettre].toUpperCase();
|
||||||
|
cellule.classList.remove("cellule-lettre-pas-curseur");
|
||||||
}
|
}
|
||||||
} else if (nbMot === this._motActuel) {
|
} else if (nbMot === this._motActuel) {
|
||||||
let lettreIndice = this._indice[nbLettre];
|
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]) {
|
if (this._resultats.length > nbMot && this._resultats[nbMot][nbLettre]) {
|
||||||
let resultat = this._resultats[nbMot][nbLettre];
|
let resultat = this._resultats[nbMot][nbLettre];
|
||||||
|
|
|
@ -51,6 +51,7 @@ export default class Input {
|
||||||
case "_effacer":
|
case "_effacer":
|
||||||
lettreDiv.dataset["lettre"] = lettre;
|
lettreDiv.dataset["lettre"] = lettre;
|
||||||
lettreDiv.innerText = "⌫";
|
lettreDiv.innerText = "⌫";
|
||||||
|
lettreDiv.classList.add("input-lettre-effacer");
|
||||||
break;
|
break;
|
||||||
case "_entree":
|
case "_entree":
|
||||||
lettreDiv.innerText = "↲";
|
lettreDiv.innerText = "↲";
|
||||||
|
|
|
@ -1,28 +1,31 @@
|
||||||
export default class NotificationMessage {
|
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;
|
private static _currentTimeout: NodeJS.Timeout | undefined;
|
||||||
|
|
||||||
public static ajouterNotification(message: string): void {
|
public static ajouterNotification(message: string): void {
|
||||||
this.ajouterNotificationDiv(this._notificationArea, message);
|
this.ajouterNotificationDiv(this._notificationArea, this._notificationLabel, message);
|
||||||
}
|
}
|
||||||
|
|
||||||
public static ajouterNotificationPanel(message: string): void {
|
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) {
|
if (this._currentTimeout) {
|
||||||
clearTimeout(this._currentTimeout);
|
clearTimeout(this._currentTimeout);
|
||||||
this._currentTimeout = undefined;
|
this._currentTimeout = undefined;
|
||||||
}
|
}
|
||||||
div.innerHTML = message;
|
divLabel.innerHTML = message;
|
||||||
div.style.opacity = "1";
|
divArea.style.opacity = "1";
|
||||||
this._currentTimeout = setTimeout(
|
this._currentTimeout = setTimeout(
|
||||||
(() => {
|
(() => {
|
||||||
div.style.opacity = "0";
|
divArea.style.opacity = "0";
|
||||||
this._currentTimeout = setTimeout(
|
this._currentTimeout = setTimeout(
|
||||||
(() => {
|
(() => {
|
||||||
div.innerHTML = " ";
|
divLabel.innerHTML = "";
|
||||||
this._currentTimeout = undefined;
|
this._currentTimeout = undefined;
|
||||||
}).bind(this),
|
}).bind(this),
|
||||||
1000
|
1000
|
||||||
|
|
|
@ -10,36 +10,49 @@ export default class ThemeManager {
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
switch (theme) {
|
switch (theme) {
|
||||||
case Theme.Clair:
|
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:
|
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-police", "#000000");
|
||||||
root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
|
root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
|
||||||
root.style.setProperty("--couleur-icone", "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;
|
break;
|
||||||
default:
|
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-fond-rgb", "43, 43, 43");
|
||||||
root.style.setProperty("--couleur-police", "#ffffff");
|
root.style.setProperty("--couleur-police", "#ffffff");
|
||||||
root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
|
root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
|
||||||
root.style.setProperty("--couleur-icone", "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)");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue