samengine 1.6.4

package/README.md

@@ -0,0 +1,145 @@
+# Samengine 🎮
+
+A lightweight, TypeScript-first web game engine framework for building
+2D games *and maybe 3D Games in the Future*.
+
+## Features
+
+- 🎯 Simple game loop management
+- 🎨 Rendering system with text and sprite support
+- ⌨️ Input handling (keyboard & mouse)
+- 📦 TypeScript support out of the box
+- 🛠️ Build tools included
+- 📝 Logging utilities
+- 💾 Save/Load system
+
+## Quick Start
+
+```sh
+# Make sure both of them have the same Version
+
+npm init
+npm install samengine
+npm install samengine-build
+npx samengine-build --new
+npx samengine-build
+```
+
+### Basic Game Loop
+
+```typescript
+import { startEngine, setupInput, dlog, renderText
+} from 'samengine';
+
+const { canvas, ctx, applyScaling, virtualWidth, virtualHeight
+
+} = createCanvas({ fullscreen: true, scaling: "fit",
+virtualWidth: 1920, virtualHeight: 1080 });
+setupInput(canvas, virtualWidth, virtualHeight);
+
+function init() {
+  dlog('🎮 Game initialized!');
+}
+
+function gameLoop(dt: number) {
+  // Clear canvas
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  
+  // Your game logic here
+  renderText(ctx, `FPS: ${(1 / dt).toFixed(0)}`, 10, 20);
+}
+
+startEngine(init, gameLoop);
+```
+
+## Development & Building
+
+### Using Bun (local development)
+
+```sh
+npx samengine-build                   # Start Dev Server
+npx samengine-build --release         # Production build
+npx samengine-build --new             # Create a new project with a
+                                    # simple Snake Clone as Template
+npx samengine-build --new-empty       # Create a new empty project
+```
+
+### Configuration
+
+Edit `samengine.config.ts` to configure your game:
+
+```typescript
+import { defineConfig } from 'samengine-build';
+
+export function defineConfig() {
+  return {
+    entryname: 'main',
+    outdir: 'dist',
+    // ... other config
+  };
+}
+```
+
+or
+
+```typescript
+// Project File for the Game
+
+import { type buildconfig, new_buildconfig
+} from "samengine-build";
+
+export function defineConfig(): buildconfig {
+    let config: buildconfig = new_buildconfig();
+    return config;
+}
+```
+
+## API Reference
+
+### Core Engine
+- `startEngine(init, gameLoop)` - Initialize game loop
+
+### Rendering
+- `renderText(ctx, text, x, y, color?, font?)` - Render text
+- `renderBitmapText()` - Render bitmap font text
+
+### Input System
+- `setupInput(canvas, width?, height?)` - Initialize input
+- `getKeyState(key)` - Check key state
+- Mouse state available via input module
+
+### Types
+- `Vector2D` / `Vector3D` - Vector mathematics
+- `Color` - Color management
+- `Rect` - Rectangle collision
+- Math utilities for game logic
+
+### Utilities
+<!-- - `dlog()` - Development logging -->
+- `startEngine()` - Manage game loop
+
+## License
+
+MIT
+
+## More Addons in the Game Library
+
+- a Full Markdown Parser *(maybe for notes or easy docs, feel free to use)*
+- a JSON with Comments Parser
+
+*(I dont now why i added this)*
+
+## More Tools for samengine
+
+- [samengine-build](https://www.npmjs.com/package/samengine-build)
+- [samengine-cli](https://www.npmjs.com/package/samengine-cli)
+- [old deprecated npm package](https://www.npmjs.com/package/@shadowdara/webgameengine)
+<!--
+
+IDEAS
+
+- SVG Integration
+- SVG Generator
+
+-->

package/dist/build/index.d.ts

@@ -0,0 +1 @@
+export { version } from "./version.js";

package/dist/build/index.js

@@ -0,0 +1,2 @@
+// Export the Version
+export { version } from "./version.js";

package/dist/build/version.d.ts

@@ -0,0 +1 @@
+export declare function version(): string;

package/dist/build/version.js

@@ -0,0 +1,4 @@
+// Function to get the Version
+export function version() {
+    return "1.6.4";
+}

package/dist/core.d.ts

@@ -0,0 +1,3 @@
+type GameLoop = (dt: number) => void;
+export declare function startEngine(start: () => void, gameLoop: GameLoop): void;
+export {};

package/dist/core.js

@@ -0,0 +1,13 @@
+let lastTime = 0;
+let loop;
+export function startEngine(start, gameLoop) {
+    loop = gameLoop;
+    start();
+    requestAnimationFrame(run);
+}
+function run(time) {
+    const dt = (time - lastTime) / 1000;
+    lastTime = time;
+    loop(dt);
+    requestAnimationFrame(run);
+}

package/dist/html.d.ts

@@ -0,0 +1,18 @@
+export type CanvasConfig = {
+    width?: number;
+    height?: number;
+    fullscreen?: boolean;
+    scaling?: "none" | "fit";
+    virtualWidth?: number;
+    virtualHeight?: number;
+};
+export declare function createCanvas(config?: CanvasConfig): {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    applyScaling: () => void;
+    virtualWidth: number;
+    virtualHeight: number;
+};
+export declare function resizeCanvas(canvas: HTMLCanvasElement): void;
+export declare function enableFullscreen(canvas: HTMLCanvasElement): void;
+export declare function setupFullscreenButton(canvas: HTMLCanvasElement): void;

package/dist/html.js

@@ -0,0 +1,66 @@
+export function createCanvas(config = {}) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    document.body.appendChild(canvas);
+    const virtualWidth = config.virtualWidth ?? 800;
+    const virtualHeight = config.virtualHeight ?? 800;
+    function resize() {
+        if (config.fullscreen) {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        else {
+            canvas.width = config.width ?? 800;
+            canvas.height = config.height ?? 800;
+        }
+    }
+    window.addEventListener("resize", resize);
+    resize();
+    function applyScaling() {
+        if (config.scaling === "fit") {
+            const scale = Math.min(canvas.width / virtualWidth, canvas.height / virtualHeight);
+            const offsetX = (canvas.width - virtualWidth * scale) / 2;
+            const offsetY = (canvas.height - virtualHeight * scale) / 2;
+            ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
+        }
+        else {
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+        }
+    }
+    return {
+        canvas,
+        ctx,
+        applyScaling,
+        virtualWidth,
+        virtualHeight,
+    };
+}
+export function resizeCanvas(canvas) {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+export function enableFullscreen(canvas) {
+    window.addEventListener("keydown", (e) => {
+        if (e.key === "f") {
+            if (!document.fullscreenElement) {
+                canvas.requestFullscreen();
+            }
+            else {
+                document.exitFullscreen();
+            }
+        }
+    });
+}
+export function setupFullscreenButton(canvas) {
+    const btn = document.getElementById("fullscreenBtn");
+    if (!btn)
+        return;
+    btn.addEventListener("click", () => {
+        if (!document.fullscreenElement) {
+            canvas.requestFullscreen();
+        }
+        else {
+            document.exitFullscreen();
+        }
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { startEngine } from "./core.js";
+export { renderText, renderBitmapText, drawRect, drawRectOutline, drawCircle, drawCircleOutline, drawTriangle, drawTriangleOutline, } from "./renderer.js";
+export type { Mouse } from "./input.js";
+export { setupInput, isKeyJustPressed, resetInput, getMouse } from "./input.js";
+export { dlog } from "./logger.js";
+export { saveGame, loadGame, clearSave } from "./save.js";
+export type { Texture, DrawOptions, TextureAtlas, Animation, } from "./texture.js";
+export { loadTextureAsync, getTexture, drawTexture, loadAtlas, drawAtlasFrame, AnimationPlayer, drawAnimation, getFlipFromDirection, } from "./texture.js";
+export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
+export { Key } from "./keys.js";

package/dist/index.js

@@ -0,0 +1,14 @@
+// Core Engine Exports
+export { startEngine } from "./core.js";
+// Rendering
+export { renderText, renderBitmapText, drawRect, drawRectOutline, drawCircle, drawCircleOutline, drawTriangle, drawTriangleOutline, } from "./renderer.js";
+export { setupInput, isKeyJustPressed, resetInput, getMouse } from "./input.js";
+// Logging
+export { dlog } from "./logger.js";
+// Save System
+export { saveGame, loadGame, clearSave } from "./save.js";
+export { loadTextureAsync, getTexture, drawTexture, loadAtlas, drawAtlasFrame, AnimationPlayer, drawAnimation, getFlipFromDirection, } from "./texture.js";
+// HTML Generation
+export { createCanvas, enableFullscreen, setupFullscreenButton } from "./html.js";
+// Keys Reference
+export { Key } from "./keys.js";

package/dist/input.d.ts

@@ -0,0 +1,17 @@
+export type Mouse = {
+    x: number;
+    y: number;
+    pressed: boolean;
+    justPressed: boolean;
+    justReleased: boolean;
+    rightPressed: boolean;
+    rightjustPressed: boolean;
+    rightjustReleased: boolean;
+    wheelDelta: number;
+};
+export declare function setupInput(canvas: HTMLCanvasElement, vWidth?: number, vHeight?: number): void;
+export declare function isKeyPressed(code: string): boolean;
+export declare function isKeyJustPressed(code: string): boolean;
+export declare function isKeyJustReleased(code: string): boolean;
+export declare function getMouse(): Readonly<Mouse>;
+export declare function resetInput(): void;

package/dist/input.js

@@ -0,0 +1,111 @@
+const keys = {};
+const mouse = {
+    x: 0,
+    y: 0,
+    // for Left Buttons
+    pressed: false,
+    justPressed: false,
+    justReleased: false,
+    // TODO
+    // do the same for the right Buttons
+    rightPressed: false,
+    rightjustPressed: false,
+    rightjustReleased: false,
+    wheelDelta: 0,
+};
+let canvasRef;
+// 👉 optional: für scaling (kannst du später aus deiner engine holen)
+let virtualWidth = 800;
+let virtualHeight = 800;
+export function setupInput(canvas, vWidth = 800, vHeight = 800) {
+    canvasRef = canvas;
+    virtualWidth = vWidth;
+    virtualHeight = vHeight;
+    // ===== KEYBOARD =====
+    window.addEventListener("keydown", (e) => {
+        if (!keys[e.code]) {
+            keys[e.code] = { pressed: false, justPressed: false, justReleased: false };
+        }
+        const key = keys[e.code];
+        if (!key.pressed)
+            key.justPressed = true;
+        key.pressed = true;
+    });
+    window.addEventListener("keyup", (e) => {
+        if (!keys[e.code]) {
+            keys[e.code] = { pressed: false, justPressed: false, justReleased: false };
+        }
+        const key = keys[e.code];
+        key.pressed = false;
+        key.justReleased = true;
+    });
+    // ===== MOUSE =====
+    canvas.addEventListener("mousedown", (e) => {
+        if (e.button === 0) {
+            if (!mouse.pressed)
+                mouse.justPressed = true;
+            mouse.pressed = true;
+        }
+        if (e.button === 2) {
+            if (!mouse.rightPressed)
+                mouse.rightjustPressed = true;
+            mouse.rightPressed = true;
+        }
+    });
+    canvas.addEventListener("mouseup", (e) => {
+        if (e.button === 0) {
+            mouse.pressed = false;
+            mouse.justReleased = true;
+        }
+        if (e.button === 2) {
+            mouse.rightPressed = false;
+            mouse.rightjustReleased = false;
+        }
+    });
+    // 👉 wichtig: verhindert context menu bei right click
+    canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+    // ===== MOUSE MOVE (mit scaling fix 🔥) =====
+    canvas.addEventListener("mousemove", (e) => {
+        const rect = canvas.getBoundingClientRect();
+        const scale = Math.min(canvas.width / virtualWidth, canvas.height / virtualHeight);
+        const offsetX = (canvas.width - virtualWidth * scale) / 2;
+        const offsetY = (canvas.height - virtualHeight * scale) / 2;
+        mouse.x = (e.clientX - rect.left - offsetX) / scale;
+        mouse.y = (e.clientY - rect.top - offsetY) / scale;
+    });
+    // ===== MOUSE WHEEL =====
+    canvas.addEventListener("wheel", (e) => {
+        mouse.wheelDelta = e.deltaY;
+    });
+    // 👉 Fix: wenn Maus Canvas verlässt
+    canvas.addEventListener("mouseleave", () => {
+        mouse.pressed = false;
+        mouse.rightPressed = false;
+    });
+}
+// ===== KEY HELPERS =====
+export function isKeyPressed(code) {
+    return keys[code]?.pressed || false;
+}
+export function isKeyJustPressed(code) {
+    return keys[code]?.justPressed || false;
+}
+export function isKeyJustReleased(code) {
+    return keys[code]?.justReleased || false;
+}
+// ===== MOUSE =====
+export function getMouse() {
+    return { ...mouse };
+}
+// ===== RESET =====
+export function resetInput() {
+    for (const k in keys) {
+        keys[k].justPressed = false;
+        keys[k].justReleased = false;
+    }
+    mouse.justPressed = false;
+    mouse.justReleased = false;
+    mouse.rightjustPressed = false;
+    mouse.rightjustReleased = false;
+    mouse.wheelDelta = 0;
+}

package/dist/keys.d.ts

@@ -0,0 +1,52 @@
+export declare enum Key {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    Space = "Space",
+    Enter = "Enter",
+    Escape = "Escape",
+    Tab = "Tab",
+    ShiftLeft = "ShiftLeft",
+    ShiftRight = "ShiftRight",
+    ControlLeft = "ControlLeft",
+    ControlRight = "ControlRight",
+    AltLeft = "AltLeft",
+    AltRight = "AltRight",
+    KeyA = "KeyA",
+    KeyB = "KeyB",
+    KeyC = "KeyC",
+    KeyD = "KeyD",
+    KeyE = "KeyE",
+    KeyF = "KeyF",
+    KeyG = "KeyG",
+    KeyH = "KeyH",
+    KeyI = "KeyI",
+    KeyJ = "KeyJ",
+    KeyK = "KeyK",
+    KeyL = "KeyL",
+    KeyM = "KeyM",
+    KeyN = "KeyN",
+    KeyO = "KeyO",
+    KeyP = "KeyP",
+    KeyQ = "KeyQ",
+    KeyR = "KeyR",
+    KeyS = "KeyS",
+    KeyT = "KeyT",
+    KeyU = "KeyU",
+    KeyV = "KeyV",
+    KeyW = "KeyW",
+    KeyX = "KeyX",
+    KeyY = "KeyY",
+    KeyZ = "KeyZ",
+    Digit0 = "Digit0",
+    Digit1 = "Digit1",
+    Digit2 = "Digit2",
+    Digit3 = "Digit3",
+    Digit4 = "Digit4",
+    Digit5 = "Digit5",
+    Digit6 = "Digit6",
+    Digit7 = "Digit7",
+    Digit8 = "Digit8",
+    Digit9 = "Digit9"
+}

package/dist/keys.js

@@ -0,0 +1,55 @@
+// keys.ts
+// to view the Keys easily with the Autocomplete Feature
+export var Key;
+(function (Key) {
+    Key["ArrowUp"] = "ArrowUp";
+    Key["ArrowDown"] = "ArrowDown";
+    Key["ArrowLeft"] = "ArrowLeft";
+    Key["ArrowRight"] = "ArrowRight";
+    Key["Space"] = "Space";
+    Key["Enter"] = "Enter";
+    Key["Escape"] = "Escape";
+    Key["Tab"] = "Tab";
+    Key["ShiftLeft"] = "ShiftLeft";
+    Key["ShiftRight"] = "ShiftRight";
+    Key["ControlLeft"] = "ControlLeft";
+    Key["ControlRight"] = "ControlRight";
+    Key["AltLeft"] = "AltLeft";
+    Key["AltRight"] = "AltRight";
+    Key["KeyA"] = "KeyA";
+    Key["KeyB"] = "KeyB";
+    Key["KeyC"] = "KeyC";
+    Key["KeyD"] = "KeyD";
+    Key["KeyE"] = "KeyE";
+    Key["KeyF"] = "KeyF";
+    Key["KeyG"] = "KeyG";
+    Key["KeyH"] = "KeyH";
+    Key["KeyI"] = "KeyI";
+    Key["KeyJ"] = "KeyJ";
+    Key["KeyK"] = "KeyK";
+    Key["KeyL"] = "KeyL";
+    Key["KeyM"] = "KeyM";
+    Key["KeyN"] = "KeyN";
+    Key["KeyO"] = "KeyO";
+    Key["KeyP"] = "KeyP";
+    Key["KeyQ"] = "KeyQ";
+    Key["KeyR"] = "KeyR";
+    Key["KeyS"] = "KeyS";
+    Key["KeyT"] = "KeyT";
+    Key["KeyU"] = "KeyU";
+    Key["KeyV"] = "KeyV";
+    Key["KeyW"] = "KeyW";
+    Key["KeyX"] = "KeyX";
+    Key["KeyY"] = "KeyY";
+    Key["KeyZ"] = "KeyZ";
+    Key["Digit0"] = "Digit0";
+    Key["Digit1"] = "Digit1";
+    Key["Digit2"] = "Digit2";
+    Key["Digit3"] = "Digit3";
+    Key["Digit4"] = "Digit4";
+    Key["Digit5"] = "Digit5";
+    Key["Digit6"] = "Digit6";
+    Key["Digit7"] = "Digit7";
+    Key["Digit8"] = "Digit8";
+    Key["Digit9"] = "Digit9";
+})(Key || (Key = {}));

package/dist/logger.d.ts

@@ -0,0 +1 @@
+export declare const dlog: (...args: any[]) => void;

package/dist/logger.js

@@ -0,0 +1,16 @@
+// Debug Log Function
+export const dlog = 
+// (import.meta.env?.DEV ?? true) // Default true, falls undefined
+// ? (...args: any[]) => {
+//     const now = new Date();
+//     const time =
+//         `[${now.getHours().toString().padStart(2, "0")}:` +
+//         `${now.getMinutes().toString().padStart(2, "0")}:` +
+//         `${now.getSeconds().toString().padStart(2, "0")}.` +
+//         `${now.getMilliseconds().toString().padStart(3, "0")}]`;
+//     console.log(time, ...args);
+// }
+// :
+(...args) => { }; // Release: nichts loggen
+// Dlog in Release Mode:
+// export const dlog = () => {};

package/dist/renderer.d.ts

@@ -0,0 +1,13 @@
+import { type Rect } from "./types/rectangle.js";
+import { type Circle } from "./types/circle.js";
+import { type Triangle } from "./types/triangle.js";
+export declare function renderText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, color?: string, font?: string): void;
+type CharMap = Record<string, Rect>;
+export declare function renderBitmapText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, sprite: HTMLImageElement, charMap: CharMap, scale?: number): void;
+export declare function drawRect(ctx: CanvasRenderingContext2D, rect: Rect, color?: string): void;
+export declare function drawRectOutline(ctx: CanvasRenderingContext2D, rect: Rect, color?: string, lineWidth?: number): void;
+export declare function drawCircle(ctx: CanvasRenderingContext2D, circle: Circle, color?: string): void;
+export declare function drawCircleOutline(ctx: CanvasRenderingContext2D, circle: Circle, color?: string, lineWidth?: number): void;
+export declare function drawTriangle(ctx: CanvasRenderingContext2D, triangle: Triangle, color?: string): void;
+export declare function drawTriangleOutline(ctx: CanvasRenderingContext2D, triangle: Triangle, color?: string, lineWidth?: number): void;
+export {};

package/dist/renderer.js

@@ -0,0 +1,81 @@
+// Function to render Text
+export function renderText(ctx, text, x, y, color = "white", font = "20px Arial") {
+    ctx.fillStyle = color;
+    ctx.font = font;
+    ctx.textBaseline = "top";
+    ctx.fillText(text, x, y);
+}
+export function renderBitmapText(ctx, text, x, y, sprite, charMap, scale = 1) {
+    let offsetX = 0;
+    for (const c of text) {
+        const rect = charMap[c];
+        if (!rect)
+            continue;
+        ctx.drawImage(sprite, rect.x, rect.y, rect.width, rect.height, x + offsetX, y, rect.width * scale, rect.height * scale);
+        offsetX += rect.width * scale;
+    }
+}
+// ===== SHAPE DRAWING =====
+// Function to draw a filled Rectangle
+export function drawRect(ctx, rect, color = "white") {
+    ctx.fillStyle = color;
+    const radius = rect.borderRadius ?? 0;
+    if (radius > 0 && ctx.roundRect) {
+        ctx.beginPath();
+        ctx.roundRect(rect.x, rect.y, rect.width, rect.height, radius);
+        ctx.fill();
+    }
+    else {
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+}
+// Function to draw a Rectangle outline
+export function drawRectOutline(ctx, rect, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    const radius = rect.borderRadius ?? 0;
+    if (radius > 0 && ctx.roundRect) {
+        ctx.beginPath();
+        ctx.roundRect(rect.x, rect.y, rect.width, rect.height, radius);
+        ctx.stroke();
+    }
+    else {
+        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    }
+}
+// Function to draw a filled Circle
+export function drawCircle(ctx, circle, color = "white") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+    ctx.fill();
+}
+// Function to draw a Circle outline
+export function drawCircleOutline(ctx, circle, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+    ctx.stroke();
+}
+// Function to draw a filled Triangle
+export function drawTriangle(ctx, triangle, color = "white") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(triangle.x1, triangle.y1);
+    ctx.lineTo(triangle.x2, triangle.y2);
+    ctx.lineTo(triangle.x3, triangle.y3);
+    ctx.closePath();
+    ctx.fill();
+}
+// Function to draw a Triangle outline
+export function drawTriangleOutline(ctx, triangle, color = "white", lineWidth = 1) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(triangle.x1, triangle.y1);
+    ctx.lineTo(triangle.x2, triangle.y2);
+    ctx.lineTo(triangle.x3, triangle.y3);
+    ctx.closePath();
+    ctx.stroke();
+}

package/dist/save.d.ts

@@ -0,0 +1,5 @@
+type SaveData = Record<string, any>;
+export declare function saveGame(data: SaveData): void;
+export declare function loadGame(): SaveData | null;
+export declare function clearSave(): void;
+export {};

package/dist/save.js

@@ -0,0 +1,27 @@
+const SAVE_KEY = "my_game_save";
+export function saveGame(data) {
+    try {
+        const json = JSON.stringify(data);
+        localStorage.setItem(SAVE_KEY, json);
+        console.log("Game saved!");
+    }
+    catch (err) {
+        console.error("Save failed:", err);
+    }
+}
+export function loadGame() {
+    try {
+        const json = localStorage.getItem(SAVE_KEY);
+        if (!json)
+            return null;
+        return JSON.parse(json);
+    }
+    catch (err) {
+        console.error("Load failed:", err);
+        return null;
+    }
+}
+export function clearSave() {
+    localStorage.removeItem(SAVE_KEY);
+    console.log("Save cleared!");
+}