Compare commits

..

No commits in common. "43e6c04ecd3ab07b3b1f75d07528477dbc998303" and "f9ef83cb21ae62b16dc90b2235554139c92cc7c2" have entirely different histories.

6 changed files with 116 additions and 289 deletions

View File

@ -87,7 +87,7 @@ import * as api from "../api";
console.log("got a response back", resp); console.log("got a response back", resp);
} }
const inputs = document.querySelectorAll("#basics input"); const inputs = document.querySelectorAll("#basicInfo input");
inputs.forEach(input => { inputs.forEach(input => {
console.log('got an input', input); console.log('got an input', input);

View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tera Demo</title> <title>Tera Demo</title>
</head> </head>
<body> <body>

View File

@ -7,57 +7,28 @@
font-family: Liberation Sans, Arial; font-family: Liberation Sans, Arial;
} }
#basics .flex-container { #attributes {
display: flex; padding: 4px;
flex-flow: row wrap; border-collapse: collapse;
}
.basics-row {
display: block;
}
.basics-entry {
display: flex;
border: 1px solid gray;
margin-left: -1px;
margin-top: -1px;
}
.basics-entry label {
display: inline;
width: 5em;
text-align: right;
vertical-align: text-bottom;
padding: 8px;
margin: 0;
}
.basics-entry input {
display: inline;
padding: 8px;
border: none;
background-color: lightgray;
margin: 0;
}
#attributes .flex-container {
display: flex;
flex-flow: row wrap;
} }
#attributes .attributes-section { #attributes .attributes-section {
border: 1px solid gray; border: 1px solid gray;
margin-left: -1px; border-collapse: collapse;
margin-top: -1px; display: table-cell;
} }
.attribute { .attribute {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.attribute label { .attribute label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
display: inline;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
padding: 8px; padding: 8px;
@ -66,7 +37,8 @@
.attribute input { .attribute input {
max-width: 4em; max-width: 4em;
display: inline; display: inline-block;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -74,25 +46,26 @@
} }
#skills { #skills {
padding: 4px;
} border-collapse: collapse;
#skills .flex-container {
display: flex;
flex-flow: row wrap;
} }
#skills .skills-section { #skills .skills-section {
border: 1px solid gray; border: 1px solid gray;
margin-top: -1px; border-collapse: collapse;
margin-left: -1px; display: table-cell;
} }
.skill { .skill {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.skill label { .skill label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -102,6 +75,8 @@
.skill input { .skill input {
max-width: 4em; max-width: 4em;
display: inline-block;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -165,52 +140,37 @@
{# Webpack Templating for API script #} {# Webpack Templating for API script #}
<%= htmlWebpackPlugin.tags.bodyTags %> <%= htmlWebpackPlugin.tags.bodyTags %>
<h1>Core Sheet</h1>
<div> <div>
<div id="basics"> <div id="basicInfo">
<h1> <h1>
<label for="characterName">Name</label> <label for="characterName">Name:</label>
<input type="text" id="characterName" name="characterName" value="{{name}}" /> <input type="text" id="characterName" name="characterName" value="{{name}}" />
</h1> </h1>
<div class="links">
<a href="/">Home</a> |
<a href="/characters/{{username}}/{{id}}">Save Changes</a> |
<a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
</div>
<h2>Basics</h2>
<div>System: {{data_type}}</div> <div>System: {{data_type}}</div>
<div class="flex-container"> <div>
<div class="basics-row">
<div class="basics-entry">
<label for="gender">Gender:</label> <label for="gender">Gender:</label>
<input type="text" id="gender" name="gender" value="{{sheet.gender}}" /> <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
</div> </div>
<div class="basics-entry"> <div>
<label for="age">Age:</label> <label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" value="{{sheet.age}}" /> <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
</div> </div>
</div>
<div class="basics-row"> <div>
<div class="basics-entry">
<label for="concept">Concept:</label> <label for="concept">Concept:</label>
<input type="text" id="concept" name="concept" value="{{sheet.concept}}" /> <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
</div> </div>
<div class="basics-entry"> <div>
<label for="chronicle">Chronicle:</label> <label for="chronicle">Chronicle:</label>
<input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" /> <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
</div> </div>
</div> </div>
</div>
</div>
<div id="attributes"> <div id="attributes">
<h2>Attributes</h2>
<div class="flex-container">
<div class="attributes-section" id="mentalAttributes"> <div class="attributes-section" id="mentalAttributes">
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
{{ macros::attribute(name="Wits", value=sheet.wits) }} {{ macros::attribute(name="Wits", value=sheet.wits) }}
@ -229,12 +189,8 @@
{{ macros::attribute(name="Composure", value=sheet.composure) }} {{ macros::attribute(name="Composure", value=sheet.composure) }}
</div> </div>
</div> </div>
</div>
<div id="skills"> <div id="skills">
<h2>Skills</h2>
<div class="flex-container">
<div class="skills-section" id="mentalSkills"> <div class="skills-section" id="mentalSkills">
{% for skill_name, skill in sheet.mentalSkills %} {% for skill_name, skill in sheet.mentalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}
@ -253,7 +209,6 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
<div id="merits"> <div id="merits">
<h2>Merits</h2> <h2>Merits</h2>

View File

@ -8,67 +8,40 @@
font-family: Liberation Sans, Arial; font-family: Liberation Sans, Arial;
} }
#basics .flex-container { #attributes {
display: flex; padding: 4px;
flex-flow: row wrap; border-collapse: collapse;
}
.basics-row {
display: block;
}
.basics-entry {
display: flex;
border: 1px solid gray;
margin-left: -1px;
margin-top: -1px;
}
.basics-entry label {
display: inline;
width: 5em;
text-align: right;
vertical-align: text-bottom;
padding: 8px;
margin: 0;
}
.basics-entry span {
width: 15em;
overflow: hidden;
padding: 8px;
border: none;
background-color: lightgray;
margin: 0;
}
#attributes .flex-container {
display: flex;
flex-flow: row wrap;
} }
#attributes .attributes-section { #attributes .attributes-section {
border: 1px solid gray; border: 1px solid gray;
margin-left: -1px; border-collapse: collapse;
margin-top: -1px; display: table-cell;
} }
.attribute { .attribute {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.attribute label { .attribute label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
display: inline;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
padding: 8px; padding: 8px;
margin: 0; margin: 0;
} }
.attribute span { .attribute div.value {
width: 2em; min-width: 1.5em;
overflow: hidden; max-width: 4em;
text-align: center;
display: inline-block;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -76,25 +49,26 @@
} }
#skills { #skills {
padding: 4px;
} border-collapse: collapse;
#skills .flex-container {
display: flex;
flex-flow: row wrap;
} }
#skills .skills-section { #skills .skills-section {
border: 1px solid gray; border: 1px solid gray;
margin-top: -1px; border-collapse: collapse;
margin-left: -1px; display: table-cell;
} }
.skill { .skill {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.skill label { .skill label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -102,115 +76,32 @@
margin: 0; margin: 0;
} }
.skill span { .skill div.value {
width: 2em; min-width: 1.5em;
overflow: hidden;
padding: 8px;
border: none;
background-color: lightgray;
margin: 0;
}
#merits {
padding: 4px;
}
#merit-list {
display: inline-flex;
flex-direction: column;
}
.merit {
/* margin: 0;
padding: 0; */
display: flex;
border: 1px solid gray;
margin-top: -1px;
}
.merit span {
width: 3em;
text-align: left;
padding: 8px;
margin: 0;
}
.merit .merit-name {
width: 10em;
white-space: nowrap;
overflow: auto;
padding: 0;
margin: 8px;
border: none;
border: 0px solid gray;
border-bottom-width: 1px;
}
.merit .merit-dots {
max-width: 4em; max-width: 4em;
display: inline-block;
text-align: center;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
margin: 0; margin: 0;
} }
.merit .remove-merit {
max-width: 4em;
padding: 0;
padding: 3px;
padding-left: 6px;
padding-right:6px;
margin: 3px;
background-color: lightgray;
}
</style> </style>
<h1>Core Sheet</h1>
<div> <div>
<div id="basics"> <h1>Character {{name}}</h1>
<h1> <h3>User: {{username}}</h3>
<span id="characterName" name="characterName">{{name}}</span> <p>System: {{data_type}}</h3>
</h1>
<div class="links">
<a href="/">Home</a> |
<a href="/characters/{{username}}/{{id}}/edit">Edit Character</a> |
<a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
</div> </div>
<h2>Basics</h2> <div>
<div>System: {{data_type}}</div> <h1>Core Sheet</h1>
<div>
<div class="flex-container"> <h1>Name: <input type="text" value="{{name}}" /></h1>
<div class="basics-row"> <p>System: {{data_type}}</p>
<div class="basics-entry">
<label for="gender">Gender:</label>
<span id="gender" name="gender">{{sheet.gender}}</span>
</div>
<div class="basics-entry">
<label for="age">Age:</label>
<span id="age" name="age">{{sheet.age}}</span>
</div>
</div>
<div class="basics-row">
<div class="basics-entry">
<label for="concept">Concept:</label>
<span id="concept" name="concept">{{sheet.concept}}</span>
</div>
<div class="basics-entry">
<label for="chronicle">Chronicle:</label>
<span id="chronicle" name="chronicle">{{sheet.chronicle}}</span>
</div>
</div>
</div>
</div>
<div id="attributes"> <div id="attributes">
<h2>Attributes</h2>
<div class="flex-container">
<div class="attributes-section" id="mentalAttributes"> <div class="attributes-section" id="mentalAttributes">
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
{{ macros::attribute(name="Wits", value=sheet.wits) }} {{ macros::attribute(name="Wits", value=sheet.wits) }}
@ -229,11 +120,8 @@
{{ macros::attribute(name="Composure", value=sheet.composure) }} {{ macros::attribute(name="Composure", value=sheet.composure) }}
</div> </div>
</div> </div>
</div>
<div id="skills"> <div id="skills">
<h2>Skills</h2>
<div class="flex-container">
<div class="skills-section" id="mentalSkills"> <div class="skills-section" id="mentalSkills">
{% for skill_name, skill in sheet.mentalSkills %} {% for skill_name, skill in sheet.mentalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}
@ -254,13 +142,7 @@
</div> </div>
</div> </div>
<div id="merits"> <div>
<h2>Merits</h2> <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
<div id="merit-list">
{% for merit in sheet.merits %}
{{ macros::merit(name=merit.name, value=merit.dots) }}
{% endfor %}
</div>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@ -1,20 +1,13 @@
{% macro attribute(name, value) %} {% macro attribute(name, value) %}
<div class="attribute"> <div class="attribute">
<label for="{{name}}">{{name}}:</label> <label for="{{name}}">{{name}}:</label>
<span class="value" id="{{name}}">{{value}}</span> <div class="value" id="{{name}}">{{value}}</div>
</div> </div>
{% endmacro attribute %} {% endmacro attribute %}
{% macro skill(name, value) %} {% macro skill(name, value) %}
<div class="skill"> <div class="skill">
<label for="{{name}}">{{name}}:</label> <label for="{{name}}">{{name}}:</label>
<span class="value" id="{{name}}">{{value}}</span> <div class="value" id="{{name}}">{{value}}</div>
</div> </div>
{% endmacro skill %} {% endmacro skill %}
{% macro merit(name, value) %}
<div class="merit">
<span class="merit-name">{{name}}</span>
<span class="merit-dots">{{value}}</span> <span>Dots</span>
</div>
{% endmacro merit %}

View File

@ -10,7 +10,6 @@ use strum::IntoEnumIterator;
struct EditCharacterContext<'a> { struct EditCharacterContext<'a> {
pub name: &'a str, pub name: &'a str,
pub username: &'a str, pub username: &'a str,
pub id: i32,
pub data_type: &'a CharacterDataType, pub data_type: &'a CharacterDataType,
pub sheet: Box<DynCharacterData>, pub sheet: Box<DynCharacterData>,
pub state: FormStateContext<'a>, pub state: FormStateContext<'a>,
@ -27,7 +26,6 @@ fn edit_character_template(user: &User, character: Character) -> Result<Template
let context = EditCharacterContext { let context = EditCharacterContext {
name: &character.character_name, name: &character.character_name,
username: &user.username, username: &user.username,
id: character.id,
data_type: &character.data_type, data_type: &character.data_type,
sheet: character.dyn_deserialize()?, sheet: character.dyn_deserialize()?,
state: FormStateContext { state: FormStateContext {