Getting somewhere

Scripts/function.ts

@@ -0,0 +1,27 @@
+import Builder from "./utility"
+import {ICel, IPlayset} from "./pto"
+
+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
+    let context = canvas.getContext("2d")
+    
+    playset.cels.forEach(cel => {
+        drawToCanvas2dContext(cel, context, set)
+    })
+
+    return canvas
+}
+
+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}`
+}

Scripts/main.ts

@@ -1,4 +1,9 @@
-import { MDCTopAppBar } from '@material/top-app-bar'
+import {MDCLinearProgress} from "@material/linear-progress"
+import {MDCRipple} from "@material/ripple"
+import {MDCTopAppBar} from "@material/top-app-bar"
+import {draw} from "./function"
+import {IPlayset} from "./pto"
+import Builder from "./utility"
 
 declare global {
     interface Document {
@@ -8,38 +13,87 @@ declare global {
 
 export default class Main {
     appBar: MDCTopAppBar
+    linearProgress: MDCLinearProgress
+    ripples: MDCRipple[] = []
+
     constructor() {
         this.appBar = MDCTopAppBar.attachTo(document.querySelector(".mdc-top-app-bar"))
-        
+
+        document.querySelectorAll(".mdc-button").forEach(button => {
+            this.ripples.push(MDCRipple.attachTo(button))
+        })
+
+        this.linearProgress = MDCLinearProgress.attachTo(document.querySelector(".mdc-linear-progress"))
+
         this.init()
     }
-    
-    init() {
+
+    public load(containerId: string, headerId: string, playset: IPlayset, set: number = 0): void {
+        let container = document.getElementById(containerId)
+        let header = document.getElementById(headerId)
+        let menu = header.querySelector("ul")
+
+        let reset = header.querySelector(`button[data-rel="reset"]`)
+        reset.addEventListener("click", () => {
+            this.setPlayArea(container, playset, 0)
+        })
+
+        playset.enabledSets.forEach((enabled, index) => {
+            if (enabled) {
+                let button = new Builder("li")
+                    .addChildren(new Builder("button")
+                        .addClass("mdc-button")
+                        .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)
+                })
+
+                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)
+    }
+
+    private init() {
         let main = document.querySelector("main")
         let directories = main.querySelector("ul")
-        
+
         if (!directories) return
-        
+
         let links = directories.querySelectorAll("a")
-        
+
         links.forEach(link => {
             link.addEventListener("click", () => {
                 let directory = link.attributes.getNamedItem("data-directory")
-                let form = document.createElement("form")
-                
-                let method = document.createAttribute("method")
-                method.value = "post"
-                let action = document.createAttribute("action")
-                action.value = "/Home/Select"
-                
-                form.attributes.setNamedItem(method)
-                form.attributes.setNamedItem(action)
-                
-                form.innerHTML = `<input type="hidden" name="directory" value="${directory.value}">`
-                    + `<input type="hidden" name="file" value="${link.textContent}">`
-                
+                let form = new Builder("form")
+                    .addAttributes({"method": "post", "action": "/Home/Select"})
+                    .addChildren(
+                        new Builder("input").addAttributes({
+                            "type": "hidden",
+                            "name": "directory",
+                            "value": directory.value
+                        }),
+                        new Builder("input").addAttributes({
+                            "type": "hidden",
+                            "name": "file",
+                            "value": link.textContent
+                        })
+                    ).build() as HTMLFormElement
+
                 link.appendChild(form)
-                
                 form.submit()
             })
         })

Scripts/pto.ts

@@ -0,0 +1,20 @@
+export interface IPlayset {
+    name: string
+    height: number
+    width: number
+
+    cels: ICel[]
+    enabledSets: boolean[]
+}
+
+export interface ICel {
+    defaultImage: string
+    initialPositions: Coordinate[]
+    offset: Coordinate
+    sets: boolean[]
+}
+
+export class Coordinate {
+    x: number
+    y: number
+}

Scripts/utility.ts

@@ -0,0 +1,49 @@
+export default class Builder {
+    element: HTMLElement
+    
+    constructor(tag: string) {
+        this.element = document.createElement(tag)
+    }
+
+    addAttributes(attributes: {[key: string]: string | number}): Builder {
+        for (let key of Object.keys(attributes)) {
+            this.addAttribute(key, attributes[key])
+        }
+        
+        return this
+    }
+    
+    addAttribute(name: string, value: string | number): Builder {
+        let attribute = document.createAttribute(name)
+        attribute.value = value.toString()
+        
+        this.element.attributes.setNamedItem(attribute)
+        return this
+    }
+    
+    addClass(...classes: string[]): Builder {
+        this.element.classList.add(...classes)
+        return this
+    }
+    
+    addChildren(...children: HTMLElement[] | Builder[]): Builder {
+        children.forEach(child => {
+            if (child instanceof HTMLElement) {
+                this.element.appendChild(child)
+            } else {
+                this.element.appendChild(child.build())
+            }
+        })
+        
+        return this
+    }
+    
+    setText(text: string): Builder {
+        this.element.textContent = text
+        return this
+    }
+    
+    build(): HTMLElement {
+        return this.element
+    }
+}