Hugging Face's logo

Spaces:
Raven7
/
GPTdsa
Running

App Files Community
Raven7 commited on
Commit
d3bc0ee
·
verified ·
1 Parent(s): 41e3190

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -163
index.html CHANGED
@@ -3,6 +3,7 @@
3
  <head>
4
  <title>Go Game</title>
5
  <style>
 
6
  .board {
7
  display: grid;
8
  grid-template-columns: repeat(19, 30px);
@@ -21,6 +22,7 @@
21
  cursor: pointer;
22
  }
23
 
 
24
  .intersection::before {
25
  content: '';
26
  position: absolute;
@@ -43,6 +45,7 @@
43
  z-index: 1;
44
  }
45
 
 
46
  .star-point::before {
47
  content: '';
48
  position: absolute;
@@ -56,6 +59,7 @@
56
  z-index: 2;
57
  }
58
 
 
59
  .stone {
60
  width: 28px;
61
  height: 28px;
@@ -77,6 +81,7 @@
77
  box-shadow: inset -2px -2px 8px rgba(0,0,0,0.2);
78
  }
79
 
 
80
  .controls {
81
  text-align: center;
82
  margin: 20px;
@@ -104,77 +109,37 @@
104
  font-size: 18px;
105
  }
106
 
107
- .game-info div {
108
- margin: 10px 0;
109
- }
110
-
111
- .game-container {
112
- max-width: 800px;
113
- margin: 0 auto;
114
- padding: 20px;
115
- background: #f5f5f5;
116
- border-radius: 10px;
117
- box-shadow: 0 0 20px rgba(0,0,0,0.1);
118
- }
119
-
120
- .mode-select {
121
- text-align: center;
122
- margin-bottom: 20px;
123
- }
124
-
125
- select {
126
- padding: 8px;
127
- font-size: 16px;
128
- border-radius: 4px;
129
- }
130
  </style>
131
  </head>
132
  <body>
133
- <div class="game-container">
134
- <div class="mode-select">
135
- <select id="gameMode">
136
- <option value="pvp">Player vs Player</option>
137
- <option value="ai">Player vs AI</option>
138
- </select>
139
- <select id="difficulty">
140
- <option value="easy">Easy</option>
141
- <option value="hard">Hard</option>
142
- </select>
143
- </div>
144
-
145
- <div id="board" class="board">
146
- <!-- Board will be generated by JavaScript -->
147
- </div>
148
 
149
- <div class="game-info">
150
- <div>Current Player: <span id="currentPlayer">Black</span></div>
151
- <div>Black Captures: <span id="blackCaptures">0</span></div>
152
- <div>White Captures: <span id="whiteCaptures">0</span></div>
153
- </div>
154
 
155
- <div class="controls">
156
- <button id="passBtn">Pass</button>
157
- <button id="resetBtn">Reset</button>
158
- </div>
159
  </div>
160
 
161
  <script>
