tictactoc/index.html at main · ium-team/tictactoc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TicTacToc - 서버 없는 온라인 틱택토</title>
    <link rel="icon" href="data:," />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="app-shell">
      <section class="panel">
        <h1>TicTacToc</h1>
        <p class="subtitle">서버/DB 없이 즐기는 온라인 + AI 틱택토</p>

        <div class="mode-switch" role="tablist" aria-label="게임 모드 선택">
          <button id="mode-online" class="mode-btn active" data-mode="online">온라인 대전</button>
          <button id="mode-ai" class="mode-btn" data-mode="ai">컴퓨터 대전</button>
        </div>

        <div id="online-controls" class="controls-group">
          <label for="room-code">룸 코드</label>
          <div class="room-row">
            <input id="room-code" maxlength="24" placeholder="예: korea-fun-01" />
            <button id="btn-generate">생성</button>
          </div>
          <div class="room-row">
            <button id="btn-join" class="primary">입장/연결</button>
            <button id="btn-leave">나가기</button>
          </div>
          <div class="room-row single">
            <button id="btn-quick" class="primary">빠른 대전</button>
          </div>
          <small>
            친구와 같은 룸 코드를 입력하면 연결됩니다.
            서버 없이 브라우저끼리 직접 통신합니다.
          </small>
        </div>

        <div id="ai-controls" class="controls-group hidden">
          <label for="ai-level">난이도</label>
          <select id="ai-level">
            <option value="easy">쉬움 (랜덤)</option>
            <option value="hard" selected>어려움 (최적 플레이)</option>
          </select>
          <small>당신은 X, 컴퓨터는 O로 플레이합니다.</small>
        </div>

        <div class="status-wrap">
          <p id="status-text">모드를 선택하고 시작하세요.</p>
          <button id="btn-reset" class="primary">현재 판 다시 시작</button>
          <div id="rematch-actions" class="room-row hidden">
            <button id="btn-rematch-same">현재 사람이랑 다시하기</button>
            <button id="btn-rematch-new">새로운 사람이랑 하기</button>
          </div>
        </div>
      </section>

      <section class="board-panel">
        <div id="board" class="board" aria-label="틱택토 보드"></div>
      </section>
    </main>

    <script type="module" src="./app.js"></script>
  </body>
</html>