tilegame/src/debug.js

50 lines
1.6 KiB
JavaScript

import { ctx } from './canvas'
class Debugging {
draw (vp, world, fps) {
let p = vp.chunkIn(world.chunkSize * world.tileSize)
ctx.fillStyle = '#fff'
ctx.fillText(fps + ' fps', 4, 16)
ctx.fillText('cam-in-chunk (x: ' + p.x + '; y: ' + p.y + ')', 4, 32)
ctx.fillText('loaded ' + world.chunks.length, 4, 48)
ctx.fillText('drawn ' + world._lastDrawCount, 4, 64)
ctx.fillText('updates ' + world._lastUpdateCount, 4, 80)
}
createSliders (obj, args, fn) {
let overlay = document.createElement('div')
overlay.style = 'color:#fff;position:absolute;top:15px;right:15px;background-color:hsla(0,0%,47%,0.5);padding:10px;display:flex;flex-direction:column;'
for (let a in args) {
let min = args[a][0]
let max = args[a][1]
let step = args[a][2]
let div = document.createElement('div')
div.style = 'display:flex;flex-direction:row;'
let name = document.createElement('span')
let value = document.createElement('value')
let slider = document.createElement('input')
slider.style = 'flex-grow:1;'
slider.type = 'range'
slider.min = min
slider.max = max
slider.step = step
slider.value = obj[a]
name.innerHTML = a
value.innerHTML = obj[a]
slider.addEventListener('input', function (e) {
obj[a] = parseFloat(slider.value)
value.innerHTML = slider.value
fn(a, slider.value)
})
div.appendChild(name)
div.appendChild(slider)
div.appendChild(value)
overlay.appendChild(div)
}
document.body.appendChild(overlay)
}
}
export default new Debugging()