70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!-- templates/index.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Игра в Пятнашки</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎮 Игра в Пятнашки</h1>
|
|
<p>Нажимайте на плитки рядом с пустым местом, чтобы переместить их.</p>
|
|
|
|
<div id="puzzle"></div>
|
|
|
|
<button id="restart">🔄 Начать заново</button>
|
|
<p id="message" style="color: green; font-weight: bold;"></p>
|
|
</div>
|
|
|
|
<script>
|
|
let puzzle = {{ puzzle|tojson }};
|
|
|
|
function render() {
|
|
const board = document.getElementById('puzzle');
|
|
board.innerHTML = '';
|
|
puzzle.forEach((num, i) => {
|
|
const tile = document.createElement('div');
|
|
tile.className = 'tile';
|
|
if (num === 0) {
|
|
tile.classList.add('empty');
|
|
} else {
|
|
tile.textContent = num;
|
|
tile.onclick = () => move(i);
|
|
}
|
|
board.appendChild(tile);
|
|
});
|
|
}
|
|
|
|
async function move(index) {
|
|
const response = await fetch('/move', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ puzzle, index })
|
|
});
|
|
const data = await response.json();
|
|
puzzle = data.puzzle;
|
|
render();
|
|
if (data.winner) {
|
|
document.getElementById('message').textContent = '🎉 Поздравляем Вы собрали пазл!';
|
|
}
|
|
}
|
|
|
|
document.getElementById('restart').onclick = async () => {
|
|
const response = await fetch('/');
|
|
const html = await response.text();
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
puzzle = Array.from(doc.body.querySelector('#puzzle').children)
|
|
.map(el => el.textContent.trim() || '0')
|
|
.map(x => x === '0' ? 0 : parseInt(x));
|
|
render();
|
|
document.getElementById('message').textContent = '';
|
|
};
|
|
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|