open-index/open-npm huggingface dataset:
npm package: @leofavre/flip-card-component
Description: A flip card web component.
Latest version: 1.4.1

# Flip Card

A flip card web component. The card starts facing down and can be flipped by applying the `revealed` attribute.

The component is not clickable. Any click behaviour must be implemented by the application.


## Usage

```html
<flip-card>Content</flip-card>
<flip-card revealed>Content</flip-card>
```

```javascript
import '@leofavre/flip-card-component';
```


## Attributes / Properties

#### `revealed` (Boolean)
Controls whether the content is shown. The default is to show the back of the card.


## CSS custom properties

#### `--flip-card-proportion`
- Default: 1/1

A fraction of the width of the card divided by its height.

#### `--flip-card-perspective`
- Default: 1200px

Controls the CSS property with the same name.

#### `--flip-card-background`
- Default: grey

Set the background of the back of the card.

#### `--flip-card-border-radius`
- Default: 0px

Controls the CSS property with the same name.

#### `--flip-card-border`
- Default: none

Controls the CSS property with the same name.

#### `--flip-card-speed`
- Default: 0.32s

Controls the animation speed.
npm package: @leofavre/memory-game-component
Description: A memory game web component.
Latest version: 1.3.1

# Memory Game

A memory game web component that receives an array of objects describing cards with images and names. The cards are duplicated and randomly distributed facing down. The goal of the game is to reveal matching cards two by two.


## Usage

```html
<memory-game></memory-game>
```

```javascript
import '@leofavre/memory-game-component';

const $memoryGame = document.querySelector('memory-game');

$memoryGame.cards = [{
  img: 'isle-of-dogs/chief.png',
  name: 'Chief'
}, {
  img: 'isle-of-dogs/duke.png',
  name: 'Duke'
}, {
  img: 'isle-of-dogs/king.png',
  name: 'King'
}, {
  img: 'isle-of-dogs/boss.png',
  name: 'Boss'
}]
```


## Properties

#### `cards` (Array)
An arrays of objects representing the cards to be rendered. See [Usage](#usage) for example.


## CSS custom properties

#### `--memory-game-cards-per-line`
- Default: 6

The number of cards per line.

#### `--memory-game-gap`
- Default: 20px

The distance between cards.