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>
|
||||
</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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
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 (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];
|
||||
|
|
|
@ -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 = "↲";
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue