This commit is contained in:
2025-09-02 17:32:02 +09:00
parent 543b1209e6
commit 4d44a4838b
22 changed files with 1770 additions and 62 deletions
@@ -0,0 +1,41 @@
<!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">
<script type="text/javascript" th:src="@{/js/2048.js}"></script>
<!-- <link th:href="@{/css/puzzle.css}" rel="stylesheet" />-->
<link th:href="@{/css/2048.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
<script type="text/javascript" th:src="@{/js/user.js}"></script>
</th:block >
<th:block layout:fragment="content">
<h1>2048</h1>
<p>화살표를 터치하거나 키보드 방향키를 이용해 타일을 합쳐보세요!</p>
<div class="game-container">
<div class="score-container">
<strong>점수:</strong> <span id="score">0</span>
</div>
<div id="game-board"></div>
<div id="game-over-popup" class="popup-container" style="display:none;">
<div class="popup">
<h2>게임 오버!</h2>
<p>최종 점수: <span id="final-score">0</span></p>
<input type="text" id="player-name" placeholder="이름을 입력하세요">
<button id="save-score">점수 저장</button>
</div>
</div>
<div class="ranking-container">
<h3>🏆 랭킹</h3>
<ol id="ranking-list"></ol>
</div>
</th:block>
</html>
@@ -21,10 +21,10 @@
<div id="game-controls">
<div id="mode-selector">
<label>
<input type="radio" name="play-mode" value="fill" checked> Fill
<input type="radio" name="play-mode" value="fill" checked><span> Fill</span>
</label>
<label>
<input type="radio" name="play-mode" value="mark"> Mark (X)
<input type="radio" name="play-mode" value="mark"><span> Mark (X)</span>
</label>
</div>
@@ -0,0 +1,80 @@
<!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">
<script type="text/javascript" th:src="@{/js/sudoku.js}"></script>
<!-- <link th:href="@{/css/puzzle.css}" rel="stylesheet" />-->
<link th:href="@{/css/sudoku.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
<script type="text/javascript" th:src="@{/js/user.js}"></script>
</th:block >
<th:block layout:fragment="content">
<div id="sudoku-game-app">
<div class="container">
<h1>스도쿠를 즐겨보세요!</h1>
<div id="setup-container">
<select id="difficulty-select">
<option value="easy">쉬움</option>
<option value="medium">중간</option>
<option value="hard">어려움</option>
</select>
<button id="start-btn">게임 시작</button>
</div>
<div id="game-container" class="hidden">
<div class="game-info">
<div id="score">SCORE: 5</div>
<div id="timer">00:00</div>
</div>
<div id="sudoku-board"></div>
<div id="number-input-buttons">
<button class="num-btn" data-number="1">1</button>
<button class="num-btn" data-number="2">2</button>
<button class="num-btn" data-number="3">3</button>
<button class="num-btn" data-number="4">4</button>
<button class="num-btn" data-number="5">5</button>
<button class="num-btn" data-number="6">6</button>
<button class="num-btn" data-number="7">7</button>
<button class="num-btn" data-number="8">8</button>
<button class="num-btn" data-number="9">9</button>
<button id="undo-btn" class="clear-btn">실행취소</button>
</div>
<div class="action-buttons">
<button id="hint-btn">힌트 사용 (-1점)</button>
<button id="complete-btn">정답 확인</button>
</div>
</div>
</div>
</div>
<div id="modal-overlay" class="hidden">
<div id="modal-content">
<h2>🎉 성공! 기록을 남겨주세요.</h2>
<input type="text" id="username-input" placeholder="이름을 입력하세요" maxlength="10">
<button id="submit-rank-btn">랭킹 등록</button>
<hr>
<h3>🏆 명예의 전당</h3>
<ol id="ranking-list"></ol>
<button id="close-modal-btn">닫기</button>
</div>
</div>
<div id="game-over-modal" class="hidden">
<div id="modal-content">
<h2>GAME OVER</h2>
<p>포인트를 모두 사용했습니다.</p>
<button id="retry-btn">새 게임 시작</button>
</div>
</div>
</th:block>
</html>
@@ -0,0 +1,31 @@
<!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">
<script type="text/javascript" th:src="@{/js/admin-sudoku.js}"></script>
<!-- <link th:href="@{/css/puzzle.css}" rel="stylesheet" />-->
<link th:href="@{/css/admin-sudoku.css}" rel="stylesheet" />
<script th:inline="javascript">
</script>
<script type="text/javascript" th:src="@{/js/user.js}"></script>
</th:block >
<th:block layout:fragment="content">
<div class="container">
<h1>스도쿠 퍼즐 생성기</h1>
<p>버튼을 누르면 새로운 스도쿠 퍼즐을 생성하여 DB에 저장하고 화면에 보여줍니다.</p>
<button id="generate-btn">새 스도쿠 생성</button>
<div id="status-message"></div>
<h2>생성된 퍼즐</h2>
<div id="sudoku-board">
</div>
</div>
</th:block>
</html>