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
88
89
90
91
92
93
94
95
96
97
98
|
'use strict'
const canvas = document.getElementById('canvas')
class ATBBar {
constructor() {
// State
this.progress = 0
this.segmentCount = 6
this.queuedActions = []
// Drawing
this.canvas = document.createElement('canvas')
this.canvas.width = 200
this.canvas.height = 13
}
draw() {
const ctx = this.canvas.getContext('2d')
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
ctx.save()
ctx.beginPath()
ctx.rect(0, 0, this.canvas.width * this.progress, this.canvas.height)
ctx.clip()
ctx.fillStyle = '#77F'
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.restore()
ctx.strokeStyle = '#000'
ctx.strokeRect(0.5, 0.5, this.canvas.width - 1, this.canvas.height - 1)
const segmentWidth = this.canvas.width / this.segmentCount
for (let i = 1; i < this.segmentCount; i++) {
const x = Math.round(segmentWidth * i) + 0.5
ctx.beginPath()
ctx.moveTo(x, 0)
ctx.lineTo(x, this.canvas.height)
ctx.stroke()
}
{
let i = 0
for (const action of this.queuedActions) {
const rectX = Math.floor(segmentWidth * i) + 2
const rectW = Math.floor(segmentWidth * (i + action.size)) - rectX - 2
const textX = Math.round(rectX + rectW / 2)
const rectH = this.canvas.height - 5
const text = action.label
const actionFilled = this.progress * this.segmentCount >= i + action.size
if (actionFilled) {
ctx.fillStyle = 'gold'
} else {
ctx.fillStyle = 'white'
}
ctx.fillRect(rectX, 2, rectW, rectH)
ctx.strokeStyle = 'black'
ctx.strokeRect(rectX + 0.5, 2.5, rectW, rectH)
ctx.textAlign = 'center'
ctx.fillStyle = 'black'
ctx.font = '5px pixel-font'
ctx.fillText(text, textX, this.canvas.height / 2 + 2.5)
i += action.size
}
}
}
update(dt) {
this.progress = Math.min(1, this.progress + dt / 6)
}
}
const atbBar = new ATBBar()
atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Fira', size: 2}, {label: 'Firaga', size: 3}]
let lastTime = Date.now()
function drawLoop() {
const dt = (Date.now() - lastTime) / 1000
lastTime = Date.now()
atbBar.update(dt)
atbBar.draw()
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#EEE'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(atbBar.canvas, 20, canvas.height - 20 - atbBar.canvas.height)
requestAnimationFrame(drawLoop)
}
requestAnimationFrame(drawLoop)
|
