feat: Make it possible to create a new character

index.html

@@ -196,6 +196,16 @@
              display: none;
          }
 
+         #cont-character-id {
+             margin: -2em 0 .5em 0;
+             color: var(--box-border);
+             font-size: 75%;
+         }
+
+         #cont-character-id::before {
+             content: "ID: ";
+         }
+
          .pool-container {
              display: inline-block;
              border-width: 2px;
@@ -265,6 +275,7 @@
             <div id="cont-character-sheet">
                 <div class="box">
                     <h2>Character data</h2>
+                    <div id="cont-character-id"></div>
                     <strong>Campaign</strong> <input type="text" id="inp-campaign-name">
                     <strong>Name</strong> <input type="text" id="inp-character-name">
                     <strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1" disabled>
@@ -357,6 +368,7 @@
 
          const containerNoCharacter = document.getElementById("cont-no-loaded");
          const containerCharacter = document.getElementById("cont-character-sheet");
+         const containerCharacterID = document.getElementById("cont-character-id");
 
          const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
 
@@ -417,10 +429,33 @@
              containerCharacter.style.display = "initial";
 
              clearSheet();
+
+             characterData = characterRoster[characterID] || {};
+
+             containerCharacterID.textContent = characterID;
+             inpCharacterName.value = characterData.name || "";
+             inpCampaignName.value = characterData.campaign || "";
+             inpMaxEffort.value = characterData.max_effort || 1;
+             inpArmor.value = characterData.armor || 0;
+
+             for (var poolType of poolTypes) {
+                 var poolData = characterData[poolType] || {};
+
+                 inpPoolValue[poolType].value = poolData.pool || 8;
+                 inpPoolMax[poolType].value = poolData.max || 8;
+                 inpPoolEdge[poolType].value = poolData.edge || 0;
+             }
+
+             currentCharacter = characterID;
          };
 
          const createCharacter = () => {
-             loadCharacter();
+             let newID = generateID();
+
+             characterRoster[newID] = {};
+             currentCharacter = newID;
+
+             loadCharacter(newID);
          };
 
          const clearSheet = () => {