reduce menu code
This commit is contained in:
Zutatensuppe
parent
5a7d2edb62
commit
f1a77802fc
1 changed files with 126 additions and 205 deletions
331
public/game.js
331
public/game.js
|
|
@ -41,101 +41,70 @@ function addCanvasToDom(canvas) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function addMenuToDom(previewImageUrl, setHotkeys) {
|
function addMenuToDom(previewImageUrl, setHotkeys) {
|
||||||
const ELEMENTS = {
|
const ELEMENTS = {}
|
||||||
TABLE: document.createElement('table'),
|
const mk = (type, props, children) => {
|
||||||
TR: document.createElement('tr'),
|
if (typeof props === 'string' || typeof props === 'number') {
|
||||||
TD: document.createElement('td'),
|
children = [props]
|
||||||
BUTTON: document.createElement('button'),
|
props = {}
|
||||||
INPUT: document.createElement('input'),
|
|
||||||
LABEL: document.createElement('label'),
|
|
||||||
DIV: document.createElement('div'),
|
|
||||||
A: document.createElement('a'),
|
|
||||||
}
|
|
||||||
const txt = (str) => document.createTextNode(str)
|
|
||||||
|
|
||||||
function row (...elements) {
|
|
||||||
const row = ELEMENTS.TR.cloneNode(true)
|
|
||||||
for (const el of elements) {
|
|
||||||
const td = ELEMENTS.TD.cloneNode(true)
|
|
||||||
if (typeof el === 'string') {
|
|
||||||
td.appendChild(txt(el))
|
|
||||||
} else {
|
|
||||||
td.appendChild(el)
|
|
||||||
}
|
|
||||||
row.appendChild(td)
|
|
||||||
}
|
}
|
||||||
return row
|
if (props instanceof Array) {
|
||||||
}
|
children = props
|
||||||
|
props = {}
|
||||||
function btn(txt) {
|
}
|
||||||
const btn = ELEMENTS.BUTTON.cloneNode(true)
|
if (children && !(children instanceof Array)) {
|
||||||
btn.classList.add('btn')
|
children = [children]
|
||||||
btn.innerText = txt
|
}
|
||||||
return btn
|
if (!ELEMENTS[type]) {
|
||||||
}
|
ELEMENTS[type] = document.createElement(type)
|
||||||
|
}
|
||||||
function colorinput() {
|
const el = ELEMENTS[type].cloneNode(true)
|
||||||
const input = ELEMENTS.INPUT.cloneNode(true)
|
if (children) {
|
||||||
input.type = 'color'
|
for (const child of children) {
|
||||||
return input
|
if (typeof child === 'string' || typeof child === 'number') {
|
||||||
}
|
el.appendChild(document.createTextNode(child))
|
||||||
|
} else {
|
||||||
function textinput(maxLength) {
|
el.appendChild(child)
|
||||||
const input = ELEMENTS.INPUT.cloneNode(true)
|
}
|
||||||
input.type = 'text'
|
}
|
||||||
input.maxLength = maxLength
|
}
|
||||||
return input
|
if (props) {
|
||||||
}
|
for (const k in props) {
|
||||||
|
if (k === 'click') {
|
||||||
function label(text) {
|
el.addEventListener('click', props[k])
|
||||||
const label = ELEMENTS.LABEL.cloneNode(true)
|
} else if (k === 'cls') {
|
||||||
label.innerText = text
|
if (typeof props[k] === 'string') {
|
||||||
return label
|
el.classList.add(props[k])
|
||||||
}
|
} else {
|
||||||
|
for (const cls of props[k]) {
|
||||||
const bgColorPickerEl = colorinput()
|
el.classList.add(cls)
|
||||||
const bgColorPickerRow = row(label('Background: '), bgColorPickerEl)
|
}
|
||||||
|
}
|
||||||
const playerColorPickerEl = colorinput()
|
} else if (k === 'style') {
|
||||||
const playerColorPickerRow = row(label('Color: '), playerColorPickerEl)
|
for (const s in props[k]) {
|
||||||
|
el.style[s] = props[k][s]
|
||||||
const nameChangeEl = textinput(16)
|
}
|
||||||
const nameChangeRow = row(label('Name: '), nameChangeEl)
|
} else {
|
||||||
|
el[k] = props[k]
|
||||||
const kbd = function(str) {
|
}
|
||||||
const el = document.createElement('kbd')
|
|
||||||
el.appendChild(txt(str))
|
|
||||||
return el
|
|
||||||
}
|
|
||||||
|
|
||||||
const h = function(...els) {
|
|
||||||
const el = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
for (const other of els) {
|
|
||||||
if (typeof other === 'string') {
|
|
||||||
el.appendChild(txt(other))
|
|
||||||
} else {
|
|
||||||
el.appendChild(other)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return el
|
return el
|
||||||
}
|
}
|
||||||
|
|
||||||
const helpEl = ELEMENTS.TABLE.cloneNode(true)
|
const row = (props, children) => {
|
||||||
helpEl.classList.add('help')
|
if (props instanceof Array) {
|
||||||
helpEl.appendChild(row('⬆️ Move up:', h(kbd('W'), '/', kbd('↑'), '/🖱️')))
|
children = props
|
||||||
helpEl.appendChild(row('⬇️ Move down:', h(kbd('S'), '/', kbd('↓'), '/🖱️')))
|
props = {}
|
||||||
helpEl.appendChild(row('⬅️ Move left:', h(kbd('A'), '/', kbd('←'), '/🖱️')))
|
}
|
||||||
helpEl.appendChild(row('➡️ Move right:', h(kbd('D'), '/', kbd('→'), '/🖱️')))
|
return mk('tr', props, children.map(el => mk('td', {}, el)))
|
||||||
helpEl.appendChild(row('', h('Move faster by holding ', kbd('Shift'))))
|
}
|
||||||
helpEl.appendChild(row('🔍+ Zoom in:', h(kbd('E'), '/🖱️-Wheel')))
|
const bgColorPickerEl = mk('input', { type: 'color' })
|
||||||
helpEl.appendChild(row('🔍- Zoom out:', h(kbd('Q'), '/🖱️-Wheel')))
|
const playerColorPickerEl = mk('input', { type: 'color' })
|
||||||
helpEl.appendChild(row('🖼️ Toggle preview:', h(kbd('Space'))))
|
const nameChangeEl = mk('input', { type: 'text', maxLength: 16 })
|
||||||
helpEl.appendChild(row('🧩✔️ Toggle fixed pieces:', h(kbd('F'))))
|
|
||||||
helpEl.appendChild(row('🧩❓ Toggle loose pieces:', h(kbd('G'))))
|
|
||||||
helpEl.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
const stopProp = (e) => e.stopPropagation()
|
||||||
|
const mkToggler = (overlay, toggleHotkeys = true) => () => toggle(overlay, toggleHotkeys)
|
||||||
|
const mkSelfToggler = (toggleHotkeys = true) => (ev) => toggle(ev.target, toggleHotkeys)
|
||||||
const toggle = (el, toggleHotkeys = true) => {
|
const toggle = (el, toggleHotkeys = true) => {
|
||||||
el.classList.toggle('closed')
|
el.classList.toggle('closed')
|
||||||
if (toggleHotkeys) {
|
if (toggleHotkeys) {
|
||||||
|
|
@ -143,82 +112,48 @@ function addMenuToDom(previewImageUrl, setHotkeys) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const helpOverlay = ELEMENTS.DIV.cloneNode(true)
|
const helpOverlay = mk(
|
||||||
helpOverlay.classList.add('overlay', 'transparent', 'closed')
|
'div',
|
||||||
helpOverlay.appendChild(helpEl)
|
{ cls: ['overlay', 'transparent', 'closed'], click: mkSelfToggler() },
|
||||||
helpOverlay.addEventListener('click', () => {
|
[
|
||||||
toggle(helpOverlay)
|
mk('table', { cls: 'help', click: stopProp }, [
|
||||||
})
|
row(['⬆️ Move up:', mk('div', [mk('kbd', 'W'), '/', mk('kbd', '↑'), '/🖱️'])]),
|
||||||
|
row(['⬇️ Move down:', mk('div', [mk('kbd', 'S'), '/', mk('kbd', '↓'), '/🖱️'])]),
|
||||||
|
row(['⬅️ Move left:', mk('div', [mk('kbd', 'A'), '/', mk('kbd', '←'), '/🖱️'])]),
|
||||||
|
row(['➡️ Move right:', mk('div', [mk('kbd', 'D'), '/', mk('kbd', '→'), '/🖱️'])]),
|
||||||
|
row(['', mk('div', ['Move faster by holding ', mk('kbd', 'Shift')])]),
|
||||||
|
row(['🔍+ Zoom in:', mk('div', [mk('kbd', 'E'), '/🖱️-Wheel'])]),
|
||||||
|
row(['🔍- Zoom out:', mk('div', [mk('kbd', 'Q'), '/🖱️-Wheel'])]),
|
||||||
|
row(['🖼️ Toggle preview:', mk('div', [mk('kbd', 'Space')])]),
|
||||||
|
row(['🧩✔️ Toggle fixed pieces:', mk('div', [mk('kbd', 'F')])]),
|
||||||
|
row(['🧩❓ Toggle loose pieces:', mk('div', [mk('kbd', 'G')])]),
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
const settingsEl = ELEMENTS.TABLE.cloneNode(true)
|
const settingsOverlay = mk(
|
||||||
settingsEl.classList.add('settings')
|
'div',
|
||||||
settingsEl.appendChild(bgColorPickerRow)
|
{ cls: ['overlay', 'transparent', 'closed'], click: mkSelfToggler() },
|
||||||
settingsEl.appendChild(playerColorPickerRow)
|
[
|
||||||
settingsEl.appendChild(nameChangeRow)
|
mk('table', { cls: 'settings', click: stopProp }, [
|
||||||
settingsEl.addEventListener('click', (e) => {
|
row([mk('label', 'Background: '), bgColorPickerEl]),
|
||||||
e.stopPropagation()
|
row([mk('label', 'Color: '), playerColorPickerEl]),
|
||||||
})
|
row([mk('label', 'Name: '), nameChangeEl]),
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
const settingsOverlay = ELEMENTS.DIV.cloneNode(true)
|
const previewOverlay = mk(
|
||||||
settingsOverlay.classList.add('overlay', 'transparent', 'closed')
|
'div',
|
||||||
settingsOverlay.appendChild(settingsEl)
|
{ cls: ['overlay', 'closed'], click: mkSelfToggler() },
|
||||||
settingsOverlay.addEventListener('click', () => {
|
[
|
||||||
toggle(settingsOverlay)
|
mk('div', { cls: 'preview' }, [
|
||||||
})
|
mk('div', { cls: 'img', style: { backgroundImage: `url('${previewImageUrl}')` } })
|
||||||
|
])
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
const previewEl = ELEMENTS.DIV.cloneNode(true)
|
const scoresListEl = mk('table')
|
||||||
previewEl.classList.add('preview')
|
|
||||||
|
|
||||||
const imgEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
imgEl.classList.add('img')
|
|
||||||
imgEl.style.backgroundImage = `url('${previewImageUrl}')`
|
|
||||||
previewEl.appendChild(imgEl)
|
|
||||||
|
|
||||||
const previewOverlay = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
previewOverlay.classList.add('overlay', 'closed')
|
|
||||||
previewOverlay.appendChild(previewEl)
|
|
||||||
const togglePreview = () => {
|
|
||||||
previewOverlay.classList.toggle('closed')
|
|
||||||
}
|
|
||||||
previewOverlay.addEventListener('click', () => {
|
|
||||||
togglePreview()
|
|
||||||
})
|
|
||||||
|
|
||||||
const opener = (str, overlay, disableHotkeys = true) => {
|
|
||||||
const el = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
el.classList.add('opener')
|
|
||||||
el.appendChild(txt(str))
|
|
||||||
el.addEventListener('click', () => {
|
|
||||||
toggle(overlay, disableHotkeys)
|
|
||||||
})
|
|
||||||
return el
|
|
||||||
}
|
|
||||||
|
|
||||||
const homeEl = ELEMENTS.A.cloneNode(true)
|
|
||||||
homeEl.classList.add('opener')
|
|
||||||
homeEl.appendChild(txt('🧩 Puzzles'))
|
|
||||||
homeEl.target = '_blank'
|
|
||||||
homeEl.href = '/'
|
|
||||||
|
|
||||||
const settingsOpenerEl = opener('🛠️ Settings', settingsOverlay)
|
|
||||||
const previewOpenerEl = opener('🖼️ Preview', previewOverlay, false)
|
|
||||||
const helpOpenerEl = opener('ℹ️ Help', helpOverlay)
|
|
||||||
|
|
||||||
const tabsEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
tabsEl.classList.add('tabs')
|
|
||||||
tabsEl.appendChild(homeEl)
|
|
||||||
tabsEl.appendChild(previewOpenerEl)
|
|
||||||
tabsEl.appendChild(settingsOpenerEl)
|
|
||||||
tabsEl.appendChild(helpOpenerEl)
|
|
||||||
|
|
||||||
const menuEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
menuEl.classList.add('menu')
|
|
||||||
menuEl.appendChild(tabsEl)
|
|
||||||
|
|
||||||
const scoresTitleEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
scoresTitleEl.appendChild(txt('Scores'))
|
|
||||||
|
|
||||||
const scoresListEl = ELEMENTS.TABLE.cloneNode(true)
|
|
||||||
const updateScoreBoard = (players, ts) => {
|
const updateScoreBoard = (players, ts) => {
|
||||||
const minTs = ts - 30 * Time.SEC
|
const minTs = ts - 30 * Time.SEC
|
||||||
const actives = players.filter(player => player.ts >= minTs)
|
const actives = players.filter(player => player.ts >= minTs)
|
||||||
|
|
@ -227,69 +162,55 @@ function addMenuToDom(previewImageUrl, setHotkeys) {
|
||||||
actives.sort((a, b) => b.points - a.points)
|
actives.sort((a, b) => b.points - a.points)
|
||||||
nonActives.sort((a, b) => b.points - a.points)
|
nonActives.sort((a, b) => b.points - a.points)
|
||||||
|
|
||||||
const _row = (icon, player) => {
|
const _row = (icon, player) => row(
|
||||||
const r = row(txt(icon), txt(player.name), txt(player.points))
|
{ style: { color: player.color} },
|
||||||
r.style.color = player.color
|
[icon, player.name, player.points]
|
||||||
return r
|
)
|
||||||
}
|
|
||||||
|
|
||||||
scoresListEl.innerHTML = ''
|
scoresListEl.innerHTML = ''
|
||||||
for (const player of actives) {
|
actives.forEach(player => scoresListEl.appendChild(_row('⚡', player)))
|
||||||
scoresListEl.appendChild(_row('⚡', player))
|
nonActives.forEach(player => scoresListEl.appendChild(_row('💤', player)))
|
||||||
}
|
|
||||||
for (const player of nonActives) {
|
|
||||||
scoresListEl.appendChild(_row('💤', player))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const timerStr = (started, ended, ts) => {
|
const timerCountdownEl = mk('div')
|
||||||
|
const updateTimer = (from, ended, ts) => {
|
||||||
const icon = ended ? '🏁' : '⏳'
|
const icon = ended ? '🏁' : '⏳'
|
||||||
const from = started;
|
const timeDiffStr = Time.timeDiffStr(from, ended || ts)
|
||||||
const to = ended || ts
|
timerCountdownEl.innerText = `${icon} ${timeDiffStr}`
|
||||||
const timeDiffStr = Time.timeDiffStr(from, to)
|
|
||||||
return `${icon} ${timeDiffStr}`
|
|
||||||
}
|
}
|
||||||
|
const tilesDoneEl = mk('div')
|
||||||
const timerCountdownEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
const updateTimer = (started, ended, ts) => {
|
|
||||||
timerCountdownEl.innerText = timerStr(started, ended, ts)
|
|
||||||
}
|
|
||||||
const tilesDoneEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
const udateTilesDone = (finished, total) => {
|
const udateTilesDone = (finished, total) => {
|
||||||
tilesDoneEl.innerText = `🧩 ${finished}/${total}`
|
tilesDoneEl.innerText = `🧩 ${finished}/${total}`
|
||||||
}
|
}
|
||||||
|
|
||||||
const timerEl = ELEMENTS.DIV.cloneNode(true)
|
const timerEl = mk('div', { cls: 'timer' }, [tilesDoneEl, timerCountdownEl])
|
||||||
timerEl.classList.add('timer')
|
|
||||||
timerEl.appendChild(tilesDoneEl)
|
|
||||||
timerEl.appendChild(timerCountdownEl)
|
|
||||||
|
|
||||||
let replayControl = null
|
let replayControl = null
|
||||||
if (MODE === MODE_REPLAY) {
|
if (MODE === MODE_REPLAY) {
|
||||||
const replayControlEl = ELEMENTS.DIV.cloneNode(true)
|
const speedUp = mk('button', { cls: 'btn' }, ['⏫'])
|
||||||
const speedUp = btn('⏫')
|
const speedDown = mk('button', { cls: 'btn' }, ['⏬'])
|
||||||
const speedDown = btn('⏬')
|
const pause = mk('button', { cls: 'btn' }, ['⏸️'])
|
||||||
const pause = btn('⏸️')
|
const speed = mk('div')
|
||||||
const speed = ELEMENTS.DIV.cloneNode(true)
|
timerEl.appendChild(mk('div', [ speed, speedUp, speedDown, pause ]))
|
||||||
replayControlEl.appendChild(speed)
|
|
||||||
replayControlEl.appendChild(speedUp)
|
|
||||||
replayControlEl.appendChild(speedDown)
|
|
||||||
replayControlEl.appendChild(pause)
|
|
||||||
timerEl.appendChild(replayControlEl)
|
|
||||||
replayControl = { speedUp, speedDown, pause, speed }
|
replayControl = { speedUp, speedDown, pause, speed }
|
||||||
}
|
}
|
||||||
|
|
||||||
const scoresEl = ELEMENTS.DIV.cloneNode(true)
|
|
||||||
scoresEl.classList.add('scores')
|
|
||||||
scoresEl.appendChild(scoresTitleEl)
|
|
||||||
scoresEl.appendChild(scoresListEl)
|
|
||||||
|
|
||||||
TARGET_EL.appendChild(settingsOverlay)
|
TARGET_EL.appendChild(settingsOverlay)
|
||||||
TARGET_EL.appendChild(previewOverlay)
|
TARGET_EL.appendChild(previewOverlay)
|
||||||
TARGET_EL.appendChild(helpOverlay)
|
TARGET_EL.appendChild(helpOverlay)
|
||||||
TARGET_EL.appendChild(timerEl)
|
TARGET_EL.appendChild(timerEl)
|
||||||
TARGET_EL.appendChild(menuEl)
|
TARGET_EL.appendChild(mk('div', { cls: 'menu' }, [
|
||||||
TARGET_EL.appendChild(scoresEl)
|
mk('div', { cls: 'tabs' }, [
|
||||||
|
mk('a', { cls: 'opener', target: '_blank', href: '/' }, '🧩 Puzzles'),
|
||||||
|
mk('div', { cls: 'opener', click: mkToggler(previewOverlay, false) }, '🖼️ Preview'),
|
||||||
|
mk('div', { cls: 'opener', click: mkToggler(settingsOverlay) }, '🛠️ Settings'),
|
||||||
|
mk('div', { cls: 'opener', click: mkToggler(helpOverlay) }, 'ℹ️ Help'),
|
||||||
|
])
|
||||||
|
]))
|
||||||
|
TARGET_EL.appendChild(mk('div', { cls: 'scores' }, [
|
||||||
|
mk('div', 'Scores'),
|
||||||
|
scoresListEl,
|
||||||
|
]))
|
||||||
|
|
||||||
return {
|
return {
|
||||||
bgColorPickerEl,
|
bgColorPickerEl,
|
||||||
|
|
@ -298,7 +219,7 @@ function addMenuToDom(previewImageUrl, setHotkeys) {
|
||||||
updateScoreBoard,
|
updateScoreBoard,
|
||||||
updateTimer,
|
updateTimer,
|
||||||
udateTilesDone,
|
udateTilesDone,
|
||||||
togglePreview,
|
togglePreview: () => toggle(previewOverlay, false),
|
||||||
replayControl,
|
replayControl,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue