initial commit
This commit is contained in:
commit
fbe01f60b5
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
build/*
|
34
Makefile
Normal file
34
Makefile
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
out.html: card.yaml build/card.xls style.html.j2 style.css
|
||||
xsltproc \
|
||||
--output out.html \
|
||||
style.html.j2 \
|
||||
build/card.xls
|
||||
|
||||
|
||||
define TMP_PYTHON_PROG
|
||||
from jinja2 import Environment, FileSystemLoader
|
||||
|
||||
with open("card.yaml") as f:
|
||||
data = f.read()
|
||||
|
||||
out = Environment(
|
||||
loader=FileSystemLoader('templates'))\
|
||||
.get_template('card.xml.j2')\
|
||||
.render(data=data)
|
||||
|
||||
#print(out)
|
||||
|
||||
with open("build/card.xls", "w") as f:
|
||||
f.write(data)
|
||||
endef
|
||||
|
||||
export TMP_PYTHON_PROG
|
||||
build/card.xls:
|
||||
python -c "$$TMP_PYTHON_PROG"
|
||||
|
||||
|
||||
.PHONY: clean
|
||||
clean:
|
||||
rm build/* out.html
|
37
card.yaml
Normal file
37
card.yaml
Normal file
@ -0,0 +1,37 @@
|
||||
title: Hit enemy
|
||||
tags:
|
||||
- combat
|
||||
costs:
|
||||
- 2 ACT
|
||||
- 1 COMBO
|
||||
properties:
|
||||
- 'Element: fire'
|
||||
- BODY+5 POWER
|
||||
flavor: Enemies sure are squishy
|
||||
description: Perform an attack
|
||||
steps:
|
||||
- Do A
|
||||
- Then B
|
||||
notes: ''
|
||||
figures:
|
||||
- name: users
|
||||
type: fa
|
||||
color: "#ff0000"
|
||||
scale: 0.8
|
||||
flip_x: false
|
||||
flip_y: false
|
||||
offset:
|
||||
- 0.4
|
||||
- 0.2
|
||||
opacity: 1
|
||||
rotation: 0
|
||||
- name: wheelchair
|
||||
type: fa
|
||||
scale: 1
|
||||
flip_x: false
|
||||
flip_y: false
|
||||
offset:
|
||||
- -0.2
|
||||
- 0
|
||||
opacity: 1
|
||||
rotation: 180
|
376
old/style.html.j2
Normal file
376
old/style.html.j2
Normal file
@ -0,0 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script>
|
||||
<script src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
||||
|
||||
<title>Status Card</title>
|
||||
<style type="text/css">
|
||||
.danner_card
|
||||
{
|
||||
display: grid;
|
||||
flex-flow: column;
|
||||
border-radius: 0.1cm;
|
||||
width: 2.5in;
|
||||
height: 3.5in;
|
||||
background-color: #222222;
|
||||
padding: 0.2cm;
|
||||
box-sizing: border-box;
|
||||
page-break-inside: avoid;
|
||||
color: #473538;
|
||||
font-size: 0.7em;
|
||||
border-radius: 0.1cm;
|
||||
}
|
||||
|
||||
.danner_card > *
|
||||
{
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.1cm;
|
||||
padding: 0.1cm;
|
||||
border: 0.1em solid #444444;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.danner_item_card
|
||||
{
|
||||
grid-template-columns: auto 30%;
|
||||
grid-template-rows: 2.5em 8em auto 2.5em;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"image properties"
|
||||
"details details"
|
||||
"footer footer";
|
||||
grid-column-gap: 0.1em;
|
||||
grid-row-gap: 0.1em;
|
||||
}
|
||||
|
||||
.danner_ability_card
|
||||
{
|
||||
grid-template-columns: auto 30%;
|
||||
grid-template-rows: 2.5em 8em auto 2.5em;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"image playcost"
|
||||
"details details"
|
||||
"footer footer";
|
||||
grid-column-gap: 0.1em;
|
||||
grid-row-gap: 0.1em;
|
||||
}
|
||||
|
||||
.danner_monster_card
|
||||
{
|
||||
grid-template-columns: auto 10% 10% 10%;
|
||||
grid-template-rows: 2.5em 4em 4em auto 2.5em;
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"image hp act mov"
|
||||
"image cunning armor initiative"
|
||||
"details details details details"
|
||||
"footer footer footer footer";
|
||||
grid-column-gap: 0.1em;
|
||||
grid-row-gap: 0.1em;
|
||||
}
|
||||
|
||||
.danner_status_card
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 2.5em 12em auto 2em;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"image"
|
||||
"details"
|
||||
"footer";
|
||||
grid-column-gap: 0.1em;
|
||||
grid-row-gap: 0.1em;
|
||||
}
|
||||
|
||||
|
||||
.danner_card .danner_image
|
||||
{
|
||||
grid-area: image;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.danner_icon
|
||||
{
|
||||
float: right;
|
||||
display: inline-block;
|
||||
border: 0.13em solid;
|
||||
text-align: center;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
padding: 0.1em 0.1em;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0.12em 0.12em 0.15em;
|
||||
}
|
||||
|
||||
.danner_ability_icon
|
||||
{
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
min-width: 0.80em;
|
||||
width: 0.80em;
|
||||
min-height: 0.7em;
|
||||
float: left;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.danner_detail_table
|
||||
{
|
||||
display: grid;
|
||||
align-content: start;
|
||||
justify-content: start;
|
||||
grid-template-columns: 1.2em auto;
|
||||
grid-column-gap: 0.15em;
|
||||
grid-row-gap: 0.15em;
|
||||
}
|
||||
|
||||
.danner_detail_table .flavour
|
||||
{
|
||||
grid-column: 1 / span 2;
|
||||
align-self: end;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.danner_hitpoints_card > *
|
||||
{
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
text-align: center;
|
||||
font-size: 200%;
|
||||
background-image: url(https://img.clipartxtras.com/fcb11f4becbc40a67ab7cded24564e27_heart-jpg-clipart-heart-clip-art-microsoft-clipart-panda-free-heart-jpg-clipart_1969-1829.png);
|
||||
|
||||
}
|
||||
|
||||
/* With a background image, the style is more transparent */
|
||||
|
||||
.danner_background_image
|
||||
{
|
||||
border: 0px solid black;
|
||||
border-radius: 0.1em;
|
||||
background-size: cover;
|
||||
/* Specify background-image in XSL */
|
||||
}
|
||||
|
||||
.danner_background_image > *
|
||||
{
|
||||
background-color: ;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.1cm;
|
||||
padding: 0.1cm;
|
||||
border: 0.1em solid #444444;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
|
||||
<xsl:template match="/*">
|
||||
|
||||
|
||||
<div class="danner_card">
|
||||
|
||||
<!-- Build item card -->
|
||||
<xsl:if test="name() = 'item_card'">
|
||||
<xsl:attribute name="class">danner_card danner_item_card</xsl:attribute> <!-- Change class to this mouthful -->
|
||||
<div class="danner_title" style="grid-area: header;background-color:#d3d3ef">
|
||||
<span style="font-size:155%;"><xsl:value-of select="title"/></span>
|
||||
</div>
|
||||
<div class="danner_image" style="grid-area: image">
|
||||
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
||||
</div>
|
||||
<div class="danner_properties" style="grid-area: properties">
|
||||
<b>Properties:</b>
|
||||
<xsl:for-each select="property">
|
||||
<br/><xsl:value-of select="."/>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
<div class="danner_detail_table" style="grid-area: details">
|
||||
<xsl:for-each select="effect">
|
||||
<xsl:choose>
|
||||
<xsl:when test="@type='Consume'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-flask"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Splash'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-bomb"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Equip'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-tshirt"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Equip-Ability'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-user-cog"/>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-question"/>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
<div class="danner_ability_text" valign="top">
|
||||
<xsl:if test="name">
|
||||
<b><xsl:value-of select="name"/>: </b><br/>
|
||||
</xsl:if>
|
||||
<xsl:value-of select="details"/>
|
||||
<xsl:if test="proc">
|
||||
<br/>
|
||||
<span class="fas fa-share" style="margin-right: 0.2em"/>
|
||||
<xsl:value-of select="proc"/>
|
||||
</xsl:if>
|
||||
<b><xsl:value-of select="@type"/><xsl:if test="@type='Equip-Ability'">(<xsl:value-of select="@cost"/>)</xsl:if>:</b>
|
||||
<xsl:value-of select="."/>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
<xsl:if test="description">
|
||||
<div class="flavour">
|
||||
<xsl:value-of select="description"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
</div>
|
||||
<div class="danner_footer" style="grid-area: footer; background-color: #d3d3ef">
|
||||
<span style="background-image: url('icons/icon_gp.svg')" class="danner_icon"/>
|
||||
<xsl:value-of select="value"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Build monster card -->
|
||||
<xsl:if test="name() = 'monster_card'">
|
||||
<xsl:attribute name="class">danner_card danner_monster_card</xsl:attribute> <!-- Change class to this mouthful -->
|
||||
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
||||
<span style="font-size:155%"><xsl:value-of select="title"/></span>
|
||||
|
||||
<!-- Monster Type icons -->
|
||||
<xsl:for-each select="creature_type">
|
||||
<xsl:choose>
|
||||
<xsl:when test=".='Mechanical'">
|
||||
<div class="danner_icon fas fa-cog" style="border-color:#989898;background-color: #B7B7B7; color: #383838;"></div>
|
||||
</xsl:when>
|
||||
<xsl:when test=".='Biological'">
|
||||
<div class="danner_icon fas fa-leaf" style="border-color:#85A798;background-color: #A4C9B7; color: #354738;"></div>
|
||||
</xsl:when>
|
||||
<xsl:when test=".='Mist Monster'">
|
||||
<div class="danner_icon" style="border-color:#A798A7;background-color: #C9B7C9; color: #473847;">👹</div>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<div class="danner_icon fas fa-question" style="border-color:#A78598;background-color: #C9A4B7; color: #473538;"></div>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
|
||||
<div class="danner_image">
|
||||
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
||||
</div>
|
||||
|
||||
<!-- stats-->
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-heart"/><xsl:value-of select="hp"/>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-hand-paper"/><xsl:value-of select="act"/>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-shoe-prints"/><xsl:value-of select="mov"/>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-lightbulb"/><xsl:value-of select="cunning"/>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-shield-alt"/><xsl:value-of select="armor"/>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<div class="fas fa-hourglass"/><xsl:value-of select="initiative"/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div style="grid-area:details" class="danner_detail_table">
|
||||
<xsl:for-each select="ability">
|
||||
<xsl:choose>
|
||||
<xsl:when test="@type='Melee-Attack'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-location-arrow"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Magic-Attack'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-magic"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Passive'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-shield-alt"/>
|
||||
</xsl:when>
|
||||
<xsl:when test="@type='Reaction'">
|
||||
<div style="padding-top: 0.15em;text-align:center" class="fas fa-bolt"/>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<div style="padding-top: 0.15em;text-align:center; background-image: url('icons/icon_ability_attack.svg');" class="danner_ability_icon" valign="top"/>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
<div class="danner_ability_text" valign="top">
|
||||
<xsl:if test="name">
|
||||
<b><xsl:value-of select="name"/>: </b><br/>
|
||||
</xsl:if>
|
||||
<xsl:value-of select="details"/>
|
||||
<xsl:if test="proc">
|
||||
<br/>
|
||||
<span class="fas fa-share" style="margin-right: 0.2em"/>
|
||||
<xsl:value-of select="proc"/>
|
||||
</xsl:if>
|
||||
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<div class="danner_footer" style="grid-area: footer; background-color: #d3d3ef">
|
||||
<span style="background-image: url('icons/icon_gp.svg');" class="danner_icon"/>
|
||||
<xsl:value-of select="value"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Build ability card -->
|
||||
<xsl:if test="name() = 'ability_card'">
|
||||
<xsl:attribute name="class">danner_card danner_ability_card</xsl:attribute> <!-- Change class to this mouthful -->
|
||||
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
||||
<xsl:value-of select="name"/>
|
||||
</div>
|
||||
<div class="danner_image">
|
||||
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
||||
</div>
|
||||
<div style="grid-area:playcost; font-size: 80%; white-space: pre-wrap">
|
||||
<xsl:value-of select="playcost"/>
|
||||
</div>
|
||||
<div style="grid-area:details; white-space: pre-wrap">
|
||||
<xsl:value-of select="description"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Build HP card -->
|
||||
<xsl:if test="name() = 'hitpoints_card'">
|
||||
<xsl:attribute name="class">danner_card danner_hitpoints_card</xsl:attribute> <!-- Change class to this mouthful -->
|
||||
<div>
|
||||
<xsl:value-of select="value"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Build Status Card -->
|
||||
<xsl:if test="name() = 'status_card'">
|
||||
<xsl:attribute name="class">danner_card</xsl:attribute>
|
||||
<div class="danner_status_card danner_background_image">
|
||||
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image"/>'); </xsl:attribute>
|
||||
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
||||
<xsl:value-of select="name"/>
|
||||
<div style="float:right"><xsl:value-of select="class"/> Status Effect</div>
|
||||
</div>
|
||||
<div class="danner_description" style="grid-area: details">
|
||||
<xsl:value-of select="description"/>
|
||||
<br/><br/>
|
||||
<xsl:value-of select="cure"/>
|
||||
</div>
|
||||
|
||||
<div style="grid-area: footer; font-size: 90%; text-align: center; background-color:#d3d3ef">
|
||||
Keep in your play area. Do not discard on death.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</xsl:if>
|
||||
</div>
|
||||
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
17
style.html.j2
Normal file
17
style.html.j2
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script>
|
||||
<script src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
||||
|
||||
<title>Status Card</title>
|
||||
<style type="text/css">
|
||||
{{ css_data }}
|
||||
</style>
|
||||
|
||||
<xsl:template match="/*">
|
||||
|
||||
<div class="fjomp_card">
|
||||
</div>
|
||||
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
3
templates/card.xml.j2
Normal file
3
templates/card.xml.j2
Normal file
@ -0,0 +1,3 @@
|
||||
<ability_card>
|
||||
<yaml_data>{{ data }}</yaml_data>
|
||||
</ability_card>
|
Loading…
Reference in New Issue
Block a user