114 lines
3.1 KiB
JavaScript
114 lines
3.1 KiB
JavaScript
const FruitNumerals = [
|
|
"", "🍏", "🍏🍏", "🍏🍏🍏", "🍏🍏🍏🍏",
|
|
"🍊", "🍊🍏", "🍊🍏🍏", "🍊🍏🍏🍏", "🍊🍏🍏🍏🍏",
|
|
"🍊🍊", "🍊🍊🍏", "🍊🍊🍏🍏", "🍊🍊🍏🍏🍏", "🍊🍊🍏🍏🍏🍏",
|
|
"🍊🍊🍊", "🍊🍊🍊🍏", "🍊🍊🍊🍏🍏", "🍊🍊🍊🍏🍏🍏", "🍊🍊🍊🍏🍏🍏🍏",
|
|
]
|
|
|
|
const KaktovikNumerals = [
|
|
"𝋀", "𝋁", "𝋂", "𝋃", "𝋄",
|
|
"𝋅", "𝋆", "𝋇", "𝋈", "𝋉",
|
|
"𝋊", "𝋋", "𝋌", "𝋍", "𝋎",
|
|
"𝋏", "𝋐", "𝋑", "𝋒", "𝋓",
|
|
]
|
|
|
|
function ToNumerals(numerals, n) {
|
|
let base = numerals.length
|
|
let its = []
|
|
if (n < base) {
|
|
return [numerals[n]]
|
|
}
|
|
while (n > 0) {
|
|
its.unshift(numerals[n % base])
|
|
n = Math.floor(n / base)
|
|
}
|
|
return its
|
|
}
|
|
|
|
function ToFruit(n) {
|
|
let its = ToNumerals(FruitNumerals, n)
|
|
let doc = new DocumentFragment()
|
|
for (let it of its) {
|
|
let row = doc.appendChild(document.createElement("div"))
|
|
row.classList.add("row")
|
|
row.textContent = it
|
|
}
|
|
return doc
|
|
}
|
|
|
|
function ToKaktovik(n) {
|
|
let its = ToNumerals(KaktovikNumerals, n)
|
|
return its.join("")
|
|
}
|
|
|
|
function ToApples(n) {
|
|
let doc = new DocumentFragment()
|
|
while (n > 0) {
|
|
let apples = Math.min(n, 5)
|
|
let row = doc.appendChild(document.createElement("div"))
|
|
row.classList.add("row")
|
|
row.textContent = "🍏".repeat(apples)
|
|
n -= apples
|
|
}
|
|
return doc
|
|
}
|
|
|
|
|
|
class Counter {
|
|
/**
|
|
* Initialize a counter element.
|
|
*
|
|
* This makes buttons active,
|
|
* and does an initial render.
|
|
*
|
|
* @param {HTMLElement} element
|
|
*/
|
|
constructor(element, n=1) {
|
|
this.element = element
|
|
this.n = n
|
|
this.min = Number(this.element.dataset.min) || 0
|
|
this.max = Number(this.element.dataset.max) || Infinity
|
|
|
|
for (let e of this.element.querySelectorAll("button.add")) {
|
|
let amount = Number(e.dataset.amount) || 1
|
|
e.addEventListener("click", e => this.add(e, amount))
|
|
}
|
|
this.render()
|
|
}
|
|
|
|
add(event, amount) {
|
|
let n = this.n + amount
|
|
n = Math.min(n, this.max)
|
|
n = Math.max(n, this.min)
|
|
if (n != this.n) {
|
|
this.n = n
|
|
this.render()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
for (let e of this.element.querySelectorAll(".kaktovik")) {
|
|
e.textContent = ToKaktovik(this.n)
|
|
}
|
|
for (let e of this.element.querySelectorAll(".fruit")) {
|
|
while (e.firstChild) e.firstChild.remove()
|
|
e.appendChild(ToFruit(this.n))
|
|
}
|
|
for (let e of this.element.querySelectorAll(".apples")) {
|
|
while (e.firstChild) e.firstChild.remove()
|
|
e.appendChild(ToApples(this.n))
|
|
}
|
|
for (let e of this.element.querySelectorAll(".arabic")) {
|
|
e.textContent = this.n
|
|
}
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
for (let e of document.querySelectorAll(".counter")) {
|
|
new Counter(e)
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", init)
|