Compare commits
No commits in common. "43e6c04ecd3ab07b3b1f75d07528477dbc998303" and "f9ef83cb21ae62b16dc90b2235554139c92cc7c2" have entirely different histories.
43e6c04ecd
...
f9ef83cb21
|
|
@ -87,7 +87,7 @@ import * as api from "../api";
|
|||
console.log("got a response back", resp);
|
||||
}
|
||||
|
||||
const inputs = document.querySelectorAll("#basics input");
|
||||
const inputs = document.querySelectorAll("#basicInfo input");
|
||||
|
||||
inputs.forEach(input => {
|
||||
console.log('got an input', input);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Tera Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -7,57 +7,28 @@
|
|||
font-family: Liberation Sans, Arial;
|
||||
}
|
||||
|
||||
#basics .flex-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 4px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#attributes .attributes-section {
|
||||
border: 1px solid gray;
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
border-collapse: collapse;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.attribute {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.attribute label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 10em;
|
||||
display: inline;
|
||||
text-align: right;
|
||||
vertical-align: text-bottom;
|
||||
padding: 8px;
|
||||
|
|
@ -66,7 +37,8 @@
|
|||
|
||||
.attribute input {
|
||||
max-width: 4em;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
background-color: lightgray;
|
||||
|
|
@ -74,25 +46,26 @@
|
|||
}
|
||||
|
||||
#skills {
|
||||
|
||||
}
|
||||
|
||||
#skills .flex-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 4px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#skills .skills-section {
|
||||
border: 1px solid gray;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
border-collapse: collapse;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.skill {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.skill label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 10em;
|
||||
text-align: right;
|
||||
vertical-align: text-bottom;
|
||||
|
|
@ -102,6 +75,8 @@
|
|||
|
||||
.skill input {
|
||||
max-width: 4em;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
background-color: lightgray;
|
||||
|
|
@ -165,52 +140,37 @@
|
|||
{# Webpack Templating for API script #}
|
||||
<%= htmlWebpackPlugin.tags.bodyTags %>
|
||||
|
||||
<h1>Core Sheet</h1>
|
||||
<div>
|
||||
<div id="basics">
|
||||
<div id="basicInfo">
|
||||
<h1>
|
||||
<label for="characterName">Name</label>
|
||||
<label for="characterName">Name:</label>
|
||||
<input type="text" id="characterName" name="characterName" value="{{name}}" />
|
||||
</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 class="flex-container">
|
||||
<div class="basics-row">
|
||||
<div class="basics-entry">
|
||||
<div>
|
||||
<label for="gender">Gender:</label>
|
||||
<input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
|
||||
</div>
|
||||
|
||||
<div class="basics-entry">
|
||||
<div>
|
||||
<label for="age">Age:</label>
|
||||
<input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basics-row">
|
||||
<div class="basics-entry">
|
||||
<div>
|
||||
<label for="concept">Concept:</label>
|
||||
<input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
|
||||
</div>
|
||||
|
||||
<div class="basics-entry">
|
||||
<div>
|
||||
<label for="chronicle">Chronicle:</label>
|
||||
<input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="attributes">
|
||||
<h2>Attributes</h2>
|
||||
<div class="flex-container">
|
||||
<div class="attributes-section" id="mentalAttributes">
|
||||
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
|
||||
{{ macros::attribute(name="Wits", value=sheet.wits) }}
|
||||
|
|
@ -229,12 +189,8 @@
|
|||
{{ macros::attribute(name="Composure", value=sheet.composure) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="skills">
|
||||
<h2>Skills</h2>
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="skills-section" id="mentalSkills">
|
||||
{% for skill_name, skill in sheet.mentalSkills %}
|
||||
{{ macros::skill(name=skill_name, value=skill.dots) }}
|
||||
|
|
@ -253,7 +209,6 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="merits">
|
||||
<h2>Merits</h2>
|
||||
|
|
|
|||
|
|
@ -8,67 +8,40 @@
|
|||
font-family: Liberation Sans, Arial;
|
||||
}
|
||||
|
||||
#basics .flex-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 4px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#attributes .attributes-section {
|
||||
border: 1px solid gray;
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
border-collapse: collapse;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.attribute {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.attribute label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 10em;
|
||||
display: inline;
|
||||
text-align: right;
|
||||
vertical-align: text-bottom;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.attribute span {
|
||||
width: 2em;
|
||||
overflow: hidden;
|
||||
.attribute div.value {
|
||||
min-width: 1.5em;
|
||||
max-width: 4em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
background-color: lightgray;
|
||||
|
|
@ -76,25 +49,26 @@
|
|||
}
|
||||
|
||||
#skills {
|
||||
|
||||
}
|
||||
|
||||
#skills .flex-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 4px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#skills .skills-section {
|
||||
border: 1px solid gray;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
border-collapse: collapse;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.skill {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.skill label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 10em;
|
||||
text-align: right;
|
||||
vertical-align: text-bottom;
|
||||
|
|
@ -102,115 +76,32 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.skill span {
|
||||
width: 2em;
|
||||
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 {
|
||||
.skill div.value {
|
||||
min-width: 1.5em;
|
||||
max-width: 4em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
float: left;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
background-color: lightgray;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.merit .remove-merit {
|
||||
max-width: 4em;
|
||||
padding: 0;
|
||||
padding: 3px;
|
||||
padding-left: 6px;
|
||||
padding-right:6px;
|
||||
margin: 3px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Core Sheet</h1>
|
||||
<div>
|
||||
<div id="basics">
|
||||
<h1>
|
||||
<span id="characterName" name="characterName">{{name}}</span>
|
||||
</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>
|
||||
<h1>Character {{name}}</h1>
|
||||
<h3>User: {{username}}</h3>
|
||||
<p>System: {{data_type}}</h3>
|
||||
</div>
|
||||
|
||||
<h2>Basics</h2>
|
||||
<div>System: {{data_type}}</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="basics-row">
|
||||
<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>
|
||||
<h1>Core Sheet</h1>
|
||||
<div>
|
||||
<h1>Name: <input type="text" value="{{name}}" /></h1>
|
||||
<p>System: {{data_type}}</p>
|
||||
<div id="attributes">
|
||||
<h2>Attributes</h2>
|
||||
<div class="flex-container">
|
||||
<div class="attributes-section" id="mentalAttributes">
|
||||
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
|
||||
{{ macros::attribute(name="Wits", value=sheet.wits) }}
|
||||
|
|
@ -229,11 +120,8 @@
|
|||
{{ macros::attribute(name="Composure", value=sheet.composure) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="skills">
|
||||
<h2>Skills</h2>
|
||||
<div class="flex-container">
|
||||
<div class="skills-section" id="mentalSkills">
|
||||
{% for skill_name, skill in sheet.mentalSkills %}
|
||||
{{ macros::skill(name=skill_name, value=skill.dots) }}
|
||||
|
|
@ -254,13 +142,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="merits">
|
||||
<h2>Merits</h2>
|
||||
<div id="merit-list">
|
||||
{% for merit in sheet.merits %}
|
||||
{{ macros::merit(name=merit.name, value=merit.dots) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
{% macro attribute(name, value) %}
|
||||
<div class="attribute">
|
||||
<label for="{{name}}">{{name}}:</label>
|
||||
<span class="value" id="{{name}}">{{value}}</span>
|
||||
<div class="value" id="{{name}}">{{value}}</div>
|
||||
</div>
|
||||
{% endmacro attribute %}
|
||||
|
||||
{% macro skill(name, value) %}
|
||||
<div class="skill">
|
||||
<label for="{{name}}">{{name}}:</label>
|
||||
<span class="value" id="{{name}}">{{value}}</span>
|
||||
<div class="value" id="{{name}}">{{value}}</div>
|
||||
</div>
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ use strum::IntoEnumIterator;
|
|||
struct EditCharacterContext<'a> {
|
||||
pub name: &'a str,
|
||||
pub username: &'a str,
|
||||
pub id: i32,
|
||||
pub data_type: &'a CharacterDataType,
|
||||
pub sheet: Box<DynCharacterData>,
|
||||
pub state: FormStateContext<'a>,
|
||||
|
|
@ -27,7 +26,6 @@ fn edit_character_template(user: &User, character: Character) -> Result<Template
|
|||
let context = EditCharacterContext {
|
||||
name: &character.character_name,
|
||||
username: &user.username,
|
||||
id: character.id,
|
||||
data_type: &character.data_type,
|
||||
sheet: character.dyn_deserialize()?,
|
||||
state: FormStateContext {
|
||||
|
|
|
|||
Loading…
Reference in New Issue