riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

sync

Browse source
This commit is contained in:
りき萌 2024-08-15 20:01:23 +02:00
parent 26ba098183
commit 2f7bcbb14e
30 changed files with 1691 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

35
static/canvas-renderer.js
View file

@ -34,6 +34,13 @@ class CanvasRenderer extends HTMLElement {
this.#render();
}
getWindowSize() {
return {
width: this.clientWidth,
height: this.clientHeight,
};
}
#render() {
// NOTE: We should probably render on-demand only when it's needed.
requestAnimationFrame(() => this.#render());
@ -41,6 +48,19 @@ class CanvasRenderer extends HTMLElement {
this.#renderWall();
}
getVisibleRect() {
return this.viewport.getVisibleRect(this.getWindowSize());
}
getVisibleChunkRect() {
let visibleRect = this.viewport.getVisibleRect(this.getWindowSize());
let left = Math.floor(visibleRect.x / this.wall.chunkSize);
let top = Math.floor(visibleRect.y / this.wall.chunkSize);
let right = Math.ceil((visibleRect.x + visibleRect.width) / this.wall.chunkSize);
let bottom = Math.ceil((visibleRect.y + visibleRect.height) / this.wall.chunkSize);
return { left, top, right, bottom };
}
#renderWall() {
if (this.wall == null) {
console.debug("wall is not available, skipping rendering");
@ -55,10 +75,7 @@ class CanvasRenderer extends HTMLElement {
this.ctx.scale(this.viewport.zoom, this.viewport.zoom);
this.ctx.translate(-this.viewport.panX, -this.viewport.panY);
let visibleRect = this.viewport.getVisibleRect({
width: this.clientWidth,
height: this.clientHeight,
});
let visibleRect = this.viewport.getVisibleRect(this.getWindowSize());
let left = Math.floor(visibleRect.x / this.wall.chunkSize);
let top = Math.floor(visibleRect.y / this.wall.chunkSize);
let right = Math.ceil((visibleRect.x + visibleRect.width) / this.wall.chunkSize);
@ -88,10 +105,7 @@ class CanvasRenderer extends HTMLElement {
let [x, y] = this.viewport.toViewportSpace(
event.clientX - this.clientLeft,
event.offsetY - this.clientTop,
{
width: this.clientWidth,
height: this.clientHeight,
},
this.getWindowSize(),
);
this.dispatchEvent(Object.assign(new Event(".cursor"), { x, y }));
}
@ -127,10 +141,7 @@ class CanvasRenderer extends HTMLElement {
async #paintingBehaviour() {
const paint = (x, y) => {
let [wallX, wallY] = this.viewport.toViewportSpace(x, y, {
width: this.clientWidth,
height: this.clientHeight,
});
let [wallX, wallY] = this.viewport.toViewportSpace(x, y, this.getWindowSize());
this.dispatchEvent(Object.assign(new Event(".paint"), { x: wallX, y: wallY }));
};