Creating a Character Sheet for Log horizon TTRPG

Greetings, I am in the process of creating a character sheet. I want it to look like this and  this . Basically i want a repeating skills section down at the bottom. I want it to be really easy to read the Image section isn't necessary. I have this so far. <div> <div> <label>PC Name:</label><input type="text" name="attr_character_name" /> <label>CR:</label><input type="text" name="attr_rank" /> <label>XP:</label><input type="number" name="attr_xp" /> </div> <div> <label>Guild:</label><input type="text" name="attr_guild" /> <label>Race:</label><input type="text" name="attr_race" /> </div> <div> <label>HP</label><input type="text" name="attr_hp" /> </div> </div> <hr/> <div> <div> <h3 style="margin-bottom: 10px;">Attributes</h3> <h3 style="margin-bottom: 10px;">Skills</h3> <fieldset> <select name="attr_dtype"> <option value="d4">d4</option> <option value="d6">d6</option> <option value="d8">d8</option> <option value="d10">d10</option> <option value="d12">d12</option> </select> <input type="text" name="attr_skillname" /> </fieldset> </table> </div> <div> <h3 style="text-align: center;">Derived Stats</h3> <table style="width: 100%;"> <thead> <tr> <th>Stat</th> <th>Base</th> <th>Mod</th> <th> </tr> </thead> <tbody> <tr> <td>Strength</td> <td><input type="number" name="attr_str" /></td> <td><input type="number" name="attr_str_mod" /></td> <td><input type="number" name="attr_str_max" value="@{str}+@{str_mod}" disabled="true" /></td> </tr> <tr> <td>Athletics</td> <td><input type="number" name="attr_athletics" value="(@{str_max}/3)" disabled="true" /></td> <td><input type="number" name="attr_athletics_mod" /></td> <td><input type="number" name="attr_athletics_max" value="@{athletics}+@{atletics_mod}" disabled="true" /></td> </tr> <tr> <td>Endurance</td> <td><input type="number" name="attr_endurance" value="(@{str_max}/3})" disabled="true" /></td> <td><input type="number" name="attr_endurance_mod" /></td> <td><input type="number" name="attr_endurance_max" value="@{endurance}+@{endurance_mod}" disabled="true" /></td> </tr> <tr> <td>Dex</td> <td><input type="number" name="attr_dex" /></td> <td><input type="number" name="attr_dex_mod" /></td> <td><input type="number" name="attr_dex_max" value="@{dex}+@{dex_mod}" disabled="true" /></td> </tr> <tr> <td>Disable</td> <td><input type="number" name="attr_disable" value="(@{dex_max}/3)" disabled="true" /></td> <td><input type="number" name="attr_disable_mod" /></td> <td><input type="number" name="attr_str_max" value="@{dex}+@{disable_mod}" disabled="true" /></td> </tr> <tr> <td>Operate</td> <td><input type="number" name="attr_operate" /></td> <td><input type="number" name="attr_operate_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Pow</td> <td><input type="number" name="attr_pow" /></td> <td><input type="number" name="attr_pow_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Perception</td> <td><input type="number" name="attr_perception" /></td> <td><input type="number" name="attr_perception_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Negotiation</td> <td><input type="number" name="attr_negotiation" /></td> <td><input type="number" name="attr_negotiation_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Int</td> <td><input type="number" name="attr_int" /></td> <td><input type="number" name="attr_int_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Knowledge</td> <td><input type="number" name="attr_knowledge" /></td> <td><input type="number" name="attr_knowledge_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Analyze</td> <td><input type="number" name="attr_analyze" /></td> <td><input type="number" name="attr_analyze_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Accuracy</td> <td><input type="number" name="attr_accuracy" /></td> <td><input type="number" name="attr_accuracy_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Evasion</td> <td><input type="number" name="attr_evasion" /></td> <td><input type="number" name="attr_evasion_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Resistance</td> <td><input type="number" name="attr_resistance" /></td> <td><input type="number" name="attr_resistance_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> </tbody> </table> </div> <div> <hr/> <h3>Edges</h3> <textarea name="attr_edges"></textarea> </div> </div> If its not evident I am still getting the hang of Javascript and programming in general. any help would be amazing. I have gone over over the wiki on building character sheets.  I apologize for my newbness. And yes it is a bastardized form of the kitchen sink example.

