Skip to content

Commit

Permalink
Change bmp to png
Browse files Browse the repository at this point in the history
  • Loading branch information
EliasDevis authored and mirdukkkkk committed Jan 21, 2024
1 parent 588efc7 commit 98931ed
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 67 deletions.
Binary file added bun.lockb
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@pixi/sprite": "^7.3.3",
"@pixi/utils": "^7.3.3",
"@preact/signals": "^1.2.2",
"fast-png": "^6.2.0",
"pixi-viewport": "^5.0.2",
"preact": "^10.19.3",
"preact-iso": "^2.3.2",
Expand Down
2 changes: 1 addition & 1 deletion src/classes/AppFetch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class AppFetch {
}

static async pixels() {
return fetch(config.url.api + "/pixels.bmp")
return fetch(config.url.api + "/pixels.png")
.then(res => res.arrayBuffer())
}

Expand Down
61 changes: 24 additions & 37 deletions src/classes/AppImage.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Point } from "@pixi/math"
import { AppColor } from "./AppColor";
import { DecodedPng, PngDataArray, decode } from "fast-png";

export class AppImage {
private _buffer: Uint8Array;
Expand All @@ -11,37 +12,35 @@ export class AppImage {
return this._size;
}

// set size(s: Point) {
// this._size = s;
// this._buffer = new Uint8Array(this.size.x * this.size.y * 4);
// }

constructor(buffer: ArrayBuffer) {
const dataView = new DataView(buffer);
const width = dataView.getUint32(18, true)
const height = dataView.getUint32(22, true);


const pixelDataOffset = dataView.getUint32(10, true);
const numPixels = width * height;
/**
* Add alpha channel to the image with 3 channels
* @param decodedBuffer
*/
private convert3ChannelTo4Channel(decodedBuffer: DecodedPng) {
const numPixels = decodedBuffer.width * decodedBuffer.height;
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.imagePixelDataSize;
const offset = (height - 1 - row) * width + col;

for (let row = 0; row < decodedBuffer.height; row++) {
for (let col = 0; col < decodedBuffer.width; col++) {
const imageByteOffset = (row * decodedBuffer.width + col) * this.imagePixelDataSize;
const offset = row * decodedBuffer.width + col;

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 + 0] = decodedBuffer.data[imageByteOffset + 0];
pixelData[offset * this.bufferPixelDataSize + 1] = decodedBuffer.data[imageByteOffset + 1];
pixelData[offset * this.bufferPixelDataSize + 2] = decodedBuffer.data[imageByteOffset + 2];
pixelData[offset * this.bufferPixelDataSize + 3] = 255;
}
}

return pixelData
}

constructor(buffer: ArrayBuffer) {
const decodedBuffer = decode(buffer)


this._size = new Point(width, height);
this._buffer = pixelData;
this._size = new Point(decodedBuffer.width, decodedBuffer.height);
this._buffer = this.convert3ChannelTo4Channel(decodedBuffer);
}


Expand All @@ -51,9 +50,9 @@ 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.bufferPixelDataSize, index * this.bufferPixelDataSize + this.bufferPixelDataSize);
const [r, g, b] = this._buffer.slice(index * this.bufferPixelDataSize, index * this.bufferPixelDataSize + this.bufferPixelDataSize);

return new AppColor(new Uint8Array([r, g, b, a]));
return new AppColor(new Uint8Array([r, g, b, 255]));
}


Expand All @@ -66,16 +65,4 @@ export class AppImage {
this._buffer[startIndex + 2] = b;
this._buffer[startIndex + 3] = 255;
}

// static getRandom(size: Point) {
// const buffer = new AppImage(size);

// for (let x = 0; x < size.x; x++) {
// for (let y = 0; y < size.y; y++) {
// buffer.setPixel(new Point(x, y), AppColor.getRandom());
// }
// }

// return buffer;
// }
}
26 changes: 0 additions & 26 deletions src/components/Place/PlaceContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,6 @@ type Reason = "Cooldown" | "Not logged" | "Game ended" | "Banned"
export class PlaceContainer extends Container {
private pointer = new PlacePointer();
public place = new PlaceView();
// private isDragged = false;

// get isDragged() {
// return this.place.isDragged
// }

// set isDragged(v: boolean) {
// this.place.isDragged = v
// }



private pixelInfo = {
lastPoint: new Point(-1, -1),
Expand All @@ -58,8 +47,6 @@ 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.place.on("will-place", this.onWillPlace.bind(this));
this.place.on("place", this.onPlace.bind(this));
Expand All @@ -75,18 +62,13 @@ export class PlaceContainer extends Container {
if (this.canvasRef.current)
this.canvasRef.current.style.cursor = "grabbing";

// this.isDragged = true;
}

public onDragEnd(event: DragEvent) {

if (this.canvasRef.current)
this.canvasRef.current.style.cursor = "crosshair";



this.cursor = "default"
// this.isDragged = false;
}

public onCantPlace({ reason }: { reason: Reason }) {
Expand All @@ -99,10 +81,6 @@ export class PlaceContainer extends Container {
}

public onWillPlace(point: Point) {
// if (this.isDragged) {
// return
// };

if (CooldownManager.hasCooldown.peek()) {
return this.emit("cant-place", { reason: "Cooldown" });
};
Expand Down Expand Up @@ -179,10 +157,6 @@ export class PlaceContainer extends Container {
}

public onWillColorPick(color: AppColor) {
// if (this.isDragged) {
// return
// };

ColorPickerManager.isEnabled.value = false

PaletteManager.addAndSelect(color)
Expand Down
5 changes: 2 additions & 3 deletions src/components/Place/PlaceView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export class PlaceView extends Sprite {
return PlaceManager.image.value.size
}

private numOfTouches = 0
public isZommed = false;
public isDragged = false;

Expand All @@ -39,8 +38,8 @@ export class PlaceView extends Sprite {

private setup() {
this.eventMode = "static"


this.texture = Texture.fromBuffer(
this.image.buffer,
this.size.x,
Expand Down

0 comments on commit 98931ed

Please sign in to comment.