${text}
${help || ''}
@@ -2202,9 +2224,11 @@ scoreDisplay.addEventListener("click", async (e) => {
e.preventDefault();
running = false
const cb = await asyncAlert({
- title: `You scored ${score} points so far`, text: `
- } "${title || level.name}")
`
+}
+
+upgrades.forEach(u => u.icon = levelIconHTML(perkIconsLevels[u.id], u.name))
+
fitSize()
restart()
tick();
\ No newline at end of file
diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html
index cc46501..bcce3ba 100644
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@@ -8,14 +8,14 @@
/>
Breakout 71
-
+
-
-
+
+
You are playing level ${currentLevel + 1} out of ${max_levels()}.
- ${scoreStory.map((t) => "" + t + "
").join("")} + title: ` ${score} points at level ${currentLevel + 1} / ${max_levels()}`, + text: ` +${pickedUpgradesHTMl()}
+ ${scoreStory.map((t) => "" + t + "
").join("")} + `, allowClose: true, actions: [{ text: "New run", help: "Start a brand new run.", value: () => { restart(); @@ -2268,23 +2292,19 @@ async function openSettingsPanel() { help: "See and try what you've unlocked", async value() { const ts = getTotalScore() - const tryOn = await asyncAlert({ - title: 'Your unlocks', - text: ` -Your high score is ${highScore}. In total, you've cought ${ts} coins. Click an upgrade below to start a test run with it (stops after 1 level).
- `, - actions: [...upgrades + const actions=[...upgrades .sort((a, b) => a.threshold - b.threshold) .map(({ name, max, help, id, - threshold + threshold, icon }) => ({ text: name, - help: help + (ts >= threshold ? '' : `(${threshold} coins)`), + help: ts >= threshold ? help :`Unlocks at total score ${threshold}.`, disabled: ts < threshold, - value: {perks: {[id]: 1}} + value: {perks: {[id]: 1}}, + icon }) ) @@ -2295,14 +2315,26 @@ async function openSettingsPanel() { const avaliable = ts >= l.threshold return ({ text: l.name, - help: `A ${l.size}x${l.size} level with ${l.bricks.filter(i => i).length} bricks` + (avaliable ? '' : `(${l.threshold} coins)`), + help: avaliable ? `A ${l.size}x${l.size} level with ${l.bricks.filter(i => i).length} bricks` : `Unlocks at total score ${l.threshold}.`, disabled: !avaliable, - value: {level: l.name} - + value: {level: l.name}, + icon: levelIconHTML(l) }) }) ] + const tryOn = await asyncAlert({ + title: `You unlocked ${Math.round(actions.filter(a=>!a.disabled).length / actions.length * 100)}% of the game.`, + text: ` +Your total score is ${ts}. Below are all the upgrades and levels the games has to offer. They greyed out ones can be unlocked by increasing your total score.
+ `, + textAfterButtons:`+The total score increases every time you score in game. +Your high score is ${highScore}. +Click an item above to start a test run with it. +
`, + actions + , allowClose: true, @@ -2476,9 +2508,39 @@ function attract(a, b, power) { vy: -dy * speed + b.vy + (Math.random() - 0.5) * rand, }) } - } +let levelIconHTMLCanvas = document.createElement('canvas') +const levelIconHTMLCanvasCtx = levelIconHTMLCanvas.getContext("2d", {antialias: false, alpha: true}) + +function levelIconHTML(level, title) { + const size=40 + const c = levelIconHTMLCanvas + const ctx = levelIconHTMLCanvasCtx + c.width = size + c.height = size + if (level.color) { + ctx.fillStyle = level.color + ctx.fillRect(0, 0, size, size) + } else { + ctx.clearRect(0, 0, size, size) + } + const pxSize = size / level.size + for (let x = 0; x < level.size; x++) { + for (let y = 0; y < level.size; y++) { + const c = level.bricks[y * level.size + x] + if (c) { + ctx.fillStyle = c + ctx.fillRect(Math.floor(pxSize * x), Math.floor(pxSize * y), Math.ceil(pxSize), Math.ceil(pxSize)) + } + } + } + // I don't think many blind people will benefit for this but it's nice to have something to put in "alt" + return `