arcade-game-element

v1.0.2

Published

a month ago

A web component for embedding classic arcade games.

0High
0Medium
0Low

syeh

arcade game web-component space-shooter

Arcade Game Element

A web component to embed classic arcade games into your website.

Installation

npm install arcade-game-element

Usage

Import the component:

In your HTML file, add the following script tag:

<script type="module" src="node_modules/arcade-game-element/ArcadeGame.js"></script>

Use the custom element:
Add the <arcade-game> element to your HTML, specifying the game you want to load with the game attribute.
```
<arcade-game game="space-shooter"></arcade-game>
```

Attributes

game (required): The name of the game to load. Currently, only "space-shooter" is available.
mode: The mode to run the game in.
- "engine" (default): Runs the standard game engine.
- "god": Runs the game in "God Mode" with debugging features enabled.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcade Game</title>
    <script type="module" src="node_modules/arcade-game-element/ArcadeGame.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <arcade-game game="space-shooter" mode="god"></arcade-game>
</body>
</html>

TypeScript / TSX Usage

This package includes TypeScript declaration files (.d.ts) to provide type safety and autocompletion when used in TypeScript or TSX projects.

In your TSX/React Component:

You can import and use the custom element directly. Ensure the component is loaded globally (e.g., via a <script type="module"> tag in your index.html or by importing it in your main application entry point).

import React from 'react';
// Ensure the custom element is registered, typically done in your main.tsx or index.html
import 'arcade-game-element/ArcadeGame.js'; 

const MyGameComponent: React.FC = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', backgroundColor: '#0F172A' }}>
      <arcade-game game="space-shooter" mode="engine"></arcade-game>
    </div>
  );
};

export default MyGameComponent;

Type Declarations for JSX/TSX:

Because this is a custom web component, you might need to ensure your TypeScript compiler knows about it, especially in React projects. The included ArcadeGame.d.ts handles this for most setups. If you encounter type errors like Property 'arcade-game' does not exist on type 'JSX.IntrinsicElements', ensure your tsconfig.json correctly includes the declaration file, or explicitly add it.

Example tsconfig.json (ensure include covers your node_modules or has typeRoots configured):

{
  "compilerOptions": {
    // ... other options
    "jsx": "react-jsx", // or "react"
    "types": ["node"], // or other types you use
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/arcade-game-element" // Add this if needed
    ]
  },
  "include": [
    "src",
    "node_modules/arcade-game-element" // Ensure declarations are included
  ]
}

By default, if you install the package, TypeScript should automatically pick up the ArcadeGame.d.ts file.

Development

To run the game locally, you will need a local web server.

Clone the repository.
Run npm install.
Run a local web server. For example, using http-server:
```
npx http-server
```
Open your browser and navigate to the server address (e.g., http://localhost:8080).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme