half working frame rendering

msagent.js/src/agent.ts

@@ -0,0 +1,45 @@
+import { AcsData } from "./character.js";
+import { AcsAnimationFrameInfo } from "./structs/animation.js";
+
+export class Agent {
+    private data: AcsData;
+    private cnv: HTMLCanvasElement;
+    private ctx: CanvasRenderingContext2D;
+    constructor(data: AcsData) {
+        this.data = data;
+        this.cnv = document.createElement("canvas");
+        this.ctx = this.cnv.getContext("2d")!;
+        this.cnv.width = data.characterInfo.charWidth;
+        this.cnv.height = data.characterInfo.charHeight;
+        this.cnv.style.position = "fixed";
+        this.hide();
+        this.renderFrame(this.data.animInfo[0].animationData.frameInfo[0]);
+    }
+
+    private renderFrame(frame: AcsAnimationFrameInfo) {
+        for (const mimg of frame.images) {
+            const img = this.data.images[mimg.imageIndex];
+            let data = this.ctx.createImageData(img.image.width, img.image.height);
+            for (let i = 0; i < img.image.data.length; i++) {
+                let px = this.data.characterInfo.palette[img.image.data[i]];
+                data.data[(i * 4)] = px.r;
+                data.data[(i * 4) + 1] = px.g;
+                data.data[(i * 4) + 2] = px.b;
+                data.data[(i * 4) + 3] = px.a;
+            }
+            this.ctx.putImageData(data, mimg.xOffset, mimg.yOffset);
+        }
+    }
+
+    addToDom(parent: HTMLElement = document.body) {
+        parent.appendChild(this.cnv);
+    }
+
+    show() {
+        this.cnv.style.display = "block";
+    }
+
+    hide() {
+        this.cnv.style.display = "none";
+    }
+}

msagent.js/src/character.ts

@@ -4,9 +4,10 @@ import { LOCATION } from './structs/core.js';
 import { AcsCharacterInfo } from './structs/character.js';
 import { AcsAnimationEntry } from './structs/animation.js';
 import { AcsImageEntry } from './structs/image.js';
+import { Agent } from './agent.js';
 
 // Experiment for storing parsed data
-class AcsData {
+export class AcsData {
 	characterInfo = new AcsCharacterInfo();
 	animInfo: AcsAnimationEntry[] = [];
 	images: AcsImageEntry[] = [];
@@ -53,12 +54,13 @@ function agentCharacterParseACS(buffer: BufferStream) {
 	});
 
 	console.log(acsData);
+	return acsData;
 }
 
 // For the testbed code only, remove when that gets axed
 // (or don't, I'm not your dad)
 export function agentParseCharacterTestbed(buffer: Uint8Array) {
-	return agentCharacterParseACS(new BufferStream(buffer));
+	return new Agent(agentCharacterParseACS(new BufferStream(buffer)));
 }
 
 // TODO this will be the public API

webapp/src/ts/testbed.ts

@@ -11,7 +11,9 @@ input.addEventListener("change", async () => {
     let buffer = await input.files![0].arrayBuffer();
 
     console.log("About to parse character");
-    msagent.agentParseCharacterTestbed(new Uint8Array(buffer));
+    let agent = msagent.agentParseCharacterTestbed(new Uint8Array(buffer));
+    agent.addToDom(document.body);
+    agent.show();
     console.log("parsed character");
 })