Pixels bitPP fix

pixelate-it · Dec 1, 2023 · f0d458f · f0d458f
1 parent 2af4f4a
commit f0d458f
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -13,13 +13,18 @@ export const InfoManager = {
             return
         }
 
+        console.log("END")
+
+
         InfoManager.info.value.ended = true
     },
     start() {
         if (InfoManager.info.value === null) {
             return
         }
 
+        console.log("START")
+
         InfoManager.info.value.ended = false
     },
     async fetch() {

diff --git 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
@@ -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;
         }
     }