Add Rain on Wires theme

Only 2 themes besides the default are implemented for now.
More to come!

README.md

@@ -1,2 +1,18 @@
 # DonsolJavascript
 Javascript version of Donsol
+
+### Original authors
+The original Javascript+Electron version of Donsol was created by Hundred Rabbits.
+
+### About this branch
+This branch ("web") will be used for development on the web-based version of Donsol, which in turn is heavily based on the main branch, stripping out parts related to Electron and NodeJS.
+None of this is official; it's a passion project, so please do not contact Hundred Rabbits regarding issues with this web version of the game.
+
+### Limitations
+In the project's current state, you can play the base game of Donsol, with some limitations.
+The following do not currently work:
+* ~~Card faces do not render properly, as these were previously loaded with NodeJS functions that aren't available to use in a pure browser-based application (as far as I'm aware). I have an idea on how to accomplish this.~~ Fixed in commit ff787f7
+* Aspects of the game that relied on being selected from a menu in the Electron version currently have no way of being toggled. These include things like difficulty selection and themeing support.
+
+### Contributing
+If you wish to contribute to the project, please follow the standard practice of forking this repository and submitting a pull request.

sources/index.html

@@ -18,6 +18,7 @@
     <script type="text/javascript" src="scripts/board.js"></script>
     <script type="text/javascript" src="scripts/donsol.js"></script>
     <script type="text/javascript" src="scripts/player.js"></script>
+    <script type="text/javascript" src="scripts/settings.js"></script>
     <script type="text/javascript" src="scripts/timeline.js"></script>
     <script type="text/javascript" src="scripts/speaker.js"></script>
 
@@ -44,9 +45,6 @@
       </div>
     </div>
     <script type="text/javascript">
-      const {dialog,app} = require('electron').remote;
-      const fs = require('fs');
-
       let donsol = new Donsol();
 
       donsol.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Donsol'); },"CmdOrCtrl+,");
@@ -76,8 +74,6 @@
       donsol.controller.add("default","Theme","Reset Theme",() => { donsol.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
       donsol.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
 
-      donsol.controller.commit();
-
       donsol.install(document.body)
       donsol.start();
     </script>

sources/links/main.css

@@ -2,15 +2,17 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width:
 
 #wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; -webkit-app-region: drag;}
 
-#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:30px; width:calc(100% - 60px);}
+#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:60px; width:calc(100% - 60px);}
 #player > * { vertical-align: top }
 #player .gage { width: 120px;display: block;height:30px;position: relative; float:right; margin-left:2px;width:70px; padding-right: 50px; text-align: right}
 #player .gage .value { display: inline-block;line-height: 20px;font-family: 'input_mono_medium';padding-left: 5px;}
 #player .gage .event { display: inline-block;position: absolute;top: -20px;left: 0px; transition: all 250ms; opacity: 0; margin-left:5px; display: none}
 #player .gage .progress { display: block;width: 40px;position: absolute; top:7px;overflow: hidden;height: 4px;border-radius: 20px;right:0px;}
 #player .gage .progress .bar{ height:5px; display:block !important; transition: width 300ms}
-#player a.escape { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;}
-#player a.escape:hover { cursor: pointer; }
+#player .button { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;}
+#player .button:hover { cursor: pointer; }
+#player select.button { appearance: none;-webkit-appearance: none;background-color: transparent; }
+#player .settings { text-align: right; }
 #player div#timeline { display: inline-block;color:white; transition: opacity 250ms; opacity: 0 }
 #player div#timeline b { font-family: 'input_mono_medium',monospace; }
 

sources/links/theme.css

@@ -29,8 +29,8 @@ svg .fill_grey { opacity:0.25; fill:var(--f_low) !important }
 
 /* White */
 svg .fill_white { fill:var(--b_high) !important }
-#player a.escape { border:2px solid var(--b_high) !important; color: var(--b_high); }
-#player a.escape:hover { background-color:var(--b_high) !important; color:var(--background); }
+#player .button { border:2px solid var(--b_high) !important; color: var(--b_high); }
+#player .button:hover { background-color:var(--b_high) !important; color:var(--background); }
 #board card .face { background-color:var(--b_high)}
 .card_11 .face .name,.card_13 .face .name,.card_15 .face .name,.card_17 .face .name { color:var(--b_high);}
 #player .gage { color:var(--b_high) }

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,7 +27,7 @@ function Card (sym, value, type, name = 'Unknown') {
 
     const graphic = document.createElement('div')
     graphic.className = 'graphic'
-    graphic.innerHTML = require('fs').readFileSync(`${__dirname}/media/${this.type}/${this.value}.svg`)
+    graphic.innerHTML = this.svg
     face.appendChild(graphic)
 
     // Name

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 }

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 }

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 }

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 = []

