deblan/sutom
deblan/sutom
1
0
Fork 0
mirror of https://framagit.org/JonathanMM/sutom.git synced 2024-05-02 06:02:58 +02:00
Code Issues Projects Releases Wiki Activity

Utilisation des icônes de material design

Browse source
This commit is contained in:
JonathanMM 2023-05-10 23:17:20 +02:00
parent e15bbc53f5
commit 34e16f9799
4 changed files with 44 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
public/index.html
View file

@ -68,99 +68,32 @@
<audio preload src="sons/lettre-bien-place.wav" id="son-lettre-bien-place"></audio>
<svg>
<symbol id="icone-son-active" viewBox="0 0 32 32">
<symbol id="icone-son-active" height="24" viewBox="0 96 960 960" width="24">
<path
d="m11.152 6.0314-4.3386 3.19v13.555l1.4368 1.0571c0.78755 0.57894 2.74 2.0158 4.3386 3.1924 1.5962 1.1743 2.9111 2.1353 2.9228 2.1353 0.01172 0 0.0211-5.6043 0.0211-13.161 0-7.6739-0.0094-13.161-0.0211-13.161-0.01172 0-1.9736 1.4368-4.3597 3.1924z"
/>
<path
d="m25.524 4.3485c-0.32112 0.10548-0.50394 0.35862-0.50628 0.69379 0 0.24142 0.05626 0.35159 0.33518 0.64457 0.76411 0.80865 1.268 1.4345 1.7884 2.2267 1.2493 1.9009 2.0181 4.0128 2.2994 6.3051 0.07735 0.62348 0.0961 0.95866 0.0961 1.7814 0 1.5259-0.16642 2.7213-0.57426 4.137-0.66332 2.3017-1.8634 4.3503-3.6166 6.1809-0.27424 0.2883-0.32815 0.38909-0.32815 0.63988 0 0.21564 0.075 0.39612 0.22267 0.52738 0.15236 0.14064 0.28127 0.18751 0.49925 0.18517 0.26955-0.0024 0.3469-0.04688 0.70083-0.40315 2.0415-2.079 3.5229-4.8097 4.1628-7.6763 0.69614-3.1221 0.47112-6.3848-0.64457-9.3334-0.75474-1.99-1.8564-3.7502-3.3471-5.3488-0.34455-0.37034-0.46878-0.4805-0.6141-0.54378-0.10313-0.044534-0.35862-0.05391-0.47347-0.016407z"
/>
<path
d="m21.624 8.237c-0.31408 0.1172-0.49456 0.36565-0.49691 0.68442-0.0047 0.24611 0.06329 0.37034 0.38206 0.70786 1.3759 1.4509 2.2173 3.2416 2.4775 5.2691 0.06563 0.51097 0.0586 1.7626-0.01172 2.2759-0.27892 2.0251-1.0946 3.7409-2.4775 5.2081-0.30705 0.3258-0.37268 0.45237-0.37268 0.69614 0.0047 0.56957 0.63285 0.9024 1.1157 0.59301 0.12891-0.07969 0.60238-0.59066 0.92584-0.99616 1.1626-1.4556 1.9454-3.2416 2.2103-5.0581 0.09376-0.63754 0.10548-0.81568 0.10548-1.6173 0-0.80161-0.01172-0.97975-0.10548-1.6173-0.21798-1.4884-0.77114-2.9393-1.6103-4.2261-0.52504-0.80396-1.3477-1.765-1.6126-1.8822-0.14532-0.063286-0.40784-0.082037-0.52972-0.037502z"
/>
<path d="m1.0002 16v6.7856l2.0579-0.0047 2.0556-7e-3v-13.548l-2.0556-0.0070317-2.0579-0.0046878z" />
<path
d="m17.759 12.119c-0.42425 0.13126-0.64457 0.59769-0.46409 0.98912 0.03516 0.07969 0.13595 0.21564 0.25314 0.33987 0.64926 0.70317 0.98913 1.5821 0.98913 2.5525 0 1.0032-0.3469 1.8681-1.0407 2.6064-0.18751 0.19923-0.26252 0.36799-0.26252 0.58598 0.0023 0.38206 0.2883 0.67973 0.67739 0.70551 0.31877 0.01875 0.51566-0.11016 0.92115-0.60941 1.0454-1.2868 1.411-2.9978 0.98913-4.6269-0.21798-0.84615-0.68911-1.6759-1.3009-2.297-0.12657-0.12892-0.19454-0.17814-0.30002-0.21798-0.13829-0.04922-0.34455-0.06329-0.46175-0.02812z"
d="M560 925v-82q90-26 145-100t55-168q0-94-55-168T560 307v-82q124 28 202 125.5T840 575q0 127-78 224.5T560 925ZM120 696V456h160l200-200v640L280 696H120Zm440 40V414q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560 736ZM400 450l-86 86H200v80h114l86 86V450ZM300 576Z"
/>
</symbol>
<symbol id="icone-son-desactive" viewBox="0 0 32 32">
<symbol id="icone-son-desactive" height="24" viewBox="0 96 960 960" width="24">
<path
d="m20.077 11.234a1.1719 1.1719 0 0 0-0.829 0.3438 1.1719 1.1719 0 0 0 0 1.6564l7.1895 7.1879a1.1719 1.1719 0 0 0 1.6564 0 1.1719 1.1719 0 0 0 0-1.6564l-7.1879-7.1879a1.1719 1.1719 0 0 0-0.829-0.3438z"
stroke-linecap="round"
stroke-width=".82258"
/>
<path
d="m27.265 11.234a1.1719 1.1719 0 0 0-0.8274 0.3438l-7.1895 7.1879a1.1719 1.1719 0 0 0 0 1.6564 1.1719 1.1719 0 0 0 1.658 0l7.1879-7.1879a1.1719 1.1719 0 0 0 0-1.6564 1.1719 1.1719 0 0 0-0.829-0.3438z"
stroke-linecap="round"
stroke-width=".82258"
/>
<path
d="m11.152 6.0312-4.3386 3.1901v13.555l1.4368 1.0571c0.78756 0.57895 2.7401 2.0158 4.3386 3.1924 1.5962 1.1743 2.9112 2.1353 2.9229 2.1353s0.0211-5.6043 0.0211-13.161c0-7.6741-0.0094-13.161-0.0211-13.161-0.01172 0-1.9736 1.4368-4.3597 3.1924z"
/>
<path d="m1 16v6.7857l2.058-0.0049 2.0556-0.0074v-13.548l-2.0556-0.0074-2.058-0.00494z" />
</symbol>
<symbol id="icone-croix" viewBox="0 0 8.4666665 8.4666669">
<path
style="
fill: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
"
d="M 1.6140919,1.6140919 6.8525747,6.8525747"
id="path1118"
/>
<path
style="
fill: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
"
d="M 6.8525747,1.6140919 1.6140919,6.8525747"
id="path1432"
d="M792 1000 671 879q-25 16-53 27.5T560 925v-82q14-5 27.5-10t25.5-12L480 688v208L280 696H120V456h128L56 264l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560 307v-82q124 28 202 125.5T840 575q0 53-14.5 102T784 768ZM650 634l-90-90V414q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650 634ZM480 464 376 360l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"
/>
</symbol>
<symbol id="icone-stats" viewBox="0 0 32 32">
<symbol id="icone-croix" height="40" viewBox="0 96 960 960" width="40">
<path
d="m3.077 5.3688c-0.14233 0-0.25668 0.12077-0.25668 0.27108v23.379c0 0.14944 0.11435 0.27108 0.25668 0.27108h5.9999c0.14233 0 0.25668-0.12164 0.25668-0.27108v-23.379c0-0.15031-0.11435-0.27108-0.25668-0.27108z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.7439"
fill="none"
d="m251.333 851.333-46.666-46.666L433.334 576 204.667 347.333l46.666-46.666L480 529.334l228.667-228.667 46.666 46.666L526.666 576l228.667 228.667-46.666 46.666L480 622.666 251.333 851.333Z"
/>
<path
d="m12.807 16.365c-0.14056 0-0.25349 0.12077-0.25349 0.27108v12.643c0 0.15031 0.11293 0.27108 0.25349 0.27108h5.9262c0.14056 0 0.25349-0.12077 0.25349-0.27108v-12.643c0-0.15031-0.11294-0.27108-0.25349-0.27108z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.744"
fill="none"
/>
<path
d="m22.515 10.747c-0.14233 0-0.25668 0.12077-0.25668 0.27108v18.094c0 0.15031 0.11435 0.27108 0.25668 0.27108h6.0007c0.14232 0 0.25668-0.12077 0.25668-0.27108v-18.094c0-0.15031-0.11436-0.27108-0.25668-0.27108z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.7439"
fill="none"
/>
<path d="m2.3991 2.3983v27.203h27.202" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.7903" />
</symbol>
<symbol id="icone-regles" viewBox="0 0 32 32">
<path
d="m13.787 23.247h2.9075v3.638h-2.9075zm2.8216-2.1055h-2.7357v-2.2057q0-1.4466 0.40104-2.3776 0.40104-0.93099 1.6901-2.1628l1.2891-1.2747q0.8164-0.75911 1.1745-1.4323 0.3724-0.67318 0.3724-1.375 0-1.2747-0.94531-2.0625-0.93099-0.78776-2.4779-0.78776-1.1315 0-2.4206 0.5013-1.2747 0.5013-2.6641 1.4609v-2.6927q1.3464-0.81641 2.7214-1.2174 1.3893-0.40104 2.8646-0.40104 2.6354 0 4.2253 1.3893 1.6042 1.3893 1.6042 3.6667 0 1.0885-0.51562 2.0768-0.51562 0.97396-1.8047 2.2057l-1.2604 1.2318q-0.67318 0.67318-0.95963 1.0599-0.27214 0.3724-0.38672 0.73047-0.08594 0.30078-0.12891 0.73047-0.04297 0.42969-0.04297 1.1745z"
/>
<circle cx="16" cy="16" r="14" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<symbol id="icone-stats" height="24" viewBox="0 96 960 960" width="24">
<path d="M160 896V456h160v440H160Zm240 0V256h160v640H400Zm240 0V616h160v280H640Z" />
</symbol>
<symbol id="icone-config" viewBox="0 0 32 32">
<symbol id="icone-regles" height="24" viewBox="0 96 960 960" width="24">
<path
d="m25.1 1.0009c-0.24859-4e-3 -0.49949 0.01-0.74873 0.0174-2.0188 0.0622-4.01 1.6525-4.1616 3.7439-0.50981 2.1512-0.87169 4.4107-1.974 6.354-3.7058 3.71-7.6856 7.1393-11.505 10.732-1.5478 1.48-3.1912 2.8734-4.6112 4.4788-1.1941 1.7248 0.0372 4.6853 2.237 4.6724 1.7332-0.0568 2.7416-1.7429 3.8664-2.8178 4.1892-4.5584 8.0333-9.4317 12.34-13.883 1.1377-0.93788 2.716-1.0269 4.0959-1.4049 0.92741-0.23075 1.9087-0.30646 2.8033-0.63139 1.6048-1.0192 2.7463-2.8492 2.9189-4.7437 0.057-0.45104-0.44752-0.30978-0.44752-0.30978l-2.78 1.2811-2.1238-1.7534-0.35649-1.9778s0.64592-0.63983 0.93495-0.69523l2.7286-1.018c-0.10848-1.1283-1.5342-1.6956-2.4817-1.9526-0.24051-0.0653-0.48684-0.0877-0.73543-0.0919zm-2.0729 7.6496 1.2424 2.9363-1.1244 0.45314-0.0242-0.0565 0.3074-0.12799-0.0588-0.1407 0.0644-0.0145 0.1478-0.0331-0.0662-0.2953-0.1475 0.0328-0.11675 0.026-0.14721-0.35234 0.063-0.0142 0.1478-0.0331-0.0659-0.2953-0.14779 0.0328-0.11558 0.0257-0.1472-0.35265 0.0621-0.0139 0.14779-0.0328-0.0662-0.29559-0.1475 0.0331-0.11439 0.0257-0.1472-0.35293 0.0606-0.0136 0.1478-0.0328-0.0659-0.29558-0.1478 0.0331-0.11321 0.0254-0.20514-0.49186c-0.21772 0.0877-0.22976 0.0949-0.3358 0.13893l-0.0254-0.0594c0.37973-0.15303 0.7595-0.30603 1.1392-0.45906zm-1.9817 0.79839 0.029 0.0674c-0.10243 0.0423-0.10517 0.0455-0.29885 0.12356l0.0987 0.23499-0.0511 0.0115-0.14779 0.0331 0.0662 0.29529 0.1475-0.0331 0.10434-0.0233 0.14839 0.35264-0.0517 0.0115-0.14779 0.0331 0.0659 0.2953 0.1478-0.0331 0.10493-0.0234 0.14809 0.35235-0.0523 0.0118-0.1478 0.0331 0.0662 0.2953 0.1475-0.0328 0.10582-0.0236 0.14809 0.35234-0.0529 0.0118-0.14779 0.0331 0.0659 0.2953 0.14779-0.0328 0.10641-0.0237 0.1676 0.39876 0.31894-0.13272 0.0201 0.0467-1.0538 0.42447-1.2418-2.9364c0.34615-0.13948 0.69225-0.27907 1.0384-0.41855zm-16.315 16.667a1.7456 1.7456 0 0 1 1.7454 1.7457 1.7456 1.7456 0 0 1-1.7454 1.7454 1.7456 1.7456 0 0 1-1.7454-1.7454 1.7456 1.7456 0 0 1 1.7454-1.7457z"
stroke-width=".15134"
d="M478 816q21 0 35.5-14.5T528 766q0-21-14.5-35.5T478 716q-21 0-35.5 14.5T428 766q0 21 14.5 35.5T478 816Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342 438l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506 530q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197 859q-54-54-85.5-127T80 576q0-83 31.5-156T197 293q54-54 127-85.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 83-31.5 156T763 859q-54 54-127 85.5T480 976Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
/>
</symbol>
<symbol id="icone-config" v height="24" viewBox="0 96 960 960" width="24">
<path
d="m370 976-16-128q-13-5-24.5-12T307 821l-119 50L78 681l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78 471l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12l-16 128H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342 576q0 58 40.5 99t99.5 41Zm0-80q-25 0-42.5-17.5T422 576q0-25 17.5-42.5T482 516q25 0 42.5 17.5T542 576q0 25-17.5 42.5T482 636Zm-2-60Zm-40 320h79l14-106q31-8 57.5-23.5T639 729l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533 362l-13-106h-79l-14 106q-31 8-57.5 23.5T321 423l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427 790l13 106Z"
/>
</symbol>
</svg>

