website/experiments/points/index.js

const round = x => Math.round(x * 1e10) / 1e10

const prefixes = ["", "kilo", "mega", "giga", "tera", "peta", "exa", "zetta", "yotta"]
const siPrefix = (value, unit) => {
    let i = 0
    let b = value
    while (b > 1000) {
        b /= 1000
        i++
    }
    return `${round(b).toString()} ${prefixes[i]}${unit}${value !== 1 ? "s" : ""}`
}

const metricDisplayInfo = {
    pagesVisited: { name: "Pages visited", units: "page" },
    timeSpent: { name: "Time spent", units: "second" },
    achievements: { name: "Achievements" },
    foesVanquished: { name: "Foes vanquished", units: "foe" },
    deaths: { name: "Deaths", units: "death" },
    loremParagraphs: { name: "Lorem Ipsum paragraphs seen", units: "paragraph" },
    commentsPosted: { name: "Comments posted", units: "comment" },
    greatestInfipage: { name: "Largest infipage visited" }
}

const displayMetric = metric => {
    let name = metric[0]
    let value = metric[1]
    const displayInfo = metricDisplayInfo[name]
    if (displayInfo) {
        name = displayInfo.name
        if (displayInfo.units) {
            value = siPrefix(value, displayInfo.units)
        }
    }
    return m("tr", m("td.metricname", name), m("td.metricvalue", value))
}

const Metrics = {
    metrics: null,
    load: async () => {
        Metrics.metrics = await points.readAllMetrics()
        m.redraw()
    },
    view: () => m("p", Metrics.metrics === null ? "Loading..." : m("table.metrics", Array.from(Metrics.metrics.entries()).map(displayMetric)))
}

const zfill = (num, z) => num.toString().padStart(z, "0")
const formatDate = x => `${zfill(x.getHours(), 2)}:${zfill(x.getMinutes(), 2)}:${zfill(x.getSeconds(), 2)} ${zfill(x.getDate(), 2)}/${zfill(x.getMonth() + 1, 2)}/${zfill(x.getFullYear(), 4)}`

const renderAchievement = a =>
    m(".achievement", { style: `background-color: ${colHash(a.title)}` }, [
        a.timestamp && m(".title", { title: a.id }, `Achievement achieved at ${formatDate(new Date(a.timestamp))}`),
        m(".title", a.title),
        m(".description", a.description),
        m(".conditions", `Unlocked by: ${a.conditions}`),
        a.points && m(".points", `${a.points} points`)
    ])

const Achievements = {
    achievements: [],
    load: async () => {
        const raw = await points.getAchievements()
        Achievements.achievements = raw.map(ach => {
            const info = points.achievementInfo[ach.id]
            const out = {
                title: ach.id || "???",
                description: `Unrecognized achievement ${ach.id}.`,
                conditions: "???",
                ...ach
            }
            if (info) { Object.assign(out, info) }
            m.redraw()
            return out
        })
        Achievements.achievements.sort((a, b) => a.timestamp < b.timestamp)
    },
    view: () => m(".achievements-listing", Achievements.achievements.map(renderAchievement))
}

const reset = async () => {
    if (prompt(`This will reset your points, achievements and metrics. If you are sure, please type "yes I am definitely sure".`) === "yes I am definitely sure") {
        if (confirm("Are you really very sure?")) {
            await points.reset()
            window.location.reload()
        }
    }
}

let pointsCount = "[loading...]"

const reloadPoints = async () => { pointsCount = await points.getPoints() }

const App = {
    view: () => m("div", [
        m("h2", `Points: ${pointsCount}`),
        m("button", { onclick: reset }, "Reset"),
        m(Metrics),
        m(Achievements)
    ])
}

m.mount(document.getElementById("app"), App)

Metrics.load()
reloadPoints()
Achievements.load()

points.unlockAchievement("visitArbitraryPoints")

document.addEventListener("points-update", () => { reloadPoints(); Achievements.load() })