So i think i'm moving in the right direction here. I have this so far for the Character sheet. Yes i still need to implement sheetworkers but hows my progress look any advice? <div> <table style="width: 100%;"> <tbody> <tr> <td><label>PC Name:</label></td> <td><input type="text" name="attr_character_name" /></td> <td><label>CR:</label></td> <td><input type="number" name="attr_rank" /></td> <td><label>Log Tickets:</label></td> <td><input type="text" name="attr_LT" /></td> </tr> <tr> <td><label>Guild:</label><input type="text" name="attr_guild" /><td> <td><label>Race:</label><input type="text" name="attr_race" /></td> <td><p>HP</p><input type="number" name="attr_hp" />/<input type="number" name="attr_hp_max"</td> </tr> </tbody> </table> </div> <hr/> <div> <h3 style="text-align: center;">Derived Stats</h3> <table style="width: 100%;"> <thead> <tr> <th>Base Scores</th> <th></th> <th>Derived Scores</th> </tr> </thead> <tbody> <tr> <td>Strength <div><input type="number" name="attr_str" /></div> <div><input type="number" name="attr_str_mod" /></div></td> <td><div><input type="number" name="attr_str_max" value="@{str}+@{str_mod}" disabled="true" /></div></td> <td>Athletics <div><input type="number" name="attr_athletics" value="(@{str_max}/3)" disabled="true" /></div> <div><input type="number" name="attr_athletics_mod" /></div></td> <td><div><input type="number" name="attr_athletics_max" value="@{athletics}+@{atletics_mod}" disabled="true" /></div></td> <td>Endurance <div><input type="number" name="attr_endurance" value="(@{str_max}/3})" disabled="true" /></div> <div><input type="number" name="attr_endurance_mod" /></div></td> <td><input type="number" name="attr_endurance_max" value="@{endurance}+@{endurance_mod}" disabled="true" /></td> </tr> <tr> <td>Dex <div><input type="number" name="attr_dex" /></div> <div><input type="number" name="attr_dex_mod" /></div></td> <td><input type="number" name="attr_dex_max" value="@{dex}+@{dex_mod}" disabled="true" /></td> <td>Disable <div><input type="number" name="attr_disable" value="(@{dex_max}/3)" disabled="true" /></div> <div><input type="number" name="attr_disable_mod" /></div> <td><input type="number" name="attr_str_max" value="@{dex}+@{disable_mod}" disabled="true" /></td> <td>Operate <div><input type="number" name="attr_operate" /></div> <div><input type="number" name="attr_operate_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Pow <div><input type="number" name="attr_pow" /></div> <div><input type="number" name="attr_pow_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> <td>Perception <div><input type="number" name="attr_perception" /></div> <div><input type="number" name="attr_perception_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> <td>Negotiation <div><input type="number" name="attr_negotiation" /></div> <div><input type="number" name="attr_negotiation_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Int <div><input type="number" name="attr_int" /></div> <div><input type="number" name="attr_int_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> <td>Knowledge <div><input type="number" name="attr_knowledge" /></div> <div><input type="number" name="attr_knowledge_max" /></div></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> <td>Analyze <div><input type="number" name="attr_analyze" /></div> <div><input type="number" name="attr_analyze_max" /></div</td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> </tbody> </table> </div> <div> <table style="width: 100%;"> <thead> <tr> <th>Base Scores</th> <th></th> <th>Derived Scores</th> </tr> </thead> <tbody> <tr> <td>Accuracy</td> <td><input type="number" name="attr_accuracy" /></td> <td><input type="number" name="attr_accuracy_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Evasion</td> <td><input type="number" name="attr_evasion" /></td> <td><input type="number" name="attr_evasion_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> <tr> <td>Resistance</td> <td><input type="number" name="attr_resistance" /></td> <td><input type="number" name="attr_resistance_max" /></td> <td><input type="number" name="attr_str_max" value="(@str)+(@str_mod)" disabled="true" /></td> </tr> </tbody> </table> </div> <div> <hr/> <h3>Skills</h3> <textarea name="attr_skills"></textarea> <fieldset> <input type="text" name="attr_skillname" /> <select name="attr_dtype"> <option value="d4">d4</option> <option value="d6">d6</option> <option value="d8">d8</option> <option value="d10">d10</option> <option value="d12">d12</option> </select> </fieldset> </div> And this is the associated css .charsheet label { display: inline-block; width: 80px; text-align: right; } .charsheet input { display: inline-block; width: 160px; } .sheet-col strong.sheet-dee { font-size: 1.4em; font-weight: bold; padding-right: 4px; } .sheet-broadskill{ font-weight: bold; font-size: 1em; padding-right: 2px; } .charsheet input.sheet-short { width: 4.5em; } .charsheet input[type="checkbox"].sheet-counted + span:not(.sheet-not-sheet-show)::before { counter-increment: sheet-rep-items; content: counter(sheet-rep-items) ". [+]" !important; } .charsheet input[type="checkbox"].sheet-counted:checked + span:not(.sheet-not-sheet-show)::before { counter-increment: sheet-rep-items; content: counter(sheet-rep-items) ". [-]" !important; } .charsheet input[type=text]{ width: 165px; } .charsheet { background-color: #FFFFFF; } .charsheet table { border-collapse: separate; border-spacing: 1; border: 1px solid black ; border-radius: 10px ; -moz-border-radius: 20px ; padding: 10px; } .charsheet table td, .charsheet table th { font-size: 1.2em; font-weight: bold; text-align: center; } select.sheet-dtype { width: 80px; vertical-align: top; }

