wip

Readme.md

@@ -17,7 +17,8 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
 
 ## Done
 
-- categorize and color perks
+- 
+- color coded perks (green = noob friendly, red = combo with reset condition)
 - removed : instant_upgrade
 - nerfed : helium : now need to be level 3 to have the same effect of keeping coins up
 

src/levelEditor.ts

@@ -1,17 +1,16 @@
-import { icons, transformRawLevel } from "./loadGameData";
-import { t } from "./i18n/i18n";
-import { getSettingValue, getTotalScore, setSettingValue } from "./settings";
-import { asyncAlert } from "./asyncAlert";
-import { Palette, RawLevel } from "./types";
-import { levelIconHTML } from "./levelIcon";
+import {icons, transformRawLevel} from "./loadGameData";
+import {t} from "./i18n/i18n";
+import {getSettingValue, getTotalScore, setSettingValue} from "./settings";
+import {asyncAlert} from "./asyncAlert";
+import {Palette, RawLevel} from "./types";
+import {levelIconHTML} from "./levelIcon";
 
 import _palette from "./data/palette.json";
-import { restart } from "./game";
-import { describeLevel } from "./game_utils";
+import {restart} from "./game";
+import {describeLevel} from "./game_utils";
+import {automaticBackgroundColor, levelCodeToRawLevel, MAX_LEVEL_SIZE, MIN_LEVEL_SIZE} from "./pure_functions";
 
 const palette = _palette as Palette;
