Update to include intro help text

public/index.html

@@ -18,6 +18,34 @@
     <div class="navbar navbar-expand-lg bg-body-tertiary"><span class="navbar-brand">Dragon Dice Spell Scryer</span></div>
     <spell-scryer></spell-scryer>
   </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="helpModalLabel">Introduction</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          To add a spell, select the "Spells" link, choose a spell by selecting the colored title bar, and then selecting the location you want the spell to appear. To remove, press the title bar of the spell. To view the text of the spell, press the name of the spell.
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const isFirstVisit =localStorage.getItem('is-first-visit') || 'true';
+
+    if (isFirstVisit === 'true') {
+      const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));
+      helpModal.show();
+      localStorage.setItem('is-first-visit', 'false');
+    }
+  </script>
 </body>
 
 </html>

src/Place.ts

@@ -21,11 +21,13 @@ export class Place extends LitElement {
   addSpell() {
     if (this.getCurrentSpell && typeof this.getCurrentSpell === 'function') {
       const spell = this.getCurrentSpell();
+      if (spell) {
         this.spells.push(spell);
         localStorage.setItem(this.location, JSON.stringify(this.spells));
         this.requestUpdate();
       }
     }
+ }
 
   removeSpell(name: string) {
     const index = this.spells.map(spell => spell?.name).indexOf(name);