sources/scripts/donsol.js

@@ -7,7 +7,7 @@ const SPADE = 'spade'
 const JOKER = 'joker'
 
 function Donsol () {
-  const defaultTheme = {
+  this.defaultTheme = {
     background: '#000000',
     f_high: '#000000',
     f_med: '#a93232',
@@ -18,8 +18,393 @@ function Donsol () {
     b_low: '#333333',
     b_inv: '#a93232'
   }
+  this.apolloTheme= {
+    background: '#29272b',
+    f_high: '#ffffff',
+    f_med: '#e47464',
+    f_low: '#66606b',
+    f_inv: '#000000',
+    b_high: '#000000',
+    b_med: '#201e21',
+    b_low: '#322e33',
+    b_inv: '#e47464'
+  }
+  this.battlestationTheme = {
+    background: '#222222',
+    f_high: '#ffffff',
+    f_med: '#affec7',
+    f_low: '#888888',
+    f_inv: '#000000',
+    b_high: '#555555',
+    b_med: '#333333',
+    b_low: '#111111',
+    b_inv: '#affec7'
+  }
+  this.berryTheme = {
+    background: '#9EB7FF',
+    f_high: '#3e8281',
+    f_med: '#FFFFFF',
+    f_low: '#c5f0ec',
+    f_inv: '#FFFFFF',
+    b_high: '#1C0A16',
+    b_med: '#499897',
+    b_low: '#6ADEDC',
+    b_inv: '#6ADEDC'
+  }
+  this.bigtimeTheme = {
+    background: '#4682B4',
+    f_high: '#000000',
+    f_med: '#2F4F4F',
+    f_low: '#FFA500',
+    f_inv: '#9932CC',
+    b_high: '#F8F8FF',
+    b_med: '#696969',
+    b_low: '#778899',
+    b_inv: '#6B8E23'
+  }
+  this.boysenberryTheme = {
+    background: '#171717',
+    f_high: '#efefef',
+    f_med: '#999999',
+    f_low: '#873260',
+    f_inv: '#919191',
+    b_high: '#373737',
+    b_med: '#272727',
+    b_low: '#000000',
+    b_inv: '#873260'
+  }
+  this.coalTheme = {
+    background: '#EDEAEA',
+    f_high: '#393B3F',
+    f_med: '#808790',
+    f_low: '#A3A3A4',
+    f_inv: '#000000',
+    b_high: '#333333',
+    b_med: '#777777',
+    b_low: '#DDDDDD',
+    b_inv: '#ffffff'
+  }
+  this.cobaltTheme = {
+    background: '#18364A',
+    f_high: '#ffffff',
+    f_med: '#ffc600',
+    f_low: '#0088ff',
+    f_inv: '#000000',
+    b_high: '#1B1A1C',
+    b_med: '#204863',
+    b_low: '#15232D',
+    b_inv: '#ffffff'
+  }
+  this.commodoreTheme = {
+    background: '#a5a7fc',
+    f_high: '#ffffff',
+    f_med: '#444ae3',
+    f_low: '#ffd7cd',
+    f_inv: '#444ae3',
+    b_high: '#c2c4ff',
+    b_med: '#babcff',
+    b_low: '#b0b2ff',
+    b_inv: '#ffffff'
+  }
+  this.forestlawnTheme = {
+    background: '#cd853f',
+    f_high: '#000000',
+    f_med: '#8b0000',
+    f_low: '#8b4513',
+    f_inv: '#00ced1',
+    b_high: '#90ee90',
+    b_med: '#32cd32',
+    b_low: '#9acd32',
+    b_inv: '#000000'
+  }
+  this.frameioTheme = {
+    background: '#333848',
+    f_high: '#cccccc',
+    f_med: '#5b52fe',
+    f_low: '#4c576f',
+    f_inv: '#ffffff',
+    b_high: '#edeef2',
+    b_med: '#262b37',
+    b_low: '#394153',
+    b_inv: '#5b52fe'
+  }
+  this.gameboyTheme = {
+    background: '#9BBC0F',
+    f_high: '#0F380F',
+    f_med: '#0F380F',
+    f_low: '#306230',
+    f_inv: '#9BBC0F',
+    b_high: '#8BAC0F',
+    b_med: '#8BAC0F',
+    b_low: '#9BBC0F',
+    b_inv: '#0F380F'
+  }
+  this.gardenTheme = {
+    background: '#28211c',
+    f_high: '#ffefc9',
+    f_med: '#9f9fa2',
+    f_low: '#a3832c',
+    f_inv: '#666666',
+    b_high: '#aa0000',
+    b_med: '#214c05',
+    b_low: '#48413a',
+    b_inv: '#4cb1cf'
+  }
+  this.gothamTheme = {
+    background: '#0A0F14',
+    f_high: '#FFFFFF',
+    f_med: '#98D1CE',
+    f_low: '#EDB54B',
+    f_inv: '#C33027',
+    b_high: '#093748',
+    b_med: '#081F2D',
+    b_low: '#10151B',
+    b_inv: '#8FAF9F'
+  }
+  this.haxeTheme = {
+    background: '#141419',
+    f_high: '#FAB20B',
+    f_med: '#F47216',
+    f_low: '#F1471D',
+    f_inv: '#141419',
+    b_high: '#141419',
+    b_med: '#141419',
+    b_low: '#141419',
+    b_inv: '#FFFFFF'
+  }
+  this.isotopeTheme = {
+    background: '#000000',
+    f_high: '#FFFFFF',
+    f_med: '#33FF00',
+    f_low: '#FF0099',
+    f_inv: '#000000',
+    b_high: '#505050',
+    b_med: '#000000',
+    b_low: '#000000',
+    b_inv: '#FFFFFF'
+  }
+  this.kawaiiTheme = {
+    background: '#d09090',
+    f_high: '#000000',
+    f_med: '#fffafa',
+    f_low: '#6ea2a1',
+    f_inv: '#ff1493',
+    b_high: '#7fffd4',
+    b_med: '#6ADEDC',
+    b_low: '#b08686',
+    b_inv: '#7fffd4'
+  }
+  this.laundryTheme = {
+    background: '#1b1a1e',
+    f_high: '#ffffff',
+    f_med: '#ff2851',
+    f_low: '#3e3d42',
+    f_inv: '#000000',
+    b_high: '#bdbcc1',
+    b_med: '#63606b',
+    b_low: '#151417',
+    b_inv: '#ff2851'
+  }
+  this.lotusTheme = {
+    background: '#161616',
+    f_high: '#f0c098',
+    f_med: '#999999',
+    f_low: '#444444',
+    f_inv: '#222222',
+    b_high: '#ffffff',
+    b_med: '#333333',
+    b_low: '#222222',
+    b_inv: '#f0c098'
+  }
+  this.mahouTheme = {
+    background: '#E0B1CB',
+    f_high: '#231942',
+    f_med: '#48416d',
+    f_low: '#917296',
+    f_inv: '#E0B1CB',
+    b_high: '#5E548E',
+    b_med: '#FFFFFF',
+    b_low: '#BE95C4',
+    b_inv: '#9F86C0'
+  }
+  this.marbleTheme = {
+    background: '#FBFBF2',
+    f_high: '#3a3738',
+    f_med: '#847577',
+    f_low: '#bdb8b8',
+    f_inv: '#A6A2A2',
+    b_high: '#676164',
+    b_med: '#A6A2A2',
+    b_low: '#CFD2CD',
+    b_inv: '#676164'
+  }
+  this.murataTheme = {
+    background: '#111111',
+    f_high: '#ffffff',
+    f_med: '#e8dacb',
+    f_low: '#5a6970',
+    f_inv: '#000000',
+    b_high: '#bbbbbb',
+    b_med: '#8498a2',
+    b_low: '#333333',
+    b_inv: '#b9615a'
+  }
+  this.muziecaTheme = {
+    background: '#090909',
+    f_high: '#818181',
+    f_med: '#707070',
+    f_low: '#595959',
+    f_inv: '#272727',
+    b_high: '#272727',
+    b_med: '#181818',
+    b_low: '#111111',
+    b_inv: '#818181'
+  }
+  this.nightowlTheme = {
+    background: '#011627',
+    f_high: '#7fdbca',
+    f_med: '#82aaff',
+    f_low: '#c792ea',
+    f_inv: '#637777',
+    b_high: '#5f7e97',
+    b_med: '#456075',
+    b_low: '#2f4759',
+    b_inv: '#7fdbca'
+  }
+  this.ninetynineTheme = {
+    background: '#000000',
+    f_high: '#efefef',
+    f_med: '#cdcdcd',
+    f_low: '#676767',
+    f_inv: '#0a0a0a',
+    b_high: '#eeeeee',
+    b_med: '#ffd220',
+    b_low: '#464646',
+    b_inv: '#ff3300'
+  }
+  this.noirTheme = {
+    background: '#222222',
+    f_high: '#ffffff',
+    f_med: '#cccccc',
+    f_low: '#999999',
+    f_inv: '#ffffff',
+    b_high: '#888888',
+    b_med: '#666666',
+    b_low: '#444444',
+    b_inv: '#000000'
+  }
+  this.nordTheme = {
+    background: '#2E3440',
+    f_high: '#ECEFF4',
+    f_med: '#9DC4C3',
+    f_low: '#B4B8C0',
+    f_inv: '#5E81AC',
+    b_high: '#5E81AC',
+    b_med: '#434C5E',
+    b_low: '#3B4252',
+    b_inv: '#ABCDCC'
+  }
+  this.obsidianTheme = {
+    background: '#22282a',
+    f_high: '#f1f2f3',
+    f_med: '#93c763',
+    f_low: '#ec7600',
+    f_inv: '#963a46',
+    b_high: '#678cb1',
+    b_med: '#4f6164',
+    b_low: '#42464C',
+    b_inv: '#ffcd22'
+  }
+  this.op1Theme = {
+    background: '#0E0D11',
+    f_high: '#EFEFEF',
+    f_med: '#26936F',
+    f_low: '#A5435A',
+    f_inv: '#0E0D11',
+    b_high: '#191A26',
+    b_med: '#14151F',
+    b_low: '#101119',
+    b_inv: '#9F9FB3'
+  }
+  this.orcaTheme = {
+    background: '#000000',
+    f_high: '#ffffff',
+    f_med: '#777777',
+    f_low: '#444444',
+    f_inv: '#000000',
+    b_high: '#dddddd',
+    b_med: '#72dec2',
+    b_low: '#222222',
+    b_inv: '#ffb545'
+  }
+  this.pawbinTheme = {
+    background: '#2b2933',
+    f_high: '#f2f2f2',
+    f_med: '#00bdd6',
+    f_low: '#aa9fdf',
+    f_inv: '#1a1820',
+    b_high: '#1a1820',
+    b_med: '#24212c',
+    b_low: '#34303b',
+    b_inv: '#f2f2f2'
+  }
+  this.pico8Theme = {
+    background: '#000000',
+    f_high: '#ffffff',
+    f_med: '#fff1e8',
+    f_low: '#ff78a9',
+    f_inv: '#ffffff',
+    b_high: '#c2c3c7',
+    b_med: '#83769c',
+    b_low: '#695f56',
+    b_inv: '#00aefe'
+  }
+  this.polivoksTheme = {
+    background: '#111111',
+    f_high: '#efefef',
+    f_med: '#ff4444',
+    f_low: '#333333',
+    f_inv: '#000000',
+    b_high: '#666666',
+    b_med: '#444444',
+    b_low: '#222222',
+    b_inv: '#ff4444'
+  }
+  this.rainOnWiresTheme = {
+    background: '#010101',
+    f_high: '#c692bb',
+    f_med: '#149106',
+    f_low: '#8a6682',
+    f_inv: '#8D2E71',
+    b_high: '#8D2E71',
+    b_med: '#6E2455',
+    b_low: '#010101',
+    b_inv: '#159106'
+  }
+  this.rogueliteTheme = {
+    background: '#352b31',
+    f_high: '#f5f5d4',
+    f_med: '#70838c',
+    f_low: '#4a6b83',
+    f_inv: '#352b31',
+    b_high: '#96cf85',
+    b_med: '#5a6970',
+    b_low: '#4a3b44',
+    b_inv: '#f5f5d4'
+  }
+  this.tapeTheme = {
+    background: '#dad7cd',
+    f_high: '#696861',
+    f_med: '#ffffff',
+    f_low: '#b3b2ac',
+    f_inv: '#43423e',
+    b_high: '#43423e',
+    b_med: '#c2c1bb',
+    b_low: '#e5e3dc',
+    b_inv: '#eb3f48'
+  }
 
-  this.theme = new Theme(defaultTheme)
+  this.theme = new Theme(this.defaultTheme)
 
   this.deck = new Deck()
   this.board = new Board()

sources/scripts/lib/controller.js

@@ -4,8 +4,6 @@ function Controller () {
   this.menu = { default: {} }
   this.mode = 'default'
 
-  this.app = require('electron').remote.app
-
   this.start = function () {
   }
 
@@ -45,10 +43,6 @@ function Controller () {
     return f
   }
 
-  this.commit = function () {
-    this.app.inject_menu(this.format())
-  }
-
   this.docs = function () {
     console.log('Generating docs..')
     const svg = this.generate_svg(this.format())
@@ -181,5 +175,3 @@ function Controller () {
     { x: 540, y: 240, width: 90, height: 60, name: 'alt' }
   ]
 }
-
-module.exports = new Controller()

sources/scripts/player.js

@@ -5,6 +5,7 @@ function Player () {
   this.health = new Gage_Health('Health', 21, '#ff0000')
   this.shield = new Gage_Shield('Shield', 0, '#72dec2')
   this.experience = new Gage('Experience', 0, '#ffffff')
+  this.settings = new Settings()
 
   this.can_drink = true
   this.has_escaped = false
@@ -33,11 +34,12 @@ function Player () {
   }
 
   this.install = function () {
+    this.element.appendChild(this.settings.install())
     this.element.appendChild(this.experience.install())
     this.element.appendChild(this.shield.install())
     this.element.appendChild(this.health.install())
 
-    this.escape_button.setAttribute('class', 'escape')
+    this.escape_button.setAttribute('class', 'escape button')
     this.escape_button.innerHTML = 'Escape'
     this.element.appendChild(this.escape_button)
     this.timeline_element.setAttribute('class', 'timeline')
@@ -145,6 +147,122 @@ function Player () {
     donsol.timeline.add_event('Escaped the room!')
   }
 
+  this.change_theme = function (theme_value) {
+    let new_theme = ''
+    if (theme_value.localeCompare('theme') === 0) {
+      new_theme = donsol.defaultTheme
+    }
+    if (theme_value.localeCompare('apollo') === 0) {
+      new_theme = donsol.apolloTheme
+    }
+    if (theme_value.localeCompare('battlestation') === 0) {
+      new_theme = donsol.battlestationTheme
+    }
+    if (theme_value.localeCompare('berry') === 0) {
+      new_theme = donsol.berryTheme
+    }
+    if (theme_value.localeCompare('bigtime') === 0) {
+      new_theme = donsol.bigtimeTheme
+    }
+    if (theme_value.localeCompare('boysenberry') === 0) {
+      new_theme = donsol.boysenberryTheme
+    }
+    if (theme_value.localeCompare('coal') === 0) {
+      new_theme = donsol.coalTheme
+    }
+    if (theme_value.localeCompare('cobalt') === 0) {
+      new_theme = donsol.cobaltTheme
+    }
+    if (theme_value.localeCompare('commodore') === 0) {
+      new_theme = donsol.commodoreTheme
+    }
+    if (theme_value.localeCompare('forestlawn') === 0) {
+      new_theme = donsol.forestlawnTheme
+    }
+    if (theme_value.localeCompare('frameio') === 0) {
+      new_theme = donsol.frameioTheme
+    }
+    if (theme_value.localeCompare('gameboy') === 0) {
+      new_theme = donsol.gameboyTheme
+    }
+    if (theme_value.localeCompare('garden') === 0) {
+      new_theme = donsol.gardenTheme
+    }
+    if (theme_value.localeCompare('gotham') === 0) {
+      new_theme = donsol.gothamTheme
+    }
+    if (theme_value.localeCompare('haxe') === 0) {
+      new_theme = donsol.haxeTheme
+    }
+    if (theme_value.localeCompare('isotope') === 0) {
+      new_theme = donsol.isotopeTheme
+    }
+    if (theme_value.localeCompare('kawaii') === 0) {
+      new_theme = donsol.kawaiiTheme
+    }
+    if (theme_value.localeCompare('laundry') === 0) {
+      new_theme = donsol.laundryTheme
+    }
+    if (theme_value.localeCompare('lotus') === 0) {
+      new_theme = donsol.lotusTheme
+    }
+    if (theme_value.localeCompare('mahou') === 0) {
+      new_theme = donsol.mahouTheme
+    }
+    if (theme_value.localeCompare('marble') === 0) {
+      new_theme = donsol.marbleTheme
+    }
+    if (theme_value.localeCompare('murata') === 0) {
+      new_theme = donsol.murataTheme
+    }
+    if (theme_value.localeCompare('muzieca') === 0) {
+      new_theme = donsol.muziecaTheme
+    }
+    if (theme_value.localeCompare('nightowl') === 0) {
+      new_theme = donsol.nightowlTheme
+    }
+    if (theme_value.localeCompare('ninetynine') === 0) {
+      new_theme = donsol.ninetynineTheme
+    }
+    if (theme_value.localeCompare('noir') === 0) {
+      new_theme = donsol.noirTheme
+    }
+    if (theme_value.localeCompare('nord') === 0) {
+      new_theme = donsol.nordTheme
+    }
+    if (theme_value.localeCompare('obsidian') === 0) {
+      new_theme = donsol.obsidianTheme
+    }
+    if (theme_value.localeCompare('op-1') === 0) {
+      new_theme = donsol.op1Theme
+    }
+    if (theme_value.localeCompare('orca') === 0) {
+      new_theme = donsol.orcaTheme
+    }
+    if (theme_value.localeCompare('pawbin') === 0) {
+      new_theme = donsol.pawbinTheme
+    }
+    if (theme_value.localeCompare('pico8') === 0) {
+      new_theme = donsol.pico8Theme
+    }
+    if (theme_value.localeCompare('polivoks') === 0) {
+      new_theme = donsol.polivoksTheme
+    }
+    if (theme_value.localeCompare('rainonwires') === 0) {
+      new_theme = donsol.rainOnWiresTheme
+    }
+    if (theme_value.localeCompare('roguelite') === 0) {
+      new_theme = donsol.rogueliteTheme
+    }
+    if (theme_value.localeCompare('tape') === 0) {
+      new_theme = donsol.tapeTheme
+    }
+    donsol.theme = new Theme(new_theme)
+    donsol.theme.load(new_theme)
+    donsol.theme.install(document.body)
+    donsol.theme.start()
+  }
+
   this.update = function () {
     if (this.health.value < 1) {
       this.escape_button.innerHTML = 'Restart'

sources/scripts/settings.js

@@ -0,0 +1,56 @@
+'use strict'
+
+function Settings () {
+  this.element = null
+  this.theme_button = null
+
+  this.install = function () {
+    this.element = document.createElement('div')
+    this.element.setAttribute('class', 'settings')
+
+    this.theme_button = document.createElement('select')
+    this.theme_button.setAttribute('class', 'theme button')
+    this.theme_button.innerHTML = '<option value=\"theme\">Theme (default)</option>'
+    this.theme_button.innerHTML += '<option value=\"apollo\">Apollo</option>'
+    this.theme_button.innerHTML += '<option value=\"battlestation\">Battlestation</option>'
+    this.theme_button.innerHTML += '<option value=\"berry\">Berry</option>'
+    this.theme_button.innerHTML += '<option value=\"bigtime\">Big Time</option>'
+    this.theme_button.innerHTML += '<option value=\"boysenberry\">Boysenberry</option>'
+    this.theme_button.innerHTML += '<option value=\"coal\">Coal</option>'
+    this.theme_button.innerHTML += '<option value=\"cobalt\">Cobalt</option>'
+    this.theme_button.innerHTML += '<option value=\"commodore\">Commodore</option>'
+    this.theme_button.innerHTML += '<option value=\"forestlawn\">Forest Lawn</option>'
+    this.theme_button.innerHTML += '<option value=\"frameio\">Frame.io</option>'
+    this.theme_button.innerHTML += '<option value=\"gameboy\">Game Boy</option>'
+    this.theme_button.innerHTML += '<option value=\"garden\">Garden</option>'
+    this.theme_button.innerHTML += '<option value=\"gotham\">Gotham</option>'
+    this.theme_button.innerHTML += '<option value=\"haxe\">Haxe</option>'
+    this.theme_button.innerHTML += '<option value=\"isotope\">Isotope</option>'
+    this.theme_button.innerHTML += '<option value=\"kawaii\">Kawaii</option>'
+    this.theme_button.innerHTML += '<option value=\"laundry\">Laundry</option>'
+    this.theme_button.innerHTML += '<option value=\"lotus\">Lotus</option>'
+    this.theme_button.innerHTML += '<option value=\"mahou\">Mahou</option>'
+    this.theme_button.innerHTML += '<option value=\"marble\">Marble</option>'
+    this.theme_button.innerHTML += '<option value=\"murata\">Murata</option>'
+    this.theme_button.innerHTML += '<option value=\"muzieca\">Muzieca</option>'
+    this.theme_button.innerHTML += '<option value=\"nightowl\">Night Owl</option>'
+    this.theme_button.innerHTML += '<option value=\"ninetynine\">Ninety Nine</option>'
+    this.theme_button.innerHTML += '<option value=\"noir\">Noir</option>'
+    this.theme_button.innerHTML += '<option value=\"nord\">Nord</option>'
+    this.theme_button.innerHTML += '<option value=\"obsidian\">Obsidian</option>'
+    this.theme_button.innerHTML += '<option value=\"op-1\">Op-1</option>'
+    this.theme_button.innerHTML += '<option value=\"orca">Orca</option>'
+    this.theme_button.innerHTML += '<option value=\"pawbin">Pawbin</option>'
+    this.theme_button.innerHTML += '<option value=\"pico8">PICO-8</option>'
+    this.theme_button.innerHTML += '<option value=\"polivoks">Polivoks</option>'
+    this.theme_button.innerHTML += '<option value=\"rainonwires">Rain on Wires</option>'
+    this.theme_button.innerHTML += '<option value=\"roguelite\">Roguelite</option>'
+    this.theme_button.innerHTML += '<option value=\"tape\">Tape</option>'
+    this.theme_button.addEventListener('mousedown', () => { donsol.player.change_theme(this.theme_button.value) })
+    this.theme_button.addEventListener('change', () => { donsol.player.change_theme(this.theme_button.value) })
+
+    this.element.appendChild(this.theme_button)
+
+    return this.element
+  }
+}