Make it possible to create a new character

index.html

@@ -8,19 +8,22 @@
         <style>
          :root {
              /* Dark Color Scheme */
-             --dark-bg: black;
+             --dark-bg: #111111;
-             --dark-text: white;
+             --dark-text: #eeeeee;
              --dark-box-border: #333333;
+             --dark-hl-box-border: #cccccc;
 
              /* Light Color Scheme */
-             --light-bg: white;
+             --light-bg: #eeeeee;
-             --light-text: black;
+             --light-text: #111111;
              --light-box-border: #cccccc;
+             --light-hl-box-border: #333333;
 
              /* Defaults */
              --bg: var(--light-bg);
              --text: var(--light-text);
              --box-border: var(--light-box-border);
+             --hl-box-border: var(--light-hl-box-border);
          }
 
          #color-scheme {
@@ -31,6 +34,7 @@
              --bg: var(--dark-bg);
              --text: var(--dark-text);
              --box-border: var(--dark-box-border);
+             --hl-box-border: var(--dark-hl-box-border);
          }
 
          #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -54,12 +58,14 @@
                  --bg: var(--dark-bg);
                  --text: var(--dark-text);
                  --box-border: var(--dark-box-border);
+                 --hl-box-border: var(--dark-hl-box-border);
              }
 
              #color-scheme:checked ~ .color-scheme-wrapper {
                  --bg: var(--light-bg);
                  --text: var(--light-text);
                  --box-border: var(--light-box-border);
+                 --hl-box-border: var(--light-hl-box-border);
              }
 
              #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -146,9 +152,92 @@
              padding: 1em;
          }
 
+         .box h2 {
+             color: var(--box-border);
+             font-size: 100%;
+             font-weight: normal;
+             display: initial;
+             background-color: var(--bg);
+             position: relative;
+             top: -1.8em;
+             padding: 0 .5em;
+         }
+
+         .box h2::after {
+             display: block;
+             content: "";
+             margin-bottom: -1.5em;
+         }
+
+         input {
+             border: 1px solid var(--hl-box-border);
+             background-color: var(--bg);
+             color: var(--text);
+             width: 4em;
+         }
+
          #no-loaded-container {
              text-align: center;
          }
+
+         #character-container {
+             display: none;
+         }
+
+         #character-id-container {
+             margin: -2em 0 .5em 0;
+             color: var(--box-border);
+             font-size: 75%;
+         }
+
+         #character-id-container::before {
+             content: "ID: ";
+         }
+
+         .pool-container {
+             display: inline-block;
+             border-width: 2px;
+             border-style: solid;
+             border-color: var(--box-border);
+             border-radius: 10px;
+             width: 32%;
+         }
+
+         .pool-container:has(> h3 > input[name="pool-selector"]:checked) {
+             border-color: var(--hl-box-border);
+         }
+
+         .pool-container h4 {
+             color: var(--hl-box-border);
+             font-weight: normal;
+             font-size: 80%;
+         }
+
+         input[name="pool-selector"] {
+             display: none;
+         }
+
+         .input-unlocker {
+             display: none;
+         }
+
+         .input-unlocker + label > .input-locked {
+             display: initial;
+             cursor: pointer;
+         }
+
+         .input-unlocker + label > .input-unlocked {
+             display: none;
+             cursor: pointer;
+         }
+
+         .input-unlocker:checked + label > .input-locked {
+             display: none;
+         }
+
+         .input-unlocker:checked + label  .input-unlocked {
+             display: initial;
+         }
         </style>
     </head>
     <body>
@@ -165,11 +254,100 @@
                 <span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
             </h1>
             <div id="no-loaded-container" class="box">
