- commit
- 83064ec30d510d0e5427eb22054f3589ff346dd8
- parent
- 41181a5f16cb7c1c372237c4d91817eb1df7fd65
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-09-27 14:53
refactor: screen
Diffstat
| M | static/main.js | 116 | ++++++++++++++++++++++++++++++++++--------------------------- |
1 files changed, 64 insertions, 52 deletions
diff --git a/static/main.js b/static/main.js
@@ -8,8 +8,6 @@ var gameId = params.get('game');
8 8
9 9 var socketProtocol = location.protocol.replace('http', 'ws');
10 10 var socket = new WebSocket(`${socketProtocol}//${location.host}/ws/${gameId}`);
11 -1 var rows = null;
12 -1 var cols = null;
13 11
14 12 var send = function(data) {
15 13 socket.send(JSON.stringify(data));
@@ -47,17 +45,6 @@ var binSearch = function(key) {
47 45 return v1;
48 46 };
49 47
50 -1 var updateSize = function() {
51 -1 rows = binSearch(v => {
52 -1 $pre.textContent = '\n'.repeat(v);
53 -1 return document.documentElement.scrollHeight - document.documentElement.clientHeight;
54 -1 });
55 -1 cols = binSearch(v => {
56 -1 $pre.textContent = ' '.repeat(v);
57 -1 return document.body.scrollWidth - document.body.clientWidth;
58 -1 });
59 -1 };
60 -1
61 48 var game = {
62 49 id: -1,
63 50 rects: [],
@@ -170,21 +157,27 @@ var game = {
170 157 },
171 158 };
172 159
173 -1 var render = function() {
174 -1 if (!rows || !cols) {
175 -1 updateSize();
176 -1 }
-1 160 var screen = {
-1 161 rows: null,
-1 162 cols: null,
177 163
178 -1 var xOffset = -(cols >> 1);
179 -1 var yOffset = -(rows >> 1);
180 -1 if (game.objects[game.id]) {
181 -1 xOffset += game.objects[game.id].pos.x;
182 -1 yOffset += game.objects[game.id].pos.y;
183 -1 }
-1 164 updateSize() {
-1 165 this.rows = binSearch(v => {
-1 166 $pre.textContent = '\n'.repeat(v);
-1 167 return document.documentElement.scrollHeight - document.documentElement.clientHeight;
-1 168 });
-1 169 this.cols = binSearch(v => {
-1 170 $pre.textContent = ' '.repeat(v);
-1 171 return document.body.scrollWidth - document.body.clientWidth;
-1 172 });
-1 173 },
184 174
185 -1 $pre.innerHTML = '';
-1 175 invalidateSize() {
-1 176 this.rows = null;
-1 177 this.cols = null;
-1 178 },
186 179
187 -1 var commitSpan = (text, color) => {
-1 180 commitSpan(text, color) {
188 181 if (color === -1) {
189 182 $pre.append(text);
190 183 } else {
@@ -193,31 +186,53 @@ var render = function() {
193 186 $span.className = `color-${color}`;
194 187 $pre.append($span);
195 188 }
196 -1 };
197 -1
198 -1 var health = Math.round(game.health / game.healthTotal * cols);
199 -1 commitSpan('='.repeat(health), 1);
200 -1 commitSpan('='.repeat(cols - health), 0);
201 -1 $pre.append('\n');
202 -1
203 -1 for (let y = 1; y < rows; y++) {
204 -1 var span = '';
205 -1 var spanColor = -1;
206 -1
207 -1 for (let x = 0; x < cols; x++) {
208 -1 const [c, color] = game.getChar(xOffset + x, yOffset + y);
209 -1 if (color === spanColor) {
210 -1 span += c;
211 -1 } else {
212 -1 commitSpan(span, spanColor);
213 -1 span = c;
214 -1 spanColor = color;
-1 189 },
-1 190
-1 191 renderHealth() {
-1 192 var health = Math.round(game.health / game.healthTotal * this.cols);
-1 193 this.commitSpan('='.repeat(health), 1);
-1 194 this.commitSpan('='.repeat(this.cols - health), 0);
-1 195 $pre.append('\n');
-1 196 },
-1 197
-1 198 renderMap() {
-1 199 var xOffset = -(this.cols >> 1);
-1 200 var yOffset = -(this.rows >> 1);
-1 201 if (game.objects[game.id]) {
-1 202 xOffset += game.objects[game.id].pos.x;
-1 203 yOffset += game.objects[game.id].pos.y;
-1 204 }
-1 205
-1 206 for (let y = 1; y < this.rows; y++) {
-1 207 let span = '';
-1 208 let spanColor = -1;
-1 209
-1 210 for (let x = 0; x < this.cols; x++) {
-1 211 const [c, color] = game.getChar(xOffset + x, yOffset + y);
-1 212 if (color === spanColor) {
-1 213 span += c;
-1 214 } else {
-1 215 this.commitSpan(span, spanColor);
-1 216 span = c;
-1 217 spanColor = color;
-1 218 }
215 219 }
-1 220
-1 221 this.commitSpan(span, spanColor);
-1 222 $pre.append('\n');
216 223 }
-1 224 },
217 225
218 -1 commitSpan(span, spanColor);
219 -1 $pre.append('\n');
220 -1 }
-1 226 render() {
-1 227 if (!this.rows || !this.cols) {
-1 228 this.updateSize();
-1 229 }
-1 230
-1 231 $pre.innerHTML = '';
-1 232
-1 233 this.renderHealth();
-1 234 this.renderMap();
-1 235 },
221 236 };
222 237
223 238 socket.onclose = function() {
@@ -261,7 +276,7 @@ socket.onmessage = function(event) {
261 276 console.log(msg);
262 277 }
263 278 }
264 -1 render();
-1 279 screen.render();
265 280 };
266 281
267 282 document.onkeydown = function(event) {
@@ -281,7 +296,4 @@ document.onkeydown = function(event) {
281 296
282 297 onDPad(dir => send({action: 'move', dir: dir}));
283 298
284 -1 window.addEventListener('resize', () => {
285 -1 rows = null;
286 -1 cols = null;
287 -1 });
-1 299 window.addEventListener('resize', () => screen.invalidateSize());