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_XML := $(patsubst cards/%.xml,cards/build/%.x.html,$(CARDS))
CARDS_DESTS := $(CARDS_DESTS_YAML) $(CARDS_DESTS_XML) CARDS_DESTS := $(CARDS_DESTS_YAML) $(CARDS_DESTS_XML)
.PHONY: all .PHONY: style
all: build/test_card.html build/test_card_rendered.html cards/build/all.html style: build/test_card.html build/test_card_rendered.html cards/build/all.html
.PHONY: cards .PHONY: cards
cards: $(CARDS_DESTS) cards/build/all.html cards: $(CARDS_DESTS) cards/build/all.html
@ -17,7 +17,7 @@ style: build/style.xsl
.PHONY: dev .PHONY: dev
dev: dev:
git ls-files | entr bash -c "make all" git ls-files | entr bash -c "make style"
.PHONY: dev_all .PHONY: dev_all
dev_cards: dev_cards:
@ -38,7 +38,7 @@ build/test_card.html: build/test_card.xml build/style.xsl
define PYTHON_MAKE_JINJA2_RENDERED_CARD define PYTHON_MAKE_JINJA2_RENDERED_CARD
from jinja2 import Environment, FileSystemLoader from jinja2 import Environment, FileSystemLoader
from markdown import markdown from markdown import markdown
import yaml, sys, glob import yaml, sys, glob, traceback
import xmltodict import xmltodict
with open("build/style.css") as f: css_data = f.read() with open("build/style.css") as f: css_data = f.read()
with open(sys.argv[2], "w") as f: with open(sys.argv[2], "w") as f:
@ -48,6 +48,9 @@ with open(sys.argv[2], "w") as f:
"markdown":markdown, "markdown":markdown,
"any":any, "any":any,
"all":all, "all":all,
"split":str.split,
"startswith":str.startswith,
"tail": lambda x: x[1:],
"cull_whitespace":(lambda x: " ".join(x.split())) }) "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"))): 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") 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 = xmltodict.parse(f2.read())
xml_data = xml.get("ability_card", {}) xml_data = xml.get("ability_card", {})
yaml_data = yaml.load(xml_data.get("yaml_data", "")) 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: 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: except Exception as ex:
data = f"<pre style=\"color:red;\">{ex}</pre>" data = f"<pre style=\"color:red;\">{ex}</pre>"
traceback.print_exc()
f.write("\n" + data) f.write("\n" + data)
endef endef

219
style.html.j2
View File

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

30
style.js
View File

@ -1,7 +1,7 @@
var md = window.markdownit(); var md = window.markdownit();
var context = { var context = {
'xml' : {}, 'xml' : {},
'card' : jsyaml.load(document.getElementById("yaml_data").innerHTML), 'yaml' : jsyaml.load(document.getElementById("yaml_data").innerHTML),
'alert' : alert, 'alert' : alert,
}; };
@ -13,28 +13,6 @@ for (var i=0; i < xml_data_items.length; i++) {
context.xml[key] = val; 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([], { var env = new nunjucks.Environment([], {
autoescape: true, autoescape: true,
trimBlocks: true, trimBlocks: true,
@ -58,6 +36,12 @@ env.addFilter('all', function(iterable) {
} }
return true; 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 { try {
rendered = env.renderString(jinja_template, context); rendered = env.renderString(jinja_template, context);

94
style.scss
View File

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

34
test_card.yaml
View File

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