| 122 | |
| 123 | class Screens { |
| 124 | constructor() { |
| 125 | this.getParent() |
| 126 | let doc = this.parent.ownerDocument |
| 127 | this.dom = this.parent.appendChild(doc.createElement("div")) |
| 128 | this.dom.style.cssText = "position: relative; max-width: 500px" |
| 129 | let inner = this.dom.appendChild(doc.createElement("div")) |
| 130 | inner.style.cssText = "position: relative; width: 100%; padding-bottom: 60%" |
| 131 | this.screens = [] |
| 132 | for (let i = 0; i < 9; i++) { |
| 133 | let screen = inner.appendChild(doc.createElement("div")) |
| 134 | let row = Math.floor(i / 3), col = i % 3 |
| 135 | screen.style.cssText = "border: 1px solid #222; background: black; position: absolute; width: 33.3%; height: 33.3%; left: " + (col * 33.3) + "%; top: " + (row * 33.3) + "%" |
| 136 | let canvas = screen.appendChild(doc.createElement("canvas")) |
| 137 | canvas.style.cssText = "width: 100%; height: 100%" |
| 138 | this.screens.push(canvas) |
| 139 | } |
| 140 | this.screens.forEach(c => { c.width = c.offsetWidth; c.height = c.offsetHeight }) |
| 141 | } |
| 142 | |
| 143 | getParent() { |
| 144 | this.parent = window.__sandbox ? window.__sandbox.output.div : document.body |