adrien/lotus
adrien/lotus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

premier jet

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-04-25 00:11:53 +02:00
commit c889fbcb01
8 changed files with 5551 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<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.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main class="container">
<h1>LOTUS</h1>
<div id="grille"></div>
</main>
<div style="display: none">
<audio preload src="sons/lettre-non-trouve.wav" id="sonLettreNonTrouvee"></audio>
<audio preload src="sons/lettre-mal-place.wav" id="sonLettreMalPlacee"></audio>
<audio preload src="sons/lettre-bien-place.wav" id="sonLettreBienPlacee"></audio>
</div>
<script src="mots.js" charset="UTF-8"></script>
<script src="script.js" charset="UTF-8"></script>
</body>
</html>

2674
mots.js Normal file
View File

File diff suppressed because it is too large Load Diff

2674
mots_accentues.js Normal file
View File

File diff suppressed because it is too large Load Diff

146
script.js Normal file
View File

@ -0,0 +1,146 @@
const periode = 500 //ms
var substition = {
"é": "e",
"è": "e",
"ê": "e",
"ë": "e",
"â": "a",
"à": "a",
"î": "i",
"ô": "o",
"œ": "oe",
"û": "u",
"ù": "u",
"ü": "u",
"ç": "c"
}
var motATrouver
var lettresTrouvees
var nbLettres
function nouvellePartie() {
motATrouver = mots[Math.floor(mots.length * Math.random())]
motATrouver = Array.from(motATrouver).map((lettre) => substition[lettre] || lettre)
nbLettres = motATrouver.length
lettresTrouvees = [motATrouver[0]]
grille.innerHTML = ""
nouvelEssai()
}
var form
var lettresATrouver
var nbLettresBienPlacees
function nouvelEssai() {
form = document.createElement("form")
form.action = "#"
form.onsubmit = onsubmit
lettresATrouver = Array.from(motATrouver)
nbLettresBienPlacees = 0
motATrouver.forEach((lettre, indice) => {
var input = document.createElement("input")
input.type = "text"
input.required = true
input.minLength = 1
input.maxLength = 1
input.size = 1
input.pattern = "[a-z]"
input.onfocus = onfocus
input.onkeydown = onkeydown
input.oninput = oninput
input.onkeyup = onkeyup
input.tabIndex = indice + 1
if (lettresTrouvees[indice]) input.value = lettresTrouvees[indice]
form.appendChild(input)
})
grille.appendChild(form)
form.children[0].focus()
}
function onfocus() {
this.select()
}
function oninput() {
var lettre = this.value.toLowerCase()
if (substition[lettre]) lettre = substition[lettre]
this.value = lettre
if (this.checkValidity()) {
this.nextSibling?.focus()
} else {
this.value = ""
}
}
function onkeydown(event) {
if (event.key == "Backspace" && this.value == "") {
this.previousSibling?.focus()
}
}
function onkeyup(event) {
switch(event.key) {
case "Enter": form.onsubmit(); break
case "ArrowLeft": this.previousSibling?.focus(); break
case "ArrowRight": this.nextSibling?.focus(); break
}
}
function onsubmit(event) {
if (this.checkValidity()) {
if (mots.includes(Array.from(form.children).map((input) => input.value).join(""))) {
var inputsNonValides = Array.from(form.children)
motATrouver.forEach((lettre, indice) => {
var input = this.children[indice]
if (input.value == lettre) {
if (!lettresTrouvees[indice]) lettresTrouvees[indice] = lettre
delete(lettresATrouver[indice])
delete(inputsNonValides[indice])
nbLettresBienPlacees++
setTimeout(() => {
input.className = "lettre-bien-placee"
sonLettreBienPlacee.play()
}, periode * indice)
}
input.readOnly = true
})
inputsNonValides.forEach((input, indice) => {
var index = lettresATrouver.indexOf(input.value)
if (index >= 0) {
delete(lettresATrouver[index])
setTimeout(() => {
input.className = "lettre-mal-placee"
sonLettreMalPlacee.play()
}, periode * indice)
} else {
setTimeout(() => sonLettreNonTrouvee.play(), periode * indice)
}
})
setTimeout(() => {
if (nbLettresBienPlacees == nbLettres) {
alert("Bien joué gros !\nUne nouvelle partie ?")
nouvellePartie()
} else nouvelEssai()
}, motATrouver.length * periode)
} else {
for(input of form.children) input.readOnly = true
sonLettreMalPlacee.play()
nouvelEssai()
}
} else {
this.reportValidity()
}
}
nouvellePartie()

BIN
sons/lettre-bien-place.wav Normal file
View File

Binary file not shown.

BIN
sons/lettre-mal-place.wav Normal file
View File

Binary file not shown.

BIN
sons/lettre-non-trouve.wav Normal file
View File

Binary file not shown.

29
style.css Normal file
View File

@ -0,0 +1,29 @@
h1 {
text-align: center;
}
#grille {
width: fit-content;
margin: auto;
}
#grille input[type=text] {
font-size: 2em;
text-transform: capitalize;
width: 1.2em;
height: 1.2em;
padding: 0.2rem;
text-align: center;
border-radius: 0.3rem;
}
.lettre-bien-placee {
background-image: linear-gradient(#D93526A0, #D93526A0);
background-clip: content-box;
}
.lettre-mal-placee {
background-image: radial-gradient(ellipse at center, #FFBF00A0 70%, transparent 70%);
background-origin: content-box;
background-repeat: no-repeat;
}