mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-04-27 19:52:55 +02:00
156 lines
10 KiB
HTML
156 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>SUTOM</title>
|
||
<script data-main="js/main" type="text/javascript" src="node_modules/requirejs/require.js"></script>
|
||
<link rel="stylesheet" href="jeu.css" type="text/css" />
|
||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||
</head>
|
||
<body>
|
||
<div id="contenu">
|
||
<header>
|
||
<div></div>
|
||
<h1>SUTOM</h1>
|
||
<div>
|
||
<a href="#" id="configuration-audio-bouton">
|
||
<svg id="configuration-audio-icone">
|
||
<use href="#icone-son-active" 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>
|
||
<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"></div>
|
||
<div id="input-area">
|
||
<div class="input-ligne">
|
||
<div data-lettre="A" class="input-lettre">A</div>
|
||
<div data-lettre="Z" class="input-lettre">Z</div>
|
||
<div data-lettre="E" class="input-lettre">E</div>
|
||
<div data-lettre="R" class="input-lettre">R</div>
|
||
<div data-lettre="T" class="input-lettre">T</div>
|
||
<div data-lettre="Y" class="input-lettre">Y</div>
|
||
<div data-lettre="U" class="input-lettre">U</div>
|
||
<div data-lettre="I" class="input-lettre">I</div>
|
||
<div data-lettre="O" class="input-lettre">O</div>
|
||
<div data-lettre="P" class="input-lettre">P</div>
|
||
</div>
|
||
<div class="input-ligne">
|
||
<div data-lettre="Q" class="input-lettre">Q</div>
|
||
<div data-lettre="S" class="input-lettre">S</div>
|
||
<div data-lettre="D" class="input-lettre">D</div>
|
||
<div data-lettre="F" class="input-lettre">F</div>
|
||
<div data-lettre="G" class="input-lettre">G</div>
|
||
<div data-lettre="H" class="input-lettre">H</div>
|
||
<div data-lettre="J" class="input-lettre">J</div>
|
||
<div data-lettre="K" class="input-lettre">K</div>
|
||
<div data-lettre="L" class="input-lettre">L</div>
|
||
<div data-lettre="M" class="input-lettre">M</div>
|
||
</div>
|
||
<div class="input-ligne">
|
||
<div class="input-lettre input-lettre-vide"></div>
|
||
<div data-lettre="W" class="input-lettre">W</div>
|
||
<div data-lettre="X" class="input-lettre">X</div>
|
||
<div data-lettre="C" class="input-lettre">C</div>
|
||
<div data-lettre="V" class="input-lettre">V</div>
|
||
<div data-lettre="B" class="input-lettre">B</div>
|
||
<div data-lettre="N" class="input-lettre">N</div>
|
||
<div data-lettre="_effacer" class="input-lettre">⌫</div>
|
||
<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, 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">
|
||
<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"
|
||
/>
|
||
<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"
|
||
/>
|
||
<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"
|
||
/>
|
||
<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"
|
||
/>
|
||
</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>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
requirejs.config({
|
||
waitSeconds: 20,
|
||
});
|
||
requirejs(["main"], function (Main) {
|
||
var socket = new Main.default();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|