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

Did someething

This commit is contained in:
Peder Bergebakken Sundt 2019-09-09 18:48:15 +02:00
parent fbe01f60b5
commit c41553fac8
4 changed files with 219 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Makefile
View File

@ -1,10 +1,11 @@
all: build/out.html
out.html: card.yaml build/card.xls style.html.j2 style.css build/out.html: card.yaml build/card.xml build/style.xsl style.css
xsltproc \ xsltproc \
--output out.html \ -o build/out.html \
style.html.j2 \ build/style.xsl \
build/card.xls build/card.xml
define TMP_PYTHON_PROG define TMP_PYTHON_PROG
@ -20,14 +21,21 @@ out = Environment(
#print(out) #print(out)
with open("build/card.xls", "w") as f: with open("build/card.xml", "w") as f:
f.write(data) f.write(out)
endef endef
export TMP_PYTHON_PROG export TMP_PYTHON_PROG
build/card.xls: build/card.xml:
python -c "$$TMP_PYTHON_PROG" python -c "$$TMP_PYTHON_PROG"
build/style.xsl: style.html.j2
cp style.html.j2 build/style.xsl
.PHONY: dev
dev:
git ls-files | entr make all
.PHONY: clean .PHONY: clean
clean: clean:

128
old/style.html.j2
View File

@ -1,12 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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"> XSLT file for the status card style. This file is shared between all cards of this style.
.danner_card
{ This file transforms XML into renderable XHTML. The output must be a valid XHTML document.
If you want something more advanced than what XSLT can offer, feel free to go nuts with javascript here.
The XML can easily be converted to JSON using XSLT (https://www.bjelic.net/2012/08/01/coding/convert-xml-to-json-using-xslt/),
and if you just put that output into a <script> tag you have everything you need in javascript.
I strongly urge styles to produce an empty card even if the input is empty or mismatching.
The preview window looks sad otherwise.
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:template match="/*">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Status Card</title>
<style type="text/css">
/**
* The Danner style of cards. Using grid layouts.
**/
.danner_card
{
display: grid; display: grid;
flex-flow: column; flex-flow: column;
border-radius: 0.1cm; border-radius: 0.1cm;
@ -19,20 +39,20 @@
color: #473538; color: #473538;
font-size: 0.7em; font-size: 0.7em;
border-radius: 0.1cm; border-radius: 0.1cm;
} }
.danner_card > * .danner_card > *
{ {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0.1cm; border-radius: 0.1cm;
padding: 0.1cm; padding: 0.1cm;
border: 0.1em solid #444444; border: 0.1em solid #444444;
background-color: #eeeeee; background-color: #eeeeee;
} }
.danner_item_card .danner_item_card
{ {
grid-template-columns: auto 30%; grid-template-columns: auto 30%;
grid-template-rows: 2.5em 8em auto 2.5em; grid-template-rows: 2.5em 8em auto 2.5em;
grid-template-areas: grid-template-areas:
@ -42,10 +62,10 @@
"footer footer"; "footer footer";
grid-column-gap: 0.1em; grid-column-gap: 0.1em;
grid-row-gap: 0.1em; grid-row-gap: 0.1em;
} }
.danner_ability_card .danner_ability_card
{ {
grid-template-columns: auto 30%; grid-template-columns: auto 30%;
grid-template-rows: 2.5em 8em auto 2.5em; grid-template-rows: 2.5em 8em auto 2.5em;
grid-template-areas: grid-template-areas:
@ -55,10 +75,10 @@
"footer footer"; "footer footer";
grid-column-gap: 0.1em; grid-column-gap: 0.1em;
grid-row-gap: 0.1em; grid-row-gap: 0.1em;
} }
.danner_monster_card .danner_monster_card
{ {
grid-template-columns: auto 10% 10% 10%; grid-template-columns: auto 10% 10% 10%;
grid-template-rows: 2.5em 4em 4em auto 2.5em; grid-template-rows: 2.5em 4em 4em auto 2.5em;
grid-template-areas: grid-template-areas:
@ -69,10 +89,10 @@
"footer footer footer footer"; "footer footer footer footer";
grid-column-gap: 0.1em; grid-column-gap: 0.1em;
grid-row-gap: 0.1em; grid-row-gap: 0.1em;
} }
.danner_status_card .danner_status_card
{ {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: 2.5em 12em auto 2em; grid-template-rows: 2.5em 12em auto 2em;
@ -83,19 +103,19 @@
"footer"; "footer";
grid-column-gap: 0.1em; grid-column-gap: 0.1em;
grid-row-gap: 0.1em; grid-row-gap: 0.1em;
} }
.danner_card .danner_image .danner_card .danner_image
{ {
grid-area: image; grid-area: image;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
} }
.danner_icon .danner_icon
{ {
float: right; float: right;
display: inline-block; display: inline-block;
border: 0.13em solid; border: 0.13em solid;
@ -105,10 +125,10 @@
padding: 0.1em 0.1em; padding: 0.1em 0.1em;
border-radius: 2em; border-radius: 2em;
box-shadow: 0.12em 0.12em 0.15em; box-shadow: 0.12em 0.12em 0.15em;
} }
.danner_ability_icon .danner_ability_icon
{ {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
@ -117,27 +137,27 @@
min-height: 0.7em; min-height: 0.7em;
float: left; float: left;
margin-right: 0.2em; margin-right: 0.2em;
} }
.danner_detail_table .danner_detail_table
{ {
display: grid; display: grid;
align-content: start; align-content: start;
justify-content: start; justify-content: start;
grid-template-columns: 1.2em auto; grid-template-columns: 1.2em auto;
grid-column-gap: 0.15em; grid-column-gap: 0.15em;
grid-row-gap: 0.15em; grid-row-gap: 0.15em;
} }
.danner_detail_table .flavour .danner_detail_table .flavour
{ {
grid-column: 1 / span 2; grid-column: 1 / span 2;
align-self: end; align-self: end;
font-size: 70%; font-size: 70%;
} }
.danner_hitpoints_card > * .danner_hitpoints_card > *
{ {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
@ -145,20 +165,20 @@
font-size: 200%; 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); 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 */ /* With a background image, the style is more transparent */
.danner_background_image .danner_background_image
{ {
border: 0px solid black; border: 0px solid black;
border-radius: 0.1em; border-radius: 0.1em;
background-size: cover; background-size: cover;
/* Specify background-image in XSL */ /* Specify background-image in XSL */
} }
.danner_background_image > * .danner_background_image > *
{ {
background-color: ; background-color: ;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
@ -166,11 +186,13 @@
padding: 0.1cm; padding: 0.1cm;
border: 0.1em solid #444444; border: 0.1em solid #444444;
background-color: #eeeeee; background-color: #eeeeee;
} }
</style>
<xsl:template match="/*">
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
</head>
<body>
<div class="danner_card"> <div class="danner_card">
@ -372,5 +394,9 @@
</xsl:if> </xsl:if>
</div> </div>
</body>
</html>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

1
style.css
View File

@ -0,0 +1 @@
todo

15
style.html.j2
View File

@ -1,16 +1,23 @@
<!DOCTYPE html> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" />
<xsl:template match="/*">
<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;
</xsl:text>
<script src="https://raw.githubusercontent.com/nodeca/js-yaml/master/dist/js-yaml.min.js"></script> <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> <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"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<title>Status Card</title> <title>Status Card</title>
<style type="text/css"> <style type="text/css">
{{ css_data }} <xsl:include href="style.css"/>
</style> </style>
<xsl:template match="/*">
<div class="fjomp_card"> <div class="fjomp_card">
asdasd<br/>
asdasd<br/>
asdasd<br/>
asdasd<br/>
</div> </div>
</xsl:template> </xsl:template>