162
  class GoGame {
163
  constructor() {
164
- this.size = 19;
165
- this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
166
- this.currentPlayer = 'black';
167
- this.captures = { black: 0, white: 0 };
168
- this.lastMove = null;
169
- this.gameMode = 'pvp';
170
- this.difficulty = 'easy';
171
  this.initialize();
172
  }
173
 
 
174
  initialize() {
175
  const boardElement = document.getElementById('board');
176
  boardElement.innerHTML = '';
177
 
 
178
  for (let i = 0; i < this.size; i++) {
179
  for (let j = 0; j < this.size; j++) {
180
  const intersection = document.createElement('div');
@@ -193,14 +158,6 @@
193
 
194
  document.getElementById('passBtn').addEventListener('click', () => this.pass());
195
  document.getElementById('resetBtn').addEventListener('click', () => this.reset());
196
- document.getElementById('gameMode').addEventListener('change', (e) => {
197
- this.gameMode = e.target.value;
198
- this.reset();
199
- });
200
- document.getElementById('difficulty').addEventListener('change', (e) => {
201
- this.difficulty = e.target.value;
202
- });
203
-
204
  this.updateDisplay();
205
  }
206
 
@@ -217,36 +174,24 @@
217
  const row = parseInt(e.target.dataset.row);
218
  const col = parseInt(e.target.dataset.col);
219
 
 
220
  if (this.isValidMove(row, col)) {
221
  this.placeStone(row, col);
222
-
223
- if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
224
- setTimeout(() => this.makeAIMove(), 500);
225
- }
226
  }
227
  }
228
 
229
  isValidMove(row, col) {
230
- if (this.board[row][col] !== null) return false;
231
-
232
- this.board[row][col] = this.currentPlayer;
233
- const captures = this.checkCaptures(row, col);
234
- const suicide = this.isSuicideMove(row, col);
235
-
236
- this.board[row][col] = null;
237
-
238
- return !suicide || captures.length > 0;
239
  }
240
 
241
  placeStone(row, col) {
242
- this.board[row][col] = this.currentPlayer;
243
  this.renderStone(row, col);
244
-
245
- const captures = this.checkCaptures(row, col);
246
- this.removeCaptures(captures);
247
-
248
- this.lastMove = [row, col];
249
- this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
250
  this.updateDisplay();
251
  }
252
 
@@ -257,99 +202,25 @@
257
  intersection.appendChild(stone);
258
  }
259
 
260
- makeStrategicMove() {
261
- let bestMove = null;
262
- let bestScore = -Infinity;
263
-
264
- for (let row = 0; row < this.size; row++) {
265
- for (let col = 0; col < this.size; col++) {
266
- if (this.isValidMove(row, col)) {
267
- const score = this.evaluateMove(row, col);
268
- if (score > bestScore) {
269
- bestScore = score;
270
- bestMove = [row, col];
271
- }
272
- }
273
- }
274
- }
275
-
276
- if (bestMove) {
277
- this.placeStone(...bestMove);
278
- } else {
279
- this.pass();
280
- }
281
- }
282
-
283
- evaluateMove(row, col) {
284
- let score = 0;
285
-
286
- this.board[row][col] = this.currentPlayer;
287
-
288
- const captures = this.checkCaptures(row, col);
289
- score += captures.length * 10;
290
-
291
- const group = this.getGroup(row, col);
292
- const liberties = this.getGroupLiberties(group);
293
- score += liberties.length;
294
-
295
- if (this.isStarPoint(row, col)) {
296
- score += 5;
297
- }
298
-
299
- const neighbors = this.getNeighbors(row, col);
300
- for (const [nRow, nCol] of neighbors) {
301
- if (this.board[nRow][nCol] === this.currentPlayer) {
302
- score += 3;
303
- }
304
- }
305
-
306
- this.board[row][col] = null;
307
- return score;
308
- }
309
-
310
- getGroupLiberties(group) {
311
- const liberties = new Set();
312
- for (const [row, col] of group) {
313
- const neighbors = this.getNeighbors(row, col);
314
- for (const [nRow, nCol] of neighbors) {
315
- if (this.board[nRow][nCol] === null) {
316
- liberties.add(`${nRow},${nCol}`);
317
- }
318
- }
319
- }
320
- return Array.from(liberties);
321
- }
322
-
323
- makeAIMove() {
324
- if (this.difficulty === 'easy') {
325
- this.makeRandomMove();
326
- } else {
327
- this.makeStrategicMove();
328
- }
329
  }
330
 
331
  pass() {
332
- this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
333
  this.updateDisplay();
334
-
335
- if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
336
- setTimeout(() => this.makeAIMove(), 500);
337
- }
338
  }
339
 
340
  reset() {
341
  this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
342
- this.currentPlayer = 'black';
343
- this.captures = { black: 0, white: 0 };
344
- this.lastMove = null;
345
  this.initialize();
346
  }
347
 
348
  updateDisplay() {
349
- document.getElementById('currentPlayer').textContent =
350
  this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1);
351
- document.getElementById('blackCaptures').textContent = this.captures.black;
352
- document.getElementById('whiteCaptures').textContent = this.captures.white;
353
  }
354
  }
355
 
@@ -357,4 +228,3 @@
357
  </script>
