awacke1 commited on
Commit
fd5acb3
·
verified ·
1 Parent(s): dbbdbe9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +186 -19
index.html CHANGED
@@ -1,19 +1,186 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D Drawing Game (Multiplayer)</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ padding: 0;
11
+ display: flex;
12
+ flex-direction: column;
13
+ justify-content: center;
14
+ align-items: center;
15
+ height: 100vh;
16
+ background-color: #f0f0f0;
17
+ font-family: Arial, sans-serif;
18
+ }
19
+ #gameContainer {
20
+ width: 800px;
21
+ height: 600px;
22
+ border: 2px solid #333;
23
+ background-color: #fff;
24
+ }
25
+ #controls {
26
+ margin-top: 10px;
27
+ }
28
+ button {
29
+ margin: 0 5px;
30
+ padding: 5px 10px;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <div id="gameContainer">
36
+ <svg id="gameSvg" width="800" height="600"></svg>
37
+ </div>
38
+ <div id="controls">
39
+ <button id="clearBtn">Clear Canvas</button>
40
+ <input type="color" id="colorPicker" value="#000000">
41
+ </div>
42
+
43
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
44
+ <script>
45
+ const socket = io('http://localhost:3000');
46
+ const svg = document.getElementById('gameSvg');
47
+ const clearBtn = document.getElementById('clearBtn');
48
+ const colorPicker = document.getElementById('colorPicker');
49
+ let isDrawing = false;
50
+ let currentLine = null;
51
+ let lines = [];
52
+ let rotationX = 0;
53
+ let rotationY = 0;
54
+ let currentColor = '#000000';
55
+
56
+ function project3Dto2D(x, y, z) {
57
+ const focalLength = 400;
58
+ const scale = focalLength / (focalLength + z);
59
+ return {
60
+ x: x * scale + 400,
61
+ y: y * scale + 300
62
+ };
63
+ }
64
+
65
+ function rotatePoint(x, y, z) {
66
+ const cosX = Math.cos(rotationX);
67
+ const sinX = Math.sin(rotationX);
68
+ const cosY = Math.cos(rotationY);
69
+ const sinY = Math.sin(rotationY);
70
+
71
+ const rotatedY = y * cosX - z * sinX;
72
+ const rotatedZ = y * sinX + z * cosX;
73
+ const rotatedX = x * cosY + rotatedZ * sinY;
74
+
75
+ return { x: rotatedX, y: rotatedY, z: -x * sinY + rotatedZ * cosY };
76
+ }
77
+
78
+ function startDrawing(e) {
79
+ isDrawing = true;
80
+ const { clientX, clientY } = e;
81
+ const start = project3Dto2D(clientX - 400, clientY - 300, 0);
82
+ currentLine = { points: [{ x: clientX - 400, y: clientY - 300, z: 0 }], color: currentColor };
83
+ const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
84
+ lineElement.setAttribute('points', `${start.x},${start.y}`);
85
+ lineElement.setAttribute('fill', 'none');
86
+ lineElement.setAttribute('stroke', currentColor);
87
+ lineElement.setAttribute('stroke-width', '2');
88
+ svg.appendChild(lineElement);
89
+ currentLine.element = lineElement;
90
+
91
+ socket.emit('startLine', { x: clientX - 400, y: clientY - 300, z: 0, color: currentColor });
92
+ }
93
+
94
+ function draw(e) {
95
+ if (!isDrawing) return;
96
+ const { clientX, clientY } = e;
97
+ const point = { x: clientX - 400, y: clientY - 300, z: 0 };
98
+ currentLine.points.push(point);
99
+ const projected = project3Dto2D(point.x, point.y, point.z);
100
+ const points = currentLine.element.getAttribute('points');
101
+ currentLine.element.setAttribute('points', `${points} ${projected.x},${projected.y}`);
102
+
103
+ socket.emit('drawLine', { x: clientX - 400, y: clientY - 300, z: 0 });
104
+ }
105
+
106
+ function stopDrawing() {
107
+ if (!isDrawing) return;
108
+ isDrawing = false;
109
+ lines.push(currentLine);
110
+ currentLine = null;
111
+
112
+ socket.emit('endLine');
113
+ }
114
+
115
+ function updateRotation(e) {
116
+ rotationY -= e.movementX * 0.01;
117
+ rotationX -= e.movementY * 0.01;
118
+ redrawLines();
119
+
120
+ socket.emit('updateRotation', { rotationX, rotationY });
121
+ }
122
+
123
+ function redrawLines() {
124
+ lines.forEach(line => {
125
+ const projectedPoints = line.points.map(point => {
126
+ const rotated = rotatePoint(point.x, point.y, point.z);
127
+ return project3Dto2D(rotated.x, rotated.y, rotated.z);
128
+ });
129
+ const pointsString = projectedPoints.map(p => `${p.x},${p.y}`).join(' ');
130
+ line.element.setAttribute('points', pointsString);
131
+ });
132
+ }
133
+
134
+ function clearCanvas() {
135
+ lines.forEach(line => svg.removeChild(line.element));
136
+ lines = [];
137
+ socket.emit('clearCanvas');
138
+ }
139
+
140
+ svg.addEventListener('mousedown', startDrawing);
141
+ svg.addEventListener('mousemove', (e) => {
142
+ if (e.buttons === 1) {
143
+ draw(e);
144
+ } else if (e.buttons === 2) {
145
+ updateRotation(e);
146
+ }
147
+ });
148
+ svg.addEventListener('mouseup', stopDrawing);
149
+ svg.addEventListener('mouseleave', stopDrawing);
150
+ svg.addEventListener('contextmenu', (e) => e.preventDefault());
151
+
152
+ clearBtn.addEventListener('click', clearCanvas);
153
+ colorPicker.addEventListener('change', (e) => {
154
+ currentColor = e.target.value;
155
+ });
156
+
157
+ // Socket.io event listeners
158
+ socket.on('startLine', (data) => {
159
+ const start = project3Dto2D(data.x, data.y, data.z);
160
+ const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
161
+ lineElement.setAttribute('points', `${start.x},${start.y}`);
162
+ lineElement.setAttribute('fill', 'none');
163
+ lineElement.setAttribute('stroke', data.color);
164
+ lineElement.setAttribute('stroke-width', '2');
165
+ svg.appendChild(lineElement);
166
+ lines.push({ points: [data], element: lineElement, color: data.color });
167
+ });
168
+
169
+ socket.on('drawLine', (data) => {
170
+ const line = lines[lines.length - 1];
171
+ line.points.push(data);
172
+ const projected = project3Dto2D(data.x, data.y, data.z);
173
+ const points = line.element.getAttribute('points');
174
+ line.element.setAttribute('points', `${points} ${projected.x},${projected.y}`);
175
+ });
176
+
177
+ socket.on('updateRotation', (data) => {
178
+ rotationX = data.rotationX;
179
+ rotationY = data.rotationY;
180
+ redrawLines();
181
+ });
182
+
183
+ socket.on('clearCanvas', clearCanvas);
184
+ </script>
185
+ </body>
186
+ </html>