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