Don't use canvas I guess

Scripts/function.ts

@@ -1,43 +1,24 @@
-import {ICel, IPlayset} from "./pto"
-import Builder from "./utility";
+import {Playset} from "./pto"
 
-export function draw(playset: IPlayset, canvas: HTMLCanvasElement, set: number): void {
-    let context = canvas.getContext("2d")
-    context.clearRect(0, 0, canvas.width, canvas.height)
+const cssClass = "active-set"
 
-    playset.cels.forEach(cel => {
-        drawToCanvas2dContext(cel, context, set)
-    })
-}
-
-export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext2D, set: number): void {
-    if (!cel.sets[set]) return
-
-    let image = new Image()
-    image.onload = () => {
-        context.drawImage(image, cel.initialPositions[set].x + cel.offset.x, cel.initialPositions[set].y + cel.offset.y)
-    }
-
-    image.src = `data:image/gif;base64,${cel.defaultImage}`
-}
-
-export function setPlayArea(header: HTMLElement, container: HTMLElement, playset: IPlayset, set: number): void {
-    const cssClass = "active-set"
+export function setPlayArea(header: HTMLElement, container: HTMLElement, playset: Playset, set: number): void {
     header.querySelectorAll("button").forEach(button => {
         button.classList.remove(cssClass)
     })
 
     header.querySelector(`button[data-set="${set}"]`).classList.add(cssClass)
+    let elements = container.querySelectorAll(".cel-image")
     
-    let canvases = container.getElementsByTagName("canvas")
-    if (canvases.length) {
-        draw(playset, canvases[0], set)
-        return
-    }
-
-    let canvas = new Builder("canvas")
-        .addAttributes({"height": playset.height, "width": playset.width})
-        .build()
-    container.appendChild(canvas)
-    draw(playset, canvases[0], set)
+    playset.cels.forEach((cel, index) => {
+        let element = elements[index] as HTMLDivElement
+        element.style.visibility = "hidden"
+        
+        if (cel.sets[set]) {
+            let position = cel.currentPositions[set]
+            element.style.visibility = "visible"
+            element.style.left = `${position.x}px`
+            element.style.top = `${position.y}px`
+        }
+    })
 }

Scripts/main.ts

@@ -2,7 +2,7 @@ import {MDCLinearProgress} from "@material/linear-progress"
 import {MDCRipple} from "@material/ripple"
 import {MDCTopAppBar} from "@material/top-app-bar"
 import {setPlayArea} from "./function"
-import {IPlayset} from "./pto"
+import {Playset} from "./pto"
 import Builder from "./utility"
 
 declare global {
@@ -28,7 +28,7 @@ export default class Main {
         this.init()
     }
 
-    public load(containerId: string, headerId: string, playset: IPlayset, set: number = 0): void {
+    public load(containerId: string, headerId: string, playset: Playset, set: number = 0): void {
         let container = document.getElementById(containerId)
         let header = document.getElementById(headerId)
         let menu = header.querySelector("ul")
@@ -36,7 +36,7 @@ export default class Main {
         let reset = header.querySelector(`button[data-rel="reset"]`)
         reset.addEventListener("click", () => {
             // TODO reset positions
-            setPlayArea(header, container, playset, 0)
+            setPlayArea(header, container, playset, set)
         })
 
         playset.enabledSets.forEach((enabled, index) => {
@@ -57,6 +57,10 @@ export default class Main {
                 menu.appendChild(button)
             }
         })
+        
+        playset.cels.forEach(cel => {
+            cel.currentPositions = [...cel.initialPositions]
+        })
 
         setPlayArea(header, container, playset, set)
     }

Scripts/pto.ts

@@ -1,20 +1,27 @@
-export interface IPlayset {
+export class Playset {
     name: string
     height: number
     width: number
 
-    cels: ICel[]
+    cels: Cel[]
     enabledSets: boolean[]
 }
 
-export interface ICel {
+export class Cel {
     defaultImage: string
     initialPositions: Coordinate[]
     offset: Coordinate
     sets: boolean[]
+
+    currentPositions: Coordinate[]
 }
 
 export class Coordinate {
     x: number
     y: number
+
+    constructor(x: number = 0, y: number = 0) {
+        this.x = x
+        this.y = y
+    }
 }