From 08a61d6967d98b1b4938e46ec50b2b42387c9e7e Mon Sep 17 00:00:00 2001 From: Renan LE CARO Date: Tue, 29 Apr 2025 10:31:56 +0200 Subject: [PATCH] wip --- Readme.md | 11 +++- dist/index.html | 95 ++++++++++++++------------- package.json | 2 +- patterns.html | 163 ---------------------------------------------- src/game.less | 80 +++++++++++++++-------- src/game.ts | 15 +++-- src/game_utils.ts | 14 +--- src/tooltip.ts | 33 ++-------- 8 files changed, 128 insertions(+), 285 deletions(-) delete mode 100644 patterns.html diff --git a/Readme.md b/Readme.md index 46f6c0c..7de2c82 100644 --- a/Readme.md +++ b/Readme.md @@ -26,10 +26,19 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades ! - missed challenges show as greyed out choices (with unlock condition). - bigger "level X or Y cleared", continue to level X/Y as button -- Can't press ? buttons in Creative Menu. ## Done +- somehow score clicks didn't register while the game was playing, that's solved +- upgrades list now uses numbers instead of bars, looks better with limitless +- Fix : click tooltip to open on mobile, click anywhere to close +- Can't press help buttons in Creative Menu + + +## 29097764 + +- Added levels : Fish, Spider, GlidersLone island,Spacewyrm Jon, Taijitu, Egg pan, Inception, Chess + ## 29095000 - hardcoded the levels unlock conditions so that they wouldn't change at each update diff --git a/dist/index.html b/dist/index.html index f64ce98..c97bdb9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -60,8 +60,9 @@ canvas:not(#game) { } #score:hover, #menu:hover, #score:focus, #menu:focus { + color: #000; cursor: pointer; - background: #0000004d; + background: #fff; } #score { @@ -383,26 +384,48 @@ h2.histogram-title strong { color: #fff; } -.upgrade > span { - flex-grow: 0; - flex-shrink: 0; - align-self: center; - width: 5px; - height: 32px; +.upgrade .level { + color: #000; + background: #fff; + border: 1px solid #fff; + border-radius: 3px; + font-size: 12px; + font-style: normal; + font-weight: bold; + line-height: 12px; display: inline-block; + position: relative; + top: -3px; + overflow: hidden; } -.upgrade > span.used { +.upgrade .level > span { + display: inline-block; + position: relative; +} + +.upgrade .level > span:first-child { + color: #000; background: #fff; + padding: 3px 6px 0 2px; } -.upgrade > span.free { - opacity: .25; - background: #fff; +.upgrade .level > span:last-child { + color: #fff; + background: #000; + padding: 3px 3px 0 2px; } -.upgrade > span.banned { - background: red; +.upgrade .level > span:last-child:before { + content: ""; + background: #000; + width: 4px; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: -2px; + transform: skewX(-10deg); } .upgrade.used { @@ -1084,13 +1107,15 @@ setInterval(()=>{ setInterval(()=>{ (0, _monitorLevelsUnlocks.monitorLevelsUnlocks)(gameState); }, 500); -(0, _render.scoreDisplay).addEventListener("click", (e)=>{ - e.preventDefault(); - if (!(0, _asyncAlert.alertsOpen)) (0, _openScorePanel.openScorePanel)(gameState); -}); document.addEventListener("visibilitychange", ()=>{ if (document.hidden) pause(true); }); +function scoreOpen(e) { + e.preventDefault(); + if (!(0, _asyncAlert.alertsOpen)) (0, _openScorePanel.openScorePanel)(gameState); +} +(0, _render.scoreDisplay).addEventListener("click", scoreOpen); +(0, _render.scoreDisplay).addEventListener("mousedown", scoreOpen); document.getElementById("menu").addEventListener("click", (e)=>{ e.preventDefault(); if (!(0, _asyncAlert.alertsOpen)) openMainMenu(); @@ -3523,12 +3548,6 @@ function max_levels(gameState) { function pickedUpgradesHTMl(gameState) { const upgradesList = getPossibleUpgrades(gameState).filter((u)=>gameState.perks[u.id]).map((u)=>{ const newMax = Math.max(0, u.max + gameState.perks.limitless); - let bars = []; - for(let i = 0; i < Math.max(u.max, newMax, gameState.perks[u.id]); i++){ - if (i < gameState.perks[u.id]) bars.push(''); - else if (i < newMax) bars.push(''); - else bars.push(''); - } const state = gameState.perks[u.id] && 1 || !newMax && 2 || 3; return { state, @@ -3542,9 +3561,9 @@ function pickedUpgradesHTMl(gameState) { ${(0, _loadGameData.icons)["icon:" + u.id]}

