pederbs
/
RPGs3_card_insanity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AAAAAAAAAAAAAAAAAA

This commit is contained in:
Peder Bergebakken Sundt 2019-10-14 21:40:50 +02:00
parent 96d1c66384
commit d86c7c8a81
5 changed files with 166 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Makefile
View File

@ -6,8 +6,8 @@ CARDS_DESTS_YAML := $(patsubst cards/%.yaml,cards/build/%.html,$(CARDS))
CARDS_DESTS_XML := $(patsubst cards/%.xml,cards/build/%.x.html,$(CARDS))
CARDS_DESTS := $(CARDS_DESTS_YAML) $(CARDS_DESTS_XML)
.PHONY: all
all: build/test_card.html build/test_card_rendered.html cards/build/all.html
.PHONY: style
style: build/test_card.html build/test_card_rendered.html cards/build/all.html
.PHONY: cards
cards: $(CARDS_DESTS) cards/build/all.html
@ -17,7 +17,7 @@ style: build/style.xsl
.PHONY: dev
dev:
git ls-files | entr bash -c "make all"
git ls-files | entr bash -c "make style"
.PHONY: dev_all
dev_cards:
@ -38,7 +38,7 @@ build/test_card.html: build/test_card.xml build/style.xsl
define PYTHON_MAKE_JINJA2_RENDERED_CARD
from jinja2 import Environment, FileSystemLoader
from markdown import markdown
import yaml, sys, glob
import yaml, sys, glob, traceback
import xmltodict
with open("build/style.css") as f: css_data = f.read()
with open(sys.argv[2], "w") as f:
@ -48,6 +48,9 @@ with open(sys.argv[2], "w") as f:
"markdown":markdown,
"any":any,
"all":all,
"split":str.split,
"startswith":str.startswith,
"tail": lambda x: x[1:],
"cull_whitespace":(lambda x: " ".join(x.split())) })
for filename in ([sys.argv[1]] if sys.argv[1] != "ALL" else sorted(glob.glob("cards/*.yaml") + glob.glob("cards/*.xml"))):
if sys.argv[1] == "ALL": f.write(f"\n\n<h1>{filename}</h1>\n")
@ -59,22 +62,11 @@ with open(sys.argv[2], "w") as f:
xml = xmltodict.parse(f2.read())
xml_data = xml.get("ability_card", {})
yaml_data = yaml.load(xml_data.get("yaml_data", ""))
if xml_data.get("image"):
yaml_data["figures"] = [{
'name': xml_data["image"] if (xml_data["image"][:4] == "http") else xml_data["image"].split(":", 1)[1],
'type': "url" if (xml_data["image"][:4] == "http") else xml_data["image"].split(":", 1)[0],
'scale': 1.0,
'flip_x': False,
'flip_y': False,
'offset': [0.0, 0.0],
'opacity': 1,
'rotation': 0,
}] + yaml_data.get("figures", [])
try:
data = e.get_template('style.html.j2').render(card=yaml_data, xml=xml_data)
data = e.get_template('style.html.j2').render(yaml=yaml_data, xml=xml_data)
except Exception as ex:
data = f"<pre style=\"color:red;\">{ex}</pre>"
traceback.print_exc()
f.write("\n" + data)
endef

219
style.html.j2
View File

