mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-04-28 12:12:55 +02:00
Ajout d'un système de panel
This commit is contained in:
JonathanMM
parent
7fef3ed059
commit
70bc91d557
|
|
@ -14,31 +14,47 @@
|
|||
<body>
|
||||
<div id="contenu">
|
||||
<header>
|
||||
<div></div>
|
||||
<div class="header-icones">
|
||||
<a href="#" id="configuration-regles-bouton">
|
||||
<svg id="configuration-regles-icone">
|
||||
<use href="#icone-regles" stroke="var(--couleur-icone)" fill="var(--couleur-icone)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" id="configuration-stats-bouton">
|
||||
<svg id="configuration-stats-icone">
|
||||
<use href="#icone-stats" stroke="var(--couleur-icone)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<h1>SUTOM</h1>
|
||||
<div>
|
||||
<div class="header-icones">
|
||||
<a href="#" id="configuration-audio-bouton">
|
||||
<svg id="configuration-audio-icone">
|
||||
<use href="#icone-son-active" fill="var(--couleur-icone)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" id="configuration-config-bouton">
|
||||
<svg id="configuration-config-icone">
|
||||
<use href="#icone-config" fill="var(--couleur-icone)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<div id="notification"> </div>
|
||||
<div id="fin-de-partie-panel">
|
||||
<div id="victoire-panel">
|
||||
<h2>Félicitations</h2>
|
||||
<p>Bravo, tu as gagné. Reviens demain pour une nouvelle grille.</p>
|
||||
<div id="panel-area">
|
||||
<div id="panel-fenetre">
|
||||
<div id="panel-fenetre-header">
|
||||
<h2 id="panel-fenetre-titre">Règles</h2>
|
||||
<div>
|
||||
<a href="#" id="panel-fenetre-bouton-fermeture">
|
||||
<svg id="panel-fenetre-bouton-fermeture-icone">
|
||||
<use href="#icone-croix" stroke="var(--couleur-icone)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="panel-fenetre-contenu"></div>
|
||||
</div>
|
||||
<div id="defaite-panel">
|
||||
<h2>Perdu</h2>
|
||||
<p>
|
||||
Le mot a trouver était : <span id="defaite-panel-mot"></span><br />
|
||||
Peut être feras-tu mieux demain ?
|
||||
</p>
|
||||
</div>
|
||||
<p>Résumé de ta partie <a href="#" id="fin-de-partie-panel-resume-bouton">Partager</a></p>
|
||||
<pre id="fin-de-partie-panel-resume"></pre>
|
||||
</div>
|
||||
<div id="grille">Chargement de la grille en cours…</div>
|
||||
<div id="input-area">
|
||||
|
|
@ -78,67 +94,106 @@
|
|||
<div data-lettre="_entree" class="input-lettre input-lettre-entree">↲</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="regles-panel">
|
||||
<p>
|
||||
Vous avez six essais pour deviner le mot du jour.<br />
|
||||
Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br />
|
||||
Les lettres entourées d'un carré rouge sont bien placées,<br />
|
||||
les lettres entourées d'un cercle jaune sont mal placées (mais présentes dans le mot).<br />
|
||||
Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br />
|
||||
Il y a un mot par jour, entre 6 et 9 lettres, et il est identique pour tout le monde. Évitez donc les spoils et privilégiez le bouton de partage.<br />
|
||||
En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. −
|
||||
<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br />
|
||||
Basé sur l'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br />
|
||||
Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire.
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: none">
|
||||
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
|
||||
<audio preload src="sons/lettre-mal-place.wav" id="son-lettre-mal-place"></audio>
|
||||
<audio preload src="sons/lettre-bien-place.wav" id="son-lettre-bien-place"></audio>
|
||||
|
||||
<svg>
|
||||
<symbol id="icone-son-active" width="36.471008" height="31.999998" viewBox="0 0 36.471009 31.999998">
|
||||
<symbol id="icone-son-active" viewBox="0 0 32 32" width="32" height="32">
|
||||
<path
|
||||
d="M 12.341228,3.8810322 7.0667848,7.7592153 v 8.2407827 8.237934 l 1.7467496,1.285129 c 0.9574354,0.703829 3.3310776,2.450578 5.2744426,3.881032 1.940517,1.427605 3.539092,2.595904 3.553339,2.595904 0.01425,0 0.02565,-6.813179 0.02565,-15.999999 0,-9.3292955 -0.0114,-15.9999984 -0.02565,-15.9999984 -0.01425,0 -2.399287,1.7467496 -5.300088,3.8810326 z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
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="m 29.814423,1.835084 c -0.390383,0.128228 -0.612645,0.4359751 -0.615494,0.843455 0,0.2934995 0.06839,0.4274265 0.40748,0.7836153 0.92894,0.9830809 1.541585,1.7439001 2.174176,2.7070344 1.518789,2.3109527 2.453428,4.8783613 2.795369,7.6651823 0.09403,0.757969 0.11683,1.165449 0.11683,2.165627 0,1.855031 -0.202315,3.308281 -0.69813,5.029385 -0.806411,2.798219 -2.26536,5.288691 -4.396794,7.514158 -0.333392,0.35049 -0.398931,0.473019 -0.398931,0.777916 0,0.262155 0.09118,0.481568 0.270703,0.64114 0.185219,0.170971 0.341942,0.227961 0.606946,0.225112 0.327694,-0.0029 0.421728,-0.05699 0.852004,-0.490116 2.481923,-2.527516 4.282813,-5.847195 5.060729,-9.332145 C 36.835616,16.5699 36.562063,12.603382 35.205696,9.0186987 34.288154,6.5994648 32.948884,4.4594827 31.136596,2.5161169 30.717718,2.0658944 30.566694,1.9319674 30.390024,1.8550306 30.264646,1.8008899 29.954049,1.7894919 29.814423,1.835084 Z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
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="m 25.072838,6.5624211 c -0.381834,0.1424755 -0.601246,0.4445236 -0.604096,0.8320569 -0.0057,0.2991986 0.07694,0.4502226 0.46447,0.8605521 1.672663,1.7638469 2.695637,3.9408719 3.011933,6.4056989 0.07979,0.621193 0.07124,2.142831 -0.01425,2.766874 -0.339092,2.461976 -1.330721,4.547818 -3.011932,6.331611 -0.373286,0.396082 -0.453072,0.549955 -0.453072,0.846304 0.0057,0.692431 0.769368,1.097062 1.356367,0.720926 0.156723,-0.09688 0.732324,-0.718076 1.125556,-1.211041 1.413357,-1.769546 2.365093,-3.940873 2.687088,-6.149243 0.11398,-0.775067 0.128228,-0.991629 0.128228,-1.966162 0,-0.974532 -0.01425,-1.191095 -0.128228,-1.966162 C 29.3699,12.224397 28.697415,10.460551 27.677291,8.8961698 27.039,7.9187879 26.038822,6.7504888 25.716828,6.6080133 c -0.17667,-0.076937 -0.495815,-0.099733 -0.64399,-0.045592 z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
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="M 0,15.999998 V 24.24933 L 2.5018698,24.24363 5.00089,24.23513 V 15.999998 7.7649144 L 2.5018698,7.7563658 0,7.7506668 Z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
/>
|
||||
<path
|
||||
d="m 20.373996,11.28121 c -0.515761,0.159572 -0.783615,0.726625 -0.564202,1.202493 0.04274,0.09688 0.165271,0.262155 0.307747,0.413179 0.789314,0.854853 1.202493,1.923419 1.202493,3.103116 0,1.219591 -0.421728,2.27106 -1.265183,3.168655 -0.22796,0.242209 -0.319145,0.447373 -0.319145,0.712378 0.0028,0.46447 0.35049,0.826358 0.823509,0.857702 0.387533,0.0228 0.626892,-0.133927 1.119857,-0.740872 1.270882,-1.564381 1.715405,-3.644524 1.202493,-5.624933 -0.265004,-1.028673 -0.837756,-2.0374 -1.581478,-2.79252 -0.153873,-0.156723 -0.236509,-0.216563 -0.364737,-0.265004 -0.168121,-0.05984 -0.418878,-0.07694 -0.561354,-0.03419 z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
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"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="icone-son-desactive" width="33.355648" height="31.999998" viewBox="0 0 33.355647 31.999997">
|
||||
<g transform="translate(10.205845,-122.61621)">
|
||||
<path
|
||||
style="stroke-linecap: round"
|
||||
d="m 12.986328,132.82227 a 1.42465,1.42465 0 0 0 -1.007812,0.41796 1.42465,1.42465 0 0 0 0,2.01368 l 8.740234,8.73828 a 1.42465,1.42465 0 0 0 2.013672,0 1.42465,1.42465 0 0 0 0,-2.01367 l -8.738281,-8.73829 a 1.42465,1.42465 0 0 0 -1.007813,-0.41796 z"
|
||||
/>
|
||||
<path
|
||||
style="stroke-linecap: round"
|
||||
d="m 21.724609,132.82227 a 1.42465,1.42465 0 0 0 -1.005859,0.41796 l -8.740234,8.73829 a 1.42465,1.42465 0 0 0 0,2.01367 1.42465,1.42465 0 0 0 2.015625,0 l 8.738281,-8.73828 a 1.42465,1.42465 0 0 0 0,-2.01368 1.42465,1.42465 0 0 0 -1.007813,-0.41796 z"
|
||||
/>
|
||||
<path
|
||||
d="m 2.1353828,126.49724 -5.274443,3.87818 v 8.24079 8.23793 l 1.7467496,1.28513 c 0.95743539,0.70383 3.3310772,2.45058 5.274443,3.88103 1.9405163,1.42761 3.5390915,2.5959 3.553339,2.5959 0.014248,0 0.025646,-6.81317 0.025646,-15.99999 0,-9.3293 -0.011398,-16 -0.025646,-16 -0.014247,0 -2.3992874,1.74675 -5.3000886,3.88103 z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
/>
|
||||
<path
|
||||
d="m -10.205845,138.61621 v 8.24933 l 2.5018698,-0.006 2.4990203,-0.009 v -8.23508 -8.23509 l -2.4990203,-0.009 -2.5018698,-0.006 z"
|
||||
style="stroke: none; stroke-width: 0.00284951"
|
||||
/>
|
||||
</g>
|
||||
<symbol id="icone-son-desactive" viewBox="0 0 32 32" width="32" height="32">
|
||||
<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" width="32" height="32" 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"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="icone-stats" viewBox="0 0 32 32" width="32" height="32">
|
||||
<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"
|
||||
/>
|
||||
<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" width="32" height="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>
|
||||
<symbol id="icone-config" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
/>
|
||||
</symbol>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
--couleur-fond-grille: #0077c7;
|
||||
--couleur-non-trouve: rgb(112, 112, 112);
|
||||
--couleur-icone: rgb(200, 200, 200);
|
||||
--couleur-fond-rgb: 43, 43, 43;
|
||||
--couleur-fond: rgb(var(--couleur-fond-rgb));
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
body {
|
||||
font-family: "Roboto Medium", Ubuntu, Arial, Helvetica, sans-serif;
|
||||
font-size: 32px;
|
||||
background-color: #2b2b2b;
|
||||
background-color: var(--couleur-fond);
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
|
@ -52,7 +54,7 @@ body {
|
|||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 6fr 1fr;
|
||||
grid-template-columns: 2fr 6fr 2fr;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
|
@ -65,9 +67,17 @@ h1 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.header-icones {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#configuration-regles-icone,
|
||||
#configuration-config-icone,
|
||||
#configuration-stats-icone,
|
||||
#configuration-audio-icone {
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#grille {
|
||||
|
|
@ -93,7 +103,7 @@ h1 {
|
|||
}
|
||||
|
||||
#grille td:not(.resultat) {
|
||||
background-color: #0077c7;
|
||||
background-color: var(--couleur-fond-grille);
|
||||
}
|
||||
|
||||
#grille td.resultat::after {
|
||||
|
|
@ -119,9 +129,7 @@ h1 {
|
|||
background-color: var(--couleur-fond-grille);
|
||||
}
|
||||
|
||||
#fin-de-partie-panel,
|
||||
#victoire-panel,
|
||||
#defaite-panel {
|
||||
#panel-area {
|
||||
display: none;
|
||||
|
||||
font-size: 24px;
|
||||
|
|
@ -192,15 +200,13 @@ h1 {
|
|||
cursor: initial;
|
||||
}
|
||||
|
||||
#regles-panel {
|
||||
.regles-panel #panel-fenetre {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#regles-panel a,
|
||||
#regles-panel a:visited,
|
||||
#fin-de-partie-panel a,
|
||||
#fin-de-partie-panel a:visited {
|
||||
#panel-area a,
|
||||
#panel-area a:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -208,3 +214,59 @@ h1 {
|
|||
opacity: 0;
|
||||
transition: opacity linear 1s;
|
||||
}
|
||||
|
||||
#panel-area {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(var(--couleur-fond-rgb), 0.45);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#panel-fenetre {
|
||||
background-color: var(--couleur-fond);
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-height: 400px;
|
||||
border: 1px solid white;
|
||||
border-radius: 0.25em;
|
||||
margin-top: 3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#panel-fenetre-header {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 1em);
|
||||
height: calc(36px + 0.75em);
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#panel-fenetre-titre {
|
||||
font-size: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#panel-fenetre-bouton-fermeture {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#panel-fenetre-bouton-fermeture-icone {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#panel-fenetre {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default class Configuration {
|
||||
public static Default: Configuration = { hasAudio: false };
|
||||
public static Default: Configuration = { hasAudio: false, afficherRegles: true };
|
||||
|
||||
hasAudio: boolean = false;
|
||||
afficherRegles: boolean = true;
|
||||
}
|
||||
|
|
|
|||
29
ts/configurationPanel.ts
Normal file
29
ts/configurationPanel.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import Configuration from "./configuration";
|
||||
import PanelManager from "./panelManager";
|
||||
import Sauvegardeur from "./sauvegardeur";
|
||||
|
||||
export default class ConfigurationPanel {
|
||||
private readonly _panelManager: PanelManager;
|
||||
private readonly _configBouton: HTMLElement;
|
||||
|
||||
public constructor(panelManager: PanelManager) {
|
||||
this._panelManager = panelManager;
|
||||
this._configBouton = document.getElementById("configuration-config-bouton") as HTMLElement;
|
||||
|
||||
this._configBouton.addEventListener(
|
||||
"click",
|
||||
(() => {
|
||||
this.afficher();
|
||||
}).bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
public afficher(): void {
|
||||
let titre = "Configuration";
|
||||
let contenu = "";
|
||||
|
||||
this._panelManager.setContenu(titre, contenu);
|
||||
this._panelManager.setClasses(["config-panel"]);
|
||||
this._panelManager.afficherPanel();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +1,32 @@
|
|||
import LettreResultat from "./lettreResultat";
|
||||
import { LettreStatut } from "./lettreStatut";
|
||||
import NotificationMessage from "./notificationMessage";
|
||||
import PanelManager from "./panelManager";
|
||||
|
||||
export default class FinDePartiePanel {
|
||||
private readonly _finDePartiePanel: HTMLElement;
|
||||
private readonly _victoirePanel: HTMLElement;
|
||||
private readonly _defaitePanel: HTMLElement;
|
||||
private readonly _defaitePanelMot: HTMLElement;
|
||||
private readonly _resume: HTMLPreElement;
|
||||
private readonly _resumeBouton: HTMLElement;
|
||||
private readonly _datePartie: Date;
|
||||
private readonly _panelManager: PanelManager;
|
||||
private readonly _statsButton: HTMLElement;
|
||||
|
||||
private _resumeTexte: string = "";
|
||||
private _motATrouver: string = "";
|
||||
private _estVictoire: boolean = false;
|
||||
private _partieEstFinie: boolean = false;
|
||||
|
||||
public constructor(datePartie: Date) {
|
||||
this._finDePartiePanel = document.getElementById("fin-de-partie-panel") as HTMLElement;
|
||||
this._victoirePanel = document.getElementById("victoire-panel") as HTMLElement;
|
||||
this._defaitePanel = document.getElementById("defaite-panel") as HTMLElement;
|
||||
this._defaitePanelMot = document.getElementById("defaite-panel-mot") as HTMLElement;
|
||||
this._resume = document.getElementById("fin-de-partie-panel-resume") as HTMLPreElement;
|
||||
this._resumeBouton = document.getElementById("fin-de-partie-panel-resume-bouton") as HTMLElement;
|
||||
|
||||
public constructor(datePartie: Date, panelManager: PanelManager) {
|
||||
this._datePartie = datePartie;
|
||||
this._panelManager = panelManager;
|
||||
this._statsButton = document.getElementById("configuration-stats-bouton") as HTMLElement;
|
||||
|
||||
this._resumeBouton.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
if (!navigator.clipboard) {
|
||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
||||
}
|
||||
|
||||
navigator.clipboard
|
||||
.writeText(this._resumeTexte + "\n\nhttps://sutom.nocle.fr")
|
||||
.then(() => {
|
||||
NotificationMessage.ajouterNotification("Résumé copié dans le presse papier");
|
||||
})
|
||||
.catch((raison) => {
|
||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
||||
});
|
||||
});
|
||||
this._statsButton.addEventListener(
|
||||
"click",
|
||||
(() => {
|
||||
this.afficher();
|
||||
}).bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
public genererResume(estBonneReponse: boolean, resultats: Array<Array<LettreResultat>>): void {
|
||||
public genererResume(estBonneReponse: boolean, motATrouver: string, resultats: Array<Array<LettreResultat>>): void {
|
||||
let resultatsEmojis = resultats.map((mot) =>
|
||||
mot
|
||||
.map((resultat) => resultat.statut)
|
||||
|
|
@ -57,20 +43,60 @@ export default class FinDePartiePanel {
|
|||
);
|
||||
let dateGrille = this._datePartie.getTime();
|
||||
let origine = new Date(2022, 0, 8).getTime();
|
||||
this._motATrouver = motATrouver;
|
||||
this._estVictoire = estBonneReponse;
|
||||
this._partieEstFinie = true;
|
||||
|
||||
let numeroGrille = Math.floor((dateGrille - origine) / (24 * 3600 * 1000)) + 1;
|
||||
|
||||
this._resumeTexte = "SUTOM #" + numeroGrille + " " + (estBonneReponse ? resultats.length : "-") + "/6\n\n" + resultatsEmojis.join("\n");
|
||||
this._resume.innerText = this._resumeTexte;
|
||||
}
|
||||
|
||||
public afficher(estVictoire: boolean, motATrouver: string): void {
|
||||
this._finDePartiePanel.style.display = "block";
|
||||
private attacherPartage(): void {
|
||||
let resumeBouton = document.getElementById("fin-de-partie-panel-resume-bouton") as HTMLElement;
|
||||
resumeBouton.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
if (!navigator.clipboard) {
|
||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
||||
}
|
||||
|
||||
if (estVictoire) this._victoirePanel.style.display = "block";
|
||||
else {
|
||||
this._defaitePanelMot.innerText = motATrouver;
|
||||
this._defaitePanel.style.display = "block";
|
||||
navigator.clipboard
|
||||
.writeText(this._resumeTexte + "\n\nhttps://sutom.nocle.fr")
|
||||
.then(() => {
|
||||
NotificationMessage.ajouterNotification("Résumé copié dans le presse papier");
|
||||
})
|
||||
.catch((raison) => {
|
||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public afficher(): void {
|
||||
let titre: string;
|
||||
let contenu: string;
|
||||
if (!this._partieEstFinie) {
|
||||
titre = "Statistiques";
|
||||
contenu = "Vous n'avez pas encore fini votre partie du jour";
|
||||
} else {
|
||||
if (this._estVictoire) {
|
||||
titre = "Félicitations";
|
||||
contenu = "<p>Bravo, tu as gagné. Reviens demain pour une nouvelle grille.</p>";
|
||||
} else {
|
||||
titre = "Perdu";
|
||||
contenu = "<p> \
|
||||
Le mot a trouver était : " + this._motATrouver + "<br /> \
|
||||
Peut être feras-tu mieux demain ? \
|
||||
</p>";
|
||||
}
|
||||
contenu +=
|
||||
'<p>Résumé de ta partie <a href="#" id="fin-de-partie-panel-resume-bouton">Partager</a></p> \
|
||||
<pre id="fin-de-partie-panel-resume">' +
|
||||
this._resumeTexte +
|
||||
"</pre>";
|
||||
}
|
||||
this._panelManager.setContenu(titre, contenu);
|
||||
this._panelManager.setClasses(["fin-de-partie-panel"]);
|
||||
if (this._partieEstFinie) this.attacherPartage();
|
||||
this._panelManager.afficherPanel();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,20 @@ import SauvegardeStats from "./sauvegardeStats";
|
|||
import Sauvegardeur from "./sauvegardeur";
|
||||
import Configuration from "./configuration";
|
||||
import PartieEnCours from "./partieEnCours";
|
||||
import PanelManager from "./panelManager";
|
||||
import ReglesPanel from "./reglesPanel";
|
||||
import ConfigurationPanel from "./configurationPanel";
|
||||
|
||||
export default class Gestionnaire {
|
||||
private readonly _dictionnaire: Dictionnaire;
|
||||
private readonly _grille: Grille;
|
||||
private readonly _input: Input;
|
||||
private readonly _victoirePanel: FinDePartiePanel;
|
||||
private readonly _reglesPanel: ReglesPanel;
|
||||
private readonly _finDePartiePanel: FinDePartiePanel;
|
||||
private readonly _configurationPanel: ConfigurationPanel;
|
||||
private readonly _propositions: Array<string>;
|
||||
private readonly _resultats: Array<Array<LettreResultat>>;
|
||||
private readonly _panelManager: PanelManager;
|
||||
|
||||
private _motATrouver: string;
|
||||
private _compositionMotATrouver: { [lettre: string]: number };
|
||||
|
|
@ -43,9 +49,14 @@ export default class Gestionnaire {
|
|||
this._propositions = new Array<string>();
|
||||
this._resultats = new Array<Array<LettreResultat>>();
|
||||
this._compositionMotATrouver = this.decompose(this._motATrouver);
|
||||
this._victoirePanel = new FinDePartiePanel(this._datePartieEnCours);
|
||||
this._panelManager = new PanelManager();
|
||||
this._reglesPanel = new ReglesPanel(this._panelManager);
|
||||
this._finDePartiePanel = new FinDePartiePanel(this._datePartieEnCours, this._panelManager);
|
||||
this._configurationPanel = new ConfigurationPanel(this._panelManager);
|
||||
|
||||
this.chargerPropositions(partieEnCours.propositions);
|
||||
|
||||
this.afficherReglesSiNecessaire();
|
||||
}
|
||||
|
||||
private chargerPartieEnCours(): PartieEnCours {
|
||||
|
|
@ -110,19 +121,20 @@ export default class Gestionnaire {
|
|||
let isBonneReponse = resultats.every((item) => item.statut === LettreStatut.BienPlace);
|
||||
this._propositions.push(mot);
|
||||
this._resultats.push(resultats);
|
||||
|
||||
if (isBonneReponse || this._propositions.length === this._maxNbPropositions) {
|
||||
this._finDePartiePanel.genererResume(isBonneReponse, this._motATrouver, this._resultats);
|
||||
this.enregistrerPartieDansStats();
|
||||
}
|
||||
|
||||
this._grille.validerMot(mot, resultats, isBonneReponse, skipAnimation, () => {
|
||||
this._input.updateClavier(resultats);
|
||||
if (isBonneReponse || this._propositions.length === this._maxNbPropositions) {
|
||||
this._input.bloquer();
|
||||
this._victoirePanel.afficher(isBonneReponse, this._motATrouver);
|
||||
this._finDePartiePanel.afficher();
|
||||
}
|
||||
});
|
||||
|
||||
if (isBonneReponse || this._propositions.length === this._maxNbPropositions) {
|
||||
this._victoirePanel.genererResume(isBonneReponse, this._resultats);
|
||||
this.enregistrerPartieDansStats();
|
||||
}
|
||||
|
||||
this.sauvegarderPartieEnCours();
|
||||
}
|
||||
|
||||
|
|
@ -170,4 +182,10 @@ export default class Gestionnaire {
|
|||
|
||||
return resultats;
|
||||
}
|
||||
|
||||
private afficherReglesSiNecessaire(): void {
|
||||
if (this._config.afficherRegles !== undefined && !this._config.afficherRegles) return;
|
||||
|
||||
this._reglesPanel.afficher();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
66
ts/panelManager.ts
Normal file
66
ts/panelManager.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
export default class PanelManager {
|
||||
private readonly _panelArea: HTMLElement;
|
||||
private readonly _panelFenetre: HTMLElement;
|
||||
private readonly _panelTitre: HTMLElement;
|
||||
private readonly _panelContenu: HTMLElement;
|
||||
private readonly _panelFermetureBouton: HTMLElement;
|
||||
|
||||
public constructor() {
|
||||
this._panelArea = document.getElementById("panel-area") as HTMLElement;
|
||||
this._panelFenetre = document.getElementById("panel-fenetre") as HTMLElement;
|
||||
this._panelTitre = document.getElementById("panel-fenetre-titre") as HTMLElement;
|
||||
this._panelContenu = document.getElementById("panel-fenetre-contenu") as HTMLElement;
|
||||
this._panelFermetureBouton = document.getElementById("panel-fenetre-bouton-fermeture") as HTMLElement;
|
||||
|
||||
this._panelArea.addEventListener(
|
||||
"click",
|
||||
((event: Event) => {
|
||||
event.stopPropagation();
|
||||
this.cacherPanel();
|
||||
}).bind(this)
|
||||
);
|
||||
|
||||
this._panelFenetre.addEventListener(
|
||||
"click",
|
||||
((event: Event) => {
|
||||
event.stopPropagation(); // On évite ainsi de fermer le panel en appuyant sur la fenêtre
|
||||
}).bind(this)
|
||||
);
|
||||
|
||||
this._panelFermetureBouton.addEventListener(
|
||||
"click",
|
||||
((event: Event) => {
|
||||
event.stopPropagation();
|
||||
this.cacherPanel();
|
||||
}).bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
public afficherPanel(): void {
|
||||
this._panelArea.style.display = "block";
|
||||
}
|
||||
|
||||
public cacherPanel(): void {
|
||||
this._panelArea.style.display = "none";
|
||||
}
|
||||
|
||||
public setContenu(titre: string, contenu: string): void {
|
||||
this._panelTitre.innerText = titre;
|
||||
this._panelContenu.innerHTML = contenu;
|
||||
}
|
||||
|
||||
public setClasses(classes: Array<string>): void {
|
||||
this._panelArea.className = "";
|
||||
classes.forEach((nomClasse) => this._panelArea.classList.add(nomClasse));
|
||||
}
|
||||
|
||||
public setCallbackFermeture(callback: () => void): void {
|
||||
this._panelFermetureBouton.addEventListener(
|
||||
"click",
|
||||
((event: Event) => {
|
||||
callback();
|
||||
}).bind(this),
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
47
ts/reglesPanel.ts
Normal file
47
ts/reglesPanel.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import Configuration from "./configuration";
|
||||
import PanelManager from "./panelManager";
|
||||
import Sauvegardeur from "./sauvegardeur";
|
||||
|
||||
export default class ReglesPanel {
|
||||
private readonly _panelManager: PanelManager;
|
||||
private readonly _rulesBouton: HTMLElement;
|
||||
|
||||
public constructor(panelManager: PanelManager) {
|
||||
this._panelManager = panelManager;
|
||||
this._rulesBouton = document.getElementById("configuration-regles-bouton") as HTMLElement;
|
||||
|
||||
this._rulesBouton.addEventListener(
|
||||
"click",
|
||||
(() => {
|
||||
this.afficher();
|
||||
}).bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
public afficher(): void {
|
||||
let titre = "Règles";
|
||||
let contenu =
|
||||
'<p> \
|
||||
Vous avez six essais pour deviner le mot du jour.<br /> \
|
||||
Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br /> \
|
||||
Les lettres entourées d\'un carré rouge sont bien placées,<br /> \
|
||||
les lettres entourées d\'un cercle jaune sont mal placées (mais présentes dans le mot).<br /> \
|
||||
Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br /> \
|
||||
Il y a un mot par jour, entre 6 et 9 lettres, et il est identique pour tout le monde. Évitez donc les spoils et privilégiez le bouton de partage.<br /> \
|
||||
En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. − \
|
||||
<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br /> \
|
||||
Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br /> \
|
||||
Merci à Emmanuel pour l\'aide sur les mots à trouver, et à GaranceAmarante pour l\'aide sur le dictionnaire. \
|
||||
</p>';
|
||||
|
||||
this._panelManager.setContenu(titre, contenu);
|
||||
this._panelManager.setClasses(["regles-panel"]);
|
||||
this._panelManager.setCallbackFermeture(() => {
|
||||
Sauvegardeur.sauvegarderConfig({
|
||||
...(Sauvegardeur.chargerConfig() ?? Configuration.Default),
|
||||
afficherRegles: false,
|
||||
});
|
||||
});
|
||||
this._panelManager.afficherPanel();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue