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) {