gear rules, refined classes idea, worked on abilities

37 files changed, 5390 insertions, 179 deletions

diff --git a/cards/Gemfile b/cards/Gemfile
new file mode 100644
index 0000000..4af2b1e
--- /dev/null
+++ b/cards/Gemfile
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# gem "rails"
+
+gem "paggio", "~> 0.3.0"
+
+gem "kramdown", "~> 2.4"
diff --git a/cards/Gemfile.lock b/cards/Gemfile.lock
new file mode 100644
index 0000000..47747ed
--- /dev/null
+++ b/cards/Gemfile.lock
@@ -0,0 +1,17 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    kramdown (2.4.0)
+      rexml
+    paggio (0.3.0)
+    rexml (3.2.5)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  kramdown (~> 2.4)
+  paggio (~> 0.3.0)
+
+BUNDLED WITH
+   2.1.4
diff --git a/cards/cardback.png b/cards/assets/cardback.png
index 73dd350..73dd350 100644
--- a/cards/cardback.png
+++ b/cards/assets/cardback.png
diff --git a/cards/cardback.svg b/cards/assets/cardback.svg
index 1099321..1099321 100644
--- a/cards/cardback.svg
+++ b/cards/assets/cardback.svg
diff --git a/cards/inspiration_cardback.jpg b/cards/assets/inspiration_cardback.jpg
index 2b82919..2b82919 100644
--- a/cards/inspiration_cardback.jpg
+++ b/cards/assets/inspiration_cardback.jpg
diff --git a/cards/weapon_example.svg b/cards/assets/weapon_example.svg
index ef9e910..ef9e910 100644
--- a/cards/weapon_example.svg
+++ b/cards/assets/weapon_example.svg
diff --git a/cards/alchemical_recipes.rb b/cards/cards/alchemical_recipes.rb
index 4e96dfb..1332873 100644
--- a/cards/alchemical_recipes.rb
+++ b/cards/cards/alchemical_recipes.rb
@@ -1,8 +1,8 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 alchemical_recipes = {}
 
