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>
|
||
|