${u.name} + ${gameState.perks[u.id]}${newMax} ${u.help(Math.max(1, gameState.perks[u.id]))} -

- ${bars.reverse().join("")} +

` }; @@ -5896,17 +5915,17 @@ parcelHelpers.defineInteropFlag(exports); parcelHelpers.export(exports, "setupTooltips", ()=>setupTooltips); parcelHelpers.export(exports, "hideAnyTooltip", ()=>hideAnyTooltip); var _options = require("./options"); +const tooltip = document.getElementById("tooltip"); function setupTooltips() { - if ((0, _options.isOptionOn)("mobile-mode")) setupMobileTooltips(tooltip); - else setupDesktopTooltips(tooltip); + return; } function hideAnyTooltip() { tooltip.style.display = "none"; } -const tooltip = document.getElementById("tooltip"); function setupMobileTooltips(tooltip) { tooltip.className = "mobile"; function openTooltip(e) { + console.log('openTooltip', e); hideAnyTooltip(); const hovering = e.target; if (!hovering?.hasAttribute("data-help-content")) return; @@ -5917,26 +5936,8 @@ function setupMobileTooltips(tooltip) { const { top } = hovering.getBoundingClientRect(); tooltip.style.transform = `translate(0,${top}px) translate(0,-100%)`; } - document.body.addEventListener("touchstart", openTooltip, true); - document.body.addEventListener("mousedown", openTooltip, true); - function closeTooltip(e) { - const hovering = e.target; - if (!hovering?.hasAttribute("data-help-content")) return; - e.stopPropagation(); - e.preventDefault(); - hideAnyTooltip(); - } - document.body.addEventListener("touchend", closeTooltip, true); - document.body.addEventListener("mouseup", closeTooltip, true); + document.body.addEventListener("click", openTooltip, true); document.addEventListener("scroll", hideAnyTooltip); - function ignoreClick(e) { - const hovering = e.target; - if (!hovering?.hasAttribute("data-help-content")) return; - e.stopPropagation(); - e.preventDefault(); - } - document.body.addEventListener("click", ignoreClick, true); - document.body.addEventListener("contextmenu", ignoreClick, true); } function setupDesktopTooltips(tooltip) { tooltip.className = "desktop"; diff --git a/package.json b/package.json index 32dd3bb..26e13ed 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "A roguelite take on the breakout genre, optimised for short runs and replayability.", "scripts": { "start": "bash start.sh", - "dev:game-fe": "parcel src/*.html --lazy --no-hmr", + "dev:game-fe": "rm -rf .parcel-cache && parcel src/*.html --lazy --no-hmr --no-cache", "dev:editor-be": "nodemon editserver.js --watch editserver.js", "test": "jest --watch" }, diff --git a/patterns.html b/patterns.html deleted file mode 100644 index c38dc45..0000000 --- a/patterns.html +++ /dev/null @@ -1,163 +0,0 @@ - - - - - Patterns preview - - - - - - - \ No newline at end of file diff --git a/src/game.less b/src/game.less index 578bbe0..3fd2d84 100644 --- a/src/game.less +++ b/src/game.less @@ -1,10 +1,9 @@ * { - font-family: - Courier New, - Courier, - Lucida Sans Typewriter, - Lucida Typewriter, - monospace; + font-family: Courier New, + Courier, + Lucida Sans Typewriter, + Lucida Typewriter, + monospace; box-sizing: border-box; } @@ -56,7 +55,8 @@ canvas:not(#game) { &:hover, &:focus { - background: rgba(0, 0, 0, 0.3); + background: white; + color: black; cursor: pointer; } @@ -399,27 +399,52 @@ h2.histogram-title strong { color: white; } - & > span { - flex-grow: 0; - - flex-shrink: 0; - width: 5px; + .level { + color: #000; + background: #FFF; + border-radius: 3px; + overflow: hidden; + font-size: 12px; + font-style: normal; + line-height: 12px; display: inline-block; - height: 32px; - align-self: center; + position: relative; + top: -3px; + font-weight: bold; + border: 1px solid #FFF; + + > span { + display: inline-block; + position: relative; + + &:first-child { + + padding: 3px 6px 0 2px; + color: #000; + background: #FFF; + } + + &:last-child { + + padding: 3px 3px 0 2px; + color: #FFF; + background: #000; + + &:before { + content: ""; + display: block; + background: black;; + position: absolute; + left: -2px; + top: 0; + bottom: 0; + width: 4px; + transform: skewX(-10deg) + } + } - &.used { - background: #fff; } - &.free { - background: #fff; - opacity: 0.25; - } - - &.banned { - background: red; - } } &.used { @@ -450,9 +475,11 @@ h2.histogram-title strong { user-select: none; opacity: 1; border: 1px solid white; + &.desktop { max-width: 300px; } + &.mobile { width: 95vw; left: 2.5vw; @@ -523,9 +550,8 @@ h2.histogram-title strong { border-radius: 2px; padding-right: 10px; pointer-events: none; - transition: - opacity 200ms, - transform 200ms; + transition: opacity 200ms, + transform 200ms; z-index: 7; &.hidden { diff --git a/src/game.ts b/src/game.ts index 895c947..210a77c 100644 --- a/src/game.ts +++ b/src/game.ts @@ -537,12 +537,6 @@ setInterval(() => { monitorLevelsUnlocks(gameState); }, 500); -scoreDisplay.addEventListener("click", (e) => { - e.preventDefault(); - if (!alertsOpen) { - openScorePanel(gameState); - } -}); document.addEventListener("visibilitychange", () => { if (document.hidden) { @@ -550,6 +544,15 @@ document.addEventListener("visibilitychange", () => { } }); +function scoreOpen(e){ + e.preventDefault(); + if (!alertsOpen) { + openScorePanel(gameState); + } +} +scoreDisplay.addEventListener("click",scoreOpen); +scoreDisplay.addEventListener("mousedown", scoreOpen); + (document.getElementById("menu") as HTMLButtonElement).addEventListener( "click", (e) => { diff --git a/src/game_utils.ts b/src/game_utils.ts index 55e8b5c..6a57391 100644 --- a/src/game_utils.ts +++ b/src/game_utils.ts @@ -105,16 +105,6 @@ export function pickedUpgradesHTMl(gameState: GameState) { .map((u) => { const newMax = Math.max(0, u.max + gameState.perks.limitless); - let bars = []; - for (let i = 0; i < Math.max(u.max, newMax, gameState.perks[u.id]); i++) { - if (i < gameState.perks[u.id]) { - bars.push(''); - } else if (i < newMax) { - bars.push(''); - } else { - bars.push(''); - } - } const state = (gameState.perks[u.id] && 1) || (!newMax && 2) || 3; return { @@ -124,9 +114,9 @@ export function pickedUpgradesHTMl(gameState: GameState) { ${icons["icon:" + u.id]}

${u.name} + ${gameState.perks[u.id]}${newMax} ${u.help(Math.max(1, gameState.perks[u.id]))} -

- ${bars.reverse().join("")} +

`, }; diff --git a/src/tooltip.ts b/src/tooltip.ts index 65454ab..cc318b8 100644 --- a/src/tooltip.ts +++ b/src/tooltip.ts @@ -1,6 +1,9 @@ import { isOptionOn } from "./options"; +const tooltip = document.getElementById("tooltip") as HTMLDivElement; + export function setupTooltips() { + return if (isOptionOn("mobile-mode")) { setupMobileTooltips(tooltip); } else { @@ -11,11 +14,11 @@ export function hideAnyTooltip() { tooltip.style.display = "none"; } -const tooltip = document.getElementById("tooltip") as HTMLDivElement; function setupMobileTooltips(tooltip: HTMLDivElement) { tooltip.className = "mobile"; function openTooltip(e: Event) { + console.log('openTooltip',e) hideAnyTooltip(); const hovering = e.target as HTMLElement; if (!hovering?.hasAttribute("data-help-content")) { @@ -29,35 +32,9 @@ function setupMobileTooltips(tooltip: HTMLDivElement) { tooltip.style.transform = `translate(0,${top}px) translate(0,-100%)`; } - document.body.addEventListener("touchstart", openTooltip, true); - document.body.addEventListener("mousedown", openTooltip, true); - - function closeTooltip(e: Event) { - const hovering = e.target as HTMLElement; - if (!hovering?.hasAttribute("data-help-content")) { - return; - } - - e.stopPropagation(); - e.preventDefault(); - hideAnyTooltip(); - } - - document.body.addEventListener("touchend", closeTooltip, true); - document.body.addEventListener("mouseup", closeTooltip, true); + document.body.addEventListener("click", openTooltip, true); document.addEventListener("scroll", hideAnyTooltip); - function ignoreClick(e: Event) { - const hovering = e.target as HTMLElement; - if (!hovering?.hasAttribute("data-help-content")) { - return; - } - - e.stopPropagation(); - e.preventDefault(); - } - document.body.addEventListener("click", ignoreClick, true); - document.body.addEventListener("contextmenu", ignoreClick, true); } function setupDesktopTooltips(tooltip: HTMLDivElement) {