@3rg0n/breakout404-vue 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ergon Copeland
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,70 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { Breakout404Theme, Breakout404Logger } from '@3rg0n/breakout404-core';
+export { Ball, Block, Breakout404Logger, Breakout404Options, Breakout404Theme, DIFFICULTY_SETTINGS, DifficultySettings, GameEvent, GameEventType, GameState, MAX_CANVAS_DIM, Paddle, TARGET_FRAME_MS, countActiveBlocks, createInitialState, defaultTheme, isValidRedirectUrl, mergeTheme, startOrRestart, step } from '@3rg0n/breakout404-core';
+
+declare const Breakout404: vue.DefineComponent<vue.ExtractPropTypes<{
+    theme: {
+        type: PropType<Partial<Breakout404Theme>>;
+        default: undefined;
+    };
+    difficulty: {
+        type: PropType<"easy" | "medium" | "hard">;
+        default: string;
+    };
+    showScore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    logger: {
+        type: PropType<Breakout404Logger>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("complete" | "blockDestroyed")[], "complete" | "blockDestroyed", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    theme: {
+        type: PropType<Partial<Breakout404Theme>>;
+        default: undefined;
+    };
+    difficulty: {
+        type: PropType<"easy" | "medium" | "hard">;
+        default: string;
+    };
+    showScore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    logger: {
+        type: PropType<Breakout404Logger>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onComplete?: ((...args: any[]) => any) | undefined;
+    onBlockDestroyed?: ((...args: any[]) => any) | undefined;
+}>, {
+    theme: Partial<Breakout404Theme>;
+    difficulty: "easy" | "medium" | "hard";
+    showScore: boolean;
+    redirectUrl: string;
+    redirectDelay: number;
+    logger: Breakout404Logger;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Breakout404, Breakout404 as default };

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { Breakout404Theme, Breakout404Logger } from '@3rg0n/breakout404-core';
+export { Ball, Block, Breakout404Logger, Breakout404Options, Breakout404Theme, DIFFICULTY_SETTINGS, DifficultySettings, GameEvent, GameEventType, GameState, MAX_CANVAS_DIM, Paddle, TARGET_FRAME_MS, countActiveBlocks, createInitialState, defaultTheme, isValidRedirectUrl, mergeTheme, startOrRestart, step } from '@3rg0n/breakout404-core';
+
+declare const Breakout404: vue.DefineComponent<vue.ExtractPropTypes<{
+    theme: {
+        type: PropType<Partial<Breakout404Theme>>;
+        default: undefined;
+    };
+    difficulty: {
+        type: PropType<"easy" | "medium" | "hard">;
+        default: string;
+    };
+    showScore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    logger: {
+        type: PropType<Breakout404Logger>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("complete" | "blockDestroyed")[], "complete" | "blockDestroyed", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    theme: {
+        type: PropType<Partial<Breakout404Theme>>;
+        default: undefined;
+    };
+    difficulty: {
+        type: PropType<"easy" | "medium" | "hard">;
+        default: string;
+    };
+    showScore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    redirectUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    logger: {
+        type: PropType<Breakout404Logger>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onComplete?: ((...args: any[]) => any) | undefined;
+    onBlockDestroyed?: ((...args: any[]) => any) | undefined;
+}>, {
+    theme: Partial<Breakout404Theme>;
+    difficulty: "easy" | "medium" | "hard";
+    showScore: boolean;
+    redirectUrl: string;
+    redirectDelay: number;
+    logger: Breakout404Logger;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Breakout404, Breakout404 as default };

package/dist/index.js

@@ -0,0 +1,130 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Breakout404: () => Breakout404,
+  DIFFICULTY_SETTINGS: () => import_breakout404_core2.DIFFICULTY_SETTINGS,
+  MAX_CANVAS_DIM: () => import_breakout404_core2.MAX_CANVAS_DIM,
+  TARGET_FRAME_MS: () => import_breakout404_core2.TARGET_FRAME_MS,
+  countActiveBlocks: () => import_breakout404_core2.countActiveBlocks,
+  createInitialState: () => import_breakout404_core2.createInitialState,
+  default: () => index_default,
+  defaultTheme: () => import_breakout404_core2.defaultTheme,
+  isValidRedirectUrl: () => import_breakout404_core2.isValidRedirectUrl,
+  mergeTheme: () => import_breakout404_core2.mergeTheme,
+  startOrRestart: () => import_breakout404_core2.startOrRestart,
+  step: () => import_breakout404_core2.step
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Breakout404.ts
+var import_vue = require("vue");
+var import_breakout404_core = require("@3rg0n/breakout404-core");
+var Breakout404 = (0, import_vue.defineComponent)({
+  name: "Breakout404",
+  props: {
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    difficulty: {
+      type: String,
+      default: "medium"
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    redirectUrl: {
+      type: String,
+      default: void 0
+    },
+    redirectDelay: {
+      type: Number,
+      default: 2e3
+    },
+    logger: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["complete", "blockDestroyed"],
+  setup(props, { emit }) {
+    const containerRef = (0, import_vue.ref)(null);
+    let game = null;
+    const buildOptions = () => ({
+      theme: props.theme,
+      difficulty: props.difficulty,
+      showScore: props.showScore,
+      redirectUrl: props.redirectUrl,
+      redirectDelay: props.redirectDelay,
+      logger: props.logger,
+      onComplete: () => emit("complete"),
+      onBlockDestroyed: (remaining) => emit("blockDestroyed", remaining)
+    });
+    (0, import_vue.onMounted)(() => {
+      if (!containerRef.value) return;
+      game = new import_breakout404_core.Breakout404Game(containerRef.value, buildOptions());
+    });
+    (0, import_vue.onUnmounted)(() => {
+      game?.destroy();
+    });
+    (0, import_vue.watch)(
+      () => [props.difficulty, props.showScore, props.redirectUrl, props.redirectDelay],
+      () => game?.updateOptions(buildOptions())
+    );
+    (0, import_vue.watch)(
+      () => props.theme,
+      () => game?.updateOptions(buildOptions()),
+      { deep: true }
+    );
+    (0, import_vue.watch)(
+      () => props.logger,
+      () => game?.updateOptions(buildOptions())
+    );
+    return () => (0, import_vue.h)("div", {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: "400px"
+      }
+    });
+  }
+});
+
+// src/index.ts
+var import_breakout404_core2 = require("@3rg0n/breakout404-core");
+var index_default = Breakout404;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breakout404,
+  DIFFICULTY_SETTINGS,
+  MAX_CANVAS_DIM,
+  TARGET_FRAME_MS,
+  countActiveBlocks,
+  createInitialState,
+  defaultTheme,
+  isValidRedirectUrl,
+  mergeTheme,
+  startOrRestart,
+  step
+});

package/dist/index.mjs

@@ -0,0 +1,106 @@
+// src/Breakout404.ts
+import { defineComponent, ref, onMounted, onUnmounted, h, watch } from "vue";
+import {
+  Breakout404Game
+} from "@3rg0n/breakout404-core";
+var Breakout404 = defineComponent({
+  name: "Breakout404",
+  props: {
+    theme: {
+      type: Object,
+      default: void 0
+    },
+    difficulty: {
+      type: String,
+      default: "medium"
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    redirectUrl: {
+      type: String,
+      default: void 0
+    },
+    redirectDelay: {
+      type: Number,
+      default: 2e3
+    },
+    logger: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["complete", "blockDestroyed"],
+  setup(props, { emit }) {
+    const containerRef = ref(null);
+    let game = null;
+    const buildOptions = () => ({
+      theme: props.theme,
+      difficulty: props.difficulty,
+      showScore: props.showScore,
+      redirectUrl: props.redirectUrl,
+      redirectDelay: props.redirectDelay,
+      logger: props.logger,
+      onComplete: () => emit("complete"),
+      onBlockDestroyed: (remaining) => emit("blockDestroyed", remaining)
+    });
+    onMounted(() => {
+      if (!containerRef.value) return;
+      game = new Breakout404Game(containerRef.value, buildOptions());
+    });
+    onUnmounted(() => {
+      game?.destroy();
+    });
+    watch(
+      () => [props.difficulty, props.showScore, props.redirectUrl, props.redirectDelay],
+      () => game?.updateOptions(buildOptions())
+    );
+    watch(
+      () => props.theme,
+      () => game?.updateOptions(buildOptions()),
+      { deep: true }
+    );
+    watch(
+      () => props.logger,
+      () => game?.updateOptions(buildOptions())
+    );
+    return () => h("div", {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: "400px"
+      }
+    });
+  }
+});
+
+// src/index.ts
+import {
+  defaultTheme,
+  mergeTheme,
+  isValidRedirectUrl,
+  DIFFICULTY_SETTINGS,
+  MAX_CANVAS_DIM,
+  TARGET_FRAME_MS,
+  createInitialState,
+  startOrRestart,
+  step,
+  countActiveBlocks
+} from "@3rg0n/breakout404-core";
+var index_default = Breakout404;
+export {
+  Breakout404,
+  DIFFICULTY_SETTINGS,
+  MAX_CANVAS_DIM,
+  TARGET_FRAME_MS,
+  countActiveBlocks,
+  createInitialState,
+  index_default as default,
+  defaultTheme,
+  isValidRedirectUrl,
+  mergeTheme,
+  startOrRestart,
+  step
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@3rg0n/breakout404-vue",
+  "version": "0.6.0",
+  "description": "Vue component for Breakout404 - a Breakout-style 404 page game",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "404",
+    "breakout",
+    "game",
+    "vue",
+    "nuxt"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "dependencies": {
+    "@3rg0n/breakout404-core": "0.6.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.10",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.32"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "clean": "rimraf dist"
+  }
+}