diff --git a/Readme.md b/Readme.md
index 608ede0..cc6564c 100644
--- a/Readme.md
+++ b/Readme.md
@@ -14,17 +14,20 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
# Changelog
## To do
-- wording of combo per brick *broken*
- rename hypnosis
-- more icons
- save global stats locally (sum of broken bricks, paddle hits, misses,)
## Done
-- new level : Blinky by Big Goober
-- color coded perks (green = noob friendly, red = combo with reset condition)
+- extra life are transparent when you have 2+ balls
+- categorized the icons
+- color coded the icons
+- changed the wording of perks help to be shorter
+- added tooltips on perks with full help, and a help button on mobile
+- wording of "combo per brick *broken*"
- removed : instant_upgrade
- nerfed : helium : now need to be level 3 to have the same effect of keeping coins up
+- new level : Blinky by Big Goober
## 29088680
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index c98810a..6859d65 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -29,8 +29,8 @@ android {
applicationId = "me.lecaro.breakout"
minSdk = 21
targetSdk = 34
- versionCode = 29090246
- versionName = "29090246"
+ versionCode = 29090261
+ versionName = "29090261"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary = true
diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html
new file mode 100644
index 0000000..94755d8
--- /dev/null
+++ b/app/src/main/assets/index.html
@@ -0,0 +1 @@
+Breakout 71
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index dcce567..63b5984 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -142,7 +142,7 @@ body:not(.has-alert-open) #popup {
display: flex;
}
-#popup > div > section button {
+#popup > div > section > button {
font: inherit;
color: #fff;
cursor: pointer;
@@ -155,39 +155,55 @@ body:not(.has-alert-open) #popup {
display: flex;
}
-#popup > div > section button:not([disabled]):hover, #popup > div > section button:not([disabled]):focus {
+#popup > div > section > button:not([disabled]):hover, #popup > div > section > button:not([disabled]):focus {
z-index: 1;
border-color: #f1d33b;
position: relative;
}
-#popup > div > section button[disabled] {
+#popup > div > section > button[disabled] {
opacity: .5;
filter: saturate(0);
cursor: not-allowed;
}
-#popup > div > section button > div {
+#popup > div > section > button > div {
flex-grow: 1;
}
-#popup > div > section button > div > em {
+#popup > div > section > button > div > em {
opacity: .8;
display: block;
}
-#popup > div > section button.grey-out-unless-hovered:not(:hover) {
+#popup > div > section > button.grey-out-unless-hovered:not(:hover) {
opacity: .6;
}
-#popup > div > section button.grey-out-unless-hovered:not(:hover) img {
+#popup > div > section > button.grey-out-unless-hovered:not(:hover) img {
filter: saturate(0);
}
-#popup > div > section button.grey-out-unless-hovered[disabled] {
+#popup > div > section > button.grey-out-unless-hovered[disabled] {
opacity: .2;
}
+#popup > div > section > button button[data-help-content] {
+ color: #fff;
+ text-align: center;
+ background: #5da3ea;
+ border: none;
+ border-radius: 4px;
+ outline: none;
+ flex-grow: 0;
+ flex-shrink: 0;
+ align-self: flex-start;
+ width: 30px;
+ height: 30px;
+ font-size: 22px;
+ font-weight: bold;
+}
+
#popup.actionsAsGrid.large > div > section {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
@@ -569,16 +585,6 @@ h2.histogram-title strong {
opacity: .8;
color: #8a8a8a;
}
-
-.help_button_tooltip {
- z-index: 8;
- background: #000;
- border-bottom: 1px solid #fff;
- padding: 20px;
- position: fixed;
- top: 0;
- left: 0;
-}
+
diff --git a/src/PWA/sw-b71.js b/src/PWA/sw-b71.js
index 207ce85..8ae32fc 100644
--- a/src/PWA/sw-b71.js
+++ b/src/PWA/sw-b71.js
@@ -1,5 +1,5 @@
// The version of the cache.
-const VERSION = "29090246";
+const VERSION = "29090261";
// The name of the cache
const CACHE_NAME = `breakout-71-${VERSION}`;
diff --git a/src/asyncAlert.ts b/src/asyncAlert.ts
index 9e619b4..3bdf448 100644
--- a/src/asyncAlert.ts
+++ b/src/asyncAlert.ts
@@ -140,22 +140,8 @@ ${icon}
if (isOptionOn("mobile-mode")) {
const helpBtn = document.createElement("button");
helpBtn.innerText = "?";
- helpBtn.className = "help";
- let helpTooltip = document.createElement("div");
- helpTooltip.textContent = tooltip;
- helpTooltip.className = "help_button_tooltip";
- helpBtn.addEventListener("click", (e) => {
- e.stopPropagation();
- });
- helpBtn.addEventListener("touchstart", (e) => {
- e.stopPropagation();
- document.body.appendChild(helpTooltip);
- });
- helpBtn.addEventListener("touchend", (e) => {
- document.body.removeChild(helpTooltip);
- });
-
- button.appendChild(helpBtn);
+ helpBtn.setAttribute('data-help-content',tooltip);
+ button.appendChild(helpBtn)
} else {
button.setAttribute("data-tooltip", tooltip);
}
@@ -199,3 +185,4 @@ function updateAlertsOpen(delta: number) {
}
document.body.classList[alertsOpen ? "add" : "remove"]("has-alert-open");
}
+
diff --git a/src/creative.ts b/src/creative.ts
index 8078268..75e5487 100644
--- a/src/creative.ts
+++ b/src/creative.ts
@@ -93,7 +93,7 @@ export async function openCreativeModePerksPicker() {
...upgrades
.filter((u) => !noCreative.includes(u.id))
.map((u) => ({
- icon: icons['icon:'+u.id],
+ icon: icons["icon:" + u.id],
text: u.name,
help:
(creativeModePerks[u.id] || 0) +
diff --git a/src/data/levels.json b/src/data/levels.json
index 5aae1bc..9e3fce6 100644
--- a/src/data/levels.json
+++ b/src/data/levels.json
@@ -272,7 +272,7 @@
{
"name": "icon:passive_income",
"size": 8,
- "bricks": "_ttttt___ttt_t______yW_____________y______________WWW_______y___",
+ "bricks": "_ttttt___ttt_t______yW_____________y______________WWW_______r___",
"credit": ""
},
{
@@ -398,7 +398,7 @@
{
"name": "icon:smaller_puck",
"size": 8,
- "bricks": "_________bbbbbb__bbbbbb_____________y_____________________yy____",
+ "bricks": "_________tttttt__tttttt_____________W_____________________yy____",
"credit": ""
},
{
@@ -1397,4 +1397,4 @@
"bricks": "____________________________gggg______________ggrrrrgg___________grrrrrrrrg_________grrrrrrrrrrg_______grrrWWrrrrWWrg______grrWWWWrrWWWWg______grrWWbbrrWWbbg_____grrrWWbbrrWWbbrg____grrrrWWrrrrWWrrg____grrrrrrrrrrrrrrg____grrrrrrrrrrrrrrg____grrrrrrrrrrrrrrg____grrrrrrrrrrrrrrg____grrgrrrggrrrgrrg____grg_grg__grg_grg_____g___g____g___g_______________________________________________________________",
"credit": "Suggested by Big Goober. The red ghost, Blinky, from the arcade game \"Pac Man\""
}
-]
+]
\ No newline at end of file
diff --git a/src/data/version.json b/src/data/version.json
index a1d2976..ee2feba 100644
--- a/src/data/version.json
+++ b/src/data/version.json
@@ -1 +1 @@
-"29090246"
+"29090261"
diff --git a/src/game.less b/src/game.less
index 84fd193..6fed5d7 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;
}
@@ -142,7 +141,7 @@ body:not(.has-alert-open) #popup {
flex-direction: column;
align-items: stretch;
- button {
+ > button {
font: inherit;
background: rgba(0, 0, 0, 0.8);
color: white;
@@ -190,6 +189,22 @@ body:not(.has-alert-open) #popup {
opacity: 0.2;
}
}
+
+ button[data-help-content] {
+ border-radius: 4px;
+ outline: none;
+ align-self: flex-start;
+ width: 30px;
+ height: 30px;
+ background: #5da3ea;
+ border: none;
+ color: white;
+ text-align: center;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 22px;
+ }
}
}
}
@@ -501,9 +516,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 {
@@ -603,13 +617,3 @@ h2.histogram-title strong {
opacity: 0.8;
color: #8a8a8a;
}
-
-.help_button_tooltip {
- position: fixed;
- z-index: 8;
- left: 0;
- top: 0;
- background: black;
- padding: 20px;
- border-bottom: 1px solid white;
-}
diff --git a/src/game.ts b/src/game.ts
index a9b4596..edc7802 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -300,6 +300,7 @@ export async function openUpgradesPicker(gameState: GameState) {
value: PerkId | "reroll";
help: string;
className: string;
+ tooltip: string;
}> = pickRandomUpgrades(gameState, 3 + gameState.perks.one_more_choice);
if (!actions.length) break;
@@ -913,20 +914,20 @@ async function openUnlockedUpgradesList() {
const ts = getTotalScore();
const upgradeActions = upgrades
.sort((a, b) => a.threshold - b.threshold)
- .map(({ name, id, threshold, icon, help, category, fullHelp }) => ({
+ .map(({ name, id, threshold, help, category, fullHelp }) => ({
text: name,
disabled: ts < threshold,
value: {
perks: { [id]: 1 },
level: allLevelsAndIcons.find((l) => l.name === "icon:" + id),
} as RunParams,
- icon,
+ icon: icons["icon:" + id],
category,
help:
ts < threshold
? t("unlocks.minTotalScore", { score: threshold })
: help(1),
- tooltip: ts < threshold ? "" : fullHelp,
+ tooltip: ts < threshold ? "" : fullHelp(1)+ ' [id:'+id+ ']',
}));
const tryOn = await asyncAlert