-beginner_spells[:crystal_encasement] = Card.new(
+alchemical_recipes[:crystal_encasement] = Card.new(
   title: "Crystal Encasement Recipe",
   #damage: 3,
   #blood: 2,
@@ -18,4 +18,4 @@ beginner_spells[:crystal_encasement] = Card.new(
   type: 'Blood Magic (Eldritch)'
 )
 
-File.write('beginner_spells.html', Card.build(beginner_spells.values))
+Card.output('alchemical_recipes', alchemical_recipes)
diff --git a/cards/armour.rb b/cards/cards/armour.rb
index da6cf68..d8ea418 100644
--- a/cards/armour.rb
+++ b/cards/cards/armour.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 armour = {}
 
@@ -56,3 +56,5 @@ armour[:none] = Card.new(
 )
 
 File.write('armour.html', Card.build(armour.values))
+
+Card.output('armour', armour)
diff --git a/cards/card.rb b/cards/cards/card.rb
index 3d76d22..3aa4fcd 100644
--- a/cards/card.rb
+++ b/cards/cards/card.rb
@@ -1,5 +1,6 @@
 require 'paggio'
 require 'paggio/markdown'
+
 class Card
   attr_accessor(
     :attrib_top_left,     :attrib_top_left_icon, 
@@ -353,6 +354,21 @@ class Card
                               "↪️"
                             end
                           end
+                          if action.symbol.include? :blood
+                            _.span.icon.blood_icon do
+                              "🩸"
+                            end
+                          end
+                          if action.symbol.include? :reactive
+                            _.span.icon.lesser_icon do
+                              "📣"
+                            end
+                          end
+                          if action.symbol.include? :joker
+                            _.span.icon.joker_icon do
+                              "🃏"
+                            end
+                          end
                           if action.symbol.include? :spades
                             _.span.icon.suit_icon.spades_icon do
                               "♠️"
@@ -373,16 +389,6 @@ class Card
                               "♥️"
                             end
                           end
-                          if action.symbol.include? :joker
-                            _.span.icon.joker_icon do
-                              "🃏"
-                            end
-                          end
-                          if action.symbol.include? :blood
-                            _.span.icon.blood_icon do
-                              "🩸"
-                            end
-                          end
                           if action.symbol.include? :odd
                             _.span.icon.odd_icon do
                               "🔻"
@@ -408,6 +414,11 @@ class Card
                               "➖"
                             end
                           end
+                          if action.symbol.include? :invisible
+                            _.span.icon.lesser_icon(style: 'visibility: hidden;') do
+                              "🈷️"
+                            end
+                          end
                         end
                         _.div.action_detail do
                           _.markdown <<-MD
@@ -473,6 +484,10 @@ function downloadAsImage() {
       end
       end
     end
+
+    def output(name, cards, prefix: "output/")
+      File.write("#{prefix}#{name}.html", Card.build(cards.values))
+    end
   end
 end
 
diff --git a/cards/card_weapons.rb b/cards/cards/card_weapons.rb
index ed46343..dccb8d7 100644
--- a/cards/card_weapons.rb
+++ b/cards/cards/card_weapons.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 cards = []
 
@@ -87,3 +87,5 @@ cards.push card
 
 
 File.write('card.html', Card.build(cards))
+
+Card.output('alchemical_recipes', alchemical_recipes)
diff --git a/cards/class_abilities.rb b/cards/cards/class_abilities.rb
index 117005b..300d213 100644
--- a/cards/class_abilities.rb
+++ b/cards/cards/class_abilities.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 class_abilities = {}
 
@@ -177,5 +177,5 @@ class_abilities[:palm_reading] = Card.new(
   type: 'Astrologist Ability',
 )
 
-File.write('class_abilities.html', Card.build(class_abilities.values))
+Card.output('class_abilities', class_abilities);
 
diff --git a/cards/cards/common_items.rb b/cards/cards/common_items.rb
new file mode 100644
index 0000000..06c5347
--- /dev/null
+++ b/cards/cards/common_items.rb
@@ -0,0 +1,153 @@
+require_relative 'card.rb'
+
+common_items = {}
+
+common_items[:test] = Card.new(
+  title: "Test",
+  color: 'rebeccapurple',
+  reposte: 'Prc',
+  damage: '3',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d8 · Prc** to Bludgeon.',
+      symbol: [
+        :tap,
+        :odd,
+        :even,
+        :greater,
+        :lesser,
+        :blood,
+        :reactive,
+        :face,
+      ],
+    ),
+    Card::Action.new(
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :spades,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :clubs,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :diamonds,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :joker,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: [:tap, :hearts]
+    ),
+  ],
+  flavour: '"World Famous Iron Toothpick"',
+  type: 'Thrusting Sword Weapon'
+)
+
+common_items[:sack] = Card.new(
+  title: "Sack",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 12 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:satchel] = Card.new(
+  title: "Satchel",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 6 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 3 cards from this inventory and place up to 3 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:rucksack] = Card.new(
+  title: "Rucksack",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 12 spaces.',
+    ),
+    Card::Action.new(
+      content: '**Item slot**: 6 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:sheath] = Card.new(
+  title: "Sheath",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 1 weapon.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 1 cards from this inventory and place up to 1 weapon to this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back or hip.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:hand_bomb] = Card.new(
+  title: "Hand Bomb",
+  color: 'grey',
+  actions: [
+    Card::Action.new(
+      content: 'Deal **3 damage**. Consumes this item.',
+      symbol: :tap,
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Consumable Weapon'
+)
+
+Card.output('common_items', common_items);
diff --git a/cards/common_weapons.rb b/cards/cards/common_weapons.rb
index 55931af..e1be852 100644
--- a/cards/common_weapons.rb
+++ b/cards/cards/common_weapons.rb
@@ -1,51 +1,75 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 common_weapons = {}
 
-common_weapons[:thrusting_sword] = Card.new(
-  title: "Thrusting Sword",
+common_weapons[:test] = Card.new(
+  title: "Test",
   color: 'rebeccapurple',
   reposte: 'Prc',
   damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Prc** to hit.',
-      symbol: :tap,
+      content: '🎲 **d8 · Prc** to Bludgeon.',
+      symbol: [
+        :tap,
+        :odd,
+        :even,
+        :greater,
+        :lesser,
+        :blood,
+        :reactive,
+        :face,
+      ],
+    ),
+    Card::Action.new(
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :spades,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :clubs,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :diamonds,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :joker,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: [:tap, :hearts]
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Opportune Strike**: When targeting an enemy with this weapon, mark them until the end of their turn. While marked if they attack somone other then you then you can perform a reposte on them.',
-    #)
   ],
   flavour: '"World Famous Iron Toothpick"',
   type: 'Thrusting Sword Weapon'
 )
 
-
-common_weapons[:polearm] = Card.new(
-  title: "Polearm",
+=begin
+common_weapons[:rapier] = Card.new(
+  title: "Rapier",
   color: 'rebeccapurple',
   reposte: 'Prc',
-  damage: '4',
+  damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d8 · Prc** to Pierce.',
       symbol: :tap,
     ),
-    Card::Action.new(
-      seperator: true,
-      content: '**Reach**',
-    ),
     #Card::Action.new(
     #  seperator: true,
-    #  content: '**Reach**: When making an attack, you ignore repostes from your target unless they also have Reach.',
-    #  # TODO: this is the same as the bow making it superiour
-    #  #symbol: :spades,
-    #),
+    #  content: '**Opportune Strike**: When targeting an enemy with this weapon, mark them until the end of their turn. While marked if they attack somone other then you then you can perform a reposte on them.',
+    #)
   ],
-  flavour: '"Getting up close and personal while staying far away"',
-  type: 'Polearm Weapon'
+  flavour: '"World Famous Iron Toothpick"',
+  type: 'Thrusting Sword Weapon'
 )
+=end
 
 common_weapons[:spear] = Card.new(
   title: "Spear",
@@ -54,19 +78,13 @@ common_weapons[:spear] = Card.new(
   damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Prc** to hit.',
+      content: '🎲 **d6 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Reach**, **Throwable**',
+      symbol: :invisible,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Reach**: When making an attack, you ignore repostes from your target unless they also have Reach.',
-    #  # TODO: this is the same as the bow making it superiour
-    #  #symbol: :spades,
-    #),
   ],
   flavour: '"5x more throwable then previous editions"',
   type: 'Polearm Weapon'
@@ -79,12 +97,12 @@ common_weapons[:dagger] = Card.new(
   damage: '2',
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + Prc** to hit.',
+      content: '🎲 **d4 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Light**, **Throwable**',
+      symbol: :invisible,
       #symbol: :spades
     ),
     #Card::Action.new(
@@ -104,12 +122,12 @@ common_weapons[:longbow] = Card.new(
   #reposte: 1,
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + (2·Prc)** to hit.',
+      content: '🎲 **d6 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Ranged**',
+      symbol: :invisible,
     )
     #Card::Action.new(
     #  seperator: true,
@@ -127,50 +145,106 @@ common_weapons[:crossbow] = Card.new(
   #reposte: 1,
   actions: [
     Card::Action.new(
-      content: '(must be loaded) 🎲 **d6 + Prc** to hit.',
+      content: 'Remove a counter.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
-      content: '**Reload**: Load this weapon.',
-      symbol: :tap,
+      content: '🎲 **d8 · Prc** to Pierce.',
+      symbol: :invisible,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Ranged**',
-    )
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '**Reload**: Load this weapon. Add a counter to this card.',
+      symbol: :tap,
+    ),
   ],
   flavour: '"No one will cross you with this weapon"',
   type: 'Crossbow Weapon'
 )
 
-common_weapons[:hammer] = Card.new(
-  title: "Hammer",
+common_weapons[:warhammer] = Card.new(
+  title: "Warhammer",
   reposte: 'Str',
   damage: 3,
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + (2·Str)** to hit.',
+      content: '🎲 **d8 · (Str)** to Bludgeon.',
       symbol: :tap,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Power Swing**: 🎲 **d4 + Str** to hit. Deal **Str + 2** damage.',
-    #  symbol: :tap
-    #),
   ],
-  flavour: '"If you can pick it up, then you are worthy enough to use it."',
+  flavour: '"Made of over 39,000 minature hammers"',
   color: 'rebeccapurple',
   type: 'Hammer Weapon'
 )
 
+common_weapons[:sickle] = Card.new(
+  title: "Sickle",
+  reposte: 'Prc',
+  damage: 1,
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d4 · (Prc)** to Bludgeon.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Light**, **Cleave**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Made of over 39,000 minature hammers"',
+  color: 'rebeccapurple',
+  type: 'Farming Weapon'
+)
+
+common_weapons[:scythe] = Card.new(
+  title: "Scythe",
+  reposte: 'Prc',
+  damage: 2,
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · (Prc)** to Bludgeon.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Heavy**, **Cleave**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Made of over 39,000 minature hammers"',
+  color: 'rebeccapurple',
+  type: 'Farming Weapon'
+)
+
+common_weapons[:short_sword] = Card.new(
+  title: "Short Sword",
+  damage: 3,
+  reposte: 'Str',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · Str** to hit.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Light**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"El Classico"',
+  color: 'rebeccapurple',
+  type: 'Straight Sword Weapon'
+)
+
 common_weapons[:straight_sword] = Card.new(
-  title: "Straight Sword",
+  title: "Long Sword",
   damage: 3,
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Str** to hit.',
+      content: '🎲 **d8 · Str** to hit.',
       symbol: :tap,
     ),
     #Card::Action.new(
@@ -190,14 +264,9 @@ common_weapons[:axe] = Card.new(
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d6 · Str** to Slash.',
       symbol: :tap,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Throw**: 🎲 **d6 + Str** to hit. This attack is **Ranged** and thus you ignore repostes from your target. You lose this weapon by using this attack.',
-    #  symbol: :tap
-    #),
   ],
   flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
@@ -210,67 +279,51 @@ common_weapons[:staff] = Card.new(
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d6 + Str** to Bludgeon.',
       symbol: :tap,
     ),
     Card::Action.new(
       seperator: true,
-      content: '(Two Handed) 🎲 **d8 + Str** to hit.',
+      content: '🎲 **d8 + Str** to Bludgeon.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
-      content: '**Light**',
+      content: '**Heavy**',
     )
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '(odd) **Swift Attack**: Refresh this card.',
-    #  symbol: :spades
-    #),
   ],
   color: 'rebeccapurple',
   flavour: '"Says \'Made by the Ninja Custodial Group\' on the handle"',
   type: 'Staff Weapon',
 )
 
-common_weapons[:curved_sword] = Card.new(
-  title: "Curved Sword",
-  damage: 3,
-  reposte: 'Prc',
+common_weapons[:kite_shield] = Card.new(
+  title: "Kite Shield",
+  #damage: 4,
+  #reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Str** to hit.',
-      symbol: :tap,
+      content: 'When **targeted with a weapon:** your attacker recieves **2 disadvantage** on their action.',
+      symbol: [:tap, :reactive],
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '(odd, recieving a reposte) **Close Quarters**: Deal damage equal to your reposte.',
-    #  symbol: :spades
-    #),
   ],
+  flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
-  flavour: '"Arrrgh"',
-  type: 'Curved Sword Weapon',
+  type: 'Shield Weapon',
 )
 
-common_weapons[:forked_sword] = Card.new(
-  title: "Forked Sword",
-  damage: 3,
-  reposte: 'Str',
-  roll: '1d6',
+common_weapons[:buckler_shield] = Card.new(
+  title: "Buckler Shield",
+  #damage: 4,
+  #reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
-      symbol: :tap,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '**Casting Focus**',
+      content: 'When **targeted with a weapon:** your attacker recieves **1 disadvantage** on their action. If your reposte triggers then deal double damage with it.',
+      symbol: [:tap, :reactive],
     ),
   ],
+  flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
-  flavour: '"Weapon used in the war against the gods. Vintage!"',
-  type: 'Forked Sword Weapon',
+  type: 'Shield Weapon',
 )
 
 common_weapons[:caestus] = Card.new(
@@ -298,53 +351,6 @@ common_weapons[:tuning_fork] = Card.new(
   type: 'Magic Casting Tool',
 )
 
-common_weapons[:casters_glove] = Card.new(
-  title: "Caster's Glove",
-  roll: '1d8',
-  actions: [
-    Card::Action.new(
-      content: '**Casting Focus**',
-    ),
-  ],
-  color: 'DarkBlue',
-  flavour: '"Modern  casting tool that works by directly drawing your blood"',
-  type: 'Magic Casting Tool',
-)
-
-
-common_weapons[:test_weapon] = Card.new(
-  title: "Test Weapon",
-  damage: 3,
-  reposte: 'Prc',
-  actions: [
-    Card::Action.new(
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :spades,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :clubs,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :diamonds,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :joker,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: [:tap, :hearts]
-    ),
-  ],
-  color: 'rebeccapurple',
-  flavour: '"Arrr"',
-  type: 'Curved Sword Weapon',
-)
-
 File.write('common_weapons.html', Card.build(common_weapons.values))
+
+Card.output('common_weapons', common_weapons);
diff --git a/cards/cards/paladin_abilities.rb b/cards/cards/paladin_abilities.rb
new file mode 100644
index 0000000..6dcdbfd
--- /dev/null
+++ b/cards/cards/paladin_abilities.rb
@@ -0,0 +1,196 @@
+require_relative 'card.rb'
+
+paladin_abilities = {}
+
+class_colors = {
+  rogue: 'Maroon',
+  ranger: 'ForestGreen', 
+  astrologist: 'DodgerBlue',
+  monk: 'OrangeRed',
+  paladin: 'GoldenRod'
+}
+
+paladin_abilities[:duel] = Card.new(
+  title: "Duel",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :even],
+      content: '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.',
+    ),
+  ],
+  color: class_colors[:paladin],
+  flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
+)
+
+paladin_abilities[:leading_charge] = Card.new(
+  title: "Leading Charge",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :reactive, :face],
+      content: 'When making an attack, **mark the target** and **choose an ally**. During **the ally\'s** next turn: they **gain an advatage** for all attacks they do **agaisnt the marked target**.',
+    ),
+  ],
+  color: class_colors[:paladin],
+  #flavour: '"A famous commander\'s signature thing."',
+  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",
+  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.',
+    ),
+  ],
+  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',
+)
+
+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",
+  actions: [
+    Card::Action.new(
+      symbol: [:diamonds, :hearts],
+      content: '(each suit) Healberry Herb, Cloth.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  flavour: '"*Don\'t* eat the berries"',
+  type: 'Ranger Recipe',
+)
+
+paladin_abilities[:recast] = Card.new(
+  title: "Recast",
+  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.',
+    ),
+  ],
+  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',
+)
+
+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/rare_weapons.rb b/cards/cards/rare_weapons.rb
new file mode 100644
index 0000000..e0ec2aa
--- /dev/null
+++ b/cards/cards/rare_weapons.rb
@@ -0,0 +1,117 @@
+require_relative 'card.rb'
+
+rare_weapons = {}
+
+rare_weapons[:glaive] = Card.new(
+  title: "Glaive",
+  color: 'rebeccapurple',
+  reposte: 'Prc',
+  damage: '4',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · Str** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Reach**, **Heavy**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Getting up close and personal while staying far away"',
+  type: 'Polearm Weapon'
+)
+
+rare_weapons[:twinblade] = Card.new(
+  title: "Twinblade",
+  damage: 3,
+  reposte: 'Prc',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d4 + Prc** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Heavy**',
+    )
+    #Card::Action.new(
+    #  seperator: true,
+    #  content: '(odd) **Swift Attack**: Refresh this card.',
+    #  symbol: :spades
+    #),
+  ],
+  color: 'rebeccapurple',
+  flavour: '"Says \'Made by the Ninja Custodial Group\' on the handle"',
+  type: 'Staff Weapon',
+)
+
+rare_weapons[:forked_sword] = Card.new(
+  title: "Forked Sword",
+  damage: 3,
+  reposte: 'Str',
+  #roll: '1d6',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 + Str** to Pierce.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: 'You can use the \'Cast a spell\' ability as a part of this action.',
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Cast a **Blood Magic Spell**',
+      symbol: :tap
+    ),
+  ],
+  color: 'rebeccapurple',
+  flavour: '"Weapon used in the war against the gods. Vintage!"',
+  type: 'Forked Sword Weapon',
+)
+
+rare_weapons[:tower_shield] = Card.new(
+  title: "Tower Shield",
+  #damage: 4,
+  #reposte: 'Str',
+  actions: [
+    Card::Action.new(
+      content: 'When **targeted with a weapon:** your attacker recieves **2 disadvantage** on their action.',
+      symbol: [:tap, :reactive],
+    ),
+    Card::Action.new(
+      content: '**Heavy**.',
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'You can act as cover for another character.',
+      #symbol: :invisible
+    ),
+    Card::Action.new(
+      content: '**Heavy**.',
+    ),
+  ],
+  flavour: '"Looks great with a flannel shirt."',
+  color: 'rebeccapurple',
+  type: 'Shield Weapon',
+)
+
+rare_weapons[:casters_glove] = Card.new(
+  title: "Caster's Glove",
+  roll: '1d8',
+  actions: [
+    Card::Action.new(
+      content: '**Casting Focus**',
+    ),
+  ],
+  color: 'DarkBlue',
+  flavour: '"Modern  casting tool that works by directly drawing your blood"',
+  type: 'Magic Casting Tool',
+)
+
+Card.output('rare_weapons', rare_weapons);
diff --git a/cards/spells.rb b/cards/cards/spells.rb
index 39da46b..65cbb42 100644
--- a/cards/spells.rb
+++ b/cards/cards/spells.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 beginner_spells = {}
 
