feat: Create the character creator button

index.html

@@ -190,6 +190,12 @@
              text-align: center;
          }
 
+         /* Character sheet */
+
+         #cont-character-sheet {
+             display: none;
+         }
+
          .pool-container {
              display: inline-block;
              border-width: 2px;
@@ -253,7 +259,8 @@
                 <span id="warn-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="cont-no-loaded" class="box">
-                No character is loaded.
+                No character is loaded.<br>
+                <button id="btn-no-char-create-character">Create one</button>
             </div>
             <div id="cont-character-sheet">
                 <div class="box">
@@ -347,6 +354,11 @@
         <script>
          const poolTypes = ["might", "speed", "intellect"];
 
+         const containerNoCharacter = document.getElementById("cont-no-loaded");
+         const containerCharacter = document.getElementById("cont-character-sheet");
+
+         const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
+
          const inpCampaignName = document.getElementById("inp-campaign-name");
          const inpCharacterName = document.getElementById("inp-character-name");
          const inpMaxEffort = document.getElementById("inp-max-effort");
@@ -367,6 +379,9 @@
              intellect: document.getElementById("inp-pool-edge-intellect"),
          };
 
+         var characterRoster = {};
+         var currentCharacter = null;
+
          const checkLocalStorage = () => {
              let storage;
              try {
@@ -396,6 +411,17 @@
              input.disabled = !toUnlock;
          };
 
+         const loadCharacter = (characterID) => {
+             containerNoCharacter.style.display = "none";
+             containerCharacter.style.display = "initial";
+
+             clearSheet();
+         };
+
+         const createCharacter = () => {
+             loadCharacter();
+         };
+
          const clearSheet = () => {
              inpCampaignName.value = "";
              inpCharacterName.value = "";
@@ -421,6 +447,8 @@
                      .querySelectorAll(".input-unlocker")
                      .forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
 
+                 btnNoCharCreateCharacter.addEventListener("click", createCharacter);
+
                  clearSheet();
              },
          );