156 lines
5.1 KiB
HTML
156 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cemantle Solver Web</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 2em; background: #f7f7f7; }
|
|
#container { background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 8px #0001; max-width: 650px; margin: auto; }
|
|
#word { font-size: 2em; margin: 1em 0; }
|
|
#scoreInput { font-size: 1.2em; width: 100px; }
|
|
button { font-size: 1em; padding: 0.5em 1em; margin-top: 1em; }
|
|
#result { margin-top: 1em; color: green; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<h2>Cemantle Solver</h2>
|
|
<div id="setup">
|
|
<label>Mot de départ : <input id="firstWord" type="text" /></label>
|
|
<label>Score de départ : <input id="firstScore" type="number" min="0" max="1000" /></label>
|
|
<button id="startBtn">Démarrer</button>
|
|
<span id="loading" style="display:none; margin-left:1em; color:#0077cc;">Chargement…</span>
|
|
</div>
|
|
<div id="game" style="display:none;">
|
|
<div id="word"></div>
|
|
<label for="scoreInput">Score :</label>
|
|
<input type="number" id="scoreInput" min="0" max="1000" />
|
|
<button id="submitScoreBtn">Valider</button>
|
|
<button id="skipWordBtn" style="margin-left:1em;">Passer</button>
|
|
<div id="result"></div>
|
|
<div id="remaining"></div>
|
|
<!-- Historique supprimé -->
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let currentWord = '';
|
|
let history = [];
|
|
let remaining = 0;
|
|
|
|
// Historique supprimé
|
|
|
|
function updateRemaining() {
|
|
document.getElementById('remaining').textContent = `Mots restants : ${remaining}`;
|
|
}
|
|
|
|
async function startGame() {
|
|
const firstWord = document.getElementById('firstWord').value;
|
|
const firstScore = document.getElementById('firstScore').value;
|
|
if (!firstWord || !firstScore) {
|
|
alert('Remplis le mot et le score de départ');
|
|
return;
|
|
}
|
|
document.getElementById('loading').style.display = '';
|
|
try {
|
|
const resp = await fetch('/init', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ first_word: firstWord, first_score: firstScore })
|
|
});
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
alert(data.error);
|
|
document.getElementById('loading').style.display = 'none';
|
|
return;
|
|
}
|
|
history = data.history || [];
|
|
remaining = data.count;
|
|
document.getElementById('setup').style.display = 'none';
|
|
document.getElementById('game').style.display = '';
|
|
await nextWord();
|
|
} catch (e) {
|
|
alert('Erreur lors du chargement : ' + e);
|
|
} finally {
|
|
document.getElementById('loading').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function nextWord() {
|
|
const resp = await fetch('/next', { method: 'POST' });
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
document.getElementById('word').textContent = '';
|
|
document.getElementById('submitScoreBtn').disabled = true;
|
|
document.getElementById('skipWordBtn').disabled = true;
|
|
return;
|
|
}
|
|
if (data.result) {
|
|
document.getElementById('word').textContent = '';
|
|
document.getElementById('result').textContent = data.result;
|
|
document.getElementById('submitScoreBtn').disabled = true;
|
|
document.getElementById('skipWordBtn').disabled = true;
|
|
updateRemaining();
|
|
return;
|
|
}
|
|
currentWord = data.guess;
|
|
remaining = data.remaining;
|
|
history = data.history || [];
|
|
document.getElementById('word').textContent = currentWord;
|
|
document.getElementById('scoreInput').value = '';
|
|
document.getElementById('result').textContent = '';
|
|
document.getElementById('scoreInput').focus();
|
|
updateRemaining();
|
|
}
|
|
|
|
document.getElementById('startBtn').onclick = startGame;
|
|
document.getElementById('submitScoreBtn').onclick = async function() {
|
|
const score = document.getElementById('scoreInput').value;
|
|
if (score === '') {
|
|
document.getElementById('result').textContent = 'Veuillez entrer un score.';
|
|
return;
|
|
}
|
|
const resp = await fetch('/score', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ score })
|
|
});
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
document.getElementById('result').textContent = data.error;
|
|
return;
|
|
}
|
|
if (data.result) {
|
|
document.getElementById('result').textContent = data.result;
|
|
}
|
|
history = data.history || history;
|
|
remaining = data.remaining || remaining;
|
|
// updateHistory supprimé
|
|
updateRemaining();
|
|
await nextWord();
|
|
};
|
|
|
|
document.getElementById('skipWordBtn').onclick = async function() {
|
|
const resp = await fetch('/skip', { method: 'POST' });
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
document.getElementById('result').textContent = data.error;
|
|
return;
|
|
}
|
|
if (data.result) {
|
|
document.getElementById('result').textContent = data.result;
|
|
await nextWord();
|
|
} else if (data.guess) {
|
|
currentWord = data.guess;
|
|
remaining = data.remaining;
|
|
history = data.history || history;
|
|
document.getElementById('word').textContent = currentWord;
|
|
document.getElementById('scoreInput').value = '';
|
|
document.getElementById('result').textContent = '';
|
|
document.getElementById('scoreInput').focus();
|
|
updateRemaining();
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|