@@ -263,5 +263,4 @@ beginner_spells[:endure] = Card.new( #TODO
   type: 'Blood Spell Modified'
 )
 
-
-File.write('beginner_spells.html', Card.build(beginner_spells.values))
+Card.output('beginner_spells', beginner_spells);
diff --git a/cards/output/alchemical_recipes.html b/cards/output/alchemical_recipes.html
new file mode 100644
index 0000000..7218bd8
--- /dev/null
+++ b/cards/output/alchemical_recipes.html
@@ -0,0 +1,300 @@
+<!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%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Crystal Encasement Recipe
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>A potion which when applied to a surface quickly grows strong blue crystals. Can also be thrown.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“You arent making a bomb, are you?”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Magic (Eldritch)
+				</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/armour.html b/cards/output/armour.html
new file mode 100644
index 0000000..feb99a8
--- /dev/null
+++ b/cards/output/armour.html
@@ -0,0 +1,380 @@
+<!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%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Iron Plate
+					</p>
+					<div class="attrib_icon attrib_br">
+						5 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Strong but heavy”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Chain Mail
+					</p>
+					<div class="attrib_icon attrib_br">
+						4 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“The fairly lightweight option”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Leather
+					</p>
+					<div class="attrib_icon attrib_br">
+						3 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Popular with goths and punks”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Padded
+					</p>
+					<div class="attrib_icon attrib_br">
+						2 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“A <em>LOT</em> of regular clothing stacked together”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						None
+					</p>
+					<div class="attrib_icon attrib_br">
+						1 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Just the skin on your back”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</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/beginner_spells.html b/cards/output/beginner_spells.html
new file mode 100644
index 0000000..7d35cb8
--- /dev/null
+++ b/cards/output/beginner_spells.html
@@ -0,0 +1,568 @@
+<!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%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Igneous
+					</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>Attune to the planes of igneous.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Sea of flames and ashes.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Storm
+					</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>Attune to the planes of storm.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Ice cold winds and storms.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Eldritch
+					</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>Attune to the planes of eldritch.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Alchemicals and fleshy masses.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Void
+					</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>Attune to the planes of void.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Control Gravity”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Soul
+					</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>Attune to the planes of soul.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Dreams and Memories?”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Touch of Magic
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic around your hand.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						2 🩸
+					</div>
+					<p>
+						Elemental Engulf
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic around your self.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						2 🩸
+					</div>
+					<p>
+						Distance Casting
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic at a distance.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						0 🩸
+					</div>
+					<p>
+						Enduring Arcana
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Keep casting for a duration. Whenever distractions occurs to you while casting, such as an attack or a suprise, do a blood check with difficulty equal to the sum of the blood value of spell components used.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</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/class_abilities.html b/cards/output/class_abilities.html
new file mode 100644
index 0000000..77f111a
--- /dev/null
+++ b/cards/output/class_abilities.html
@@ -0,0 +1,595 @@
+<!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>
+						Duel
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>Pick a target. You and that target a duel where you and the target may not attack anyone other then eachother. You cannot use this while in a duel.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Stabby stabby stab”</p>
+						</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>
+						Duck and Weave
+					</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 suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</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
+				</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>
+						Surgical Strike
+					</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 suit_icon spades_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>
+							</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
+				</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>
+						Recast
+					</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 suit_icon hearts_icon">
+									♥️
+								</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>
+							</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
+				</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/common_items.html b/cards/output/common_items.html
new file mode 100644
index 0000000..fc8b188
--- /dev/null
+++ b/cards/output/common_items.html
@@ -0,0 +1,556 @@
+<!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%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Test
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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 blood_icon">
+									🩸
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+								<span class="icon lesser_icon">
+									➖
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<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>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon clubs_icon">
+									♣️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“World Famous Iron Toothpick”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Thrusting Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sack
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 12 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Satchel
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 6 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 3 cards from this inventory and place up to 3 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Rucksack
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 12 spaces.</p>
+					</div>
+					<div class="action">
+						<p><strong>Item slot</strong>: 6 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sheath
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 1 weapon.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 1 cards from this inventory and place up to 1 weapon to this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back or hip.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, grey 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Hand Bomb
+					</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>Deal <strong>3 damage</strong>. Consumes this item.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Consumable Weapon
+				</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/common_weapons.html b/cards/output/common_weapons.html
new file mode 100644
index 0000000..fe55b0c
--- /dev/null
+++ b/cards/output/common_weapons.html
@@ -0,0 +1,1047 @@
+<!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%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Test
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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 blood_icon">
+									🩸
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+								<span class="icon lesser_icon">
+									➖
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<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>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon clubs_icon">
+									♣️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“World Famous Iron Toothpick”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Thrusting Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Spear
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reach</strong>, <strong>Throwable</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“5x more throwable then previous editions”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Polearm Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Dagger
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d4 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong>, <strong>Throwable</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“A quick and convinient way to turn a spleen into a sheath”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Dagger Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Longbow
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+				</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>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Ranged</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“One stringed instrument that got repurposed as a weapon.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Bow Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Crossbow
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+				</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>Remove a counter.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Ranged</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reload</strong>: Load this weapon. Add a counter to this card.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“No one will cross you with this weapon”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Crossbow Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Warhammer
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d8 · (Str)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Hammer Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sickle
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 1
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d4 · (Prc)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong>, <strong>Cleave</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Farming Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Scythe
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d6 · (Prc)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Heavy</strong>, <strong>Cleave</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Farming Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Short Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d6 · Str</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“El Classico”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Straight Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Long Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d8 · Str</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“El Classico”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Straight Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Axe
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 4
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d6 · Str</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Axe Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Staff
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d6 + Str</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 + Str</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Staff Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Kite Shield
+					</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>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Buckler Shield
+					</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>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>1 disadvantage</strong> on their action. If your reposte triggers then deal double damage with it.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Caestus
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>While equipped: Unarmed Strikes deal <strong>Str</strong> additional damage.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Weapon of choice for a fit bronze statue”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Weapon Equipment
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tl">
+						🎲 1d4
+					</div>
+					<p>
+						Tuning Fork
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Casting Focus</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Resonates with various magical frequencies to help with casting blood magic”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Magic Casting Tool
+				</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
new file mode 100644
index 0000000..2506e5c
--- /dev/null
+++ b/cards/output/paladin_abilities.html
@@ -0,0 +1,639 @@
+<!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%, GoldenRod 100%)" class="card">
+			<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>
+				<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>
+								<span class="icon face_icon">
+									🎭
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When making an attack, <strong>mark the target</strong> and <strong>choose an ally</strong>. During <strong>the ally’s</strong> next turn: they <strong>gain an advatage</strong> for all attacks they do <strong>agaisnt the marked target</strong>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Paladin 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>
+						Duck and Weave
+					</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 suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</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
+				</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>
+						Surgical Strike
+					</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 suit_icon spades_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>
+							</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
+				</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>
+						Recast
+					</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 suit_icon hearts_icon">
+									♥️
+								</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>
+							</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
+				</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/rare_weapons.html b/cards/output/rare_weapons.html
new file mode 100644
index 0000000..76db3a3
--- /dev/null
+++ b/cards/output/rare_weapons.html
@@ -0,0 +1,512 @@
+<!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%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Glaive
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 4
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d6 · Str</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reach</strong>, <strong>Heavy</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Getting up close and personal while staying far away”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Polearm Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Twinblade
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</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>🎲 <strong>d4 + Prc</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Staff Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Forked Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</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>🎲 <strong>d6 + Str</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>You can use the ‘Cast a spell’ ability as a part of this action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Cast a <strong>Blood Magic Spell</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Weapon used in the war against the gods. Vintage!”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Forked Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Tower Shield
+					</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>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Heavy</strong>.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>You can act as cover for another character.</p>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong>.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tl">
+						🎲 1d8
+					</div>
+					<p>
+						Caster&#39;s Glove
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Casting Focus</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Modern  casting tool that works by directly drawing your blood”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Magic Casting Tool
+				</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/src/.obsidian/core-plugins.json b/src/.obsidian/core-plugins.json
index 96869df..086a8e4 100644
--- a/src/.obsidian/core-plugins.json
+++ b/src/.obsidian/core-plugins.json
@@ -4,6 +4,7 @@
   "switcher",
   "graph",
   "backlink",
