From: Stephen Jianu <stephen@stephenjianu.com>
Date: Thu, 22 Sep 2022 01:15:40 +0000 (-0500)
Subject: Place SVG in card definitions and load from those
X-Git-Url: https://stephenjianu.com/gitweb/?a=commitdiff_plain;h=ff787f7e64d67119c0da34b9c9f15c72f2d6955c;p=donsol-js.git

Place SVG in card definitions and load from those
---

diff --git a/sources/scripts/card.js b/sources/scripts/card.js
index c253ea5..51f12e9 100644
--- a/sources/scripts/card.js
+++ b/sources/scripts/card.js
@@ -1,10 +1,11 @@
 'use strict'
 
-function Card (sym, value, type, name = 'Unknown') {
+function Card (sym, value, type, name = 'Unknown', svg = '') {
   this.symbol = sym
   this.value = value
   this.type = type
   this.name = name
+  this.svg = svg
 
   this.element = null
   this.is_flipped = false
@@ -26,6 +27,7 @@ function Card (sym, value, type, name = 'Unknown') {
 
     const graphic = document.createElement('div')
     graphic.className = 'graphic'
+    graphic.innerHTML = this.svg
     face.appendChild(graphic)
 
     // Name
diff --git a/sources/scripts/card.monster.js b/sources/scripts/card.monster.js
index 2644db7..8382a45 100644
--- a/sources/scripts/card.monster.js
+++ b/sources/scripts/card.monster.js
@@ -1,7 +1,7 @@
 'use strict'
 
-function Card_Monster (sym, value, type, name = 'Unknown') {
-  Card.call(this, sym, value, type, name)
+function Card_Monster (sym, value, type, name = 'Unknown', svg = '') {
+  Card.call(this, sym, value, type, name, svg)
 
   this.touch = function () {
     if (this.is_flipped) { console.log('Card is already flipped'); return }
diff --git a/sources/scripts/card.potion.js b/sources/scripts/card.potion.js
index aa3d600..259f3af 100644
--- a/sources/scripts/card.potion.js
+++ b/sources/scripts/card.potion.js
@@ -1,7 +1,7 @@
 'use strict'
 
-function Card_Potion (sym, value, type, name = 'Unknown') {
-  Card.call(this, sym, value, type, name)
+function Card_Potion (sym, value, type, name = 'Unknown', svg = '') {
+  Card.call(this, sym, value, type, name, svg)
 
   this.touch = function () {
     if (this.is_flipped) { console.log('Card is already flipped'); return }
diff --git a/sources/scripts/card.shield.js b/sources/scripts/card.shield.js
index 19cd345..283ed10 100644
--- a/sources/scripts/card.shield.js
+++ b/sources/scripts/card.shield.js
@@ -1,7 +1,7 @@
 'use strict'
 
-function Card_Shield (sym, value, type, name = 'Unknown') {
-  Card.call(this, sym, value, type, name)
+function Card_Shield (sym, value, type, name = 'Unknown', svg = '') {
+  Card.call(this, sym, value, type, name, svg)
 
   this.touch = function () {
     if (this.is_flipped == true) { console.log('Card is already flipped'); return }
diff --git a/sources/scripts/deck.js b/sources/scripts/deck.js
index acf974e..502ee19 100644
--- a/sources/scripts/deck.js
+++ b/sources/scripts/deck.js
@@ -2,60 +2,60 @@
 
 function Deck () {
   this.cards = [
-    new Card_Potion('A', 11, HEART, 'White Mage'),
-    new Card_Potion('2', 2, HEART, 'Small Potion'),
-    new Card_Potion('3', 3, HEART, 'Small Potion'),
-    new Card_Potion('4', 4, HEART, 'Medium Potion'),
-    new Card_Potion('5', 5, HEART, 'Medium Potion'),
-    new Card_Potion('6', 6, HEART, 'Medium Potion'),
-    new Card_Potion('7', 7, HEART, 'Medium Potion'),
-    new Card_Potion('8', 8, HEART, 'Medium Potion'),
-    new Card_Potion('9', 9, HEART, 'Large Potion'),
-    new Card_Potion('10', 10, HEART, 'Large Potion'),
-    new Card_Potion('V', 11, HEART, 'White Mage'),
-    new Card_Potion('Q', 11, HEART, 'White Mage'),
-    new Card_Potion('K', 11, HEART, 'White Mage'),
-    new Card_Shield('A', 11, DIAMOND, 'Red Mage'),
-    new Card_Shield('2', 2, DIAMOND, 'Buckler'),
-    new Card_Shield('3', 3, DIAMOND, 'Buckler'),
-    new Card_Shield('4', 4, DIAMOND, 'Shield'),
-    new Card_Shield('5', 5, DIAMOND, 'Shield'),
-    new Card_Shield('6', 6, DIAMOND, 'Shield'),
-    new Card_Shield('7', 7, DIAMOND, 'Shield'),
-    new Card_Shield('8', 8, DIAMOND, 'Shield'),
-    new Card_Shield('9', 9, DIAMOND, 'Large Shield'),
-    new Card_Shield('10', 10, DIAMOND, 'Large Shield'),
-    new Card_Shield('V', 11, DIAMOND, 'Red Mage'),
-    new Card_Shield('Q', 11, DIAMOND, 'Red Mage'),
-    new Card_Shield('K', 11, DIAMOND, 'Red Mage'),
-    new Card_Monster('A', 17, CLOVE, 'Empress'),
-    new Card_Monster('2', 2, CLOVE, 'Rat'),
-    new Card_Monster('3', 3, CLOVE, 'Bat'),
-    new Card_Monster('4', 4, CLOVE, 'Imp'),
-    new Card_Monster('5', 5, CLOVE, 'Goblin'),
-    new Card_Monster('6', 6, CLOVE, 'Orc'),
-    new Card_Monster('7', 7, CLOVE, 'Ogre'),
-    new Card_Monster('8', 8, CLOVE, 'Beholder'),
-    new Card_Monster('9', 9, CLOVE, 'Medusa'),
-    new Card_Monster('10', 10, CLOVE, 'Demon'),
-    new Card_Monster('V', 11, CLOVE, 'Consort'),
-    new Card_Monster('Q', 13, CLOVE, 'Queen'),
-    new Card_Monster('K', 15, CLOVE, 'Regnant'),
-    new Card_Monster('A', 17, SPADE, 'Empress'),
-    new Card_Monster('2', 2, SPADE, 'Slime'),
-    new Card_Monster('3', 3, SPADE, 'Tunneler'),
-    new Card_Monster('4', 4, SPADE, 'Fiend'),
-    new Card_Monster('5', 5, SPADE, 'Drake'),
-    new Card_Monster('6', 6, SPADE, 'Specter'),
-    new Card_Monster('7', 7, SPADE, 'Ghost'),
-    new Card_Monster('8', 8, SPADE, 'Elemental'),
-    new Card_Monster('9', 9, SPADE, 'Witch'),
-    new Card_Monster('10', 10, SPADE, 'Familiar'),
-    new Card_Monster('V', 11, SPADE, 'Consort'),
-    new Card_Monster('Q', 13, SPADE, 'Queen'),
-    new Card_Monster('K', 15, SPADE, 'Regnant'),
-    new Card_Monster('J', 21, JOKER, 'First Donsol'),
-    new Card_Monster('J', 21, JOKER, 'Second Donsol')
+    new Card_Potion('A', 11, HEART, 'White Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="125" r="50" class="fill_red"/><circle cx="75" cy="125" r="50" class="fill_red"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 l-37.5,-37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Potion('2', 2, HEART, 'Small Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('3', 3, HEART, 'Small Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('4', 4, HEART, 'Medium Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M50,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M100,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M50,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('5', 5, HEART, 'Medium Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('6', 6, HEART, 'Medium Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,150 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,200 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('7', 7, HEART, 'Medium Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M125,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('8', 8, HEART, 'Medium Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('9', 9, HEART, 'Large Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,125 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,175 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M75,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M125,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path><path d="M25,225 a15,15 0 0,1 50,0 l-25,25 l-25,-25" class="fill_red"></path></svg>'),
+    new Card_Potion('10', 10, HEART, 'Large Potion', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M50,175 a25,25 0 0,1 100,0 l-50,50 l-50,-50" class="fill_red"></path></svg>'),
+    new Card_Potion('V', 11, HEART, 'White Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="125" r="50" class="fill_red"/><circle cx="75" cy="125" r="50" class="fill_red"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 l-37.5,-37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Potion('Q', 11, HEART, 'White Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="125" r="50" class="fill_red"/><circle cx="75" cy="125" r="50" class="fill_red"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 l-37.5,-37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Potion('K', 11, HEART, 'White Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="125" r="50" class="fill_red"/><circle cx="75" cy="125" r="50" class="fill_red"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 l-37.5,-37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Shield('A', 11, DIAMOND, 'Red Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="160" r="25" class="fill_red"/><circle cx="75" cy="160" r="25" class="fill_red"/><path d="M25,140 l75,75 l75,-75 l-75,-75" class="fill_red"/><path d="M25,175 l75,75 l75,-75 l-75,-75 l-75,75" fill="none" class="stroke_white" stroke-width="2px"/><circle cx="100" cy="160" r="25" class="fill_white"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Shield('2', 2, DIAMOND, 'Buckler', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,150 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,200 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('3', 3, DIAMOND, 'Buckler', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,175 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('4', 4, DIAMOND, 'Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M50,150 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M100,150 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M50,200 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M100,200 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('5', 5, DIAMOND, 'Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,125 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('6', 6, DIAMOND, 'Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,200 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,200 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,200 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,150 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,150 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,150 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('7', 7, DIAMOND, 'Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M25,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,225 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('8', 8, DIAMOND, 'Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,225 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('9', 9, DIAMOND, 'Large Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,125 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,175 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M75,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M25,225 l25,25 l25,-25 l-25,-25" class="fill_red"/><path d="M125,225 l25,25 l25,-25 l-25,-25" class="fill_red"/></svg>'),
+    new Card_Shield('10', 10, DIAMOND, 'Large Shield', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M50,175 l50,50 l50,-50 l-50,-50" class="fill_red"/></svg>'),
+    new Card_Shield('V', 11, DIAMOND, 'Red Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="160" r="25" class="fill_red"/><circle cx="75" cy="160" r="25" class="fill_red"/><path d="M25,140 l75,75 l75,-75 l-75,-75" class="fill_red"/><path d="M25,175 l75,75 l75,-75 l-75,-75 l-75,75" fill="none" class="stroke_white" stroke-width="2px"/><circle cx="100" cy="160" r="25" class="fill_white"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Shield('Q', 11, DIAMOND, 'Red Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="160" r="25" class="fill_red"/><circle cx="75" cy="160" r="25" class="fill_red"/><path d="M25,140 l75,75 l75,-75 l-75,-75" class="fill_red"/><path d="M25,175 l75,75 l75,-75 l-75,-75 l-75,75" fill="none" class="stroke_white" stroke-width="2px"/><circle cx="100" cy="160" r="25" class="fill_white"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Shield('K', 11, DIAMOND, 'Red Mage', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><circle cx="125" cy="160" r="25" class="fill_red"/><circle cx="75" cy="160" r="25" class="fill_red"/><path d="M25,140 l75,75 l75,-75 l-75,-75" class="fill_red"/><path d="M25,175 l75,75 l75,-75 l-75,-75 l-75,75" fill="none" class="stroke_white" stroke-width="2px"/><circle cx="100" cy="160" r="25" class="fill_white"/><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_red"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('A', 17, CLOVE, 'Empress', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="125" cy="125" r="40" class="fill_black"/><circle cx="75" cy="125" r="40" class="fill_black"/><circle cx="100" cy="100" r="40" class="fill_black"/><!-- Head --><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,185 a5,5 0 0,1 10,0" stroke-width="2px" class="stroke_black" stroke-linecap="round" fill="none"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('2', 2, CLOVE, 'Rat', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="200" r="25" class="fill_black"/><circle cx="100" cy="150" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('3', 3, CLOVE, 'Bat', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="175" r="25" class="fill_black"/><circle cx="150" cy="175" r="25" class="fill_black"/><circle cx="50" cy="175" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('4', 4, CLOVE, 'Imp', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="75" cy="200" r="25" class="fill_black"/><circle cx="125" cy="200" r="25" class="fill_black"/><circle cx="75" cy="150" r="25" class="fill_black"/><circle cx="125" cy="150" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('5', 5, CLOVE, 'Goblin', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="50" cy="175" r="25" class="fill_black"/><circle cx="100" cy="175" r="25" class="fill_black"/><circle cx="150" cy="175" r="25" class="fill_black"/><circle cx="100" cy="125" r="25" class="fill_black"/><circle cx="100" cy="225" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('6', 6, CLOVE, 'Orc', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="200" r="25" class="fill_black"/><circle cx="150" cy="200" r="25" class="fill_black"/><circle cx="50" cy="200" r="25" class="fill_black"/><circle cx="100" cy="150" r="25" class="fill_black"/><circle cx="150" cy="150" r="25" class="fill_black"/><circle cx="50" cy="150" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('7', 7, CLOVE, 'Ogre', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="150" cy="125" r="25" class="fill_black"/><circle cx="50"  cy="125" r="25" class="fill_black"/><circle cx="100" cy="175" r="25" class="fill_black"/><circle cx="150" cy="175" r="25" class="fill_black"/><circle cx="50"  cy="175" r="25" class="fill_black"/><circle cx="150" cy="225" r="25" class="fill_black"/><circle cx="50"  cy="225" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('8', 8, CLOVE, 'Beholder', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="125" r="25" class="fill_black"/><circle cx="150" cy="125" r="25" class="fill_black"/><circle cx="50"  cy="125" r="25" class="fill_black"/><circle cx="150" cy="175" r="25" class="fill_black"/><circle cx="50"  cy="175" r="25" class="fill_black"/><circle cx="100" cy="225" r="25" class="fill_black"/><circle cx="150" cy="225" r="25" class="fill_black"/><circle cx="50"  cy="225" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('9', 9, CLOVE, 'Medusa', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="125" r="25" class="fill_black"/><circle cx="150" cy="125" r="25" class="fill_black"/><circle cx="50"  cy="125" r="25" class="fill_black"/><circle cx="100" cy="175" r="25" class="fill_black"/><circle cx="150" cy="175" r="25" class="fill_black"/><circle cx="50"  cy="175" r="25" class="fill_black"/><circle cx="100" cy="225" r="25" class="fill_black"/><circle cx="150" cy="225" r="25" class="fill_black"/><circle cx="50"  cy="225" r="25" class="fill_black"/></svg>'),
+    new Card_Monster('10', 10, CLOVE, 'Demon', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="175" r="50" class="fill_black"/></svg>'),
+    new Card_Monster('V', 11, CLOVE, 'Consort', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="100" cy="125" r="70" class="fill_black"/><!-- Head --><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('Q', 13, CLOVE, 'Queen', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="125" cy="125" r="60" class="fill_black"/><circle cx="75" cy="125" r="60" class="fill_black"/><!-- Head --><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><circle cx="100" cy="185" r="3" class="fill_black" stroke-width="0px"/><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('K', 15, CLOVE, 'Regnant', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><circle cx="125" cy="125" r="50" class="fill_black"/><circle cx="75" cy="125" r="50" class="fill_black"/><circle cx="100" cy="100" r="50" class="fill_black"/><!-- Head --><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,185 a5,5 0 0,1 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('A', 17, SPADE, 'Empress', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><path d="M100,50 l-75,75 a15,15 0 1,0 75,50 a15,15 0 1,0 75,-50" class="fill_black"></path><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,185 a5,5 0 0,1 10,0" stroke-width="2px" class="stroke_black" stroke-linecap="round" fill="none"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('2', 2, SPADE, 'Slime', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('3', 3, SPADE, 'Tunneler', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('4', 4, SPADE, 'Fiend', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M75,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M125,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M75,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M125,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('5', 5, SPADE, 'Drake', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('6', 6, SPADE, 'Specter', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M50,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,175 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,125 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('7', 7, SPADE, 'Ghost', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('8', 8, SPADE, 'Elemental', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('9', 9, SPADE, 'Witch', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M100,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M50,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,200 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,150 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/><path d="M150,100 l-25,25 a25,25 0 0,1 25,25 a25,25 0 0,1 25,-25" class="fill_black"/></svg>'),
+    new Card_Monster('10', 10, SPADE, 'Familiar', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M100,125 l-50,50 a50,50 0 0,1 50,50 a50,50 0 0,1 50,-50" class="fill_black"/></svg>'),
+    new Card_Monster('V', 11, SPADE, 'Consort', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><path d="M100,50 l-75,75 a15,15 0 1,0 75,50 a15,15 0 1,0 75,-50" class="fill_black"></path><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,180 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('Q', 13, SPADE, 'Queen', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><path d="M100,50 l-75,75 a15,15 0 1,0 75,50 a15,15 0 1,0 75,-50" class="fill_black"></path><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><circle cx="100" cy="185" r="3" class="fill_black" stroke-width="0px"/><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('K', 15, SPADE, 'Regnant', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><!-- Head --><path d="M100,50 l-75,75 a15,15 0 1,0 75,50 a15,15 0 1,0 75,-50" class="fill_black"></path><!-- Body --><path d="M20,310 l0,-50 a15,15 0 0,1 15,-15 l25,0 a25,25 0 0,0 25,-25 l0,-50 l30,0 l0,50 a25,25 0 0,0 25,25 l25,0 a15,15 0 0,1 15,15 l0,50" class="fill_black"></path><line x1="0" y1="210" x2="300" y2="210" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><line x1="0" y1="220" x2="300" y2="220" stroke-width="2px" class="stroke_white" stroke-linecap="round"/><path d="M95,220 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_white"></path><!-- Face --><path d="M62.5,155 a15,15 0 1,0 75,0 a37.5,37.5 0 0,1 -37.5,-37.5 a37.5,37.5 0 0,1 -37.5,37.5" class="fill_white"></path><!-- Eyes --><line x1="70" y1="160" x2="90" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><line x1="110" y1="160" x2="130" y2="160" stroke-width="2px" class="stroke_black" stroke-linecap="round"/><path d="M75,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><path d="M115,160 a5,5 0 1,0 10,0" stroke-width="2px" class="stroke_black fill_black" stroke-linecap="butt"></path><circle cx="90" cy="150" r="3" class="fill_grey"/><circle cx="110" cy="150" r="3" class="fill_grey"/><!-- nose --><path d="M95,170 a5,5 0 1,0 10,0" stroke-width="0px" class="fill_grey"></path><!-- mouth --><path d="M95,185 a5,5 0 0,1 10,0" stroke-width="0px" class="fill_black"></path><!-- dot --><circle cx="100" cy="100" r="5" class="fill_white"/></svg>'),
+    new Card_Monster('J', 21, JOKER, 'First Donsol', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M25,175 a100,120 0 0,0 150,0 a100,120 0 0,0 -150,0 " class="fill_red"></path><circle cx="100" cy="175" r="25" class="fill_white"/><circle cx="100" cy="175" r="15" class="fill_black"/></svg>'),
+    new Card_Monster('J', 21, JOKER, 'Second Donsol', '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="300"><path d="M25,175 a100,120 0 0,0 150,0 a100,120 0 0,0 -150,0 " class="fill_red"></path><circle cx="100" cy="175" r="25" class="fill_white"/><circle cx="100" cy="175" r="15" class="fill_black"/></svg>')
   ]
 
   let draw_pile = []