add class abilities

8 files changed, 1358 insertions, 409 deletions

diff --git a/cards/cards/monk_abilities.rb b/cards/cards/monk_abilities.rb
new file mode 100644
index 0000000..e6ecad4
--- /dev/null
+++ b/cards/cards/monk_abilities.rb
@@ -0,0 +1,66 @@
+require_relative 'card.rb'
+
+monk_abilities = {}
+
+class_colors = {
+  rogue: 'Maroon',
+  ranger: 'ForestGreen', 
+  astrologist: 'DodgerBlue',
+  monk: 'OrangeRed',
+  paladin: 'GoldenRod'
+}
+
+monk_abilities[:pressure_point] = Card.new(
+  title: "Pressure Point",
+  actions: [
+    Card::Action.new(
+      symbol: [:diamonds, :reactive],
+      content: 'After a successful attack: deactivate one of the target\'s abilities of your choosing.',
+    ),
+  ],
+  color: class_colors[:monk],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Monk Ability',
+)
+
+monk_abilities[:flurry_of_strikes] = Card.new(
+  title: "Flurry of Strikes",
+  actions: [
+    Card::Action.new(
+      symbol: [:even, :tap],
+      content: 'Make an attack with your weapon. If that attack is successful: recharge this.',
+    ),
+  ],
+  color: class_colors[:monk],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Monk Ability',
+)
+
+monk_abilities[:quick_footwork] = Card.new(
+  title: "Quick Footwork",
+  actions: [
+    Card::Action.new(
+      symbol: [:joker, :reactive],
+      content: 'Ignore the incoming damage of a parry.',
+    ),
+  ],
+  color: class_colors[:monk],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Monk Ability',
+)
+
+monk_abilities[:inner_peace] = Card.new(
+  title: "Inner Peace",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :reactive],
+      content: 'If you havent recieved damage during your turn yet, reroll a dice of your choice.',
+    ),
+  ],
+  color: class_colors[:monk],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Monk Ability',
+)
+
+Card.output('monk_abilities', monk_abilities);
+
diff --git a/cards/cards/paladin_abilities.rb b/cards/cards/paladin_abilities.rb
index 6dcdbfd..16755cc 100644
--- a/cards/cards/paladin_abilities.rb
+++ b/cards/cards/paladin_abilities.rb
@@ -9,7 +9,7 @@ class_colors = {
   monk: 'OrangeRed',
   paladin: 'GoldenRod'
 }