+  "canvas",
   "outgoing-link",
   "tag-pane",
   "page-preview",
diff --git a/src/classes.md b/src/classes.md
index e080820..bcd56fd 100644
--- a/src/classes.md
+++ b/src/classes.md
@@ -1,19 +1,39 @@
 # Classes
 
-## Rogue
+## Disicplines
+
+### Rogue
 Class representing felicity's gang.
 Can attack many times at once
-specialized in the "city"?
+yoinks abilities
+inflitcts status effects
 
-## Ranger
+### Ranger
 Class representing the memory drow clan
 Good at focusing a target(mark)
 specialized in "nature"?
 has a pet
 
-## Paladin
+### Paladin
 Class representing the Indignant
+leader type of class
+gives buffs
+draws aggro
+
+### Monk
+can cleanse status effects
+
+## Archanologies
 
-## Warlock
+### Warlock
 trades blood for demon powers from other planes.
 can summon buddies
+
+### Alchemist
+Creates magical substances to be consumed or thrown.
+
+### Sorcerer
+Crafts and casts spells in the moment
+
+### Scribe
+Prepares spells to be casted on command at a later time. Can create passive effects on people without requiring concentration.
\ No newline at end of file
diff --git a/src/gear.md b/src/gear.md
new file mode 100644
index 0000000..530c852
--- /dev/null
+++ b/src/gear.md
@@ -0,0 +1,4 @@
+# Gear
+Bags are an item, they dictate the size of your inventory deck. When in combat you dont just select random items and use them, instead you have to draw them from your inventory deck before equiping them. Some items such as a quick draw belt or a sheath will let you reliably draw the item instantly.
+
+Bags have a number of pockets, each pocket being represented by a seperate deck. This means that you can store things in parallel so they are easy to get.
\ No newline at end of file
diff --git a/src/running-the-game/Assets/blood_symbol.png b/src/running-the-game/Assets/blood_symbol.png
new file mode 100644
index 0000000..473f3ed
--- /dev/null
+++ b/src/running-the-game/Assets/blood_symbol.png
diff --git a/src/running-the-game/Assets/even_symbol.png b/src/running-the-game/Assets/even_symbol.png
new file mode 100644
index 0000000..c3187d7
--- /dev/null
+++ b/src/running-the-game/Assets/even_symbol.png
diff --git a/src/running-the-game/Assets/face_symbol.png b/src/running-the-game/Assets/face_symbol.png
new file mode 100644
index 0000000..0829076
--- /dev/null
+++ b/src/running-the-game/Assets/face_symbol.png
diff --git a/src/running-the-game/Assets/greater_symbol.png b/src/running-the-game/Assets/greater_symbol.png
new file mode 100644
index 0000000..a9917ae
--- /dev/null
+++ b/src/running-the-game/Assets/greater_symbol.png
diff --git a/src/running-the-game/Assets/lesser_symbol.png b/src/running-the-game/Assets/lesser_symbol.png
new file mode 100644
index 0000000..932a349
--- /dev/null
+++ b/src/running-the-game/Assets/lesser_symbol.png
diff --git a/src/running-the-game/Assets/odd_symbol.png b/src/running-the-game/Assets/odd_symbol.png
new file mode 100644
index 0000000..865b613
--- /dev/null
+++ b/src/running-the-game/Assets/odd_symbol.png
diff --git a/src/running-the-game/Assets/reactive_symbol.png b/src/running-the-game/Assets/reactive_symbol.png
new file mode 100644
index 0000000..efc2491
--- /dev/null
+++ b/src/running-the-game/Assets/reactive_symbol.png
diff --git a/src/running-the-game/abilities.md b/src/running-the-game/abilities.md
index 8a1754f..2ab930c 100644
--- a/src/running-the-game/abilities.md
+++ b/src/running-the-game/abilities.md
@@ -1,3 +1,31 @@
+<!--
+Potential card abilities:
+- draw
+	- find a card
+	- draw x, pick y from x and reshuffle rest
+- discard
+	- replace cards with others
+- increase/decrease attack/defence/health
+- allow attacking multiple times
+- reroll
+- add/subtract from roll
+- when a specific number is rolled
+- move card from discard to hand/deck
+- move cards between hands
+- draw from other's decks
+- peek a deck
+- block damage/death
+- multiple effects(randomly picks one)
+- recharge a card
+- at the start/end of turn
+- on damage/death
+- redirect attack
+- double an effect
+- copy an effect
+- on activation
+- on item use
+-->
+
 # Abilities
 
 Abilities are represented as cards which your character can learn, equip, and/or use. Spells, weapons, and racial feats are just some of the things which are represented as ability cards. Many of these cards follow shorthand for mechanics which are common throught the game. Here they are:
