CARDTS- Custom Elements for (Card) (Games)

** ALPHA!!! **

https://e-lements.github.io/CARDTS/

Has generic WebComponents to display cards... any card like HTML element

Examples

52 playing cards (working on it)
- Solitaire game
- Card Designer - design your own look
HogCardts - (multimedia) Harry Potter themed Concentration game
- https://e-lements.github.io/hogcardts/
Game of SET
Kanban/Scrum board

Features

Cardts core

Custom Elements/Web Components
- <cardts-container>
- <cardts-area>
- <cardts-slot>
- <cardts-card>
single file
Event drive

52 Playing cards

one file (no separate SVG files!)
SVG cards are created client-side (thus fully configurable)
standard Court(UK) / Face(USA) images (adds an extra 160 Kb)
Smallest possible (minified) filesize:
- cardts core 7 Kb
- SVG elements 160 Kb
- total: SIZE52 Kb (SIZE52GZ GZipped)

Usage:

    <cardts-card rank="Ace" suit="Spade"><cardts-card>

Motivation

I PEEK-ed and POKE-ed at the age of 10, and learned HTML (yes, a tat late) at 25

In 1994 Web Development in the Mosaic Browser was easy.
What I liked about HTML 1.0 was its simplicity and the ability to 'peek at' and learn from someone else's effort.

Why has 'Web Development' in the past decade become For-Rocket-Scientists-Only?
What happened to the days when all you needed where a handful of HTML tags and a headful imagination.

Feel free to PEEK around, and if you want to POKE make it an issue

Theory

Solitaire - https://codepen.io/bfa/pen/ggGYeE

  <cardts-game>
    <cardts-pile id="freecells" type="any">
      <% 4 times %>
        <cardts-pile max=1></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-pile id="foundation" type="stack">
      <% 4 times %>
        <cardts-pile></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-pile>
      <% 8 times %>
        <cardts-pile type="sequence"></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-deck type="frenchdeck"></cardts-deck>
  <cardts-game>

Why and How I made SVG cards smaller

All good open-source SVG cards available are high-precision ready for print. SVG files can be made a lot smaller by reducing precision (https://jakearchibald.github.io/svgomg/)

Since card 2 and 9 (or any card) don't differ that much, building the SVG for cards client-side saves (some) code

(optional) Use 2 court image for all 4 suits reduces the SVG fragments by over 50%

Resources

Cards

The International Playing-Card Society
SVG (serverside) Card Creator (I used these and altered them)
https://www.me.uk/cards/makeadeck.cgi
ES6/Polymer WebComponent - separate SVG files for courts (last commit:2017)
https://www.webcomponents.org/element/vpusher/game-card
CSS playing cards - PNG images (over 250 Kb) (last commit: 2012)
https://donpark.github.io/scalable-css-playing-cards/
HTML5 deck of cards (all 52 cards are separate SVG files) (last commit: 2017)
https://github.com/pakastin/deck-of-cards
https://deck-of-cards.js.org/
CSS only (no Court images) (last commit: 2012)
https://github.com/zachwaugh/Helveticards
Google Images playingcards
Solitaire
- Redux,React, the lot https://codepen.io/HunorMarton/details/rwpGXj

SVG

LZMA compression

Tools/Utilities

Reduce SVG path precision (doesn't optimize paths like SVGO does)
https://jsfiddle.net/dannye/austjc1y/

Known Issues

letters can not be Emoji
when outputting to SVG (default is IMG with SVG as data:image/svg+xml ) custom letters can't be used (bug) and are ignored

Challenge - built your own game

Create FreeCell with HTML Custom Elements

inspiration: https://www.free-freecell-solitaire.com/freecell.html

(something like) This HTML should create ALL game functionality

  <cardts-game>
    <cardts-pile id="freecells" type="any">
      <% 4 times %>
        <cardts-pile max=1></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-pile id="foundation" type="stack">
      <% 4 times %>
        <cardts-pile></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-pile>
      <% 8 times %>
        <cardts-pile type="sequence"></cardts-pile>
      <%%>
    </cardts-pile>
    <cardts-deck type="frenchdeck"></cardts-deck>
  <cardts-game>

e-lements/CARDTS