Original d&d character sheet (#6091)

* New Characer Sheet for Original D&D New Characer Sheet for Original D&D. Flexible character sheet for use with Original D&D. * text edits in sheet.json * Update DnD_OD&D.html fixed issue with header, etc. by removing. * Update DnD_OD&D.html removed empty value="" * css, html, json fixes * css font import correction * README.md and sheet.json corrections * @import not working, switch to @font-face * Errors fixed, CSS, HTML and JSON all validate. * Update DnD_OD&D.css * Original D&D Character Sheet General fixes. * Fixed Silver Pieces * Layout is now all CSS Grid simplified CSS and changed layout to all Grid. Flexbox still used for inline labels and input.
2026-08-30 03:40:32 +00:00 · 2020-04-06 15:11:45 -07:00
parent f61dc88245
commit 9233cff4af
5 changed files with 353 additions and 0 deletions
@@ -0,0 +1,203 @@
+/* Original Dungeons & Dragons Character Sheet CSS */
+/* Version 1.1 */
+
+
+/****************
+***   FONTS   ***
+****************/
+
+@import url('https://fonts.googleapis.com/css?family=Special+Elite|Sue+Ellen+Francisco&display=swap');
+
+/* end Fonts */
+
+
+/**************
+**  Wrapper  **
+**************/
+
+.charsheet {
+	padding: 0;
+}
+
+.sheet-odd {
+	max-width: 800px;
+	min-width: 700px;
+	margin: 0;
+	padding: 10px 20px 20px;
+	background: #FAFCFC;
+}
+
+
+/*****************
+**  Typography  **
+*****************/
+
+h2, span, label, .sheet-label, .sheet-text {
+	margin: 0px;
+	font-family: 'Special Elite';
+	font-size: 16px;
+	line-height: 32px;
+	font-weight: bold;
+	color: #7A9EAA;
+}
+
+h2, .sheet-label, .sheet-center {
+	text-align: center;
+}
+
+.sheet-label, .sheet-underline {
+	text-decoration: underline;
+}
+
+/******************
+***   LAYAOUT   ***
+******************/
+
+/* FLEXBOX */
+
+.sheet-flex-row {
+	display: flex;
+	align-items: baseline;
+}
+
+.sheet-label {
+	justify-content: center;
+}
+
+.sheet-flex-row.sheet-misc {
+	align-items: flex-start;
+}
+
+/* GRID for Top section */
+
+.sheet-grid-top {
+	display: grid;
+	grid-template-columns: repeat(16, 1fr);
+	grid-template-rows: auto;
+	grid-gap: 16px;
+	padding-bottom: 8px;
+}
+.sheet-grid-top-span1 {
+	grid-column: span 1;
+}
+.sheet-grid-top-span4 {
+	grid-column: span 4;
+}
+.sheet-grid-top-span6 {
+	grid-column: span 6;
+}
+.sheet-grid-top-span8 {
+	grid-column: span 8;
+}
+.sheet-grid-top-span16 {
+	grid-column: span 16;
+}
+
+/* GRID for Bottom section */
+
+.sheet-grid-bottom {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 200px auto 51px;
+	grid-gap: 8px;
+	padding-bottom: 8px;
+}
+
+.sheet-grid-bottom-item {
+	padding: 0 8px 8px 0;
+}
+
+.sheet-grid-bottom-item1 {
+	grid-row: span 3;
+	border-right: 2px dashed #7A9EAA;
+}
+.sheet-grid-bottom-item2 {
+	border-right: 2px dashed #7A9EAA;
+}
+.sheet-grid-bottom-item5 {
+	grid-row: span 2;
+	border-top: 2px dashed #7A9EAA;
+	border-right: 2px dashed #7A9EAA;
+}
+.sheet-grid-bottom-item6, .sheet-grid-bottom-item9 {
+	border-top: 2px dashed #7A9EAA;
+}
+
+/* END Layout */
+
+
+/************************
+***   FORM ELEMENTS  ***
+************************/
+
+.sheet-odd label {
+	margin: 0;
+	padding: 0 8px 0 0;
+	width: auto;
+}
+
+.sheet-odd input {
+	border: none;
+	margin: 0;
+	padding: 0 8px;
+	border-bottom: 2px solid #7A9EAA;
+	background: transparent;
+	font-family: 'Sue Ellen Francisco';
+	font-size: 20px;
+	color: #333;
+	overflow: visible;
+}
+
+.sheet-odd textarea {
+	border: none;
+	margin: 0;
+	padding: 0 8px;
+	background: transparent;
+	font-family: 'Sue Ellen Francisco';
+	font-size: 20px;
+	color: #333;
+	overflow: visible;
+	width: 100%;
+	flex-grow: 1;
+}
+
+::placeholder {
+	font-family: 'Special Elite';
+	font-size: 16px;
+	text-align: center;
+	line-height: 50px;
+	text-align: center;
+}
+
+input.sheet-fill, .sheet-fill {
+	width: 100%;
+	flex-grow: 1;
+}
+
+input.sheet-attr {
+	text-align: center;
+}
+
+textarea.sheet-textarea-fill {
+	box-sizing:border-box;
+	width: 100%;
+	height: 85%
+}
+
+/* END Form Elements */
+
+/* Misc. */
+
+.sheet-lanuages-saves-misc {
+	border-top: 2px dashed #7A9EAA;
+	border-bottom: 2px dashed #7A9EAA;
+	padding: 16px 0;
+}
+
+.sheet-saves {
+	padding: 16px 0;
+}
+
+.sheet-coin label {
+	width: 55%;
+}
@@ -0,0 +1,123 @@
+<!-- Original Dungeons & Dragons Character Sheet CSS */ -->
+<!-- Version 1.1 -->
+
+  <div class="odd">
+
+    <h2>Dungeons &amp; Dragons</h2>
+
+    <!-- Top Section, Characteristics and Stats -->
+    <div class="section grid-top">
+      <!-- GRID row 1 -->
+        <span class="flex-row grid-top-span8"><label>Name</label><input class="fill" type="text" name="attr_character_name" placeholder="(character name)" title="@{Character}"/></span>
+        <span class="flex-row grid-top-span8"><label>Player</label><input class="fill" type="text" name="attr_player_name" title="@{Player}"/></span>
+      <!-- GRID row 2 -->
+        <span class="flex-row grid-top-span4"><label>Race</label><input class="fill" type="text" name="attr_race" /></span>
+        <span class="flex-row grid-top-span4"><label>Class</label><input class="fill" type="text" name="attr_class" title="@{Class}" /></span>
+        <span class="flex-row grid-top-span4"><input class="fill" type="text" name="attr_level_title" placeholder="(level title)" title="@{Level}" /></span>
+        <span class="flex-row grid-top-span4"><label>Alignment</label><input class="fill" type="text" name="attr_alignment" title="@{Alignment}" /></span>
+      <!-- GRID row 3 -->
+        <span class="grid-top-span1">&nbsp;</span>
+        <span class="grid-top-span1 label">Score</span>
+        <span class="grid-top-span6 label">Bonuses and Penalties</span>
+        <span class="flex-row grid-top-span4"><label>AC</label><input class="attr fill" type="text" name="attr_ac" title="@{ArmorClass}" value="9" /></span>
+        <span class="flex-row grid-top-span4"><label>Level</label><input class="attr fill" type="text" name="attr_level" title="@{Level}" value="1" /></span>
+      <!-- GRID row 4 -->
+        <span class="flex-row grid-top-span1"><label>Str.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_strength" title="@{Strength}" placeholder="0" value="0" /></span>
+          <!-- (<input type="text" name="attr_ExceptionalStrength" title="@{ExceptionalStrength}" value="0" min="0" max="100" />) -->
+          <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{strength}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class="attr-mod fill" name="attr_strength_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span4"><label>HP</label><input class="attr fill" type="text" name="attr_hp" title="@{HitPoints}" value="0" /></span>
+        <span class="flex-row grid-top-span4"><label>XP</label><input class="attr fill" type="text" name="attr_xp" title="@{XP}" value="0" /></span>
+      <!-- GRID row 5 -->
+        <span class="flex-row grid-top-span1"><label>Int.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_intelligence" title="@{Intelligence}" placeholder="0" value="0" /></span>
+          <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{intelligence}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class="attr-mod fill" name="attr_intelligence_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span4"><label>HD</label><input class="attr fill" type="text" name="attr_hd" title="@{HitDice}" value="0" /></span>
+        <span class="flex-row grid-top-span4"><label>XP&nbsp;+/-</label><input class="attr fill" type="text" name="attr_xp_modifier" title="@{XPMod}" value="0" /><span class="text">%</span></span>
+      <!-- GRID row 6 -->
+        <span class="flex-row grid-top-span1"><label>Wis.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_wisdom" title="@{Wisdom}" placeholder="0" value="0" /></span>
+        <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{wisdom}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class=" attr-mod fill" name="attr_wisdom_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span8"><label>Fighting&nbsp;Capability</label><input class="attr fill" type="text" name="attr_fighting_capability" title="@{FightingCapability}" value="Man" /></span>
+      <!-- GRID row 7 -->
+        <span class="flex-row grid-top-span1"><label>Con.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_constitution" title="@{Constitution}" placeholder="0" value="0" /></span>
+        <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{constitution}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class=" attr-mod fill" name="attr_constitution_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span8">&nbsp;</span>
+      <!-- GRID row 8 -->
+        <span class="flex-row grid-top-span1"><label>Dex.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_dexterity" title="@{Dexterity}" placeholder="0" value="0" /></span>
+          <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{dexterity}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class=" attr-mod fill" name="attr_dexterity_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span8"><label>Find&nbsp;Secret&nbsp;Passage</label><input class="attr fill" type="text" name="attr_find_passage" title="@{FindPassage}" value="1–2" /></span>
+      <!-- GRID row 9 -->
+        <span class="flex-row grid-top-span1"><label>Chr.</label></span>
+        <span class="flex-row grid-top-span1"><input class="attr fill" type="text" name="attr_charisma" title="@{Charisma}" placeholder="0" value="0" /></span>
+          <!-- <button type="roll" name="roll_testattack" value="&{template:default} {{name=@{character_name}}} {{result=[[3d6 + @{charisma}]]}}"></button><span class="dee">d</span> -->
+        <span class="flex-row grid-top-span6"><input class=" attr-mod fill" name="attr_charisma_modifiers" type="text" /></span>
+        <span class="flex-row grid-top-span4"><label>Open&nbsp;Door</label><input class="attr fill" type="text" name="attr_open_door" title="@{OpenDoor}" value="1–2" /></span>
+        <span class="flex-row grid-top-span4"><label>Listen</label><input class="attr fill" type="text" name="attr_listen" title="@{Listen}" value="1" /></span>
+      <!-- GRID row 10 -->
+        <span class="grid-top-span16">(Low score is 3&ndash;8, Average is 9&ndash;12, High is 13&ndash;18)</span>
+    </div> <!-- END  Top Section, Characteristics and Stats -->
+
+    <!-- Middle Section, Languages, Saves, Misc. -->
+    <div class="section lanuages-saves-misc">
+      <div class="flex-row fill"><label>Languages</label><input class="fill" type="text" name="attr_languages" title="@{Languages}" value="Common"/></div>
+      <div class="flex-row saves">
+        <label class="underline">Saves:</label>
+        <span class="flex-row"><label>Ray/Posion</label><input class="attr fill" type="text" name="attr_save_v_ray_posion" title="@{Save_v_RayPosion}" value="0" /></span>
+        <span class="flex-row"><label>Wand</label><input class="attr fill" type="text" name="attr_save_v_wand" title="@{Save_v_Wand}" value="0" /></span>
+        <span class="flex-row"><label>Breath</label><input class="attr fill" type="text" name="attr_save_v_breath" title="@{Save_v_Breath}" value="0" /></span>
+        <span class="flex-row"><label>Staves/Spells</label><input class="attr fill" type="text" name="attr_save_v_staves_spells" title="@{Save_v_Stone}" value="0" /></span>
+      </div>
+      <div class="flex-row fill misc"><label>Misc.:</label><textarea class="fill" name="attr_misc" title="@{Miscellaneous}"></textarea></div>
+    </div> <!-- END Middle Section, Languages, Saves, Misc. -->
+
+    <!-- Bottom Section, Equipment, Treasure, Coin, Spells -->
+    <div class="section bottom grid-bottom">
+
+      <div class="section equipment  grid-bottom-item  grid-bottom-item1">
+        <div class="label">Equipment</div>
+        <textarea class="textarea-fill" name="attr_equipment" title="@{Equipment}"  ></textarea>
+      </div> <!-- END section equipment -->
+
+      <div class="section treasure  grid-bottom-item  grid-bottom-item2">
+        <div class="label">Treasure</div>
+        <textarea class="textarea-fill" name="attr_treasure" title="@{Treasure}"  ></textarea>
+      </div> <!-- END section treasure -->
+
+      <div class="section spells-magic  grid-bottom-item  grid-bottom-item3">
+        <div class="label">Spells/Magic</div>
+        <textarea class="textarea-fill" name="attr_spells_magic" title="@{SpellsMagic}" ></textarea>
+      </div> <!-- END section spells-magic -->
+
+      <div class="section coin grid-bottom-item  grid-bottom-item5">
+        <div class="label">Coin</div>
+        <div class="flex-row fill"><label>Platimum</label><input class="attr fill" type="text" name="attr_coin_platimum" title="@{Platimum}" /></div>
+        <div class="flex-row fill"><label>Gold</label><input class="attr fill" type="text" name="attr_coin_gold" title="@{Gold}" /></div>
+        <div class="flex-row fill"><label>Silver</label><input class="attr fill" type="text" name="attr_coin_silver" title="@{Silver}" /></div>
+        <div class="flex-row fill"><label>Copper</label><input class="attr fill" type="text" name="attr_coin_copper" title="@{Copper}" /></div>
+        <div class="flex-row fill"><label>Electrum</label><input class="attr fill" type="text" name="attr_coin_electrum" title="@{Electrum}" /></div>
+      </div> <!-- END section coin -->
+
+      <div class="section encumbrance  grid-bottom-item  grid-bottom-item6">
+        <div class="label fill">Encumbrance</div>
+        <textarea class="textarea-fill" name="attr_encumbrance" title="@{Encumbrance}" ></textarea>
+      </div> <!-- END section encumbrance -->
+
+      <!-- <div class="section  grid-bottom-item  grid-bottom-item7"></div> -->
+
+      <!-- <div class="section  grid-bottom-item  grid-bottom-item8"></div> -->
+
+      <div class="section relative  grid-bottom-item  grid-bottom-item9">
+        <div class="flex-row fill"><label>Relative</label><input class="attr fill" type="text" name="attr_relative" title="@{Relative}" /></div>
+      </div> <!-- END section relative -->
+
+    </div> <!-- END Bottom Section, Equipment, Treasure, Coin, Spells -->
+
+  </div> <!-- END charsheet odd -->
@@ -0,0 +1,19 @@
+# Original Dungeons & Dragons Character Sheet
+This is a character sheet designed for use with Original Dungeons & Dragons. The sheet is lacking a lot of automation in rolls and calculations to give maximum flexibility to the Dungeon Master in which Original Dungeons & Dragons rules to use. This sheet will also work with Holmes Basic D&D.
+
+## Current Version
+1.1
+
+### Change log
+
+#### 1.1
+* Layout changed to CSS Grid, with min- max- width set
+
+#### 1.0
+* Sheet creation for Roll20
+
+### Feedback
+If you have any problems, suggestions or features you'd like to see added to the sheet, please let me know either by  sending me a private message via roll20.  Please be patient when waiting for a reply.
+
+### Credits
+Sheet design and adaptation for Roll20 by [@Malchor](https://app.roll20.net/users/2078012/malchor).
@@ -0,0 +1,8 @@
+{
+  "html": "DnD_ODnD.html",
+  "css": "DnD_ODnD.css",
+  "authors": "Malchor",
+  "roll20userid": "2078012",
+  "preview": "ODnD_Sheet_example.png",
+  "instructions": "# Original Dungeons & Dragons Character Sheet\n\nPlayer sheet for Original Dungeons & Dragons by Gary Gygax and Dave Arneson, the 1974 original edition and any combination of supplements you like.\nThis sheet also works well for Holmes Basic Dungeons & Dragons edited by Eric Holmes (sometime called Blue Book D&D).\n\n\n## Player Sheet\n\n* This sheet is lacking automatic roll buttons as a feature, to allow for maximum flexibility for the DM.\n* While it is tempting to add attack rolls, this assume use of the Alternate Combat System rather than Chainmail.\n* Similarly, ability checks are not added as there are multiple ways to adjudicate ability checks (3d6 roll under, variable number of d6, roll under a d20, and more).\n\n\n## Current Version: 1.1"
+}