options
This commit is contained in:
parent
2b56234825
commit
17f4670d67
1
icones/settings.svg
Normal file
1
icones/settings.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-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 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 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-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-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-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
|
||||
|
After Width: | Height: | Size: 776 B |
56
index.html
56
index.html
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>LOTUS 🪷</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="icones/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">
|
||||
@ -15,23 +15,49 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<nav>
|
||||
<ul style="position: fixed;">
|
||||
<li>
|
||||
<input type="checkbox" id="volumeCheckbox" role="switch" checked/>
|
||||
<label for="volumeCheckbox">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
|
||||
<path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"/>
|
||||
</svg>
|
||||
|
||||
<dialog id="optionsDialog">
|
||||
<article>
|
||||
<header>
|
||||
<h3>L<img src="icones/lotus.svg" alt="O">TUS</h3>
|
||||
</header>
|
||||
<form id="optionsForm" action="#">
|
||||
<fieldset>
|
||||
<label>
|
||||
<input id="volumeCheckbox" type="checkbox" role="switch" checked/>
|
||||
Son
|
||||
</label>
|
||||
</li>
|
||||
</fieldset>
|
||||
<fieldset class="grid">
|
||||
<legend>Nombre de lettres des mots à trouver</legend>
|
||||
<label>
|
||||
entre
|
||||
<input type="number" id="minLettresInput" min="6" max="10" value="6"/>
|
||||
</label>
|
||||
<label>
|
||||
et
|
||||
<input type="number" id="maxLettresInput" min="6" max="10" value="10"/>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
<footer>
|
||||
<button id="cancelOptionsButton" class="secondary">Annuler</button>
|
||||
<button id="confirmOptionsButton">OK</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<main class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><button id="optionsButton" class="outline secondary" title="Options">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-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 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 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-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-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-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
|
||||
</button></li>
|
||||
</ul>
|
||||
<ul style="margin: auto">
|
||||
<li>
|
||||
<h1>L<img src="icones/lotus.svg" alt="O">TUS</h1>
|
||||
</li>
|
||||
<ul>
|
||||
<li><h1>L<img src="icones/lotus.svg" alt="O">TUS</h1></li>
|
||||
</ul>
|
||||
<ul></ul>
|
||||
</nav>
|
||||
<div id="grille"></div>
|
||||
</main>
|
||||
|
||||
29440
motsATrouver.js
29440
motsATrouver.js
File diff suppressed because it is too large
Load Diff
2674
mots_accentues.js
2674
mots_accentues.js
File diff suppressed because it is too large
Load Diff
40
script.js
40
script.js
@ -1,17 +1,44 @@
|
||||
const NB_ESSAIS_MAX = 6
|
||||
const periode = 500 //ms
|
||||
|
||||
var volumeOn = true
|
||||
var minLettres = 6
|
||||
var maxLettres = 10
|
||||
|
||||
window.onload = function(event) {
|
||||
optionsDialog.showModal();
|
||||
}
|
||||
|
||||
optionsButton.onclick = function(event) {
|
||||
optionsDialog.showModal();
|
||||
}
|
||||
|
||||
cancelOptionsButton.onclick = function(event) {
|
||||
volumeCheckbox.checked = volumeOn
|
||||
minLettresInput.value = minLettres
|
||||
maxLettresInput.value = maxLettres
|
||||
optionsDialog.close()
|
||||
}
|
||||
|
||||
confirmOptionsButton.onclick = function(event) {
|
||||
volumeOn = volumeCheckbox.checked
|
||||
minLettres = Math.min(minLettresInput.value, maxLettresInput.value)
|
||||
maxLettres = Math.max(minLettresInput.value, maxLettresInput.value)
|
||||
optionsDialog.close()
|
||||
if (!nbEssais) nouvellePartie()
|
||||
}
|
||||
|
||||
var motATrouver
|
||||
var listeATrouver
|
||||
var lettresTrouvees
|
||||
var nbLettres
|
||||
var nbEssais
|
||||
var nbEssais = 0
|
||||
function nouvellePartie() {
|
||||
nbEssais = 0
|
||||
motATrouver = motsATrouver[Math.floor(motsATrouver.length * Math.pow(Math.random(), 1.8))]
|
||||
nbLettres = minLettres + Math.floor(Math.random() * (maxLettres + 1 - minLettres))
|
||||
motATrouver = motsATrouver[nbLettres][Math.floor(motsATrouver[nbLettres].length * Math.random())]
|
||||
motATrouver = motATrouver.normalize("NFD").replace(/\p{Diacritic}/gu, "")
|
||||
listeATrouver = Array.from(motATrouver)
|
||||
nbLettres = listeATrouver.length
|
||||
|
||||
lettresTrouvees = [listeATrouver[0]]
|
||||
|
||||
@ -141,10 +168,3 @@ function onsubmit(event) {
|
||||
this.reportValidity()
|
||||
}
|
||||
}
|
||||
|
||||
var volumeOn = this.checked
|
||||
volumeCheckbox.oninput = function(event) {
|
||||
volumeOn = this.checked
|
||||
}
|
||||
|
||||
nouvellePartie()
|
||||
15
style.css
15
style.css
@ -2,12 +2,17 @@
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
nav button svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
filter: drop-shadow(0.08em 0.06em #8888);
|
||||
}
|
||||
|
||||
h1 img {
|
||||
h1 img,
|
||||
h3 img {
|
||||
background-color: var(--pico-h1-color);
|
||||
border-radius: 100%;
|
||||
background-origin: content-box;
|
||||
@ -44,11 +49,3 @@ h1 img {
|
||||
#grille input[type=text]:disabled {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
#volumeCheckbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#volumeCheckbox:checked ~ label svg path {
|
||||
d: path("M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z");
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user