Help

app/build.gradle.kts

@@ -11,8 +11,8 @@ android {
         applicationId = "me.lecaro.breakout"
         minSdk = 21
         targetSdk = 34
-        versionCode = 29056849
+        versionCode = 29057409
-        versionName = "29056849"
+        versionName = "29057409"
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
             useSupportLibrary = true

dist/index.html

@@ -192,7 +192,7 @@ body:not(.has-alert-open) #popup {
   border: none;
   width: 60px;
   height: 60px;
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   overflow: hidden;
@@ -1462,7 +1462,7 @@ const upgrades = (0, _upgrades.rawUpgrades).map((u)=>({
     }));
 
 },{"./data/palette.json":"ktRBU","./data/levels.json":"8JSUc","./data/version.json":"iyP6E","./upgrades":"1u3Dx","./getLevelBackground":"7OIPf","./levelIcon":"6rQoT","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"iyP6E":[function(require,module,exports,__globalThis) {
-module.exports = JSON.parse("\"29056849\"");
+module.exports = JSON.parse("\"29057409\"");
 
 },{}],"1u3Dx":[function(require,module,exports,__globalThis) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
@@ -2207,39 +2207,39 @@ function hoursSpentPlaying() {
 function miniMarkDown(md) {
     let html = [];
     let lastNode = null;
-    md.split('\n').forEach((line)=>{
+    md.split("\n").forEach((line)=>{
         const titlePrefix = line.match(/^#+ /)?.[0];
         if (titlePrefix) {
             if (lastNode) html.push(lastNode);
             lastNode = {
-                tagName: 'h' + (titlePrefix.length - 1),
+                tagName: "h" + (titlePrefix.length - 1),
                 text: line.slice(titlePrefix.length)
             };
-        } else if (line.startsWith('- ')) {
+        } else if (line.startsWith("- ")) {
-            if (lastNode?.tagName !== 'ul') {
+            if (lastNode?.tagName !== "ul") {
                 if (lastNode) html.push(lastNode);
                 lastNode = {
-                    tagName: 'ul',
+                    tagName: "ul",
-                    text: ''
+                    text: ""
                 };
             }
-            lastNode.text += '<li>' + line.slice(2) + '</li>';
+            lastNode.text += "<li>" + line.slice(2) + "</li>";
         } else if (!line.trim()) {
             if (lastNode) html.push(lastNode);
             lastNode = null;
         } else {
-            if (lastNode?.tagName !== 'p') {
+            if (lastNode?.tagName !== "p") {
                 if (lastNode) html.push(lastNode);
                 lastNode = {
-                    tagName: 'p',
+                    tagName: "p",
-                    text: ''
+                    text: ""
                 };
             }
-            lastNode.text += line + ' ';
+            lastNode.text += line + " ";
         }
     });
     if (lastNode) html.push(lastNode);
-    return html.map((h)=>'<' + h.tagName + '>' + h.text.replace(/\bhttps?:\/\/[^\s<>]+/gi, (a)=>`<a href="${a}">${a}</a>`) + '</' + h.tagName + '>').join('\n');
+    return html.map((h)=>"<" + h.tagName + ">" + h.text.replace(/\bhttps?:\/\/[^\s<>]+/gi, (a)=>`<a href="${a}">${a}</a>`) + "</" + h.tagName + ">").join("\n");
 }
 
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"6rQoT":[function(require,module,exports,__globalThis) {
@@ -4747,19 +4747,17 @@ var _asyncAlert = require("./asyncAlert");
 var _pureFunctions = require("./pure_functions");
 function helpMenuEntry() {
     return {
-        icon: (0, _loadGameData.icons)['icon:help'],
+        icon: (0, _loadGameData.icons)["icon:help"],
-        text: (0, _i18N.t)('main_menu.help_title'),
+        text: (0, _i18N.t)("main_menu.help_title"),
-        help: (0, _i18N.t)('main_menu.help_help'),
+        help: (0, _i18N.t)("main_menu.help_help"),
         async value () {
             await (0, _asyncAlert.asyncAlert)({
-                title: (0, _i18N.t)('main_menu.help_title'),
+                title: (0, _i18N.t)("main_menu.help_title"),
                 allowClose: true,
                 content: [
-                    (0, _pureFunctions.miniMarkDown)((0, _i18N.t)('main_menu.help_content')),
+                    (0, _pureFunctions.miniMarkDown)((0, _i18N.t)("main_menu.help_content")),
-                    (0, _i18N.t)('main_menu.help_upgrades'),
+                    (0, _i18N.t)("main_menu.help_upgrades"),
                     ...(0, _loadGameData.upgrades).map((u)=>`
-
-
 <div class="upgrade used">
             ${u.icon}
             <p>
@@ -4770,9 +4768,9 @@ function helpMenuEntry() {
         
           ${(0, _pureFunctions.miniMarkDown)(u.fullHelp)}
 `),
-                    (0, _pureFunctions.miniMarkDown)((0, _i18N.t)('main_menu.credits')),
+                    (0, _pureFunctions.miniMarkDown)((0, _i18N.t)("main_menu.credits")),
-                    (0, _i18N.t)('main_menu.credit_levels'),
+                    (0, _i18N.t)("main_menu.credit_levels"),
-                    ...(0, _loadGameData.allLevels).filter((l)=>l.credit?.startsWith('http')).map((l)=>`
+                    ...(0, _loadGameData.allLevels).filter((l)=>l.credit?.startsWith("http")).map((l)=>`
 <div class="upgrade used">
             ${(0, _loadGameData.icons)[l.name]}
             <p>

src/PWA/sw-b71.js

@@ -1,5 +1,5 @@
 // The version of the cache.
-const VERSION = "29056849";
+const VERSION = "29057409";
 
 // The name of the cache
 const CACHE_NAME = `breakout-71-${VERSION}`;

src/data/levels.json

@@ -1108,4 +1108,4 @@
     "color": "",
     "credit": "https://prohama.com/balloon-1/"
   }
-]
+]

src/data/version.json

@@ -1 +1 @@
-"29056849"
+"29057409"

src/game.less

@@ -189,7 +189,7 @@ body:not(.has-alert-open) #popup {
 
   button#close-modale {
     color: white;
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     width: 60px;

src/game.ts

@@ -63,7 +63,7 @@ import {
 import { isOptionOn, options, toggleOption } from "./options";
 import { hashCode } from "./getLevelBackground";
 import { hoursSpentPlaying } from "./pure_functions";
-import {helpMenuEntry} from "./help";
+import { helpMenuEntry } from "./help";
 
 export function play() {
   if (applyFullScreenChoice()) return;
@@ -556,7 +556,7 @@ export async function openMainMenu() {
         openSettingsMenu();
       },
     },
-      helpMenuEntry()
+    helpMenuEntry(),
   ];
 
   const cb = await asyncAlert<() => void>({

src/help.ts

@@ -1,23 +1,22 @@
-import {allLevels, icons, upgrades} from "./loadGameData";
+import { allLevels, icons, upgrades } from "./loadGameData";
-import {t} from "./i18n/i18n";
+import { t } from "./i18n/i18n";
-import {asyncAlert} from "./asyncAlert";
+import { asyncAlert } from "./asyncAlert";
-import {miniMarkDown} from "./pure_functions";
+import { miniMarkDown } from "./pure_functions";
 
 export function helpMenuEntry() {
-    return {
+  return {
-        icon: icons['icon:help'],
+    icon: icons["icon:help"],
-        text: t('main_menu.help_title'),
+    text: t("main_menu.help_title"),
-        help: t('main_menu.help_help'),
+    help: t("main_menu.help_help"),
-        async value() {
+    async value() {
-            await asyncAlert({
+      await asyncAlert({
-                title:t('main_menu.help_title'),
+        title: t("main_menu.help_title"),
-                allowClose:true,
+        allowClose: true,
-                content:[
+        content: [
-                    miniMarkDown(t('main_menu.help_content')),
+          miniMarkDown(t("main_menu.help_content")),
-                    t('main_menu.help_upgrades'),
+          t("main_menu.help_upgrades"),
-                    ...upgrades.map(u=>`
+          ...upgrades.map(
-
+            (u) => `
-
 <div class="upgrade used">
             ${u.icon}
             <p>
@@ -27,22 +26,25 @@ export function helpMenuEntry() {
         </div>
         
           ${miniMarkDown(u.fullHelp)}
-`),
+`,
-                    miniMarkDown(t('main_menu.credits')),
+          ),
+          miniMarkDown(t("main_menu.credits")),
 
-                    t('main_menu.credit_levels'),
+          t("main_menu.credit_levels"),
-                      ...allLevels.filter(l=>l.credit?.startsWith('http')).map(l=>`
+          ...allLevels
+            .filter((l) => l.credit?.startsWith("http"))
+            .map(
+              (l) => `
 <div class="upgrade used">
             ${icons[l.name]}
             <p>
                 <strong>${l.name}</strong><br/>
           <a href="${l.credit}" target="_blank">${l.credit}</a> 
           </p> 
-        </div>`)
+        </div>`,
-
+            ),
-                ]
+        ],
-            })
+      });
-        }
+    },
-    }
+  };
 }
-

src/level_editor/levels_editor.less

@@ -33,12 +33,12 @@ body {
   & > div {
     display: grid;
     grid-template-columns: auto auto;
-    grid-template-areas:  "name credits" "buttons  bricks";
+    grid-template-areas: "name credits" "buttons  bricks";
-    .name{
+    .name {
       grid-area: name;
       width: 100px;
     }
-    .credits{
+    .credits {
       grid-area: credits;
     }
 

src/level_editor/levels_editor.tsx

@@ -53,7 +53,7 @@ function App() {
     >
       <div id={"levels"}>
         {levels.map((level, li) => {
-          const { name,credit, bricks, size, svg, color } = level;
+          const { name, credit, bricks, size, svg, color } = level;
 
           const brickButtons = [];
           for (let x = 0; x < size; x++) {
@@ -97,23 +97,19 @@ function App() {
           return (
             <div key={li}>
               <input
-                  className={"name"}
+                className={"name"}
                 type="text"
                 value={name}
                 onChange={(e) => updateLevel(li, { name: e.target.value })}
               />
               <input
-                  className={"credit"}
+                className={"credit"}
                 type="text"
-                value={credit||''}
+                value={credit || ""}
                 onChange={(e) => updateLevel(li, { credit: e.target.value })}
               />
 
-
+              <div className={"buttons"}>
-
-              <div
-                  className={"buttons"}
-              >
                 <button onClick={() => deleteLevel(li)}>Delete</button>
                 <button onClick={() => updateLevel(li, resizeLevel(level, -1))}>
                   -

src/pure_functions.ts

@@ -1,54 +1,67 @@
 export function clamp(value: number, min: number, max: number) {
-    return Math.max(min, Math.min(value, max));
+  return Math.max(min, Math.min(value, max));
 }
 
 export function comboKeepingRate(level: number) {
-    return clamp(1 - (1 / (1 + level)) * 1.5, 0, 1);
+  return clamp(1 - (1 / (1 + level)) * 1.5, 0, 1);
 }
 
 export function hoursSpentPlaying() {
-    try {
+  try {
-        const timePlayed =
+    const timePlayed =
-            localStorage.getItem("breakout_71_total_play_time") || "0";
+      localStorage.getItem("breakout_71_total_play_time") || "0";
-        return Math.floor(parseFloat(timePlayed) / 1000 / 60 / 60);
+    return Math.floor(parseFloat(timePlayed) / 1000 / 60 / 60);
-    } catch (e) {
+  } catch (e) {
-        return 0;
+    return 0;
-    }
+  }
 }
 
 export function miniMarkDown(md: string) {
-    let html = []
+  let html: { tagName: string; text: string }[] = [];
-    let lastNode = null
+  let lastNode: { tagName: string; text: string } | null = null;
 
-    md.split('\n').forEach(line => {
+  md.split("\n").forEach((line) => {
+    const titlePrefix = line.match(/^#+ /)?.[0];
 
-        const titlePrefix = line.match(/^#+ /)?.[0]
+    if (titlePrefix) {
-
+      if (lastNode) html.push(lastNode);
-        if (titlePrefix) {
+      lastNode = {
-            if (lastNode) html.push(lastNode)
+        tagName: "h" + (titlePrefix.length - 1),
-            lastNode = {tagName: 'h' + (titlePrefix.length - 1), text: line.slice(titlePrefix.length)}
+        text: line.slice(titlePrefix.length),
-        } else if (line.startsWith('- ')) {
+      };
-            if (lastNode?.tagName !== 'ul') {
+    } else if (line.startsWith("- ")) {
-                if (lastNode)
+      if (lastNode?.tagName !== "ul") {
-                    html.push(lastNode)
+        if (lastNode) html.push(lastNode);
-                lastNode = {tagName: 'ul', text: ''}
+        lastNode = { tagName: "ul", text: "" };
-            }
+      }
-            lastNode.text+='<li>'  +line.slice(2) + '</li>'
+      lastNode.text += "<li>" + line.slice(2) + "</li>";
-        } else if (!line.trim()) {
+    } else if (!line.trim()) {
-            if (lastNode) html.push(lastNode)
+      if (lastNode) html.push(lastNode);
-            lastNode=null
+      lastNode = null;
-        } else {
+    } else {
-
+      if (lastNode?.tagName !== "p") {
-            if (lastNode?.tagName!=='p') {
+        if (lastNode) html.push(lastNode);
-                if(lastNode)
+        lastNode = { tagName: "p", text: "" };
-                html.push(lastNode)
+      }
-                lastNode={tagName: 'p', text: ''}
+      lastNode.text += line + " ";
-            }
-            lastNode.text+= line+' '
-        }
-    })
-    if(lastNode){
-        html.push(lastNode)
     }
-    return html.map(h=>'<'+h.tagName+'>'+h.text.replace(/\bhttps?:\/\/[^\s<>]+/gi,a=>`<a href="${a}">${a}</a>`)+'</'+h.tagName+'>').join('\n')
+  });
+  if (lastNode) {
+    html.push(lastNode);
+  }
+  return html
+    .map(
+      (h) =>
+        "<" +
+        h.tagName +
+        ">" +
+        h.text.replace(
+          /\bhttps?:\/\/[^\s<>]+/gi,
+          (a) => `<a href="${a}">${a}</a>`,
+        ) +
+        "</" +
+        h.tagName +
+        ">",
+    )
+    .join("\n");
 }