2025-09-12 16:55:21 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html
|
|
|
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
|
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
|
|
|
|
layout:decorate="~{layout/default_layout}"
|
|
|
|
|
>
|
|
|
|
|
<th:block layout:fragment="head" id="head">
|
|
|
|
|
</th:block >
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="content">
|
2025-12-09 17:50:06 +09:00
|
|
|
<div class="game-body-wrapper">
|
|
|
|
|
<h1>Nonogram Logic</h1>
|
|
|
|
|
<div class="game-play-box wide">
|
|
|
|
|
<div id="game-controls" style="margin: 0 0 20px 0; width:100%; display:flex; justify-content:space-between;">
|
|
|
|
|
<div id="mode-selector">
|
|
|
|
|
<label><input type="radio" name="play-mode" value="fill" checked><span>Fill</span></label>
|
|
|
|
|
<label><input type="radio" name="play-mode" value="mark"><span>Mark</span></label>
|
2025-09-12 16:55:21 +09:00
|
|
|
</div>
|
2025-12-09 17:50:06 +09:00
|
|
|
<div id="points-info" class="score-board">❤️ <span id="points-display">5</span></div>
|
|
|
|
|
<button id="hint-btn">Hint</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="board-viewport">
|
|
|
|
|
<div id="game-board"></div>
|
|
|
|
|
<img id="grayscale-reveal" class="reveal-img" src="" alt="">
|
|
|
|
|
<img id="original-reveal" class="reveal-img" src="" alt="">
|
2025-09-12 16:55:21 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script th:inline="javascript">
|
2025-12-09 17:50:06 +09:00
|
|
|
window.puzzleData = /*[[${puzzle}]]*/ null;
|
2025-09-12 16:55:21 +09:00
|
|
|
</script>
|
2025-12-09 17:50:06 +09:00
|
|
|
<script type="module" th:src="@{/js/pages/game_nonogram.js}"></script>
|
2025-09-12 16:55:21 +09:00
|
|
|
</th:block>
|
|
|
|
|
</html>
|
