diff --git a/src/components/Place/PlaceApp.tsx b/src/components/Place/PlaceApp.tsx index cfb08d8..525e2f5 100644 --- a/src/components/Place/PlaceApp.tsx +++ b/src/components/Place/PlaceApp.tsx @@ -38,6 +38,8 @@ export class PlaceApp { public create(place: typeof PlaceManager) { this.container = new PlaceContainer(this.viewport, this.canvasRef); + if (place.image.value === null) return + const { size } = place.image.value; this.viewport diff --git a/src/components/Place/PlaceContainer.tsx b/src/components/Place/PlaceContainer.tsx index 0695216..8089b7e 100644 --- a/src/components/Place/PlaceContainer.tsx +++ b/src/components/Place/PlaceContainer.tsx @@ -28,13 +28,13 @@ export class PlaceContainer extends Container { public place = new PlaceView(); // private isDragged = false; - get isDragged() { - return this.place.isDragged - } + // get isDragged() { + // return this.place.isDragged + // } - set isDragged(v: boolean) { - this.place.isDragged = v - } + // set isDragged(v: boolean) { + // this.place.isDragged = v + // } @@ -57,8 +57,8 @@ export class PlaceContainer extends Container { this.viewport.on("drag-start", this.onDragStart.bind(this)); this.viewport.on("drag-end", this.onDragEnd.bind(this)); - this.viewport.on("zoomed", (e) => this.place.isZommed = true) - this.viewport.on("zoomed-end", (e) => this.place.isZommed = false) + // this.viewport.on("zoomed", (e) => this.place.isZommed = true) + // this.viewport.on("zoomed-end", (e) => this.place.isZommed = false) this.place.on("will-place", this.onWillPlace.bind(this)); this.place.on("place", this.onPlace.bind(this)); @@ -74,7 +74,7 @@ export class PlaceContainer extends Container { if (this.canvasRef.current) this.canvasRef.current.style.cursor = "grabbing"; - this.isDragged = true; + // this.isDragged = true; } public onDragEnd(event: DragEvent) { @@ -85,7 +85,7 @@ export class PlaceContainer extends Container { this.cursor = "default" - this.isDragged = false; + // this.isDragged = false; } public onCantPlace({ reason }: { reason: Reason }) { @@ -98,9 +98,9 @@ export class PlaceContainer extends Container { } public onWillPlace(point: Point) { - if (this.isDragged) { - return - }; + // if (this.isDragged) { + // return + // }; if (CooldownManager.hasCooldown.peek()) { return this.emit("cant-place", { reason: "Cooldown" }); @@ -109,6 +109,10 @@ export class PlaceContainer extends Container { if (!ProfileManager.token.peek()) { return this.emit("cant-place", { reason: "Not logged" }); }; + + if (InfoManager.info.value === null || PlaceManager.image.value === null) { + return + } if (InfoManager.info.value.ended) { return this.emit("cant-place", { reason: "Game ended" }); }; @@ -174,9 +178,9 @@ export class PlaceContainer extends Container { } public onWillColorPick(color: AppColor) { - if (this.isDragged) { - return - }; + // if (this.isDragged) { + // return + // }; ColorPickerManager.isEnabled.value = false diff --git a/src/components/Place/PlacePointer.tsx b/src/components/Place/PlacePointer.tsx index 20cd1d7..4577bcc 100644 --- a/src/components/Place/PlacePointer.tsx +++ b/src/components/Place/PlacePointer.tsx @@ -64,6 +64,10 @@ export class PlacePointer extends Container { this.position.set(point.x + 0.5, point.y + 0.5) this.scale.set(config.hover.scale) + if (PlaceManager.image.value === null) { + return + } + const color = PlaceManager.image.value.getPixel(point) ?? new AppColor("#ffffff") this.background.tint = color this.border.tint = color.getReadableColor() diff --git a/src/components/Place/PlaceView.tsx b/src/components/Place/PlaceView.tsx index 1e0feda..13b0608 100644 --- a/src/components/Place/PlaceView.tsx +++ b/src/components/Place/PlaceView.tsx @@ -8,17 +8,19 @@ import { DragEvent } from "pixi-viewport/dist/types"; export class PlaceView extends Sprite { get image() { + if (PlaceManager.image.value === null) { + throw new Error("Can't find image") + } return PlaceManager.image.value } get size() { + if (PlaceManager.image.value === null) { + throw new Error("Can't find image") + } return PlaceManager.image.value.size } - private numOfTouches = 0 - public isZommed = false; - public isDragged = false; - constructor() { super() @@ -28,6 +30,8 @@ export class PlaceView extends Sprite { private setup() { this.eventMode = "static" + + this.texture = Texture.fromBuffer( this.image.buffer, this.size.x, diff --git a/src/components/Profile/Profile.tsx b/src/components/Profile/Profile.tsx index 0945efb..c814b8a 100644 --- a/src/components/Profile/Profile.tsx +++ b/src/components/Profile/Profile.tsx @@ -14,7 +14,8 @@ export function Profile() { profile.load() if (profile.isAuthenticated.value) { - profile.fetch().then(() => tags.select(profile.user.value?.tag ?? "")) + // profile.fetch().then(() => tags.select(profile.user.value?.tag ?? "")) + profile.fetch() window.history.replaceState({}, document.title, document.location.pathname) return diff --git a/src/managers/cooldown.ts b/src/managers/cooldown.ts index 7d4be2f..be604d7 100644 --- a/src/managers/cooldown.ts +++ b/src/managers/cooldown.ts @@ -17,6 +17,10 @@ export const CooldownManager = { update(time: number) { const currentTime = time - CooldownManager.startTime.value; + if (InfoManager.info.value === null) { + return + } + const cooldownDuration = ProfileManager.isMod.value ? config.time.modCooldown : InfoManager.info.value.cooldown diff --git a/src/managers/info.ts b/src/managers/info.ts index c5443c0..89f89d9 100644 --- a/src/managers/info.ts +++ b/src/managers/info.ts @@ -13,6 +13,9 @@ export const InfoManager = { return } + console.log("END") + + InfoManager.info.value.ended = true }, start() { @@ -20,6 +23,8 @@ export const InfoManager = { return } + console.log("START") + InfoManager.info.value.ended = false }, async fetch() { diff --git a/src/types/AppImage.ts b/src/types/AppImage.ts index 4879180..7dab13a 100644 --- a/src/types/AppImage.ts +++ b/src/types/AppImage.ts @@ -4,7 +4,8 @@ import { AppColor } from "./AppColor"; export class AppImage { private _buffer: Uint8Array; private _size: Point; - private pixelDataSize = 4; + private imagePixelDataSize = 3; + private bufferPixelDataSize = 4; get size() { return this._size; @@ -23,17 +24,18 @@ export class AppImage { const pixelDataOffset = dataView.getUint32(10, true); const numPixels = width * height; - const pixelData = new Uint8Array(numPixels * this.pixelDataSize); + const pixelData = new Uint8Array(numPixels * this.bufferPixelDataSize); for (let row = height - 1; row >= 0; row--) { for (let col = 0; col < width; col++) { - const imageByteOffset = pixelDataOffset + (row * width + col) * this.pixelDataSize; + const imageByteOffset = pixelDataOffset + (row * width + col) * this.imagePixelDataSize; const offset = (height - 1 - row) * width + col; - pixelData[offset * this.pixelDataSize + 0] = dataView.getUint8(imageByteOffset + 2); - pixelData[offset * this.pixelDataSize + 1] = dataView.getUint8(imageByteOffset + 1); - pixelData[offset * this.pixelDataSize + 2] = dataView.getUint8(imageByteOffset + 0); - pixelData[offset * this.pixelDataSize + 3] = dataView.getUint8(imageByteOffset + 3); + + pixelData[offset * this.bufferPixelDataSize + 0] = dataView.getUint8(imageByteOffset + 2); + pixelData[offset * this.bufferPixelDataSize + 1] = dataView.getUint8(imageByteOffset + 1); + pixelData[offset * this.bufferPixelDataSize + 2] = dataView.getUint8(imageByteOffset + 0); + pixelData[offset * this.bufferPixelDataSize + 3] = 255; } } @@ -49,14 +51,14 @@ export class AppImage { public getPixel(point: Point): AppColor { const index = (point.x + point.y * this._size.x) - const [r, g, b, a] = this._buffer.slice(index * this.pixelDataSize, index * this.pixelDataSize + 4); + const [r, g, b, a] = this._buffer.slice(index * this.bufferPixelDataSize, index * this.bufferPixelDataSize + this.bufferPixelDataSize); return new AppColor(new Uint8Array([r, g, b, a])); } public setPixel(point: Point, color: AppColor): void { - const startIndex = (point.x + point.y * this._size.x) * this.pixelDataSize; + const startIndex = (point.x + point.y * this._size.x) * this.bufferPixelDataSize; const [r, g, b] = color.toUint8RgbArray(); this._buffer[startIndex] = r; diff --git a/src/types/AppWebSocket.ts b/src/types/AppWebSocket.ts index ba6aeec..a74b01f 100644 --- a/src/types/AppWebSocket.ts +++ b/src/types/AppWebSocket.ts @@ -25,10 +25,14 @@ export class AppWebSocket extends WebSocket { ? await new Response(event.data).json() : JSON.parse(event.data); + if (PlaceManager.image.value === null) { return; } + console.log(data) + + switch (data.op) { case 'PLACE': PlaceManager.image.value.setPixel(new Point(data.x, data.y), new AppColor(data.color)) @@ -37,9 +41,9 @@ export class AppWebSocket extends WebSocket { case 'ENDED': if (data.value) - InfoManager.start() - else InfoManager.end() + else + InfoManager.start() break; } }