So I'm feeling stupid today. If i wanted to set up the sheet to have an auto roll of say 2d6 + Modifier how would I incorporate that? I know it's in the wiki but i guess im not understanding it.  Please help. This game starts in less than 3 weeks and I am trying to have this going and tested before then.

Here's a button with a roll example; <button type="roll" name="roll_foo" value="( [[ 2d6 + @{foo2} ]] )"></button>Roll <br> Foo2 Mod:<input type="number" name="attr_foo2" value="0">

Vince said: Here's a button with a roll example; <button type="roll" name="roll_foo" value="( [[ 2d6 + @{foo2} ]] )"></button>Roll <br> Foo2 Mod:<input type="number" name="attr_foo2" value="0"> Thanks. I believe i implemented it correctly. So  Here is the earliest usable sheet. I need to make some changes still but the overall feel is there. I am still figuring out how to incorporate damage into the skill section.  for example some will have a formula containing [(skill rank + 1)dice + Attack Power] while others will have a [(skill rank)dice + magic power] and any combination there of. Any one have some advice how to incorporate this?

I suppose you could use a selector that includes either formula, or you could just use the appropriate formula if they are always tied to a given skill.  A selector would be something like; <select name="attr_skill_1"> <option value="[[ (@{skill_1-rank} + 1)@{skill_1-dice} + @{attack_power} ]]" selected>Attack Power</option> <option value="[[ (@{skill_1-rank})@{skill_1-dice} + @{magic_power} ]]">Magic Power</option> </select> <button type="roll" name="roll_skill_1-roll" value="@{skill_1}">Roll</button>

So do you think it would be better to place multiple selectors? One for each variable within the roll? Because some of the skills simply heal for a set number of dice or add a buffer. The combinations make me think i should go that route but what is your advice?

Renderance said: So do you think it would be better to place multiple selectors? One for each variable within the roll? Because some of the skills simply heal for a set number of dice or add a buffer. The combinations make me think i should go that route but what is your advice? I don't know your game system, so I was just guessing that a player might be able to choose(Attack Power or Magic Power) which method to use...  If you know that a skill will ALWAYS be a given formula, there's no reason to use a selector, just use the correct formula.  BTW: In my example I used "skill_1", which should be replaced by a unique skill name ie "skill-diplomacy".  If you only have two formulas for skills, you could simplify things by creating an attribute for each formula and then insert the appropriate attribute as needed for each individual skill.  Cuts down on coding.  

The thing is that each skill has its own formula. they vary quite a bit. Is this an area that sheet-workers would be a big thing?

How many skills are there?  If there are common parts of the formula, start there and only change what you need to for each skill.   Sheet workers are very powerful but many to most things can be done without having to resort to javascript.  If you are comfortable with js, then by all means handle your calcs within sheet workers.

There are close to 200 skills. Correction over 400 skills. not all have actual values but yeah.

Renderance said: There are close to 200 skills. Correction over 400 skills. not all have actual values but yeah. Ouch. Not sure how even sheet workers can help if you have 400 completely unique formulas... Other than a unique value/modifier for each skill, is there any common formula between them? EDIT: I see you are using a repeating section(fieldset) for your skills.  Probably a good idea given the number of skills.  ;-)  I don't know the system ( what game is this btw? duh Log Horizon)..., so does each skill ultimately reduce down to a single modifier that you use to determine success?  Maybe explain how skills work.   

Skill have variations on different modifiers. Some increase the number of Die rolled, some add a modifier, some add debuffs to a character. There's too many variables for me to put them all down.

Renderance said: Skill have variations on different modifiers. Some increase the number of Die rolled, some add a modifier, some add debuffs to a character. There's too many variables for me to put them all down. I may have misunderstood what you were wanting to accomplish.  ;-( I would include any common attributes (their values may be unique to that skill, but that's OK) used for determining skills (again, I'm not familiar with the system so I'm not sure what attributes would need to go here...), include those within the repeating skills section and use a couple textarea fields ( ie description and macro-text tied to a roll button roll ) where you can enter the actual macro for determining success. With ~400 skills it sounds like the "details" for each added skill needs to be handled individually.

And what would be the best way to do that? something like a few boxes that allow me to create a formula?

Renderance said: And what would be the best way to do that? something like a few boxes that allow me to create a formula? Yes.   ;-) You could include a roll button and a couple textarea boxes within your repeating skills section; example; <button type="roll" name="attr_roll" value="@{skill_maro-text}">Roll</button> Description:<textarea name="attr_skill_description" >This is some text about the skill...</textarea> Macro-text:<textarea name="attr_skill_macro-text" > &{template:default} {{name=@{skill_name}}} {{check=[[ 2d6+@{some_mod} ]] }} {{=@{skill_description} }} </textarea> The text found within the macro-text textarea can be edited to match whatever the skill happens to be.

Sweet thanks I'll give that a try! edit... That worked brilliantly! I can't wait to put this through its paces later!