summaryrefslogtreecommitdiffhomepage
path: root/cards
diff options
context:
space:
mode:
Diffstat (limited to 'cards')
-rw-r--r--cards/Gemfile11
-rw-r--r--cards/Gemfile.lock17
-rw-r--r--cards/assets/cardback.png (renamed from cards/cardback.png)bin80602 -> 80602 bytes
-rw-r--r--cards/assets/cardback.svg (renamed from cards/cardback.svg)0
-rw-r--r--cards/assets/inspiration_cardback.jpg (renamed from cards/inspiration_cardback.jpg)bin53923 -> 53923 bytes
-rw-r--r--cards/assets/weapon_example.svg (renamed from cards/weapon_example.svg)0
-rw-r--r--cards/cards/alchemical_recipes.rb (renamed from cards/alchemical_recipes.rb)6
-rw-r--r--cards/cards/armour.rb (renamed from cards/armour.rb)4
-rw-r--r--cards/cards/card.rb (renamed from cards/card.rb)35
-rw-r--r--cards/cards/card_weapons.rb (renamed from cards/card_weapons.rb)4
-rw-r--r--cards/cards/class_abilities.rb (renamed from cards/class_abilities.rb)4
-rw-r--r--cards/cards/common_items.rb153
-rw-r--r--cards/cards/common_weapons.rb (renamed from cards/common_weapons.rb)292
-rw-r--r--cards/cards/paladin_abilities.rb196
-rw-r--r--cards/cards/rare_weapons.rb117
-rw-r--r--cards/cards/spells.rb (renamed from cards/spells.rb)5
-rw-r--r--cards/output/alchemical_recipes.html300
-rw-r--r--cards/output/armour.html380
-rw-r--r--cards/output/beginner_spells.html568
-rw-r--r--cards/output/class_abilities.html595
-rw-r--r--cards/output/common_items.html556
-rw-r--r--cards/output/common_weapons.html1047
-rw-r--r--cards/output/paladin_abilities.html639
-rw-r--r--cards/output/rare_weapons.html512
24 files changed, 5278 insertions, 163 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
Binary files differ
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
Binary files differ
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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-14 17:41:58 +0000