@@ -8,27 +36,34 @@ Abilities are represented as cards which your character can learn, equip, and/or
 ![tap_symbol](tap_symbol.png)   
 This symbol represents an ability which can be used once before requiring to be recharged. When a card is "tapped" place it sideways to signify this state. Once the card becomes [refreshed](/running-the-game/abilities.md#refresh) place it regularly. Unless otherwise stated, these cards [refresh](/running-the-game/abilities.md#refresh) at the start of your turn, or within a couple of in game seconds. If there is a set of brackets immediatly after the symbol they denotes the restrictions that must be met to use the ability.
 
-These abilities can be used in reactions on other's turns.
-
 ### Reactive
-📣
+![reactive_symbol](Assets/reactive_symbol.png)
 This symbol means this ability can be used in reaction to another action or ability when appropriate.
 
+### Blood Cost
+![blood_symbol](Assets/blood_symbol.png)
+This symbol represents an ability where you must use a blood spellcasting tool(unless otherwise specified) and pay for the cost to cast the spell.
+
 ### Suit Card Cost
 ![heart_symbol](heart_symbol.png) ![spade_symbol](spade_symbol.png) ![diamond_symbol](diamond_symbol.png) ![club_symbol](club_symbol.png)   
 Each of these 4 symbols represent an ability where you must play a matching card to use it. 
 
 ### Odd/Even Card Cost
-🔻/⬜️
+![odd_symbol](Assets/odd_symbol.png) ![even_symbol](Assets/even_symbol.png)
 The triangle(3 points represents odd) means you need to play a card with an odd value while the square(4 points represents even) means you need to play a card with an even value.
 
+### Greater/Lesser Card Cost
+![greater_symbol](Assets/greater_symbol.png) ![lesser_symbol](Assets/lesser_symbol.png)
+The plus signifies that the card you play must be 5-10 while a minus signifies that the card you play must be 1-5.
+
+### Face Card Cost
+![face_symbol](Assets/face_symbol.png)
+The masks symbol signifies that the card played must be a face card(King, Queen, Knight, Jack)
+
 ### Any Card Cost
 ![joker_symbol](joker_symbol.png)  
 This symbol represents an ability where you can play a card of any suit.
 
-### Blood Cost
-🩸
-This symbol represents an ability where you must use a blood spellcasting tool(unless otherwise specified) and pay for the cost to cast the spell.
 
 ## Key Words
 
@@ -42,12 +77,24 @@ Spells follow the same rules as abilities, but with some additional rules.
 ## Blood Magic
 Blood spells are the most common and accessable type of magic. These are spells that require blood to power them.
 
+#### Modifieds
+You compile a spell by mixing base elements with modifieds. The following are possible modifieds:
+- Duration
+- Range
+- Scale
+- Area
+
 ### Sorcery
 To cast a blood spell a "spell casting" medium may be needed. A given spellcasting medium will have a dice associated with it. When casting a spell this dice is rolled. If the result is greater then the blood cost of a spell then you dont pay anything. However if the number rolled is equal to or less then the value then you pay 1 blood. If the spell cost is higher then the dice of your casting medium then the medium is too weak to cast the spell. Using no casting medium is possible, instead of rolling a dice the result is always 1 and you cannot cast spells higher then this cost.
 
 ### Alchemy
 Alchemy is a form of magic which involves the preparation of various ingredients which form compounds that perform spell effects.
 
+### Scribe
+
+### Necromancy
+
+
 ## Divine Magic
 Divine spells use magic that originates from a god. The rules of these spells vary wildly and can depend on various different factors. These are forbidden in most places so if you somehow get access to one, be careful with how you use it.
 
diff --git a/src/running-the-game/weapons.md b/src/running-the-game/weapons.md
index d008695..f9b9054 100644
--- a/src/running-the-game/weapons.md
+++ b/src/running-the-game/weapons.md
@@ -10,11 +10,35 @@
 3. This is how much this weapon raises your defensive roll target for repostes. If it is unlisted then the weapon does not have a reposte.
 4. This is the ability box, which lists out all the active and passive abilities this weapon has seperated by a bold line. This example weapon has 2 abilities.
 5. The [symbol means you need to tap](running-the-game/abilities.md#Tap) to use this ability. The ["to hit" wording signifies it is an attack](running-the-game/weapons.md#To%20Hit)
-7. The [symbol](running-the-game/abilities.md#Suit%20Card%20Cost) in front of this ability signifies that you must play a specific card to play it. [Refresh](running-the-game/abilities.md#Refresh) is a specific keyword.
-9. This text states what type of card this is. Note that the colour of the card corresponds with the type of card. In this example the card is a Weapon, or a Dagger Weapon to be specific and the card is a purple colour.
-10. This faded text is flavour.
+6. The [symbol](running-the-game/abilities.md#Suit%20Card%20Cost) in front of this ability signifies that you must play a specific card to play it. [Refresh](running-the-game/abilities.md#Refresh) is a specific keyword.
+7. This text states what type of card this is. Note that the colour of the card corresponds with the type of card. In this example the card is a Weapon, or a Dagger Weapon to be specific and the card is a purple colour.
+8. This faded text is flavour.
 
 ## Key Words
 
 ### To Hit 
-These words are used in conjunction with a dice roll. It signifies that this ability is an attack and that this is how the attack roll is determined for it. If damage is unlisted then it is equal to the damage stat listed in the top box of the card.
\ No newline at end of file
+These words are used in conjunction with a dice roll. It signifies that this ability is an attack and that this is how the attack roll is determined for it. If damage is unlisted then it is equal to the damage stat listed in the top box of the card.
+
+## Properties
+
+### Light
+Can be equipped alongside a light or medium weapon.
+
+### Heavy
+
+### Cleave
+Target multiple adjcent enemies in the same single attack.
+
+### Throw
+Throw this weapon at something. Ignore reposts when using this feature.
+
+### Range
+Ignore reposte when attacking.
+
+### Reach
+Always repost even if an enemy hits an attack when possible.
+
+## Damage Types
+- Bludgeon
+- Slash
+- Pierce
\ No newline at end of file
diff --git a/tap_symbol.xcf b/tap_symbol.xcf
index 5232fb1..d8cca38 100644
--- a/tap_symbol.xcf
+++ b/tap_symbol.xcf