27
public/jeu.css
View file

@ -9,11 +9,12 @@
--couleur-icone: rgb(200, 200, 200);
--couleur-fond-rgb: 43, 43, 43;
--couleur-fond: rgb(var(--couleur-fond-rgb));
--couleur-bordure: #ffffff;
--couleur-bordure: rgb(200, 200, 200);
--couleur-bordure-grille: #ffffff;
--couleur-police: #ffffff;
--couleur-police-grille: #ffffff;
--taille-icone: 32px;
--taille-icone: 24px;
--taille-icone-zone: 48px;
}
@font-face {
@ -61,12 +62,24 @@ h1 {
justify-content: space-around;
}
#configuration-regles-bouton,
#configuration-config-bouton,
#configuration-stats-bouton,
#configuration-audio-bouton {
height: var(--taille-icone-zone);
width: var(--taille-icone-zone);
display: flex;
justify-content: center;
align-items: center;
}
#configuration-regles-icone,
#configuration-config-icone,
#configuration-stats-icone,
#configuration-audio-icone {
height: var(--taille-icone);
width: var(--taille-icone);
fill: var(--couleur-icone);
}
#grille {
@ -260,12 +273,18 @@ h1 {
}
#panel-fenetre-bouton-fermeture {
width: 48px;
height: 48px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
#panel-fenetre-bouton-fermeture-icone {
width: 32px;
height: 32px;
width: 40px;
height: 40px;
fill: var(--couleur-icone);
}
.config-panel #panel-fenetre-contenu {

3
ts/reglesPanel.ts
View file

@ -46,7 +46,8 @@ export default class ReglesPanel {
' ou <a target="_blank" href="https://mastodon.social/@JonathanMM">@JonathanMM@mastodon.social</a> sur mastodon. − ' +
'<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br />' +
'Basé sur l\'excellent <a target="_blank" href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> et le regretté Motus.<br />' +
"Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire." +
"Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire.<br />" +
'Les icônes proviennent de <a target="_blank" href="https://m3.material.io/styles/icons/overview">Material Design</a>' +
"</p>";
this._panelManager.setContenu(titre, contenu);

8
ts/themeManager.ts
View file

@ -14,7 +14,7 @@ export default class ThemeManager {
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", "#000000");
root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
break;
case Theme.ClairAccessible:
@ -22,7 +22,7 @@ export default class ThemeManager {
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", "#000000");
root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)");
root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
break;
case Theme.SombreAccessible:
@ -30,7 +30,7 @@ export default class ThemeManager {
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", "#ffffff");
root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
break;
default:
@ -38,7 +38,7 @@ export default class ThemeManager {
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", "#ffffff");
root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)");
root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
}
}