-
+=begin
 paladin_abilities[:duel] = Card.new(
   title: "Duel",
   actions: [
@@ -22,7 +22,7 @@ paladin_abilities[:duel] = Card.new(
   flavour: '"A famous commander\'s signature thing."',
   type: 'Paladin Ability',
 )
-
+=end
 paladin_abilities[:leading_charge] = Card.new(
   title: "Leading Charge",
   actions: [
@@ -36,161 +36,45 @@ paladin_abilities[:leading_charge] = Card.new(
   type: 'Paladin Ability',
 )
 
-paladin_abilities[:duck_and_weave] = Card.new(
-  title: "Duck and Weave",
-  actions: [
-    Card::Action.new(
-      symbol: [:tap, :diamonds],
-      content: ' Ignore up to the card played worth of damage from a **reposte**.',
-    ),
-  ],
-  color: class_colors[:rogue],
-  flavour: '"Missed me"',
-  type: 'Rogue Ability',
-)
-
-paladin_abilities[:surgical_strike] = Card.new(
-  title: "Surgical Strike",
+paladin_abilities[:taunt] = Card.new(
+  title: "Taunt",
   actions: [
     Card::Action.new(
-      symbol: [:tap, :spades],
-      content: '(less then 5) Replace a weapon\'s damage with the value of the card played. Only affects the current attack.',
+      symbol: [:tap, :reactive],
+      content: 'When an attack is declared: redirect the attack toward yourself.',
     ),
   ],
-  color: class_colors[:rogue],
-  #flavour: '"Missed me"',
-  type: 'Rogue Ability',
-)
-
-paladin_abilities[:down_they_alleys] = Card.new(
-  title: "Down the Alleys",
-  actions: [
-    Card::Action.new(
-      symbol: [:diamonds],
-      content: '(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.',
-    ),
-  ],
-  color: class_colors[:rogue],
-  #flavour: '"Missed me"',
-  type: 'Rogue Ability',
-)
-
-paladin_abilities[:spot] = Card.new(
-  title: "Spot",
-  actions: [
-    Card::Action.new(
-      symbol: [:hearts],
-      content: '(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.',
-    ),
-  ],
-  color: class_colors[:ranger], 
-  #flavour: '"Missed me"',
-  type: 'Ranger Ability',
-)
-paladin_abilities[:flexible_shooter] = Card.new(
-  title: "Flexible Shooter",
-  actions: [
-    Card::Action.new(
-      #symbol: [:hearts],
-      content: 'You can deal reposte damage with any ranged weapon.',
-    ),
-  ],
-  color: class_colors[:ranger], 
-  #flavour: '"Missed me"',
-  type: 'Ranger Ability',
+  color: class_colors[:paladin],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
 )
 
-paladin_abilities[:scouting_ahead] = Card.new(
-  title: "Scouting Ahead",
-  actions: [
-    Card::Action.new(
-      symbol: [:diamonds],
-      content: '(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.',
-    ),
-  ],
-  color: class_colors[:ranger], 
-  #flavour: '"Missed me"',
-  type: 'Ranger Ability',
-)
 
-paladin_abilities[:healing_salve_recipe] = Card.new(
-  title: "Healing Salve Recipe",
+paladin_abilities[:strategic_planning] = Card.new(
+  title: "Strategic Planning",
   actions: [
     Card::Action.new(
-      symbol: [:diamonds, :hearts],
-      content: '(each suit) Healberry Herb, Cloth.',
+      symbol: [:tap, :joker],
+      content: 'Swap 2 fate cards in your ally\'s hands of their choice.',
     ),
   ],
-  color: class_colors[:ranger], 
-  flavour: '"*Don\'t* eat the berries"',
-  type: 'Ranger Recipe',
+  color: class_colors[:paladin],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
 )
-
-paladin_abilities[:recast] = Card.new(
-  title: "Recast",
+paladin_abilities[:inspiring_speech] = Card.new(
+  title: "Inspiring Speech",
   actions: [
     Card::Action.new(
       symbol: [:tap, :hearts],
-      content: '(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.',
-    ),
-  ],
-  color: class_colors[:astrologist],
-  #flavour: '"Missed me"',
-  type: 'Astrologist Ability',
-)
-paladin_abilities[:focused_cast] = Card.new(
-  title: "Focused Cast",
-  actions: [
-    Card::Action.new(
-      symbol: [:tap],
-      content: 'Upgrade the blood dice for one spell you cast.',
+      content: 'Recharge two ally\'s abilities.',
     ),
   ],
-  color: class_colors[:astrologist],
-  #flavour: '"Missed me"',
-  type: 'Astrologist Ability',
-)
-
-paladin_abilities[:focused_cast] = Card.new(
-  title: "Focused Cast",
-  actions: [
-    Card::Action.new(
-      symbol: [:tap],
-      content: 'Upgrade the blood dice for one spell you cast.',
-    ),
-  ],
-  color: class_colors[:astrologist],
-  #flavour: '"Missed me"',
-  type: 'Astrologist Ability',
-)
-
-paladin_abilities[:change_of_fate] = Card.new(
-  title: "Change of Fate",
-  blood: 1,
-  actions: [
-    Card::Action.new(
-      symbol: [:blood],
-      content: 'Swap 1 card with a willing player.',
-    ),
-  ],
-  color: class_colors[:astrologist],
-  #flavour: '"Missed me"',
-  type: 'Astrologist Ability',
+  color: class_colors[:paladin],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
 )
 
-paladin_abilities[:palm_reading] = Card.new(
-  title: "Palm Reading",
-  blood: 1,
-  actions: [
-    Card::Action.new(
-      symbol: [:blood],
-      content: 'Discard a willing players hand and replace it with new cards drawn.',
-    ),
-  ],
-  color: class_colors[:astrologist],
-  #flavour: '"Missed me"',
-  type: 'Astrologist Ability',
-)
 
 Card.output('paladin_abilities', paladin_abilities);
 
diff --git a/cards/cards/ranger_abilities.rb b/cards/cards/ranger_abilities.rb
new file mode 100644
index 0000000..f721bdf
--- /dev/null
+++ b/cards/cards/ranger_abilities.rb
@@ -0,0 +1,66 @@
+require_relative 'card.rb'
+
+ranger_abilities = {}
+
+class_colors = {
+  rogue: 'Maroon',
+  ranger: 'ForestGreen', 
+  astrologist: 'DodgerBlue',
+  monk: 'OrangeRed',
+  paladin: 'GoldenRod'
+}
+
+ranger_abilities[:hunters_mark] = Card.new(
+  title: "Hunter's Mark",
+  actions: [
+    Card::Action.new(
+      symbol: [:lesser],
+      content: 'Mark a target you can see. Weapon attacks agaisnt a marked target get an advantage for each mark. Marked targets remain revealed for the duration of the mark. Marks last 30 minutes.',
+    ),
+  ],
+  color: class_colors[:ranger],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Ranger Ability',
+)
+
+ranger_abilities[:quick_shot] = Card.new(
+  title: "Quick Shot",
+  actions: [
+    Card::Action.new(
+      symbol: [:spades],
+      content: 'Recharge a ranged weapon you have equipped.',
+    ),
+  ],
+  color: class_colors[:ranger],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Ranger Ability',
+)
+
+ranger_abilities[:flexible_shooter] = Card.new(
+  title: "Flexible Shooter",
+  actions: [
+    Card::Action.new(
+      symbol: [:joker, :reactive],
+      content: 'When you have a ranged weapon equipped that is unable to parry and given the opportunity to parry: deal damage with that weapon.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  #flavour: '"Missed me"',
+  type: 'Ranger Ability',
+)
+
+ranger_abilities[:pack_rat] = Card.new(
+  title: "Pack Rat",
+  actions: [
+    Card::Action.new(
+      #symbol: [:joker, :reactive],
+      content: 'Bags you have equipped can hold 2 additional slots. You can choose and divide these slots among the pockets of the bag as you see fit.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  #flavour: '"Missed me"',
+  type: 'Ranger Ability',
+)
+
+Card.output('ranger_abilities', ranger_abilities);
+
diff --git a/cards/cards/rogue_abilities.rb b/cards/cards/rogue_abilities.rb
new file mode 100644
index 0000000..1b32211
--- /dev/null
+++ b/cards/cards/rogue_abilities.rb
@@ -0,0 +1,66 @@
+require_relative 'card.rb'
+
+rogue_abilities = {}
+
+class_colors = {
+  rogue: 'Maroon',
+  ranger: 'ForestGreen', 
+  astrologist: 'DodgerBlue',
+  monk: 'OrangeRed',
+  paladin: 'GoldenRod'
+}
+
+rogue_abilities[:weak_point] = Card.new(
+  title: "Weak Point",
+  actions: [
+    Card::Action.new(
+      symbol: [:joker, :reactive],
+      content: 'After rolling a successful attack: deal extra damage equal to your weapon damage if at least one die rolled is the max possible number that can be rolled.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Rogue Ability',
+)
+
+rogue_abilities[:interruption] = Card.new(
+  title: "Interruption",
+  actions: [
+    Card::Action.new(
+      symbol: [:clubs, :reactive],
+      content: 'Cancel the effect an ability that is being attempted to be activated.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Rogue Ability',
+)
+
+rogue_abilities[:lucky_sense] = Card.new(
+  title: "Lucky Sense",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap],
+      content: 'Peek the top card of your fate deck.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Rogue Ability',
+)
+
+rogue_abilities[:quick_attack] = Card.new(
+  title: "Quick Attack",
+  actions: [
+    Card::Action.new(
+      symbol: [:greater, :tap],
+      content: 'Recharge all equipped light weapons.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Rogue Ability',
+)
+
+Card.output('rogue_abilities', rogue_abilities);
+
diff --git a/cards/output/monk_abilities.html b/cards/output/monk_abilities.html
new file mode 100644
index 0000000..ccfbe39
--- /dev/null
+++ b/cards/output/monk_abilities.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, OrangeRed 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Pressure Point
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>After a successful attack: deactivate one of the target’s abilities of your choosing.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Monk Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, OrangeRed 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Flurry of Strikes
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Make an attack with your weapon. If that attack is successful: recharge this.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Monk Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, OrangeRed 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Quick Footwork
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Ignore the incoming damage of a parry.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Monk Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, OrangeRed 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Inner Peace
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>If you havent recieved damage during your turn yet, reroll a dice of your choice.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Monk Ability
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/paladin_abilities.html b/cards/output/paladin_abilities.html
index 2506e5c..d0bf33d 100644
--- a/cards/output/paladin_abilities.html
+++ b/cards/output/paladin_abilities.html
@@ -255,41 +255,6 @@
 			<div class="group">
 				<div class="title">
 					<p>
-						Duel
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon tap_icon">
-									↪️
-								</span>
-								<span class="icon even_icon">
-									⬜
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>Pick a target. You and that target enter a duel where you and the target may not attack anyone other then each other. You cannot use this while in a duel.</p>
-							</div>
-						</div>
-					</div>
-					<div class="flavour_wrapper">
-						<div class="flavour">
-							<hr>
-							<p>“A famous commander’s signature thing.”</p>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Paladin Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
 						Leading Charge
 					</p>
 				</div>
@@ -318,11 +283,11 @@
 				</div>
 			</div>
 		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
 			<div class="group">
 				<div class="title">
 					<p>
-						Duck and Weave
+						Taunt
 					</p>
 				</div>
 				<div class="content">
@@ -332,32 +297,26 @@
 								<span class="icon tap_icon">
 									↪️
 								</span>
-								<span class="icon suit_icon diamonds_icon">
-									♦️
+								<span class="icon lesser_icon">
+									📣
 								</span>
 							</div>
 							<div class="action_detail">
-								<p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</p>
+								<p>When an attack is declared: redirect the attack toward yourself.</p>
 							</div>
 						</div>
 					</div>
-					<div class="flavour_wrapper">
-						<div class="flavour">
-							<hr>
-							<p>“Missed me”</p>
-						</div>
-					</div>
 				</div>
 				<div class="card_type">
-					Rogue Ability
+					Paladin Ability
 				</div>
 			</div>
 		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
 			<div class="group">
 				<div class="title">
 					<p>
-						Surgical Strike
+						Strategic Planning
 					</p>
 				</div>
 				<div class="content">
@@ -367,156 +326,26 @@
 								<span class="icon tap_icon">
 									↪️
 								</span>
-								<span class="icon suit_icon spades_icon">
-									♠️
+								<span class="icon joker_icon">
+									🃏
 								</span>
 							</div>
 							<div class="action_detail">
-								<p>(less then 5) Replace a weapon’s damage with the value of the card played. Only affects the current attack.</p>
+								<p>Swap 2 fate cards in your ally’s hands of their choice.</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="card_type">
-					Rogue Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Down the Alleys
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon suit_icon diamonds_icon">
-									♦️
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Rogue Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Spot
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon suit_icon hearts_icon">
-									♥️
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Ranger Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Flexible Shooter
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<p>You can deal reposte damage with any ranged weapon.</p>
-					</div>
-				</div>
-				<div class="card_type">
-					Ranger Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Scouting Ahead
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon suit_icon diamonds_icon">
-									♦️
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Ranger Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Healing Salve Recipe
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon suit_icon diamonds_icon">
-									♦️
-								</span>
-								<span class="icon suit_icon hearts_icon">
-									♥️
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>(each suit) Healberry Herb, Cloth.</p>
-							</div>
-						</div>
-					</div>
-					<div class="flavour_wrapper">
-						<div class="flavour">
-							<hr>
-							<p>“<em>Don’t</em> eat the berries”</p>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Ranger Recipe
+					Paladin Ability
 				</div>
 			</div>
 		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
 			<div class="group">
 				<div class="title">
 					<p>
-						Recast
+						Inspiring Speech
 					</p>
 				</div>
 				<div class="content">
@@ -531,97 +360,13 @@
 								</span>
 							</div>
 							<div class="action_detail">
-								<p>(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Astrologist Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<p>
-						Focused Cast
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon tap_icon">
-									↪️
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>Upgrade the blood dice for one spell you cast.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Astrologist Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<div class="attrib_icon attrib_tr">
-						1 🩸
-					</div>
-					<p>
-						Change of Fate
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon blood_icon">
-									🩸
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>Swap 1 card with a willing player.</p>
+								<p>Recharge two ally’s abilities.</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="card_type">
-					Astrologist Ability
-				</div>
-			</div>
-		</div>
-		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
-			<div class="group">
-				<div class="title">
-					<div class="attrib_icon attrib_tr">
-						1 🩸
-					</div>
-					<p>
-						Palm Reading
-					</p>
-				</div>
-				<div class="content">
-					<div class="action">
-						<div class="symbol_wrapper_outer">
-							<div class="symbol_wrapper_inner">
-								<span class="icon blood_icon">
-									🩸
-								</span>
-							</div>
-							<div class="action_detail">
-								<p>Discard a willing players hand and replace it with new cards drawn.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="card_type">
-					Astrologist Ability
+					Paladin Ability
 				</div>
 			</div>
 		</div>
diff --git a/cards/output/ranger_abilities.html b/cards/output/ranger_abilities.html
new file mode 100644
index 0000000..a7482d9
--- /dev/null
+++ b/cards/output/ranger_abilities.html
@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Hunter&#39;s Mark
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									➖
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Mark a target you can see. Weapon attacks agaisnt a marked target get an advantage for each mark. Marked targets remain revealed for the duration of the mark. Marks last 30 minutes.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Quick Shot
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon spades_icon">
+									♠️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Recharge a ranged weapon you have equipped.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Flexible Shooter
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When you have a ranged weapon equipped that is unable to parry and given the opportunity to parry: deal damage with that weapon.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Pack Rat
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>Bags you have equipped can hold 2 additional slots. You can choose and divide these slots among the pockets of the bag as you see fit.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/rogue_abilities.html b/cards/output/rogue_abilities.html
new file mode 100644
index 0000000..f1631c1
--- /dev/null
+++ b/cards/output/rogue_abilities.html
@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Weak Point
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>After rolling a successful attack: deal extra damage equal to your weapon damage if at least one die rolled is the max possible number that can be rolled.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Interruption
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon suit_icon clubs_icon">
+									♣️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Cancel the effect an ability that is being attempted to be activated.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Lucky Sense
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Peek the top card of your fate deck.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Quick Attack
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Recharge all equipped light weapons.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>