Track puzzle status on play puzzle list. Fixes #123

package.json

@@ -2,7 +2,7 @@
   "name": "beaming",
   "author": "Kyle Florence",
   "description": "A browser-based puzzle game that involves directing beams through a hexagonal grid.",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "CC BY-NC 4.0",
   "main": "src/electron/main.js",
   "type": "module",

src/components/game.js

@@ -23,6 +23,7 @@ const elements = Object.freeze({
   editPuzzles: document.getElementById('edit-puzzles'),
   play: document.getElementById('title-play'),
   playLoad: document.getElementById('play-custom-load'),
+  playProfile: document.getElementById('play-profile'),
   playPuzzles: document.getElementById('play-puzzles'),
   quit: document.getElementById('title-quit'),
   screen: document.getElementById('screen'),
@@ -37,6 +38,8 @@ export class Game {
   #eventListeners = new EventListeners({ context: this })
 
   constructor () {
+    elements.playProfile.textContent = Storage.Profile.get().name
+
     this.puzzle = new Puzzle()
     this.editor = new Editor(this.puzzle)
 
@@ -177,6 +180,7 @@ export class Game {
   async #onProfileUpdate (event) {
     this.#teardown()
     Storage.Profiles.set(event.detail.id)
+    elements.playProfile.textContent = Storage.Profile.get().name
     Game.updatePuzzles()
   }
 

src/components/storage.js

@@ -67,15 +67,12 @@ export class Storage {
       this.name = name
     }
 
-    static get () {
-      const id = Storage.Profile.getId()
-      if (id !== null) {
-        return Storage.Profiles.get(id)
-      }
+    static get (id) {
+      return Storage.Profiles.get(id ?? Storage.Profile.getId())
     }
 
     static getId () {
-      return localStorage.getItem(getKey(Storage.Prefix, Storage.Keys.Profile))
+      return localStorage.getItem(getKey(Storage.Prefix, Storage.Keys.Profile)) ?? Storage.ProfilesByName.Default.id
     }
   }
 

src/index.html

@@ -110,6 +110,7 @@ <h1 class="flex-left">Play</h1>
           <fieldset>
             <legend>Puzzles</legend>
             <p>Load a puzzle by tapping on its name in the list below. Puzzles which are greyed out have not been unlocked yet.</p>
+            <p id="play-profile-wrapper">Using profile: <span id="play-profile">default</span> (you can change this on the settings screen)</p>
             <ul class="puzzles" id="play-puzzles"></ul>
           </fieldset>
           <details id="play-custom">

src/puzzles/index.js

@@ -33,13 +33,15 @@ export class Puzzles {
         return
       }
 
+      const custom = !Puzzles.has(id)
       const selected = id === currentId
+      const solved = state?.getSolution() !== undefined
 
       const li = document.createElement('li')
       li.classList.add('puzzle')
-      li.classList.toggle('custom', !Puzzles.has(id))
+      li.classList.toggle('custom', custom)
       li.classList.toggle('selected', selected)
-      li.classList.toggle('solved', state?.getSolution() !== undefined)
+      li.classList.toggle('solved', solved)
       li.classList.toggle('unlocked', Puzzles.isUnlocked(id, context))
 
       li.dataset.id = id
@@ -51,28 +53,39 @@ export class Puzzles {
       div.classList.add('wrapper')
       li.append(div)
 
-      const span = document.createElement('span')
-      span.classList.add('flex-left', 'title')
+      const left = document.createElement('span')
+      left.classList.add('flex-left', 'title')
 
       const title = Puzzles.titles[id] ?? state.getTitle() ?? id
       const idParts = id.split('-')
-      span.textContent = title === id ? title : `${idParts.length ? idParts[idParts.length - 1] : id}: ${title}`
+      left.textContent = title === id ? title : `${idParts.length ? idParts[idParts.length - 1] : id}: ${title}`
 
       if (selected) {
         const cont = document.createElement('span')
         cont.classList.add('continue')
         cont.textContent = '(Continue)'
-        span.append(cont)
+        left.append(cont)
       }
 
-      div.append(span)
+      div.append(left)
 
-      if (!Puzzles.has(id)) {
-        const i = document.createElement('i')
-        i.classList.add('flex-right', 'ph-bold', 'ph-trash', 'remove')
-        div.append(i)
+      const right = document.createElement('span')
+      right.classList.add('flex-right')
+
+      if (custom) {
+        const remove = document.createElement('i')
+        remove.classList.add('ph-bold', 'ph-trash', 'remove')
+        remove.title = 'Remove from list'
+        right.append(remove)
       }
 
+      const status = document.createElement('i')
+      status.classList.add('ph-bold', solved ? 'ph-check-circle' : 'ph-circle', 'status')
+      status.title = solved ? 'Solved!' : 'Unsolved'
+      right.append(status)
+
+      div.append(right)
+
       if (context === State.ContextKeys.Play && puzzle.layout?.imports?.length) {
         const ul = document.createElement('ul')
         ul.classList.add('imports')

src/styles.css

@@ -623,8 +623,19 @@ dialog ul {
     padding: 0.5em;
     width: 100%;
   }
+
+  #play-profile-wrapper {
+    border-top: 1px solid #ddd;
+    margin-top: 1em;
+    padding-top: 1em;
+  }
+}
+
+#play-profile {
+  font-weight: bold;
 }
 
+
 #play-custom-configuration-error {
   background-color: #dc3545;
   border: 1px #dc3545 solid;
@@ -799,7 +810,6 @@ dialog ul {
   overflow: hidden;
 }
 
-
 .puzzles {
   border: 1px solid #aaa;
   border-radius: 0.5em;
@@ -863,6 +873,10 @@ dialog ul {
       margin-left: 0.5em;
     }
 
+    &.unlocked > .wrapper .status {
+      color: #333;
+    }
+
     .title {
       display: block;
       margin-left: 0.5em;