-
Notifications
You must be signed in to change notification settings - Fork 0
/
Tile.js
47 lines (40 loc) · 1.32 KB
/
Tile.js
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
export default class {
#tileElement
#x
#y
#value
constructor (tileContainer, value = Math.random() <.7 ? 2 : 4){
this.#tileElement = document.createElement('div')
this.#tileElement.classList.add('tile')
tileContainer.append(this.#tileElement);
this.value = value;
}
get value(){
return this.#value
}
set value (v) {
this.#value = v
this.#tileElement.textContent = v
const power = Math.log2(v)
const backgroundLightness = 100 - power * 7;
const textLightness = backgroundLightness > 50 ? 10 : 90
this.#tileElement.style.setProperty('--background-lightness', `${backgroundLightness}%`)
this.#tileElement.style.setProperty('--text-lightness', `${textLightness}%`)
}
set x (value) {
this.#x = value
this.#tileElement.style.setProperty('--x', value)
}
set y (value) {
this.#y = value;
this.#tileElement.style.setProperty('--y', value)
}
remove(){
this.#tileElement.remove();
}
waitForTransition(animation = false){
return new Promise((resolve, reject) => {
this.#tileElement.addEventListener( animation ? 'animationend' : 'transitionend', resolve, {once : true})
})
}
}