Hugging Face's logo

Spaces:
aicoding101
/
omok2
Running

App Files Community
aicoding101 commited on
Commit
7435da3
ยท
verified ยท
1 Parent(s): e517fca

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +388 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Omok2
3
- emoji: โšก
4
  colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: omok2
3
+ emoji: ๐Ÿณ
4
  colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,388 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D ์˜ค๋ชฉ ๊ฒŒ์ž„</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
10
+ <style>
11
+ body {
12
+ margin: 0;
13
+ overflow: hidden;
14
+ font-family: 'Arial', sans-serif;
15
+ }
16
+ #game-container {
17
+ position: relative;
18
+ width: 100%;
19
+ height: 100vh;
20
+ }
21
+ #ui {
22
+ position: absolute;
23
+ top: 20px;
24
+ left: 20px;
25
+ z-index: 100;
26
+ background-color: rgba(255, 255, 255, 0.8);
27
+ padding: 15px;
28
+ border-radius: 10px;
29
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
30
+ }
31
+ #restart-btn {
32
+ background-color: #4CAF50;
33
+ color: white;
34
+ border: none;
35
+ padding: 8px 16px;
36
+ border-radius: 4px;
37
+ cursor: pointer;
38
+ font-weight: bold;
39
+ transition: background-color 0.3s;
40
+ }
41
+ #restart-btn:hover {
42
+ background-color: #45a049;
43
+ }
44
+ .stone-count {
45
+ display: flex;
46
+ align-items: center;
47
+ margin-bottom: 10px;
48
+ }
49
+ .stone-icon {
50
+ width: 20px;
51
+ height: 20px;
52
+ border-radius: 50%;
53
+ margin-right: 10px;
54
+ }
55
+ .black-stone {
56
+ background-color: #FF69B4; /* ํ•‘ํฌ์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝ */
57
+ border: 1px solid #FF1493;
58
+ }
59
+ .white-stone {
60
+ background-color: #fff;
61
+ border: 1px solid #ddd;
62
+ }
63
+ #winner-message {
64
+ position: absolute;
65
+ top: 50%;
66
+ left: 50%;
67
+ transform: translate(-50%, -50%);
68
+ background-color: rgba(0, 0, 0, 0.8);
69
+ color: white;
70
+ padding: 20px 40px;
71
+ border-radius: 10px;
72
+ font-size: 24px;
73
+ display: none;
74
+ z-index: 200;
75
+ text-align: center;
76
+ }
77
+ #close-winner {
78
+ background-color: #f44336;
79
+ color: white;
80
+ border: none;
81
+ padding: 8px 16px;
82
+ border-radius: 4px;
83
+ cursor: pointer;
84
+ margin-top: 15px;
85
+ font-weight: bold;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <div id="game-container">
91
+ <div id="ui">
92
+ <h1 class="text-xl font-bold mb-4">3D ์˜ค๋ชฉ ๊ฒŒ์ž„</h1>
93
+ <div class="stone-count">
94
+ <div class="stone-icon black-stone"></div>
95
+ <span id="black-count">ํ•‘ํฌ๋Œ: 0</span> <!-- ํ…์ŠคํŠธ ๋ณ€๊ฒฝ -->
96
+ </div>
97
+ <div class="stone-count">
98
+ <div class="stone-icon white-stone"></div>
99
+ <span id="white-count">๋ฐฑ๋Œ: 0</span>
100
+ </div>
101
+ <p id="current-player" class="font-bold mt-2">ํ˜„์žฌ ์ฐจ๋ก€: ํ•‘ํฌ๋Œ</p> <!-- ์ดˆ๊ธฐ ํ…์ŠคํŠธ ๋ณ€๊ฒฝ -->
102
+ <button id="restart-btn" class="mt-4">๊ฒŒ์ž„ ์žฌ์‹œ์ž‘</button>
103
+ </div>
104
+ <div id="winner-message">
105
+ <h2 id="winner-text"></h2>
106
+ <button id="close-winner">๋‹ซ๊ธฐ</button>
107
+ </div>
108
+ </div>
109
+
110
+ <script>
111
+ // ๊ฒŒ์ž„ ๋ณ€์ˆ˜
112
+ const BOARD_SIZE = 15;
113
+ let currentPlayer = 1; // 1: ํ•‘ํฌ๋Œ, 2: ๋ฐฑ๋Œ
114
+ let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
115
+ let gameOver = false;
116
+ let blackStones = 0;
117
+ let whiteStones = 0;
118
+
119
+ // Three.js ์ดˆ๊ธฐํ™”
120
+ const scene = new THREE.Scene();
121
+ scene.background = new THREE.Color(0xf0f0f0);
122
+
123
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
124
+ camera.position.set(0, 20, 20);
125
+
126
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
127
+ renderer.setSize(window.innerWidth, window.innerHeight);
128
+ renderer.shadowMap.enabled = true;
129
+ document.getElementById('game-container').appendChild(renderer.domElement);
130
+
131
+ // ์ปจํŠธ๋กค ์ถ”๊ฐ€
132
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
133
+ controls.enableDamping = true;
134
+ controls.dampingFactor = 0.05;
135
+ controls.minDistance = 15;
136
+ controls.maxDistance = 50;
137
+ controls.maxPolarAngle = Math.PI / 2;
138
+
139
+ // ์กฐ๋ช… ์ถ”๊ฐ€
140
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
141
+ scene.add(ambientLight);
142
+
143
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
144
+ directionalLight.position.set(10, 20, 10);
145
+ directionalLight.castShadow = true;
146
+ directionalLight.shadow.mapSize.width = 2048;
147
+ directionalLight.shadow.mapSize.height = 2048;
148
+ scene.add(directionalLight);
149
+
150
+ // ์˜ค๋ชฉํŒ ์ƒ์„ฑ
151
+ const boardGeometry = new THREE.BoxGeometry(BOARD_SIZE, 0.2, BOARD_SIZE);
152
+ const boardMaterial = new THREE.MeshStandardMaterial({
153
+ color: 0x8B4513,
154
+ roughness: 0.7,
155
+ metalness: 0.2
156
+ });
157
+ const board = new THREE.Mesh(boardGeometry, boardMaterial);
158
+ board.position.y = -0.1;
159
+ board.receiveShadow = true;
160
+ scene.add(board);
161
+
162
+ // ์˜ค๋ชฉํŒ ์„  ๊ทธ๋ฆฌ๊ธฐ
163
+ const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
164
+
165
+ // ๊ฐ€๋กœ์„ 
166
+ for (let i = 0; i < BOARD_SIZE; i++) {
167
+ const points = [];
168
+ points.push(new THREE.Vector3(-BOARD_SIZE/2 + 0.5, 0.01, -BOARD_SIZE/2 + 0.5 + i));
169
+ points.push(new THREE.Vector3(BOARD_SIZE/2 - 0.5, 0.01, -BOARD_SIZE/2 + 0.5 + i));
170
+
171
+ const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
172
+ const line = new THREE.Line(lineGeometry, lineMaterial);
173
+ scene.add(line);
174
+ }
175
+
176
+ // ์„ธ๋กœ์„ 
177
+ for (let i = 0; i < BOARD_SIZE; i++) {
178
+ const points = [];
179
+ points.push(new THREE.Vector3(-BOARD_SIZE/2 + 0.5 + i, 0.01, -BOARD_SIZE/2 + 0.5));
180
+ points.push(new THREE.Vector3(-BOARD_SIZE/2 + 0.5 + i, 0.01, BOARD_SIZE/2 - 0.5));
181
+
182
+ const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
183
+ const line = new THREE.Line(lineGeometry, lineMaterial);
184
+ scene.add(line);
185
+ }
186
+
187
+ // ์  ํ‘œ์‹œ (5์ค„๋งˆ๋‹ค)
188
+ const dotGeometry = new THREE.SphereGeometry(0.1, 16, 16);
189
+ const dotMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
190
+
191
+ const positions = [
192
+ [3, 3], [3, 11], [7, 7], [11, 3], [11, 11]
193
+ ];
194
+
195
+ positions.forEach(pos => {
196
+ const dot = new THREE.Mesh(dotGeometry, dotMaterial);
197
+ dot.position.set(
198
+ -BOARD_SIZE/2 + 0.5 + pos[0],
199
+ 0.02,
200
+ -BOARD_SIZE/2 + 0.5 + pos[1]
201
+ );
202
+ scene.add(dot);
203
+ });
204
+
205
+ // ๋Œ ๊ทธ๋ฃน
206
+ const stoneGroup = new THREE.Group();
207
+ scene.add(stoneGroup);
208
+
209
+ // ๋Œ ์ƒ์„ฑ ํ•จ์ˆ˜ (ํ•‘ํฌ์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝ)
210
+ function createStone(x, z, player) {
211
+ const stoneGeometry = new THREE.SphereGeometry(0.4, 32, 32);
212
+ const stoneMaterial = new THREE.MeshStandardMaterial({
213
+ color: player === 1 ? 0xFF69B4 : 0xffffff, // ํ•‘ํฌ์ƒ‰ ์ ์šฉ
214
+ roughness: 0.2,
215
+ metalness: player === 1 ? 0.7 : 0.5,
216
+ emissive: player === 1 ? 0xFF1493 : 0x000000,
217
+ emissiveIntensity: 0.1
218
+ });
219
+
220
+ const stone = new THREE.Mesh(stoneGeometry, stoneMaterial);
221
+ stone.position.set(
222
+ -BOARD_SIZE/2 + 0.5 + x,
223
+ 0.4,
224
+ -BOARD_SIZE/2 + 0.5 + z
225
+ );
226
+ stone.castShadow = true;
227
+ stone.receiveShadow = true;
228
+
229
+ // ๋Œ์— ํ”Œ๋ ˆ์ด์–ด ์ •๋ณด ์ €์žฅ
230
+ stone.userData = { player, x, z };
231
+
232
+ stoneGroup.add(stone);
233
+ return stone;
234
+ }
235
+
236
+ // ๋Œ ๋†“๊ธฐ
237
+ function placeStone(x, z) {
238
+ if (gameBoard[x][z] !== 0 || gameOver) return false;
239
+
240
+ gameBoard[x][z] = currentPlayer;
241
+ createStone(x, z, currentPlayer);
242
+
243
+ // ๋Œ ๊ฐœ์ˆ˜ ์—…๋ฐ์ดํŠธ
244
+ if (currentPlayer === 1) {
245
+ blackStones++;
246
+ document.getElementById('black-count').textContent = `ํ•‘ํฌ๋Œ: ${blackStones}`;
247
+ } else {
248
+ whiteStones++;
249
+ document.getElementById('white-count').textContent = `๋ฐฑ๋Œ: ${whiteStones}`;
250
+ }
251
+
252
+ // ์Šน๋ฆฌ ํ™•์ธ
253
+ if (checkWin(x, z)) {
254
+ gameOver = true;
255
+ const winner = currentPlayer === 1 ? 'ํ•‘ํฌ๋Œ' : '๋ฐฑ๋Œ'; // ํ…์ŠคํŠธ ๋ณ€๊ฒฝ
256
+ document.getElementById('winner-text').textContent = `${winner} ์Šน๋ฆฌ!`;
257
+ document.getElementById('winner-message').style.display = 'block';
258
+ return true;
259
+ }
260
+
261
+ // ์ฐจ๋ก€ ๋ณ€๏ฟฝ๏ฟฝ๏ฟฝ
262
+ currentPlayer = currentPlayer === 1 ? 2 : 1;
263
+ document.getElementById('current-player').textContent = `ํ˜„์žฌ ์ฐจ๋ก€: ${currentPlayer === 1 ? 'ํ•‘ํฌ๋Œ' : '๋ฐฑ๋Œ'}`;
264
+
265
+ return true;
266
+ }
267
+
268
+ // ์Šน๋ฆฌ ์กฐ๊ฑด ํ™•์ธ
269
+ function checkWin(x, z) {
270
+ const directions = [
271
+ [1, 0], // ๊ฐ€๋กœ
272
+ [0, 1], // ์„ธ๋กœ
273
+ [1, 1], // ๋Œ€๊ฐ์„  โ†˜
274
+ [1, -1] // ๋Œ€๊ฐ์„  โ†—
275
+ ];
276
+
277
+ for (const [dx, dz] of directions) {
278
+ let count = 1;
279
+
280
+ // ์–‘๋ฐฉํ–ฅ์œผ๋กœ ํ™•์ธ
281
+ for (let i = 1; i < 5; i++) {
282
+ const nx = x + i * dx;
283
+ const nz = z + i * dz;
284
+
285
+ if (nx < 0 || nx >= BOARD_SIZE || nz < 0 || nz >= BOARD_SIZE ||
286
+ gameBoard[nx][nz] !== currentPlayer) {
287
+ break;
288
+ }
289
+ count++;
290
+ }
291
+
292
+ for (let i = 1; i < 5; i++) {
293
+ const nx = x - i * dx;
294
+ const nz = z - i * dz;
295
+
296
+ if (nx < 0 || nx >= BOARD_SIZE || nz < 0 || nz >= BOARD_SIZE ||
297
+ gameBoard[nx][nz] !== currentPlayer) {
298
+ break;
299
+ }
300
+ count++;
301
+ }
302
+
303
+ if (count >= 5) return true;
304
+ }
305
+
306
+ return false;
307
+ }
308
+
309
+ // ๊ฒŒ์ž„ ์žฌ์„ค์ •
310
+ function resetGame() {
311
+ // ๊ฒŒ์ž„ ๋ณด๋“œ ์ดˆ๊ธฐํ™”
312
+ gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
313
+
314
+ // ๋Œ ์ œ๊ฑฐ
315
+ while (stoneGroup.children.length > 0) {
316
+ stoneGroup.remove(stoneGroup.children[0]);
317
+ }
318
+
319
+ // ๊ฒŒ์ž„ ์ƒํƒœ ์ดˆ๊ธฐํ™”
320
+ currentPlayer = 1;
321
+ gameOver = false;
322
+ blackStones = 0;
323
+ whiteStones = 0;
324
+
325
+ // UI ์—…๋ฐ์ดํŠธ
326
+ document.getElementById('black-count').textContent = 'ํ•‘ํฌ๋Œ: 0';
327
+ document.getElementById('white-count').textContent = '๋ฐฑ๋Œ: 0';
328
+ document.getElementById('current-player').textContent = 'ํ˜„์žฌ ์ฐจ๋ก€: ํ•‘ํฌ๋Œ';
329
+ document.getElementById('winner-message').style.display = 'none';
330
+ }
331
+
332
+ // ๋งˆ์šฐ์Šค ํด๋ฆญ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
333
+ function onMouseClick(event) {
334
+ if (gameOver) return;
335
+
336
+ // ๋งˆ์šฐ์Šค ์œ„์น˜ ์ •๊ทœํ™”
337
+ const mouse = new THREE.Vector2();
338
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
339
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
340
+
341
+ // ๋ ˆ์ด์บ์ŠคํŒ…
342
+ const raycaster = new THREE.Raycaster();
343
+ raycaster.setFromCamera(mouse, camera);
344
+
345
+ // ์˜ค๋ชฉํŒ๊ณผ์˜ ๊ต์ฐจ์  ํ™•์ธ
346
+ const intersects = raycaster.intersectObject(board);
347
+
348
+ if (intersects.length > 0) {
349
+ const point = intersects[0].point;
350
+
351
+ // ๋ณด๋“œ ์ขŒํ‘œ๋กœ ๋ณ€ํ™˜
352
+ const boardX = Math.round(point.x + BOARD_SIZE/2 - 0.5);
353
+ const boardZ = Math.round(point.z + BOARD_SIZE/2 - 0.5);
354
+
355
+ // ์œ ํšจํ•œ ์œ„์น˜์ธ์ง€ ํ™•์ธ
356
+ if (boardX >= 0 && boardX < BOARD_SIZE && boardZ >= 0 && boardZ < BOARD_SIZE) {
357
+ placeStone(boardX, boardZ);
358
+ }
359
+ }
360
+ }
361
+
362
+ // UI ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ
363
+ document.getElementById('restart-btn').addEventListener('click', resetGame);
364
+ document.getElementById('close-winner').addEventListener('click', () => {
365
+ document.getElementById('winner-message').style.display = 'none';
366
+ });
367
+
368
+ // ์ฐฝ ํฌ๊ธฐ ์กฐ์ •
369
+ window.addEventListener('resize', () => {
370
+ camera.aspect = window.innerWidth / window.innerHeight;
371
+ camera.updateProjectionMatrix();
372
+ renderer.setSize(window.innerWidth, window.innerHeight);
373
+ });
374
+
375
+ // ๋งˆ์šฐ์Šค ํด๋ฆญ ์ด๋ฒคํŠธ ๋“ฑ๋ก
376
+ window.addEventListener('click', onMouseClick);
377
+
378
+ // ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฃจํ”„
379
+ function animate() {
380
+ requestAnimationFrame(animate);
381
+ controls.update();
382
+ renderer.render(scene, camera);
383
+ }
384
+
385
+ animate();
386
+ </script>
387
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=aicoding101/omok2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
388
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ ๋ฒš๋‚˜๋ฌด์—์„œ ๋ฒš๊ฝƒ์ด ํฉ๋‚ ๋ฆฌ๋Š” SVG ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋งŒ๋“ค์–ด์ค˜, Three.js
2
+ ์˜ค๋ชฉ๊ฒŒ์ž„ ๋งŒ๋“ค์–ด์ค˜, Three.js
3
+ ํ‘๋Œ์„ ํ•‘ํฌ์ƒ‰์œผ๋กœ ํ•ด์ค˜