@ -1,34 +1,49 @@
{% macro figure_layer(figure) %}
{% set figure_style %}{% filter cull_whitespace %}
{% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
{% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
{% if figure.opacity!=1 %}
opacity: {{ figure.opacity }};
{% endif %}
{% if figure.color!=1 %}
color: {{ figure.color }};
{% endif %}
transform:
{% if figure.offset|any %}translate({{ figure.offset[0]*100 }}%, {{ figure.offset[1]*100 }}%){% endif %}
{% if figure.rotation %}rotate({{ figure.rotation }}deg){% endif %}
{% if figure.flip_x %}scaleX(-1){% endif %}
{% if figure.flip_y %}scaleY(-1){% endif %}
{% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
{% if figure.offset and figure.offset|any %}
translate({{ figure.offset[0]*100 }}%, {{ figure.offset[1]*100 }}%)
{% endif %}
{% if figure.rotation %}
rotate({{ figure.rotation }}deg)
{% endif %}
{% if figure.flip_x %}
scaleX(-1)
{% endif %}
{% if figure.flip_y %}
scaleY(-1)
{% endif %}
{% if figure.scale and figure.scale!=1 %}
scale({{figure.scale | string | replace("[", "") | replace("]", "") }})
{% endif %}
;
{% endfilter %}{% endset %}
<div style="{{ figure_style }}">
{% if figure.type == "material-icons" %}
<div class="layer" style="{{ figure_style }}">
{% if figure.source == "material-icons" %}
{# https://material.io/icons/ #}
<i class="material-icons figure">{{ figure.name }}</i>
{% elif figure.type == "mdi" %}
{% elif figure.source == "mdi" %}
{# https://materialdesignicons.com/ #}
<i class="mdi mdi-{{ figure.name }}"></i>
{% elif figure.type == "fa" %}
{% elif figure.source == "fa" %}
{# http://fontawesome.io/icons/ #}
<i class="fa fa-{{ figure.name }}"></i>
{% elif figure.type == "lnr" %}
{% elif figure.source == "lnr" %}
{# https://linearicons.com/free #}
<span class="lnr lnr-{{ figure.name }}"></span>
{% elif figure.type == "oi" %}
{% elif figure.source == "oi" %}
{# https://useiconic.com/open #}
<span class="oi" data-glyph="{{ figure.name }}"></span>
{% elif figure.type == "svg" %}
{# /cards/svg #}
{% elif figure.source == "svg" %}
{# pvv.ntnu.no/~pederbs/cards/svg #}
{% if figure.color == true %}
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}">
{% elif figure.color %}
@ -36,16 +51,17 @@
{% else %}
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored">
{% endif %}
{% elif figure.type == "img" %}
{# /cards/img #}
{% elif figure.source in ["img", "emoji"] %}
{# pvv.ntnu.no/~pederbs/cards/img #}
{# /cards/emoji #}
{% if figure.color == true %}
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored">
<img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}" class="colored">
{% elif figure.color %}
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
<img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
{% else %}
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
<img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}">
{% endif %}
{% elif figure.type == "url" %}
{% elif figure.source == "url" %}
{% if figure.color == true %}
<img src="{{ figure.name }}" class="colored">
{% elif figure.color %}
@ -57,7 +73,7 @@
</div>
{% endmacro %}
{% macro named_icon_to_emoji(name) %}
{% macro named_symbol_to_emoji(name) %}
{% if "AIR" in name | upper %} 🌪
{% elif "ALCHEMY" in name | upper %} ⚗️
{% elif "ANIMAL" in name | upper %} 🐾
@ -83,105 +99,96 @@
{% endif %}
{% endmacro %}
<div class="fjomp_card{{" " + card.style if card.style}}">
<div class="fjomp_card{{" " + yaml.style if yaml.style}}">
<header>
{{ card.title or xml.name }}
{{ yaml.name or xml.name }}
</header>
{% if card.icon %}
<div class="icon">
{% if " " in card.icon %}
{% for icon in card.icon.split(" ") %}
{{ named_icon_to_emoji(icon) }}
{% endfor %}
{% else %}
{{ named_icon_to_emoji(card.icon) }}
{% endif %}
</div>
{% if yaml.symbol %}
<div class="symbol">
{% if " " in yaml.symbol %}
{% for symbol in yaml.symbol | split(" ") %}
{{ named_symbol_to_emoji(symbol) }}
{% endfor %}
{% else %}
{{ named_symbol_to_emoji(yaml.symbol) }}
{% endif %}
</div>
{% elif xml.symbol %}
<div class="icon">
{{ xml.symbol }}
</div>
<div class="symbol">
{{ xml.symbol }}
</div>
{% endif %}
<figure>
{% for figure in card.figures %}
{{ figure_layer(figure) }}
{% endfor %}
</figure>
<aside>
<ul>
{#
{% if card.cp %}
<li>CP: {{ card.cp }}</li>
{% endif %}
{% if card.power %}
<li>Power: {{ card.power }}</li>
{% endif %}
{% if card.difficulty %}
<li>Difficulty: {{ card.difficulty }}</li>
{% endif %}
{% if card.playcost %}
<li>Playcost: {{ card.playcost }}</li>
{% endif %}
{% if card.duration %}
<li>Duration: {{ card.duration }}</li>
{% endif %}
{% if card.range %}
<li>Range: {{ card.range }}</li>
{% endif %}
#}
{% if xml.playcost %}
{% for playcost in xml.playcost.split(",") %}
<li>{{ playcost }}</li>
{% endfor %}
{% endif %}
{% for property in card.properties %}
<li>{{ property }}</li>
{% for figure in yaml.figures %}
{{ figure_layer(figure) }}
{% endfor %}
</ul>
</aside>
<div class="costbar">
{% for cost in card.costs %}
<section>
{% if cost.split(" ") | length == 2 and cost.split(" ")[0] | int(-1) != -1 %}
<big>{{ cost.split(" ")[0] }}</big><br>
<small>{{ cost.split(" ")[1] }}</small>
{% else %}
{{ cost }}
{% if xml.image %}
{{ figure_layer({
'name': xml.image if xml.image | startswith("http") else xml.image | split(":") | tail | join(":"),
'source': "url" if xml.image | startswith("http") else xml.image | split(":") | first
}) }}
{% endif %}
</figure>
<div class="playcosts">
<ul>
{% if xml.playcost %}
{% for playcost in xml.playcost.split(",") %}
<li>{{ playcost }}</li>
{% endfor %}
{% endif %}
{% if yaml.playcost %}
{% for playcost in yaml.playcost.split(",") %}
<li>{{ playcost }}</li>
{% endfor %}
{% endif %}
{% for playcost in yaml.playcosts %}
<li>{{ playcost }}</li>
{% endfor %}
</ul>
</div>
<div class="costbar">
{% for cost in yaml.costs %}
<section>
{% if cost.split(" ") | length == 2 and cost.split(" ")[0] | int(-1) != -1 %}
<big>{{ cost.split(" ")[0] }}</big><br>
<small>{{ cost.split(" ")[1] }}</small>
{% else %}
{{ cost }}
{% endif %}
</section>
{% endfor %}
{% for label, data in [
["Difficulty", xml.difficulty],
["Power", xml.power],
["Range", xml.range],
["Duration", xml.duration],
["CP", xml.cp]
["Difficulty", xml.difficulty or yaml.difficulty],
["Power", xml.power or yaml.power],
["Range", xml.range or yaml.range],
["Duration", xml.duration or yaml.duration],
["CP", xml.cp or yaml.cp]
] %}
{% if data %}
<section>
<big>{{ data }}</big><br>
<small>{{ label }}</small>
</section>
<section>
<big>{{ data }}</big><br>
<small>{{ label }}</small>
</section>
{% endif %}
{% endfor %}
</div>
<div class="description">
{% if card.flavor %}
<center><i>"{{ card.flavor }}"</i></center>
{% endif %}
{% if card.description %}
<center>{{ card.description | markdown | safe }}</center>
{% elif xml.description %}
<center>{{ xml.description | markdown | safe }}</center>
{% endif %}
{% if card.steps %}
<ul>
{% for step in card.steps %}
<li>{{ step }}</li>
{% endfor %}
</ul>
{% endif %}
{% if yaml.flavor %}
<center><i>"{{ yaml.flavor }}"</i></center>
{% endif %}
{% if yaml.description %}
<center>{{ yaml.description | markdown | safe }}</center>
{% elif xml.description %}
<center>{{ xml.description | markdown | safe }}</center>
{% endif %}
{% if yaml.steps %}
<ul>
{% for step in yaml.steps %}
<li>{{ step }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{# <br><pre>{{ card }}</pre> #}

30
style.js
View File

@ -1,7 +1,7 @@
var md = window.markdownit();
var context = {
'xml' : {},
'card' : jsyaml.load(document.getElementById("yaml_data").innerHTML),
'yaml' : jsyaml.load(document.getElementById("yaml_data").innerHTML),
'alert' : alert,
};
@ -13,28 +13,6 @@ for (var i=0; i < xml_data_items.length; i++) {
context.xml[key] = val;
}
function is_set(asd) {
return !(typeof asd === 'undefined' || asd.length === 0);
}
// set the figure by the
if (!is_set(context.card.figures) && context.xml.image ) {
context.card.figures = [{
'name': (context.xml.image.substr(0, 4) == "http")
? context.xml.image
: context.xml.image.split(":").slice(1).join(":"),
'type': (context.xml.image.substr(0, 4) == "http")
? "url"
: context.xml.image.split(":")[0],
'scale': 1.0,
'flip_x': false,
'flip_y': false,
'offset': [0.0, 0.0],
'opacity': 1,
'rotation': 0,
}].concat(context.card.figures);
}
var env = new nunjucks.Environment([], {
autoescape: true,
trimBlocks: true,
@ -58,6 +36,12 @@ env.addFilter('all', function(iterable) {
}
return true;
});
env.addFilter('startswith', function(string, match) {
return string.slice(0, match.length) === match;
});
env.addFilter('tail', function(sequence) {
return sequence.slice(1)
});
try {
rendered = env.renderString(jinja_template, context);

94
style.scss
View File

@ -3,11 +3,11 @@
width: 2.5in;
height: 3.5in;
box-sizing: border-box;
border-radius: 2mm;
border-width: 2mm;
border-radius: 0mm;
border-width: 0.3mm;
border-color: black;
border-style: solid;
background-color: #444;
background-color: #fff;
overflow: hidden;
font-size: 2.5mm;
@ -17,41 +17,40 @@
grid-template-columns: auto 1fr 0.9in;
grid-template-rows: 1.9em var(--figure-size) 2.1em auto;
grid-template-areas:
"icon title title"
"figure figure properties"
"symbol title title"
"figure figure playcosts"
"costbar costbar costbar"
"description description description";
header {
grid-area: title;
font-size: 1.8em;
line-height: 1em;
margin-top: -1mm;
margin-left: -1em;
border-radius: 1mm 1mm 0 0;
text-align: center;
background-color: #222;
background-color: #ddd;
border-radius: 0;
color: white;
color: #333;
}
.icon {
grid-area: icon;
.symbol {
grid-area: symbol;
text-align: center;
background-color: #222;
color: white;
background-color: #ddd;
color: #333;
padding-top: 0.6mm;
padding-left: 0.8mm;
white-space: nowrap;
}
figure {
grid-area: figure;
background-color: #333;
background-color: #fff;
overflow: hidden;
position: relative;
border-radius: 0;
margin: 0;
div {
--figure-color: #bbb;
.layer {
--figure-color: #555;
color: var(--figure-color);
position: absolute;
top:0;right:0;left:0;bottom:0;
@ -64,8 +63,8 @@
height: 100%;
}
img {
width: calc(var(--figure-size) * 0.9);
height: calc(var(--figure-size) * 0.9);
width: calc(var(--figure-size));
height: calc(var(--figure-size));
object-fit: contain;
}
img.colored {
@ -79,32 +78,31 @@
font-size: calc(var(--figure-size) * 0.9);
line-height: var(--figure-size);
}
.lnr{
.lnr {
font-size: calc(var(--figure-size) * 0.8);
line-height: var(--figure-size);
line-height: calc(var(--figure-size) * 0.95);
}
}
}
aside {
grid-area: properties;
border-left: solid 0.3mm black;
background-color: #aaa;
.playcosts {
grid-area: playcosts;
border-left: solid 0.3mm #ccc;
background-color: #ddd;
color: #444 ;
padding: 0.5mm;
ul {
margin:0;
list-style-type: none;
padding: 0;
li{
}
li {}
}
}
.costbar {
grid-area: costbar;
border-radius: 0;
background-color: black;
color:white;
background-color: #555;
color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -123,7 +121,7 @@
grid-area: description;
margin: 1mm;
border-radius: 1mm;
background-color: #aaa;
background-color: #ddd;
ul, ol {
padding-left: 1.5em;
@ -134,51 +132,17 @@
}
}
.fjomp_card.white {
border-radius: 0mm;
border-width: 0.3mm;
background-color: #fff;
header {
margin-top: 0;
background-color: #ddd;
color: #333;
}
.icon {
grid-area: icon;
background-color: #ddd;
color: #333;
}
figure {
background-color: #fff;
div {
--figure-color: #555;
}
}
aside {
border-left: solid 0.3mm #ccc;
background-color: #ddd;
color: #444 ;
}
.costbar {
background-color: #555;
color: white;
}
.description {
background-color: #ddd;
}
}
.fjomp_card.item {
--figure-size: 1.35in;
--figure-size: 1.5in;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon title"
"symbol title"
"figure figure"
"costbar costbar"
"description description";
aside {
.playcosts {
display: none;
}
}

34
test_card.yaml
View File

@ -1,12 +1,12 @@
title: Hit enemy
icon: defence
style: white
name: Hit enemy
symbol: defence
style: white item
tags:
- combat
costs:
- 2 ACT
- 1 COMBO
properties:
playcosts:
- 'Element: fire'
- BODY+5 POWER
flavor: Enemies sure are squishy
@ -16,26 +16,8 @@ steps:
- Do A
- Do A
- Then B
notes: ''
figures:
- name: batman
type: svg
color: true
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
- name: piuy/chicken
source: img
scale: 2
notes: ''