From aebcd7575e4c325fb5da7856a2e3f5df02b50da0 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 13 Apr 2023 19:16:43 -0700 Subject: [PATCH] add character features page --- sheet.css | 69 ++++++++++++++++-- sheet.js | 2 +- songs.html | 209 ++++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 223 insertions(+), 57 deletions(-) diff --git a/sheet.css b/sheet.css index 4c775dc..f90d155 100644 --- a/sheet.css +++ b/sheet.css @@ -9,10 +9,23 @@ box-sizing: border-box; } +h1, h2 { + line-height: 54px; +} + p { margin: 0px; } +main { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + padding: 0px; + justify-content: center; +} + div.flex { display: flex; flex-direction: row; @@ -31,10 +44,24 @@ div.nowrap { flex-wrap: nowrap; } +hr { + width: 1px; + height: 100%; + border-left: 1px solid var(--text-color); + margin: 0px; +} + @media (max-width: 600px) { div.mobile { display: block; } + hr { + width: 100%; + height: 1px; + border-top: 1px solid var(--text-color); + margin-top: 10px; + margin-bottom: 10px; + } } body { @@ -43,21 +70,21 @@ body { padding: 20px; } -main { - margin-left: auto; - margin-right: auto; +.page { background-color: var(--page-color); color: var(--text-color); border-radius: 10px; + max-width: 80ch; + width: 80ch; } -main > form > * { +.page > form > * { border-bottom: 1px solid var(--text-color); padding-top: 10px; padding-bottom: 10px; } -main > form > *:last-child { +.page > form > *:last-child { border-bottom: none; } @@ -68,8 +95,13 @@ input, select { width: 100%; } -input[type="number"] { - min-width: 4ch; +input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; } input[type="checkbox"] { @@ -88,4 +120,27 @@ h1 { .none { display: none; +} + +.grow-wrap { + display: grid; +} + +.grow-wrap::after { + content: attr(data-replicated-value) " "; + white-space: pre-wrap; + visibility: hidden; +} + +.grow-wrap > textarea { + resize: none; + overflow: hidden; +} + +.grow-wrap > textarea, .grow-wrap::after { + border: 1px dashed black; + padding: 0.5rem; + font: inherit; + background-color: var(--page-color); + grid-area: 1 / 1 / 2 / 2; } \ No newline at end of file diff --git a/sheet.js b/sheet.js index 82813f5..23a93a8 100644 --- a/sheet.js +++ b/sheet.js @@ -256,5 +256,5 @@ function setModifierVal (category, name, 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); + document.querySelector(`#${category}-${name}-result`).innerText = ` = ${value(e)}`; } \ No newline at end of file diff --git a/songs.html b/songs.html index 9d4200a..00e7979 100644 --- a/songs.html +++ b/songs.html @@ -9,56 +9,167 @@ -
-

Songs of the Second Age: Character Sheet

-
-
- - - - - - +
+
+

Songs of the Second Age: Character Sheet

+ +
+ + + + + + +
+
+ + +
+ + + + + +
+
+
+ + + + + + +
+
+ + + + + + +
+
+
+
+
+
+
+ +
+ +
+
+

Character Features

+
+

Core Species

+

1

+
+ +
+

Species

+

1

+
+ +
+

Cornerstone

+

1

+
+ +
+

Cornerstone

+

1

+
+ +
+

Novice

+

1

+
+ +
+

Novice

+

2

+
+ +
+

Novice

+

3

+
+ +
+

Novice

+

4

+
+ +
+

Apprentice

+

5

+
+ +
+

Apprentice

+

6

+
+ +
+

Apprentice

+

7

+
+ +
+

Journeyman

+

9

+
+ +
+

Journeyman

+

10

+
+ +
+

Journeyman

+

11

+
+ +
+

Expert

+

13

+
+ +
+

Expert

+

14

+
+ +
+

Expert

+

15

+
+ +
+

Master

+

17

+
+ +
+

Master

+

18

+
+ +
+

Capstone

+

20

+
+ +
-
- - -
- - - - - -
-
-
- - - - - - -
-
- - - - - - -
-
-
-
-
- +
\ No newline at end of file