open-index/open-npm huggingface dataset:
npm package: @manufosela/game-board
Description: A game board for parts of a game with other components.
Author: manufosela
Latest version: 1.1.0

# GameBoard

A LitElement that creates a grid-based game board with customizable dimensions and cells. It renders the grid using CSS grid and populates it with child elements based on their position and size data attributes. The class also has properties for the grid width, height, and number of cells in each direction, which can be set via attributes or in the constructor.

## Usage

```html
<game-board
  grid-cells-x="8"
  grid-cells-y="10"
  grid-width="80vw"
  grid-height="90vh"
></game-board>
```

## Properties

- **gridWidth** (String): The width of the game board. Default value is '100vw'.
- **gridHeight** (String): The height of the game board. Default value is '100vh'.
- **gridCellsX** (String): The number of cells in the horizontal direction of the game board. Default value is '12'.
- **gridCellsY** (String): The number of cells in the vertical direction of the game board. Default value is '12'.

## Methods

- **checkDataAttributes(element)** (boolean): Checks if the given element has the required data attributes.
- **checkElement(x, y, width, height)** (boolean): Checks if the given element params are valid.
- **fixProperties()** (void): Fixes the properties if they are invalid.
- **insertShadowDOMElements()** (void): Inserts child elements into the shadow DOM based on their light DOM child elements.

## CSS Custom Properties

This component does not expose any custom CSS properties.

### Styling

The following custom properties are available for styling this component:

```css
  :host {
    /* CSS Grid styles */
    grid-template-columns: repeat(${this.gridCellsX}, 1fr);
    grid-template-rows: repeat(${this.gridCellsY}, 1fr);

    /* Dimensions of the game board */
    width: ${this.gridWidth};
    height: ${this.gridHeight};
  }
```

## Dependencies

This component depends on the following modules:

**lit**: Lit is a simple library for building fast, lightweight web components.

## License

This component is licensed under the Apache-2.0 License. See LICENSE file for details.
npm package: @manufosela/game-tetris
Description: Tetris game with web components with Lit
Author: manufosela
Latest version: 1.1.2

# \<game-tetris>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i game-tetris
```

## Usage

```html
<script type="module">
  import 'game-tetris/game-tetris.js';
</script>

<game-tetris></game-tetris>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run test:watch
```

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`