358
  </body>
359
  </html>
360
-
 
3
  <head>
4
  <title>Go Game</title>
5
  <style>
6
+ /* Styles for the Go game board and interface */
7
  .board {
8
  display: grid;
9
  grid-template-columns: repeat(19, 30px);
 
22
  cursor: pointer;
23
  }
24
 
25
+ /* Draw the grid intersections (lines) */
26
  .intersection::before {
27
  content: '';
28
  position: absolute;
 
45
  z-index: 1;
46
  }
47
 
48
+ /* Style the star points on the board */
49
  .star-point::before {
50
  content: '';
51
  position: absolute;
 
59
  z-index: 2;
60
  }
61
 
62
+ /* Stone rendering styles */
63
  .stone {
64
  width: 28px;
65
  height: 28px;
 
81
  box-shadow: inset -2px -2px 8px rgba(0,0,0,0.2);
82
  }
83
 
84
+ /* General styles for game controls and interface */
85
  .controls {
86
  text-align: center;
87
  margin: 20px;
 
109
  font-size: 18px;
110
  }
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </style>
113
  </head>
114
  <body>
115
+ <div class="controls">
116
+ <button id="passBtn">Pass</button>
117
+ <button id="resetBtn">Reset</button>
118
+ </div>
 
 
 
 
 
 
 
 
 
 
 
119
 
120
+ <div class="game-info">
121
+ <div>Current Player: <span id="currentPlayer">Black</span></div>
122
+ </div>
 
 
123
 
124
+ <div id="board" class="board">
125
+ <!-- Board is dynamically created with JS -->
 
 
126
  </div>
127
 
128
  <script>
129
  class GoGame {
130
  constructor() {
131
+ this.size = 19; // Size of the Go board
132
+ this.board = Array(this.size).fill().map(() => Array(this.size).fill(null)); // Game state
133
+ this.currentPlayer = 'black'; // Current player
 
 
 
 
134
  this.initialize();
135
  }
136
 
137
+ // Initialize the game and the board
138
  initialize() {
139
  const boardElement = document.getElementById('board');
140
  boardElement.innerHTML = '';
141
 
142
+ // Generate intersections
143
  for (let i = 0; i < this.size; i++) {
144
  for (let j = 0; j < this.size; j++) {
145
  const intersection = document.createElement('div');
 
158
 
159
  document.getElementById('passBtn').addEventListener('click', () => this.pass());
160
  document.getElementById('resetBtn').addEventListener('click', () => this.reset());
 
 
 
 
 
 
 
 
161
  this.updateDisplay();
162
  }
163
 
 
174
  const row = parseInt(e.target.dataset.row);
175
  const col = parseInt(e.target.dataset.col);
176
 
177
+ console.log(`Clicked row: ${row}, col: ${col}`); // Debugging: Check click
178
  if (this.isValidMove(row, col)) {
179
  this.placeStone(row, col);
 
 
 
 
180
  }
181
  }
182
 
183
  isValidMove(row, col) {
184
+ if (this.board[row][col] !== null) {
185
+ console.log("Spot is already occupied");
186
+ return false;
187
+ }
188
+ return true;
 
 
 
 
189
  }
190
 
191
  placeStone(row, col) {
192
+ this.board[row][col] = this.currentPlayer; // Update the board state
193
  this.renderStone(row, col);
194
+ this.switchPlayer();
 
 
 
 
 
195
  this.updateDisplay();
196
  }
197
 
 
202
  intersection.appendChild(stone);
203
  }
204
 
205
+ switchPlayer() {
206
+ this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  }
208
 
209
  pass() {
210
+ this.switchPlayer();
211
  this.updateDisplay();
 
 
 
 
212
  }
213
 
214
  reset() {
215
  this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
216
+ const boardElement = document.getElementById('board');
217
+ boardElement.innerHTML = '';
 
218
  this.initialize();
219
  }
220
 
221
  updateDisplay() {
222
+ document.getElementById('currentPlayer').textContent =
223
  this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1);
 
 
224
  }
225
  }
226
 
 
228
  </script>
229
  </body>
230
  </html>