https://github.com/vpusher/game-card

playing game card element based on ES6 and Polymer 2.0
https://github.com/vpusher/game-card

Last synced: about 1 month ago
JSON representation

playing game card element based on ES6 and Polymer 2.0

• Host: GitHub
• URL: https://github.com/vpusher/game-card
• Owner: vpusher
• License: mit
• Created: 2017-01-10T16:19:47.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-27T17:03:31.000Z (almost 7 years ago)
• Last Synced: 2024-10-05T12:57:02.969Z (about 2 months ago)
• Language: HTML
• Size: 1.06 MB
• Stars: 41
• Watchers: 6
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# \

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vpusher/game-card)

🃏 Playing game card custom element based on **ES6** and **Polymer 2.0**.

This aims to act as a project sample taking advantage of native [Shadow DOM v1](https://developers.google.com/web/fundamentals/primers/shadowdom/)

and [Custom Elements v1](https://developers.google.com/web/fundamentals/primers/customelements/) APIs.

Features:

* Flippable with 3D CSS.

* Infinitely scalable thanks to unicode characters and SVG.

Example:

```html

```

Screenshot:

![game-card](images/screenshot.png)

## Installation

First, make sure you have [Bower](https://bower.io/) and the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed.

Then,

```

bower install

polymer serve -o

```

## Usage

Add a `` element to your page and set the `symbol` and `rank` attributes:

```

```

> This will show a game card front face revealed.

See documentation to know more about `symbol` and `rank` attributes.

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## History

* **1.0.6:** Update documentation for webcomponents.org compatibility.

* **1.0.5:** IE11 support.

* **1.0.4:** introducing flippable property.

* **1.0.3:** allowing hot property updates.

* **1.0.2:** allowing uppercase rank.

* **1.0.1:** enhanced image path resolution.

* **1.0.0:** initial release.

## License

MIT license