restructuring for poetry-slam
This commit is contained in:
evilchili
@@ -0,0 +1,252 @@
|
||||
body {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
position : relative;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.disabled:after {
|
||||
position :absolute;
|
||||
left : 0;
|
||||
top : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
content :' ';
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
margin: 1rem auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000055;
|
||||
}
|
||||
a:visited, a:active {
|
||||
color: #000055;
|
||||
}
|
||||
|
||||
|
||||
ul.nav {
|
||||
background: #e7e7e7;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
list-style-type: none;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.nav li {
|
||||
display: inline;
|
||||
text-align: center;
|
||||
background: #FFF;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#sheet_container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#character_sheet {
|
||||
margin-bottom:3rem;
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#sheet_container .banner {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1fr;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
#sheet_container .banner #portrait {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
#controls {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.temp_hp input {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
#sheet_container h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sheet_container .sidebar {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
#sheet_container .sidebar .card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#sheet_container .sidebar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#sheet_container .sidebar ul > li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#hp {
|
||||
grid-row-start: 1;
|
||||
grid-column: 7;
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
#saves {
|
||||
grid-row-start: 2;
|
||||
grid-column: 3;
|
||||
grid-column-start: span 2;
|
||||
}
|
||||
|
||||
#proficiency {
|
||||
grid-row-start: 2;
|
||||
grid-column: 5;
|
||||
}
|
||||
|
||||
#initiative {
|
||||
grid-row-start: 2;
|
||||
grid-column: 6;
|
||||
}
|
||||
#ac {
|
||||
grid-row-start: 2;
|
||||
grid-column: 7;
|
||||
}
|
||||
#speed {
|
||||
grid-row-start: 2;
|
||||
grid-column: 8;
|
||||
}
|
||||
|
||||
#skills {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 50;
|
||||
grid-column: 1;
|
||||
grid-column-start: span 2;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
#actions {
|
||||
grid-row-start: 3;
|
||||
grid-column: 4;
|
||||
grid-column-start: span 6;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(50px, 150px) 1fr;
|
||||
grid-gap: 0rem;
|
||||
}
|
||||
table th {
|
||||
grid-column-start: span 4;
|
||||
white-space: nowrap;
|
||||
padding-right: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding-right: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 0.75em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#sheet_container input,
|
||||
#sheet_container select,
|
||||
#sheet_container textarea {
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#sheet_container input#name {
|
||||
font-size: 2.0rem;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(6rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid #e7e7e7;
|
||||
border-radius: 4px;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.card input {
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
ul.multiclass {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.multiclass li {
|
||||
display: inline;
|
||||
}
|
||||
.multiclass label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
ul#class_attributes {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul#class_attributes li {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr 1fr;
|
||||
}
|
||||
|
||||
ul#class_attributes span,
|
||||
ul#class_attributes label {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
ul#class_attributes label {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul#class_attributes span select {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
function getTraitModifiersForStat(stat) {
|
||||
var mods = {};
|
||||
for (const prop in TRAITS) {
|
||||
var props = [];
|
||||
for (const desc in TRAITS[prop]) {
|
||||
trait = TRAITS[prop][desc]
|
||||
if (trait.type == "stat" && trait.target == stat) {
|
||||
props.push(trait);
|
||||
}
|
||||
}
|
||||
if (props) {
|
||||
mods[prop] = props;
|
||||
}
|
||||
}
|
||||
return mods;
|
||||
}
|
||||
|
||||
function proficiency() {
|
||||
return parseInt(document.getElementById('proficiency_bonus').innerHTML);
|
||||
}
|
||||
|
||||
function bonus(stat) {
|
||||
return parseInt(document.getElementById(stat + '_bonus').innerHTML);
|
||||
}
|
||||
|
||||
function setStatBonus(stat) {
|
||||
var score = document.getElementById(stat).value;
|
||||
var bonus = Math.floor((score - 10) / 2);
|
||||
document.getElementById(stat + '_bonus').innerHTML = bonus;
|
||||
}
|
||||
|
||||
function applyStatModifiers(stat) {
|
||||
var score = parseInt(document.getElementById(stat).value);
|
||||
var modsForStat = getTraitModifiersForStat(stat);
|
||||
for (desc in modsForStat) {
|
||||
for (idx in modsForStat[desc]) {
|
||||
var value = modsForStat[desc][idx].value;
|
||||
console.log(`Ancestry Trait "${desc}" grants ${value} to ${stat}`);
|
||||
score += parseInt(value);
|
||||
}
|
||||
}
|
||||
document.getElementById(stat).value = score;
|
||||
}
|
||||
|
||||
function setProficiencyBonus() {
|
||||
var score = document.getElementById('level').value;
|
||||
var bonus = Math.ceil(1 + (0.25 * score));
|
||||
document.getElementById('proficiency_bonus').innerHTML = bonus;
|
||||
}
|
||||
|
||||
function setSpellSaveDC() {
|
||||
var score = 8 + proficiency() + bonus('wis');
|
||||
document.getElementById('spell_save_dc').innerHTML = score;
|
||||
}
|
||||
|
||||
(function () {
|
||||
const stats = ['str', 'dex', 'con', 'int', 'wis', 'cha'];
|
||||
stats.forEach(applyStatModifiers);
|
||||
stats.forEach(setStatBonus);
|
||||
setProficiencyBonus();
|
||||
// setSpellSaveDC();
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,30 @@
|
||||
{% from "list.html" import build_list %}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{ c.config.project_name }}{% block title %}{% endblock %}</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="og:provider_name" content="{{ c.config.project_name }}">
|
||||
{% for resource in c.resources %}
|
||||
<link rel='preload' href="{{c.routes.static}}/{{resource['uri']}}" as="{{resource['type']}}"/>
|
||||
{% if resource['type'] == 'style' %}
|
||||
<link rel='stylesheet' href="{{c.routes.static}}/{{resource['uri']}}" />
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% block headers %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{{ build_list(c) }}
|
||||
<div id='content'>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% block debug %}{% endblock %}
|
||||
{% block script %}{% endblock %}
|
||||
{% for resource in c.resources %}
|
||||
{% if resource['type'] == 'script' %}
|
||||
<script type="text/javascript" src="{{c.routes.static}}/{{resource['uri']}}"></script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,197 @@
|
||||
{% extends "base.html" %}
|
||||
{% set DISABLED = False if c.record.id else True %}
|
||||
|
||||
{% macro field(name, disabled=False) %}
|
||||
{% set default_value = c.record[name] if c.record.id else c.form[name].default %}
|
||||
{{ c.form[name](disabled=disabled, **{'data-initial_value': default_value}) }}
|
||||
{% endmacro %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div id='sheet_container'>
|
||||
<form name="character_sheet" method="post" novalidate class="form">
|
||||
|
||||
<div class='banner'>
|
||||
<div><img id='portrait' /></div>
|
||||
<div>
|
||||
{{ field('name') }}
|
||||
{{ field('ancestry_id') }}
|
||||
{% for obj in c.form['classes'] %}
|
||||
{{ obj(class='multiclass') }}
|
||||
{% endfor %}
|
||||
<span class='label'>Add Class:</span> {{ c.form['newclass'](class='multiclass') }}
|
||||
|
||||
|
||||
<div id='controls'>
|
||||
{{ c.form.save }} {{ c.form.delete }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='character_sheet' {% if not c.record.id %}class='disabled'{% endif %} >
|
||||
<div class='stats'>
|
||||
{% for stat in ['str', 'dex', 'con', 'int', 'wis', 'cha'] %}
|
||||
<div class='card'>
|
||||
<div class='label'>{{ c.form[stat].label }}</div>
|
||||
{{ field(stat, DISABLED) }}
|
||||
<div id='{{stat}}_bonus'></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div id='hp' class='card'>
|
||||
<div class='label'>HP</div>
|
||||
{{ field('hit_points', DISABLED) }} / {{ field('max_hit_points', DISABLED) }}
|
||||
<div id='temp_hp'>
|
||||
<span class='label'>TEMP</span> {{ field('temp_hit_points', DISABLED) }}
|
||||
</div>
|
||||
</div>
|
||||
<div id='skills'>
|
||||
<div class='label'>Skills</div>
|
||||
<table>
|
||||
{% for skill in c.record.skills %}
|
||||
<tr><td>{{ skill }}</td><td>3</td></tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
<div id='saves' class='card'>
|
||||
<div class='label'>Saving Throws</div>
|
||||
{% for save in c.record.saving_throws %}
|
||||
{{ save }} 3
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div id='proficiency' class='card'>
|
||||
<div class='label'>PROF</div>
|
||||
<div id='proficiency_bonus'></div>
|
||||
<div class='label'>BONUS</div>
|
||||
</div>
|
||||
<div id="ac" class='card'>
|
||||
<div class='label'>Armor</div>
|
||||
{{ field('armor_class', DISABLED) }}
|
||||
<div class='label'>Class</div>
|
||||
</div>
|
||||
<div id='initiative' class='card'>
|
||||
<div class='label'>Initiative</div>
|
||||
<span id='initiative_bonus'>3 </span>
|
||||
<div class='label'>Bonus</div>
|
||||
</div>
|
||||
<div id='speed' class='card'>
|
||||
<div class='label'>Speed</div>
|
||||
{{ field('speed', DISABLED) }}
|
||||
</div>
|
||||
<div id="actions" class='card'>
|
||||
<table>
|
||||
<tr>
|
||||
<td class='label' colspan='2'>Actions</td>
|
||||
<td class='label'>To Hit</td>
|
||||
<td class='label'>Range</td>
|
||||
<td class='label'>Targets</td>
|
||||
<td class='label'>Damage</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Attack</th>
|
||||
<td>Dagger</td>
|
||||
<td>+7</td>
|
||||
<td>5</td>
|
||||
<td>1</td>
|
||||
<td>1d4+3 slashing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Attack</th>
|
||||
<td>Sabetha's Fans</td>
|
||||
<td>+7</td>
|
||||
<td>5</td>
|
||||
<td>1</td>
|
||||
<td>2d6 slashing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Spell</th>
|
||||
<td>Eldritch Blast</td>
|
||||
<td>+5</td>
|
||||
<td>120</td>
|
||||
<td>1</td>
|
||||
<td>1d10 force</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='label' colspan='2'>Bonus Actions</td>
|
||||
<td class='label'>To Hit</td>
|
||||
<td class='label'>Range</td>
|
||||
<td class='label'>Targets</td>
|
||||
<td class='label'>Damage</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<span class='note'>
|
||||
Attack (1 per Action), Cast a Spell, Dash, Disengage, Dodge, Grapple,<br>Help, Hide, Improvise, Ready, Search, Shove, or Use an Object
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
|
||||
<div class='sidebar'>
|
||||
<div class='card'>
|
||||
<div class='label'>Inspiration</div>
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='card'>
|
||||
<div class='label'>Conditions</div>
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='card'>
|
||||
<div class='label'>Attributes</div>
|
||||
{% if c.record.class_attributes %}
|
||||
{{ field('class_attributes') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='card'>
|
||||
<div class='label'>Defenses</div>
|
||||
<ul>
|
||||
<li>Vulnerable to Fire</li>
|
||||
<li>Immune to Cold</li>
|
||||
<li>Resistant to Poison</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{{ c.form.csrf_token }}
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block debug %}
|
||||
<div style='clear:both;display:block;'>
|
||||
<h2>Debug</h2>
|
||||
<code>
|
||||
{% for field, msg in c.form.errors.items() %}
|
||||
{{ field }}: {{ msg }}
|
||||
{% endfor %}
|
||||
</code>
|
||||
{{ c.record.class_attributes }}
|
||||
</code>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block script %}
|
||||
<script type='text/javascript'>
|
||||
const TRAITS = {
|
||||
{% for trait_desc, traits in [] %}
|
||||
'{{ trait_desc }}': [
|
||||
{% for trait in traits %}
|
||||
{
|
||||
"type": "{{ trait['type'] }}",
|
||||
"target": "{{ trait.target }}",
|
||||
"value": "{{ trait.value }}",
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
{% endfor %}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{ tmpl_context.project_name }}</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{{ tmpl_context.project_name }}">
|
||||
|
||||
<meta name="og:title" content="{{ tmpl_context.project_name }}">
|
||||
<meta name="og:description" content="{{ tmpl_context.project_name }}">
|
||||
<meta name="og:url" content="">
|
||||
<meta name="og:type" content="text">
|
||||
<meta name="og:provider_name" content="{{ tmpl_context.project_name }}">
|
||||
<!--
|
||||
<meta name="og:image" content="/static/45.svg">
|
||||
-->
|
||||
|
||||
<link rel='stylesheet' href='/static/styles.css' />
|
||||
|
||||
<!--
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ tmpl_context.project_name }}: {{ page }}</h1>
|
||||
<pre>
|
||||
{{ content }}
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{% macro build_list(c) %}
|
||||
<ul class='nav'>
|
||||
<li><a href="{{ c.routes.sheet }}">Create a Character</a></li>
|
||||
{% for rec in c.all_records %}
|
||||
<li><a href="{{ c.routes.sheet }}/{{ rec.uri }}">{{ rec.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user