blob: 2d32b6287e02ff91887778160bff09906a0fea79 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import { Vector } from "./vector.js"
import { BACKGROUND } from "../assets.js"
export class Screen {
viewport = new Vector(650, 500)
///////////////////// START //////////////////////
constructor() {
this.createHTMLElements()
this.setUpTriggers()
this.resize()
}
createHTMLElements() {
this.div
this.background
this.spawn
/* create main div */
this.div = document.createElement("div")
this.div.id = "screen"
this.div.style.backgroundColor = "black"
/* create background image */
this.background = document.createElement("img")
this.background.className = "background"
this.background.src = `${BACKGROUND.DEFAULT}`
this.background.style.visibility = "hidden"
this.div.appendChild(this.background)
/* create relative div to append children */
this.spawn = document.createElement("div")
this.div.appendChild(this.spawn)
document.body.appendChild(this.div)
}
setUpTriggers() {
addEventListener("resize", () => { this.resize() });
}
///////////////////// RESIZE //////////////////////
real_position = new Vector(0, 0)
real_size = new Vector(0, 0)
scale = new Vector(0, 0)
resize() {
let w = new Vector(window.innerWidth, window.innerHeight)
/* get max size keeping aspect ratio */
if (w.y / this.viewport.y > w.x / this.viewport.x) {
this.real_size.x = w.x
this.real_size.y = Math.floor(w.x / this.viewport.x * this.viewport.y)
} else {
this.real_size.y = w.y
this.real_size.x = Math.floor(w.y / this.viewport.y * this.viewport.x)
}
this.div.style.width = `${this.real_size.x}px`
this.div.style.height = `${this.real_size.y}px`
/* get centered position */
this.real_position.x = w.x / 2 - this.real_size.x / 2
this.real_position.y = w.y / 2 - this.real_size.y / 2
this.real_position.floor()
this.div.style.left = `${this.real_position.x}px`
this.div.style.top = `${this.real_position.y}px`
/* set scale */
this.scale = this.real_size.x / this.viewport.x
}
///////////////////// COMMANDS //////////////////////
append(element) { this.spawn.appendChild(element) }
draw(span, position, size, /* rotation = 0 */) {
span.style.width = `${size.x * this.scale}px`
span.style.height = `${size.y * this.scale}px`
span.style.top = `${(position.y - size.x / 2) * this.scale}px`
span.style.left = `${(position.x - size.y / 2) * this.scale}px`
}
setBackground(img) { this.background.src = img }
showBackground() { this.background.visibility = "visible" }
hideBackground() { this.background.visibility = "hidden" }
}
|