-const MAX_LEVEL_SIZE = 21;
-const MIN_LEVEL_SIZE = 2;
 
 export function levelEditorMenuEntry() {
     const min = 10000;
@@ -20,7 +19,7 @@ export function levelEditorMenuEntry() {
         icon: icons["icon:editor"],
         text: t("editor.title"),
         disabled,
-    help: disabled ? t("editor.locked", { min }) : t("editor.help"),
+        help: disabled ? t("editor.locked", {min}) : t("editor.help"),
         async value() {
             openLevelEditorLevelsList().then();
         },
@@ -63,29 +62,9 @@ async function openLevelEditorLevelsList() {
                 value() {
                     const code = prompt(t("editor.import_instruction"))?.trim();
                     if (code) {
-            let [name, credit] = code.match(/\[([^\]]+)]/gi);
-
-            let bricks = code
-              .split(name)[1]
-              .split(credit)[0]
-              .replace(/\s/gi, "");
-            name = name.slice(1, -1);
-            credit = credit.slice(1, -1);
-            name ||= "Imported on " + new Date().toISOString().slice(0, 10);
-            credit ||= "";
-            const size = Math.sqrt(bricks.length);
-            if (
-              Math.floor(size) === size &&
-              size >= MIN_LEVEL_SIZE &&
-              size <= MAX_LEVEL_SIZE
-            ) {
-              rawList.push({
-                color: automaticBackgroundColor(bricks.split("")),
-                size,
-                bricks,
-                name,
-                credit,
-              });
+                        const lvl = levelCodeToRawLevel(code)
+                        if (lvl) {
+                            rawList.push(lvl);
                             setSettingValue("custom_levels", rawList);
                         }
                     }
@@ -131,7 +110,7 @@ export async function editRawLevelList(nth: number, color = "W") {
         "</div>";
 
     const clicked = await asyncAlert<string | null>({
-    title: t("editor.editing.title", { name: level.name }),
+        title: t("editor.editing.title", {name: level.name}),
         content: [
             t("editor.editing.color"),
             colorList,
@@ -289,9 +268,3 @@ export async function editRawLevelList(nth: number, color = "W") {
     editRawLevelList(nth, color);
 }
 
-export function automaticBackgroundColor(bricks: string[]) {
-  return bricks.filter((b) => b === "g").length >
-    bricks.filter((b) => b !== "_").length * 0.05
-    ? "#115988"
-    : "";
-}

src/level_editor/levels_editor.tsx

@@ -6,6 +6,7 @@ import { getLevelBackground, hashCode } from "../getLevelBackground";
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useState } from "react";
 import { moveLevel, resizeLevel, setBrick } from "./levels_editor_util";
+import {levelCodeToRawLevel} from "../pure_functions";
 
 const backgrounds = _backgrounds as string[];
 
@@ -90,17 +91,11 @@ function App() {
                     height: 40,
                     position: "absolute",
                   }}
-                ></button>,
+                >{ (color=="black" && '💣')||' '}</button>,
               );
             }
           }
 
-          const background = color
-            ? { backgroundImage: "none", backgroundColor: color }
-            : {
-                backgroundImage: `url("data:image/svg+xml;UTF8,${encodeURIComponent(getLevelBackground(level) as string)}")`,
-                backgroundColor: "transparent",
-              };
 
           return (
             <div key={li}>
@@ -141,31 +136,12 @@ function App() {
                 <button onClick={() => updateLevel(li, moveLevel(level, 0, 1))}>
                   D
                 </button>
-                <input
-                  type="color"
-                  value={level.color || ""}
-                  onChange={(e) =>
-                    e.target.value && updateLevel(li, { color: e.target.value })
-                  }
-                />
-                <input
-                  type="number"
-                  value={level.svg || hashCode(level.name) % backgrounds.length}
-                  onChange={(e) =>
-                    !isNaN(parseFloat(e.target.value)) &&
-                    updateLevel(li, {
-                      color: "",
-                      svg: parseFloat(e.target.value),
-                    })
-                  }
-                />
               </div>
               <div
                 className="level-bricks-preview"
                 style={{
                   width: size * 40,
-                  height: size * 40,
-                  ...background,
+                  height: size * 40
                 }}
               >
                 {brickButtons}
@@ -180,14 +156,14 @@ function App() {
             key={code}
             className={code === selected ? "active" : ""}
             style={{
-              background: color || "linear-gradient(45deg,black,white)",
+              background: color || "",
               display: "inline-block",
               width: "40px",
               height: "40px",
               border: "1px solid black",
             }}
             onClick={() => setSelected(code)}
-          ></button>
+          >{(color=='' && 'x') || (color=="black" && '💣')||' '}</button>
         ))}
       </div>
       <button
@@ -211,6 +187,21 @@ function App() {
       >
         new
       </button>
+      <button
+        id="import-level"
+        onClick={() => {
+          const code = prompt("Level Code ? ");
+          if(!code) return;
+          const l=levelCodeToRawLevel(code)
+           if(!l)return;
+          setLevels((list) => [
+            ...list,
+             l
+          ]);
+        }}
+      >
+        import
+      </button>
     </div>
   );
 }

src/loadGameData.ts

@@ -5,7 +5,8 @@ import _appVersion from "./data/version.json";
 import { rawUpgrades } from "./upgrades";
 import { getLevelBackground } from "./getLevelBackground";
 import { levelIconHTML } from "./levelIcon";
-import {automaticBackgroundColor} from "./levelEditor";
+
+import {automaticBackgroundColor} from "./pure_functions";
 
 const palette = _palette as Palette;
 

src/pure_functions.ts

@@ -1,4 +1,4 @@
-import { Ball, GameState } from "./types";
+import {Ball, GameState} from "./types";
 
 export function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(value, max));
@@ -102,3 +102,38 @@ export const wallBouncedBest = 3,
   catchRateGood = 90,
   missesBest = 3,
   missesGood = 6;
+
+export const MAX_LEVEL_SIZE = 21;
+export const MIN_LEVEL_SIZE = 2;
+
+export function automaticBackgroundColor(bricks: string[]) {
+    return bricks.filter((b) => b === "g").length >
+    bricks.filter((b) => b !== "_").length * 0.05
+        ? "#115988"
+        : "";
+}
+
+export function levelCodeToRawLevel(code: string) {
+
+    let [name, credit] = code.match(/\[([^\]]+)]/gi);
+
+    let bricks = code
+        .split(name)[1]
+        .split(credit)[0]
+        .replace(/\s/gi, "");
+    name = name.slice(1, -1);
+    credit = credit.slice(1, -1);
+    name ||= "Imported on " + new Date().toISOString().slice(0, 10);
+    credit ||= "";
+    const size = Math.sqrt(bricks.length);
+    if (Math.floor(size) === size &&
+        size >= MIN_LEVEL_SIZE &&
+        size <= MAX_LEVEL_SIZE)
+        return {
+            color: automaticBackgroundColor(bricks.split("")),
+            size,
+            bricks,
+            name,
+            credit,
+        }
+}