Using canvas for now

Scripts/function.ts

@@ -1,18 +1,13 @@
-import Builder from "./utility"
 import {ICel, IPlayset} from "./pto"
+import Builder from "./utility";
 
-export function draw(playset: IPlayset, set: number): HTMLCanvasElement {
-    let canvas = new Builder("canvas").addAttributes({
-        "height": playset.height.toString(),
-        "width": playset.width.toString()
-    }).build() as HTMLCanvasElement
+export function draw(playset: IPlayset, canvas: HTMLCanvasElement, set: number): void {
     let context = canvas.getContext("2d")
-    
+    context.clearRect(0, 0, canvas.width, canvas.height)
+
     playset.cels.forEach(cel => {
         drawToCanvas2dContext(cel, context, set)
     })
-
-    return canvas
 }
 
 export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext2D, set: number): void {
@@ -24,4 +19,25 @@ export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext
     }
 
     image.src = `data:image/gif;base64,${cel.defaultImage}`
+}
+
+export function setPlayArea(header: HTMLElement, container: HTMLElement, playset: IPlayset, set: number): void {
+    const cssClass = "active-set"
+    header.querySelectorAll("button").forEach(button => {
+        button.classList.remove(cssClass)
+    })
+
+    header.querySelector(`button[data-set="${set}"]`).classList.add(cssClass)
+    
+    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)
 }

Scripts/main.ts

@@ -1,7 +1,7 @@
 import {MDCLinearProgress} from "@material/linear-progress"
 import {MDCRipple} from "@material/ripple"
 import {MDCTopAppBar} from "@material/top-app-bar"
-import {draw} from "./function"
+import {setPlayArea} from "./function"
 import {IPlayset} from "./pto"
 import Builder from "./utility"
 
@@ -35,7 +35,8 @@ export default class Main {
 
         let reset = header.querySelector(`button[data-rel="reset"]`)
         reset.addEventListener("click", () => {
-            this.setPlayArea(container, playset, 0)
+            // TODO reset positions
+            setPlayArea(header, container, playset, 0)
         })
 
         playset.enabledSets.forEach((enabled, index) => {
@@ -43,31 +44,26 @@ export default class Main {
                 let button = new Builder("li")
                     .addChildren(new Builder("button")
                         .addClass("mdc-button")
+                        .addAttributes({"data-set": index})
                         .addChildren(
                             new Builder("span").addClass("mdc-button__ripple"),
                             new Builder("span").addClass("mdc-button__label").setText(index.toString())
                         )).build()
 
                 button.addEventListener("click", () => {
-                    this.setPlayArea(container, playset, index)
+                    setPlayArea(header, container, playset, index)
                 })
 
                 menu.appendChild(button)
             }
         })
 
-        this.setPlayArea(container, playset, set)
-    }
-
-    private setPlayArea(container: HTMLElement, playset: IPlayset, set: number): void {
-        // Empty
-        while (container.firstChild) container.removeChild(container.firstChild)
-
-        let canvas = draw(playset, set)
-        container.appendChild(canvas)
+        setPlayArea(header, container, playset, set)
     }
 
     private init() {
+        this.linearProgress.open()
+
         let main = document.querySelector("main")
         let directories = main.querySelector("ul")
 
@@ -77,6 +73,9 @@ export default class Main {
 
         links.forEach(link => {
             link.addEventListener("click", () => {
+                this.linearProgress.determinate = false
+                this.linearProgress.open()
+
                 let directory = link.attributes.getNamedItem("data-directory")
                 let form = new Builder("form")
                     .addAttributes({"method": "post", "action": "/Home/Select"})