add modifiers and functionality
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
parent
54ccf63a59
commit
f884e02c23
48
sheet.css
48
sheet.css
@ -9,6 +9,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
div.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -23,6 +27,16 @@ div.grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
div.nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
div.mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
@ -34,30 +48,44 @@ main {
|
||||
margin-right: auto;
|
||||
background-color: var(--page-color);
|
||||
color: var(--text-color);
|
||||
padding: 10px;
|
||||
border: 1px solid var(--text-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 5px var(--shadow-color);
|
||||
width: fit-content;
|
||||
max-width: max(50%, 720px);
|
||||
}
|
||||
|
||||
main > form > * {
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
main > form > *:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
input, select {
|
||||
width: fit-content;
|
||||
border: none;
|
||||
border-bottom: 1px dashed var(--text-color);
|
||||
background-color: var(--page-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
min-width: 6ch;
|
||||
min-width: 4ch;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
min-width: 20ch;
|
||||
input[type="checkbox"] {
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
274
sheet.js
274
sheet.js
@ -0,0 +1,274 @@
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
let combatModifiers = [
|
||||
{
|
||||
category: "Saves",
|
||||
items: [
|
||||
{
|
||||
name: "Resilience",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.END) + e.training + (e.mb * e.mastery); }
|
||||
|
||||
},
|
||||
{
|
||||
name: "Reflex",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.AGI, e.WIT) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Resolve",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.INT, e.CHA) + e.training + (e.mb * e.mastery); }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Weapon",
|
||||
items: [
|
||||
{
|
||||
name: "Simple",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Brawl",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Bludgeon",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Axe",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Polearm",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Sword",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Archery",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Firearm",
|
||||
type: "full",
|
||||
value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Armor",
|
||||
items: [
|
||||
{
|
||||
name: "Unarmored",
|
||||
type: "training-only",
|
||||
value: function (e) { return }
|
||||
},
|
||||
{
|
||||
name: "Light",
|
||||
type: "training-only",
|
||||
value: function (e) { return }
|
||||
},
|
||||
{
|
||||
name: "Medium",
|
||||
type: "training-only",
|
||||
value: function (e) { return }
|
||||
},
|
||||
{
|
||||
name: "Heavy",
|
||||
type: "training-only",
|
||||
value: function (e) { return }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
let rpModifiers = [
|
||||
{
|
||||
category: "Skills",
|
||||
items: [
|
||||
{
|
||||
name: "Athletics",
|
||||
type: "full",
|
||||
value: function (e) { return e.STR + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Fortitude",
|
||||
type: "full",
|
||||
value: function (e) { return e.END + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Acrobatics",
|
||||
type: "full",
|
||||
value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Stealth",
|
||||
type: "full",
|
||||
value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Thievery",
|
||||
type: "full",
|
||||
value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Animal_Handling",
|
||||
type: "full",
|
||||
value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Intuition",
|
||||
type: "full",
|
||||
value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Perception",
|
||||
type: "full",
|
||||
value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Streetwise",
|
||||
type: "full",
|
||||
value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Survival",
|
||||
type: "full",
|
||||
value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Arcana",
|
||||
type: "full",
|
||||
value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Crafting",
|
||||
type: "full",
|
||||
value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Investigation",
|
||||
type: "full",
|
||||
value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Medicine",
|
||||
type: "full",
|
||||
value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Lore",
|
||||
type: "textarea",
|
||||
value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Deception",
|
||||
type: "full",
|
||||
value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Intimidation",
|
||||
type: "full",
|
||||
value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Performance",
|
||||
type: "full",
|
||||
value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
|
||||
},
|
||||
{
|
||||
name: "Persuasion",
|
||||
type: "full",
|
||||
value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
function init () {
|
||||
populateModifiers("#combat-modifiers", combatModifiers);
|
||||
window.setInterval(() => { setAllValues(combatModifiers) }, 250);
|
||||
populateModifiers("#rp-modifiers", rpModifiers);
|
||||
setAllValues(rpModifiers);
|
||||
window.setInterval(() => { setAllValues(rpModifiers) }, 250);
|
||||
}
|
||||
|
||||
function populateModifiers(container, data) {
|
||||
let area = document.querySelector(container);
|
||||
for (let i in data) {
|
||||
let category = data[i];
|
||||
let categoryDiv = document.createElement("div");
|
||||
area.append(categoryDiv);
|
||||
categoryDiv.style = "display: contents;";
|
||||
categoryDiv.innerHTML = `<p style="grid-column: 1 / span 4;"><b>${category.category}</b></p>`;
|
||||
for (let j in data[i].items) {
|
||||
let item = data[i].items[j];
|
||||
if (item.type === "full") {
|
||||
categoryDiv.innerHTML += `
|
||||
<div style="display: contents;">
|
||||
<p>${item.name}</p>
|
||||
<label>Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="number"></label>
|
||||
<label>MB<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox"></label>
|
||||
<output id="${category.category}-${item.name}-result"></output>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else if (item.type === "training-only"){
|
||||
categoryDiv.innerHTML += `
|
||||
<div style="display: contents;">
|
||||
<p>${item.name}</p>
|
||||
<label style="grid-column: 2 / span 3;">Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="checkbox"></label>
|
||||
<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox" hidden>
|
||||
<output class="none" id="${category.category}-${item.name}-result"></output>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else if (item.type === "textarea") {
|
||||
categoryDiv.innerHTML += `
|
||||
<div style="display: contents;">
|
||||
<textarea></textarea>
|
||||
<label>Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="number"></label>
|
||||
<label>MB<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox"></label>
|
||||
<output id="${category.category}-${item.name}-result"></output>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setAllValues (data) {
|
||||
for (let i in data) {
|
||||
let category = data[i];
|
||||
for (let j in data[i].items) {
|
||||
let item = data[i].items[j];
|
||||
setModifierVal(category.category, item.name, item.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setModifierVal (category, name, value) {
|
||||
let e = {};
|
||||
e.STR = Number(document.querySelector("#str").value);
|
||||
e.END = Number(document.querySelector("#end").value);
|
||||
e.AGI = Number(document.querySelector("#agi").value);
|
||||
e.WIT = Number(document.querySelector("#wit").value);
|
||||
e.INT = Number(document.querySelector("#int").value);
|
||||
e.CHA = Number(document.querySelector("#cha").value);
|
||||
e.training = Number(document.querySelector(`#${category}-${name}-training`).value);
|
||||
e.mb = Number(document.querySelector(`#${category}-${name}-mb`).checked);
|
||||
e.mastery = Number(document.querySelector("#mastery").value);
|
||||
document.querySelector(`#${category}-${name}-result`).innerText = value(e);
|
||||
}
|
||||
92
songs.html
92
songs.html
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Character Sheet - SotSA</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
@ -11,58 +12,51 @@
|
||||
<main class="w3-container w3-card-4 w3-padding" style="max-width: 80ch; margin-left: auto; margin-right: auto;">
|
||||
<h1 class="w3-center">Songs of the Second Age: Character Sheet</h1>
|
||||
<form class="w3-container">
|
||||
<div class="w3-container">
|
||||
<label>Player<input class="w3-input w3-border" id="player" name="player" type="text"></label>
|
||||
<label>Name<input class="w3-input w3-border" id="name" name="name" type="text"></label>
|
||||
<label>Level<input class="w3-input w3-border" id="level" name="level" type="text"></label>
|
||||
<label>Species<input class="w3-input w3-border" id="species" name="species" type="text"></label>
|
||||
<label>Background<input class="w3-input w3-border" id="background" name="background" type="text"></label>
|
||||
<label>Class<input class="w3-input w3-border" id="class" name="class" type="text"></label>
|
||||
<div class="mobile grid" style="grid-template-columns: auto auto auto;">
|
||||
<label>Player<input id="player" name="player" type="text"></label>
|
||||
<label>Name<input id="name" name="name" type="text"></label>
|
||||
<label>Level<input id="level" name="level" type="number"></label>
|
||||
<label>Species<input id="species" name="species" type="text"></label>
|
||||
<label>Background<input id="background" name="background" type="text"></label>
|
||||
<label>Class<input id="class" name="class" type="text"></label>
|
||||
</div>
|
||||
<div class="w3-container">
|
||||
<label for="health">Health</label><input class="w3-input w3-border" id="health" name="health" type="number">
|
||||
<label for="stamina">Stamina</label><input class="w3-input w3-border" id="stamina" name="stamina" type="number">
|
||||
<div class="mobile grid" style="grid-template-columns: auto auto;">
|
||||
<label>Health<input id="health" name="health" type="number"></label>
|
||||
<label>Stamina<input id="stamina" name="stamina" type="number"></label>
|
||||
<div class="grid" style="grid-column: 1 / span 2; grid-template-columns: auto auto auto auto auto;">
|
||||
<label>Deathrolls</label>
|
||||
<label>W<input id="deathroll-w" name="deathroll-w" type="checkbox"></label>
|
||||
<label>S<input id="deathroll-s" name="deathroll-s" type="checkbox"></label>
|
||||
<label>D<input id="deathroll-d" name="deathroll-d" type="checkbox"></label>
|
||||
<label>I<input id="deathroll-i" name="deathroll-i" type="checkbox"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-container">
|
||||
<label>Deathrolls</label>
|
||||
<div class="w3-container">
|
||||
<label>W</label><input class="w3-input w3-border" type="checkbox">
|
||||
<label>S</label><input class="w3-input w3-border" type="checkbox">
|
||||
<label>D</label><input class="w3-input w3-border" type="checkbox">
|
||||
<label>I</label><input class="w3-input w3-border" type="checkbox">
|
||||
</div>
|
||||
<div class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
|
||||
<label style="flex-direction: column;"><p><u>Str</u>ength</p><input id="str" name="str" type="number"></label>
|
||||
<label style="flex-direction: column;"><p><u>End</u>urance</p><input id="end" name="end" type="number"></label>
|
||||
<label style="flex-direction: column;"><p><u>Agi</u>lity</p><input id="agi" name="agi" type="number"></label>
|
||||
<label style="flex-direction: column;"><p><u>Wit</u>s</p><input id="wit" name="wit" type="number"></label>
|
||||
<label style="flex-direction: column;"><p><u>Int</u>elligence</p><input id="int" name="int" type="number"></label>
|
||||
<label style="flex-direction: column;"><p><u>Cha</u>risma</p><input id="cha" name="cha" type="number"></label>
|
||||
</div>
|
||||
<div class="w3-container">
|
||||
<label for="str"><u>Str</u>ength</label>
|
||||
<input class="w3-input w3-border" id="str" name="str" type="number">
|
||||
<label for="end"><u>End</u>urance</label>
|
||||
<input class="w3-input w3-border" id="end" name="end" type="number">
|
||||
<label for="agi"><u>Agi</u>lity</label>
|
||||
<input class="w3-input w3-border" id="agi" name="agi" type="number">
|
||||
<label for="wit"><u>Wit</u>s</label>
|
||||
<input class="w3-input w3-border" id="wit" name="wit" type="number">
|
||||
<label for="int"><u>Int</u>elligence</label>
|
||||
<input class="w3-input w3-border" id="int" name="int" type="number">
|
||||
<label for="cha"><u>Cha</u>risma</label>
|
||||
<input class="w3-input w3-border" id="cha" name="cha" type="number">
|
||||
<div class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
|
||||
<label style="flex-direction: column;">Armor<input id="armor" name="armor" type="number"></label>
|
||||
<label style="flex-direction: column;">Soak<input id="soak" name="soak" type="number"></label>
|
||||
<label style="flex-direction: column;">Speed<input id="speed" name="speed" type="number"></label>
|
||||
<label style="flex-direction: column;">Initiative<input id="initiative" name="initiative" type="number"></label>
|
||||
<label style="flex-direction: column;">Mastery<input id="mastery" name="mastery" type="number"></label>
|
||||
<label for="bulk" style="flex-direction: column;">Bulk
|
||||
<label class="none" for="max-bulk">Max Bulk</label>
|
||||
<div class="flex" style="flex-wrap: nowrap;">
|
||||
<input id="bulk" name="bulk" type="number">
|
||||
<p>/</p>
|
||||
<input id="max-bulk" name="max-bulk" type="number">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="w3-container">
|
||||
<label for="armor">Armor</label>
|
||||
<input class="w3-input w3-border" id="armor" name="armor" type="number">
|
||||
<label for="soak">Soak</label>
|
||||
<input class="w3-input w3-border" id="soak" name="soak" type="number">
|
||||
<label for="speed">Speed</label>
|
||||
<input class="w3-input w3-border" id="speed" name="speed" type="number">
|
||||
<label for="initiative">Initiative</label>
|
||||
<input class="w3-input w3-border" id="initiative" name="initiative" type="number">
|
||||
<label for="mastery">Mastery</label>
|
||||
<input class="w3-input w3-border" id="mastery" name="mastery" type="number">
|
||||
<label for="bulk">Bulk</label>
|
||||
<div style="display: flex; flex-direction: row; align-items: center;">
|
||||
<input class="w3-input w3-border" id="bulk" name="bulk" type="number">
|
||||
<p class="w3-margin-left w3-margin-right" style="margin: 0px;">/</p>
|
||||
<input class="w3-input w3-border" id="max-bulk" name="max-bulk" type="number">
|
||||
</div>
|
||||
<div class="w3-row w3-mobile w3-row-padding w3-stretch" style="margin-top: 10px; margin-bottom: 10px;">
|
||||
<div class="w3-half mobile grid" style="grid-template-columns: auto auto auto auto;" id="combat-modifiers"></div>
|
||||
<div class="w3-half mobile grid" style="grid-template-columns: auto auto auto auto;" id="rp-modifiers"></div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user