gomoku/index.html at main · MerciHanrim/gomoku · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omok · Korean Five-in-a-Row</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <!-- 타이틀바: 장기와 동일 골격 (제목 + 부제 + ⚙) -->
  <div class="title-bar">
    <h1>五目</h1>
    <div class="sub" id="subLabel">Gomoku · 오목</div>
    <button class="settings-btn" id="settingsBtn" aria-label="설정">⚙</button>
    <div class="settings-backdrop" id="settingsBackdrop"></div>
    <div class="settings-dropdown" id="settingsDropdown">
      <!-- 언어 (장기와 동일 7개) -->
      <div class="settings-section-label" id="settingsLangLabel">언어</div>
      <button id="langKo" class="lang-btn">한국어</button>
      <button id="langEn" class="lang-btn">English</button>
      <button id="langZhHans" class="lang-btn">简体中文</button>
      <button id="langZhHant" class="lang-btn">繁體中文</button>
      <button id="langJa" class="lang-btn">日本語</button>
      <button id="langDe" class="lang-btn">Deutsch</button>
      <button id="langFr" class="lang-btn">Français</button>
      <div class="settings-divider"></div>
      <!-- 배경 테마 -->
      <div class="settings-section-label" id="settingsBgLabel">바둑판 배경</div>
      <button id="bgSansuHwa" class="lang-btn bg-btn active">산수화</button>
      <button id="bgWood" class="lang-btn bg-btn">원목</button>
      <button id="bgSipjangsaeng" class="lang-btn bg-btn">십장생</button>
      <button id="bgPaper" class="lang-btn bg-btn">한지</button>
      <div class="settings-divider"></div>
      <!-- 33 금수 룰 토글 (기본 자유룰) -->
      <div class="settings-section-label" id="settingsRuleLabel">룰</div>
      <button id="ruleFree" class="lang-btn rule-btn active">자유룰</button>
      <button id="ruleRenju" class="lang-btn rule-btn">33 금수</button>
      <div class="settings-divider"></div>
      <button id="aboutBtn" class="settings-about-link">About / Credits</button>
    </div>
  </div>

  <div class="game-area">
    <div class="board-col">
      <!-- 보드 프레임: 장기와 같은 ::before 배경 레이어 + SVG 격자 + 돌 레이어.
           단 오목은 정사각(15×15)이라 flip 없음. -->
      <div class="board-frame" id="frame">
        <svg class="grid" id="grid" preserveAspectRatio="none"></svg>
        <div class="stones" id="stones"></div>
        <!-- 착수 가능한 빈 교차점을 받는 투명 히트영역 레이어 -->
        <div class="hit-layer" id="hitLayer"></div>
        <!-- 종료 화면 (장기 win-overlay 재사용) -->
        <div class="win-overlay" id="winOverlay">
          <h2 id="winTitle"></h2>
          <div class="win-sub" id="winSubLine"></div>
          <p id="winHint">다시 두려면 ‘처음부터’를 누르세요</p>
        </div>
      </div>
      <!-- ── 메인 메뉴(시작 화면) — 장기 setup-overlay 계승, 오목 매핑 ──
           단계: 모드+난이도 → 흑/백 → 룰. 룰을 대국 전에 고정하는 게 핵심 목적.
           (6단계 1차: 난이도는 명인만 활성, 로컬 2인은 메뉴 비노출) -->
      <div class="setup-overlay show" id="setupOverlay">
        <div class="setup-panel">
          <!-- 1단계: 모드 메뉴 + 난이도 서브패널 -->
          <div class="setup-step" id="levelStep">
            <div class="setup-title" id="levelStepTitle">오늘은 어떻게 두실까요?</div>
            <div class="mode-grid" id="modeGrid"></div>
            <!-- 난이도 (컴퓨터와 두기 선택 후 노출) -->
            <div class="level-sub-panel" id="levelSubPanel" style="display:none">
              <div class="level-play"><span class="level-play-label" id="levelPlayLabel">컴퓨터와 두기</span></div>
              <div class="level-grid" id="levelGrid"></div>
              <div class="level-note" id="levelNote">상대를 고르세요 · 한 판이 끝나면 다시 고를 수 있습니다</div>
            </div>
          </div>
          <!-- 2단계: 흑/백 선택 (장기 factionStep 자리) -->
          <div class="setup-step" id="sideStep" style="display:none">
            <div class="setup-title" id="sideStepTitle">어느 돌로 두실까요?</div>
            <div class="side-grid" id="sideGrid"></div>
            <div class="side-note" id="sideNote">흑이 먼저 둡니다 · 한 판이 끝나면 다시 고를 수 있습니다</div>
          </div>
          <!-- 3단계: 룰 선택 (장기 setupStep 자리) -->
          <div class="setup-step" id="ruleStep" style="display:none">
            <div class="setup-title" id="ruleStepTitle">어떤 룰로 두실까요?</div>
            <div class="rule-grid" id="ruleGrid"></div>
            <div class="rule-note" id="ruleStepNote">대국이 시작되면 룰은 고정됩니다</div>
          </div>
        </div>
      </div>
    </div>

    <aside class="side-panel">
      <!-- 차례 표시: 장기 status 구조 재사용 (흑=먹 / 백=백자) -->
      <div class="status turn-black" id="status">
        <span class="turn-line"><span class="turn-dot"></span><b id="turnLabel">흑</b> <span id="turnSuffix">차례</span></span>
        <span class="msg" id="msg">빈 자리를 눌러 돌을 놓으세요</span>
      </div>

      <!-- 기보 (장기 movelog 구조 차용 — 좌표 한 칸씩) -->
      <div class="movelog-wrap">
        <div class="movelog-title" id="movelogTitle">기 보</div>
        <ol class="movelog" id="movelog"></ol>
      </div>

      <div class="controls">
        <button id="undoBtn">무르기</button>
        <button id="resetBtn">처음부터</button>
      </div>
    </aside>
  </div>
</div>

<!-- 오목 규칙 오버레이 (모드 메뉴 "오목 규칙"에서 열림) — 장기 rules-overlay 계승 -->
<div class="rules-overlay" id="rulesOverlay" style="display:none">
  <div class="rules-backdrop" id="rulesBackdrop"></div>
  <div class="rules-panel" role="dialog" aria-modal="true" aria-labelledby="rulesTitle">
    <div class="rules-head">
      <div class="rules-head-text">
        <h2 class="rules-title" id="rulesTitle">오목 규칙</h2>
        <p class="rules-subtitle" id="rulesSubtitle">대국을 시작하기 전에 알아두면 좋은 기본 규칙</p>
      </div>
      <button class="rules-close" id="rulesClose" aria-label="닫기">✕</button>
    </div>
    <div class="rules-body" id="rulesBody"><!-- renderRules()가 채움 --></div>
  </div>
</div>

<!-- About / Credits 오버레이 (설정 메뉴 하단 "소개"에서 열림) — 장기 about-overlay 계승 -->
<div class="rules-overlay" id="aboutOverlay" style="display:none">
  <div class="rules-backdrop" id="aboutBackdrop"></div>
  <div class="rules-panel" role="dialog" aria-modal="true" aria-labelledby="aboutTitle">
    <div class="rules-head">
      <div class="rules-head-text">
        <h2 class="rules-title" id="aboutTitle">소개</h2>
      </div>
      <button class="rules-close" id="aboutClose" aria-label="닫기">✕</button>
    </div>
    <div class="rules-body" id="aboutBody"><!-- renderAbout()가 채움 --></div>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>