{"_id":"@aureldsk/my-engine-ui","_rev":"2-ffcc4504f5fedce67f6862bafda46a99","name":"@aureldsk/my-engine-ui","dist-tags":{"latest":"0.3.0"},"versions":{"0.2.0":{"name":"@aureldsk/my-engine-ui","version":"0.2.0","keywords":["my-engine","ui","canvas","gamedev"],"author":{"name":"Aurel"},"license":"MIT","_id":"@aureldsk/my-engine-ui@0.2.0","maintainers":[{"name":"aureldsk","email":"aurel.dossou-kohi@outlook.com"}],"dist":{"shasum":"324c23eede4fb1b59a5d328ea11c3e324f18635a","tarball":"https://registry.npmjs.org/@aureldsk/my-engine-ui/-/my-engine-ui-0.2.0.tgz","fileCount":12,"integrity":"sha512-8rHziQ96BCeJys5SsJ3gA/QIzii9ZViHxlHSzX8biaqHWOg2YJG7jVX9GdoBw0N7DUDSpH8lv26An/BbJOF5Jw==","signatures":[{"sig":"MEUCIBhbyMsmtteWODDt1MBwctpSLze0yQ4NHQXBZy4m5ZWJAiEA0Yqdabsz/+kGTuNvCNyQBVDFB4WXJVirDZuoth24LEE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16460},"main":"src/index.js","type":"module","exports":{".":"./src/index.js"},"gitHead":"349c0c9d6734d8ab7aa1cff33c8be5d2add5cfc5","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"aureldsk","email":"aurel.dossou-kohi@outlook.com"},"_npmVersion":"11.3.0","description":"Reusable UI components for My Engine games","directories":{},"_nodeVersion":"24.2.0","_hasShrinkwrap":false,"peerDependencies":{"@kenzoobryan/my-engine":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/my-engine-ui_0.2.0_1766515581166_0.08053278881609183","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aureldsk/my-engine-ui","version":"0.3.0","description":"Reusable UI components for My Engine games","type":"module","main":"src/index.js","exports":{".":"./src/index.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["my-engine","ui","canvas","gamedev"],"author":{"name":"Aurel"},"license":"MIT","peerDependencies":{"@kenzoobryan/my-engine":"^0.3.0"},"_id":"@aureldsk/my-engine-ui@0.3.0","gitHead":"2631d1e8ddce97522ea2e824c50cafec3250be2b","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-9tIEDW8azwd9HSEOtxhPN3AcYxyWqaynGCtosnaB2P0jNYxEHYIf2K4HF2LX+O3pBsO6kJhffGwrSACAST5y2w==","shasum":"6f0bd92e64a240cdf02bc3f8c2adf0602f312e3d","tarball":"https://registry.npmjs.org/@aureldsk/my-engine-ui/-/my-engine-ui-0.3.0.tgz","fileCount":12,"unpackedSize":15631,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDESAE1ZLYt0mlwWlYgrqhefSb8scPC1xceded1bxPBxAiEAuMcNsAE6FB/ebyao6WekQG69BHCd4sL6lLHwD5OZRhc="}]},"_npmUser":{"name":"aureldsk","email":"aurel.dossou-kohi@outlook.com"},"directories":{},"maintainers":[{"name":"aureldsk","email":"aurel.dossou-kohi@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-engine-ui_0.3.0_1766515839464_0.5807512688584278"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-23T18:46:21.077Z","modified":"2025-12-23T18:50:39.859Z","0.2.0":"2025-12-23T18:46:21.308Z","0.3.0":"2025-12-23T18:50:39.606Z"},"author":{"name":"Aurel"},"license":"MIT","keywords":["my-engine","ui","canvas","gamedev"],"description":"Reusable UI components for My Engine games","maintainers":[{"name":"aureldsk","email":"aurel.dossou-kohi@outlook.com"}],"readme":"# @aurel/my-engine-ui\n\nA set of reusable, canvas-based UI components designed for games built with `@kenzoobryan/my-engine` (or any compatible 2D setup).\n\nThis package is **ESM only** and **browser-only**.\n\n## Features\n\n- **Primitives**: `Panel`, `TextLabel`, `Button` (with hover/click states)\n- **Overlays**: Ready-to-use screens for `MainMenu`, `Pause`, `GameOver`.\n- **HUD**: Simple score and best score tracking with `localStorage` persistence.\n- **Input Neutral**: Works with your engine's input or provides a built-in `MouseInput` fallback.\n\n## Installation\n\n```bash\nnpm install @aurel/my-engine-ui\n```\n\n## Integration\n\n### Basic Usage\n\n```javascript\nimport { Hud, MainMenuOverlay, MouseInput } from '@aurel/my-engine-ui';\n\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\n// 1. Setup Input (use Core's input if available, else fallback)\nconst input = new MouseInput(canvas);\n\n// 2. Create Components\nconst hud = new Hud({ x: 10, y: 10 });\nconst menu = new MainMenuOverlay(canvas, {\n  title: 'My Awesome Game',\n  onPlay: () => console.log('Game Start!'),\n  input: input\n});\n\n// 3. Game Loop\nfunction loop() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  \n  input.update(); // Update input state\n  \n  menu.update();  // Update UI logic\n  menu.draw(ctx); // Render UI\n  \n  requestAnimationFrame(loop);\n}\nloop();\n```\n\n### Compatibility\n\n- Requires a browser environment (DOM `canvas` and `localStorage`).\n- Designed for `@kenzoobryan/my-engine` ^0.1.0 but framework agnostic.\n\n## API Reference\n\n### `MouseInput(canvas)`\n- `update()`: updates internal state.\n- `isClicked()`: returns true if mouse was released this frame.\n- `x`, `y`, `isDown`: properties.\n\n### `Hud({ x, y, align, persistenceKey })`\n- `setScore(number)`: updates score and checks best score.\n- `draw(ctx)`: renders.\n\n### `Button({ x, y, width, height, text, onClick, input, style })`\n- `update()`: handles hover/click logic via `input`.\n- `draw(ctx)`: renders.","readmeFilename":"README.md"}