-                No character is loaded.
+                No character is loaded.<br>
+                <button id="btn-no-char-create-character">Create one</button>
+            </div>
+            <div id="character-container">
+                <div id="character-base-data-container" class="box">
+                    <h2>Character data</h2>
+                    <div id="character-id-container"></div>
+                    <strong>Campaign</strong> <input type="text" id="campaign-name">
+                    <strong>Name</strong> <input type="text" id="character-name">
+                    <strong>Max Effort</strong> <input type="number" id="max-effort" min="1" value="1">
+                </div>
+                <div id="abilities-container" class="box">
+                    <h2>Abilities</h2>
+                    <div class="pool-container">
+                        <h3>
+                            <input id="pool-selector-might" type="radio" name="pool-selector" value="might">
+                            <label for="pool-selector-might">Might</label>
+                        </h3>
+                        <h4>Pool</h4>
+                        <input type="number" id="pool-value-might" min="0" value="0">
+                        /
+                        <input type="number" id="pool-max-might" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-max-unlocker-might">
+                        <label for="pool-max-unlocker-might">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                        <h4>Edge</h4>
+                        <input type="number" id="pool-edge-might" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-might">
+                        <label id="pool-edge-unlocker-label-might" for="pool-edge-unlocker-might">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                    </div>
+                    <div class="pool-container">
+                        <h3>
+                            <input id="pool-selector-speed" type="radio" name="pool-selector" value="speed">
+                            <label for="pool-selector-speed">Speed</label>
+                        </h3>
+                        <h4>Pool</h4>
+                        <input type="number" id="pool-value-speed" min="0" value="0">
+                        /
+                        <input type="number" id="pool-max-speed" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-max-unlocker-speed">
+                        <label for="pool-max-unlocker-speed">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                        <h4>Edge</h4>
+                        <input type="number" id="pool-edge-speed" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-speed">
+                        <label id="pool-edge-unlocker-label-speed" for="pool-edge-unlocker-speed">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                    </div>
+                    <div class="pool-container">
+                        <h3>
+                            <input id="pool-selector-intellect" type="radio" name="pool-selector" value="intellect">
+                            <label for="pool-selector-intellect">Intellect</label>
+                        </h3>
+                        <h4>Pool</h4>
+                        <input type="number" id="pool-value-intellect" min="0" value="0">
+                        /
+                        <input type="number" id="pool-max-intellect" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-max-unlocker-intellect">
+                        <label for="pool-max-unlocker-intellect">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                        <h4>Edge</h4>
+                        <input type="number" id="pool-edge-intellect" min="0" value="0" disabled>
+                        <input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-intellect">
+                        <label id="pool-edge-unlocker-label-intellect" for="pool-edge-unlocker-intellect">
+                            <span class="input-locked">🔒</span>
+                            <span class="input-unlocked">🔓</span>
+                        </label>
+                    </div>
+                </div>
             </div>
         </div>
         <script>
          const characterIDChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+         const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
+         const containerNoCharacter = document.getElementById("no-loaded-container");
+         const containerCharacter = document.getElementById("character-container");
+         const containerCharacterID = document.getElementById("character-id-container");
+         const inputCharacterName = document.getElementById("character-name");
+         const inputCampaignName = document.getElementById("campaign-name");
+         const inputMaxEffort = document.getElementById("max-effort");
+
+         var characterRoster = {};
+         var currentCharacter = null;
 
          const checkLocalStorage = () => {
              let storage;
@@ -201,6 +379,36 @@
              return result;
          };
 
+         const loadCharacter = (characterID) => {
+             containerNoCharacter.style.display = "none";
+             containerCharacter.style.display = "initial";
+
+             characterData = characterRoster[characterID] || {};
+
+             containerCharacterID.textContent = characterID;
+             inputCharacterName.value = characterData.name || "";
+             inputCampaignName.value = characterData.campaign || "";
+             inputMaxEffort.value = characterData.max_effort || 1;
+         };
+
+         const createCharacter = () => {
+             let newID = generateID();
+
+             characterRoster[newID] = {};
+             currentCharacter = newID;
+
+             loadCharacter(newID);
+         };
+
+         const toggleInputLockedHandler = (evt) => {
+             let cb = evt.target;
+             let pool = cb.id.slice(cb.id.lastIndexOf("-") + 1);
+             let input = cb.previousElementSibling;
+             let toUnlock = cb.checked;
+
+             input.disabled = !toUnlock;
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -210,6 +418,12 @@
                  }
              },
          );
+
+         btnNoCharCreateCharacter.addEventListener("click", createCharacter);
+
+         document
+             .querySelectorAll(".input-unlocker")
+             .forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
         </script>
     </body>
 </html>