feat(#3): apply prettier

This commit is contained in:
Juan Sebastián Montoya 2024-07-14 10:30:49 -05:00
parent 80292d6cce
commit a3a8cde707
8 changed files with 145 additions and 689 deletions

View file

@ -1,24 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Baena</title>
<link
rel="stylesheet"
href="index.css"
/>
</head>
<head> <body>
<meta charset="UTF-8"> <div id="resources">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <img
<title>Baena</title> id="overworld"
<link rel="stylesheet" href="index.css"> src="resources/overworld.png"
</head> />
</div>
<body> <div id="container">
<div id="resources"> <button id="debug">Debug</button>
<img id="overworld" src="resources/overworld.png"> <button id="level1">Level 1</button>
</div> <button id="level2">Level 2</button>
<div id="container"> <canvas id="game"></canvas>
<button id="debug">Debug</button> </div>
<button id="level1">Level 1</button> <script
<button id="level2">Level 2</button> type="module"
<canvas id="game"></canvas> src="index.js"
</div> ></script>
<script type="module" src="index.js"></script> </body>
</body>
</html> </html>

View file

@ -6,7 +6,7 @@ const canvasResizer = new CanvasResizer({
canvas: document.getElementById("game"), canvas: document.getElementById("game"),
width: 320, width: 320,
height: 240, height: 240,
percentage: 0.9 percentage: 0.9,
}); });
const cols = canvasResizer.width / TILE_SIZE; const cols = canvasResizer.width / TILE_SIZE;
@ -23,27 +23,27 @@ async function drawLevel({ levelName, imageName }) {
for (let row = 0; row < rows; row++) { for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) { for (let col = 0; col < cols; col++) {
if (debug) { if (debug) {
ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE) ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
} }
const tile = data[row * cols + col] const tile = data[row * cols + col];
ctx.drawImage( ctx.drawImage(
levelImage, levelImage,
((tile - 1) * TILE_SIZE) % levelImage.width, ((tile - 1) * TILE_SIZE) % levelImage.width,
Math.floor((tile - 1) * TILE_SIZE / levelImage.width) * TILE_SIZE, Math.floor(((tile - 1) * TILE_SIZE) / levelImage.width) * TILE_SIZE,
TILE_SIZE, TILE_SIZE,
TILE_SIZE, TILE_SIZE,
col * TILE_SIZE, col * TILE_SIZE,
row * TILE_SIZE, row * TILE_SIZE,
TILE_SIZE, TILE_SIZE,
TILE_SIZE TILE_SIZE
) );
} }
} }
} }
async function run() { async function run() {
await canvasResizer.load() await canvasResizer.load();
let selectedLevel = { levelName: "overworld", imageName: "overworld" }; let selectedLevel = { levelName: "overworld", imageName: "overworld" };
@ -55,13 +55,13 @@ async function run() {
const level1Button = document.getElementById("level1"); const level1Button = document.getElementById("level1");
level1Button.addEventListener("click", async () => { level1Button.addEventListener("click", async () => {
selectedLevel = { levelName: "overworld", imageName: "overworld" } selectedLevel = { levelName: "overworld", imageName: "overworld" };
await drawLevel(selectedLevel); await drawLevel(selectedLevel);
}); });
const level2Button = document.getElementById("level2"); const level2Button = document.getElementById("level2");
level2Button.addEventListener("click", async () => { level2Button.addEventListener("click", async () => {
selectedLevel = { levelName: "ocean", imageName: "overworld" } selectedLevel = { levelName: "ocean", imageName: "overworld" };
await drawLevel(selectedLevel); await drawLevel(selectedLevel);
}); });

View file

@ -19,13 +19,15 @@ export class CanvasResizer {
load() { load() {
return new Promise((resolve) => { return new Promise((resolve) => {
["load", "resize"].map(item => window.addEventListener(item, () => { ["load", "resize"].map((item) =>
this._resize(); window.addEventListener(item, () => {
if (item === "load") { this._resize();
resolve(); if (item === "load") {
} resolve();
})); }
}) })
);
});
} }
_resize() { _resize() {
@ -33,9 +35,9 @@ export class CanvasResizer {
let canvasHeight = Math.floor(canvasWidth / (this.width / this.height)); let canvasHeight = Math.floor(canvasWidth / (this.width / this.height));
if (canvasHeight >= window.innerHeight * this.percentage) { if (canvasHeight >= window.innerHeight * this.percentage) {
canvasHeight = Math.floor(window.innerHeight * this.percentage); canvasHeight = Math.floor(window.innerHeight * this.percentage);
canvasWidth = Math.floor(canvasHeight / (this.height / this.width)) canvasWidth = Math.floor(canvasHeight / (this.height / this.width));
} }
this.canvas.style.width = canvasWidth + 'px'; this.canvas.style.width = canvasWidth + "px";
this.canvas.style.height = canvasHeight + 'px'; this.canvas.style.height = canvasHeight + "px";
} }
} }

View file

@ -1,4 +1,4 @@
export async function getLevel(name) { export async function getLevel(name) {
const level = await fetch("/resources/" + name + ".json") const level = await fetch("/resources/" + name + ".json");
return await level.json() return await level.json();
} }

View file

@ -5,306 +5,28 @@
"layers": [ "layers": [
{ {
"data": [ "data": [
259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259,
259, 259, 259, 259, 259, 259, 259, 299, 299, 299, 299, 299, 299, 299, 299,
259, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 339, 339,
259, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339,
259, 339, 339, 339, 339, 379, 379, 379, 379, 379, 379, 379, 379, 379, 379,
259, 379, 379, 379, 379, 379, 379, 379, 379, 379, 379, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
259, 284, 125, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 124, 284, 284, 284, 165, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 166, 284, 284, 284, 284,
259, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284,
259, 284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 125, 284,
299, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284,
299, 284, 284, 284, 284, 284, 284
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
124,
284,
284,
284,
165,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
166,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284
], ],
"height": 15, "height": 15,
"id": 1, "id": 1,

View file

@ -1,345 +1,67 @@
{ {
"compressionlevel": -1, "compressionlevel": -1,
"height": 15, "height": 15,
"infinite": false, "infinite": false,
"layers": [ "layers": [
{ {
"data": [ "data": [
1, 1, 366, 366, 366, 366, 366, 366, 366, 366, 366, 1, 1179, 445, 446, 446,
366, 446, 690, 259, 260, 261, 1, 406, 406, 406, 406, 406, 406, 406, 406, 406,
366, 1, 1179, 485, 486, 486, 486, 730, 299, 300, 301, 121, 122, 122, 122,
366, 122, 122, 122, 122, 123, 1, 1, 1179, 525, 526, 526, 526, 770, 339, 340,
366, 341, 161, 162, 162, 162, 162, 162, 162, 162, 163, 1, 1, 1219, 565, 566,
366, 567, 567, 810, 379, 379, 379, 201, 202, 202, 202, 202, 202, 202, 202,
366, 203, 243, 244, 245, 366, 366, 366, 366, 850, 284, 284, 284, 243, 244,
366, 244, 244, 244, 244, 244, 244, 245, 283, 284, 285, 406, 366, 366, 366,
366, 366, 324, 324, 324, 283, 284, 284, 284, 284, 284, 284, 284, 285, 323,
366, 324, 325, 366, 366, 366, 366, 366, 366, 366, 366, 283, 363, 364, 363,
1, 364, 363, 364, 284, 285, 366, 1175, 1176, 1177, 366, 1175, 1176, 1177,
1179, 366, 366, 366, 283, 403, 404, 403, 404, 403, 404, 284, 285, 406, 1215,
445, 1216, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 363, 364, 284,
446, 284, 363, 364, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257,
446, 366, 406, 406, 283, 403, 404, 284, 284, 403, 404, 284, 285, 366, 366,
446, 366, 366, 366, 366, 366, 366, 366, 366, 366, 283, 284, 284, 363, 364,
690, 284, 284, 284, 285, 366, 1175, 1176, 1177, 406, 1175, 1176, 1177, 406,
259, 406, 406, 283, 284, 284, 403, 404, 284, 284, 284, 285, 406, 1215, 1216,
260, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 284, 284, 284, 284,
261, 284, 284, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, 366,
1, 366, 366, 323, 324, 324, 324, 324, 324, 324, 324, 325, 406, 406, 406,
406, 406, 406, 406, 406, 406, 406, 406, 406
406, ],
406, "height": 15,
406, "id": 1,
406, "name": "Tile Layer 1",
406, "opacity": 1,
406, "type": "tilelayer",
406, "visible": true,
406, "width": 20,
1, "x": 0,
1179, "y": 0
485, }
486, ],
486, "nextlayerid": 2,
486, "nextobjectid": 1,
730, "orientation": "orthogonal",
299, "renderorder": "right-down",
300, "tiledversion": "1.11.0",
301, "tileheight": 16,
121, "tilesets": [
122, {
122, "columns": 40,
122, "firstgid": 1,
122, "image": "overworld.png",
122, "imageheight": 576,
122, "imagewidth": 640,
122, "margin": 0,
123, "name": "overworld",
1, "spacing": 0,
1, "tilecount": 1440,
1179, "tileheight": 16,
525, "tilewidth": 16
526, }
526, ],
526, "tilewidth": 16,
770, "type": "map",
339, "version": "1.10",
340, "width": 20
341,
161,
162,
162,
162,
162,
162,
162,
162,
163,
1,
1,
1219,
565,
566,
567,
567,
810,
379,
379,
379,
201,
202,
202,
202,
202,
202,
202,
202,
203,
243,
244,
245,
366,
366,
366,
366,
850,
284,
284,
284,
243,
244,
244,
244,
244,
244,
244,
244,
245,
283,
284,
285,
406,
366,
366,
366,
366,
324,
324,
324,
283,
284,
284,
284,
284,
284,
284,
284,
285,
323,
324,
325,
366,
366,
366,
366,
366,
366,
366,
366,
283,
363,
364,
363,
364,
363,
364,
284,
285,
366,
1175,
1176,
1177,
366,
1175,
1176,
1177,
366,
366,
366,
283,
403,
404,
403,
404,
403,
404,
284,
285,
406,
1215,
1216,
1217,
366,
1215,
1216,
1217,
366,
366,
366,
283,
363,
364,
284,
284,
363,
364,
284,
285,
366,
1255,
1256,
1257,
366,
1255,
1256,
1257,
366,
406,
406,
283,
403,
404,
284,
284,
403,
404,
284,
285,
366,
366,
366,
366,
366,
366,
366,
366,
366,
366,
366,
283,
284,
284,
363,
364,
284,
284,
284,
285,
366,
1175,
1176,
1177,
406,
1175,
1176,
1177,
406,
406,
406,
283,
284,
284,
403,
404,
284,
284,
284,
285,
406,
1215,
1216,
1217,
366,
1215,
1216,
1217,
366,
366,
366,
283,
284,
284,
284,
284,
284,
284,
284,
285,
366,
1255,
1256,
1257,
366,
1255,
1256,
1257,
366,
366,
366,
323,
324,
324,
324,
324,
324,
324,
324,
325,
406,
406,
406,
406,
406,
406,
406,
406,
406,
406,
406
],
"height": 15,
"id": 1,
"name": "Tile Layer 1",
"opacity": 1,
"type": "tilelayer",
"visible": true,
"width": 20,
"x": 0,
"y": 0
}
],
"nextlayerid": 2,
"nextobjectid": 1,
"orientation": "orthogonal",
"renderorder": "right-down",
"tiledversion": "1.11.0",
"tileheight": 16,
"tilesets": [
{
"columns": 40,
"firstgid": 1,
"image": "overworld.png",
"imageheight": 576,
"imagewidth": 640,
"margin": 0,
"name": "overworld",
"spacing": 0,
"tilecount": 1440,
"tileheight": 16,
"tilewidth": 16
}
],
"tilewidth": 16,
"type": "map",
"version": "1.10",
"width": 20
} }