feat: custom word lists

Author: jpadgett314

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.2.0 - 2025-11-21
+
+### Added
+
+* Support for LED Matrix Modules with the following firmware: [sigroot/FW_LED_Matrix_Firmware](https://github.com/sigroot/FW_LED_Matrix_Firmware/tree/main/rp2040_firmware)
+
+## 0.3.0 - 2025-11-24
+
+### Added
+
+* New "Custom Word Lists" panel with controls for creating, editing and deleting custom collections of words.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "led-matrix-vocab",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "SEE LICENSE FILE",
   "packageManager": "[email protected]",
   "scripts": {

public/index.html

@@ -30,12 +30,12 @@ <h6 class="m-1">
       <h1 class="text-center mb-4">LED Matrix Word Randomizer 🇯🇵</h1>
 
       <div class="row">
-        <div class="col-lg-6 mb-4">
-          <div class="card shadow-sm border-0 bg-body-tertiary rounded-4 p-3">
+        <div class="col-lg-6">
+          <div class="card shadow-sm border-0 bg-body-tertiary rounded-4 p-3 mb-4">
             <h5 class="mb-3 fw-semibold text-body-secondary">
               LED Matrix Control
             </h5>
-            <div class="d-flex justify-content-between align-items-center mb-3">
+            <div class="d-flex justify-content-between align-items-center">
               <div>
                 <h6>Left Module</h6>
                 <div id="status-display-1" class="d-flex align-items-center">
@@ -50,7 +50,7 @@ <h6>Left Module</h6>
 
             <hr />
 
-            <div class="d-flex justify-content-between align-items-center mb-3">
+            <div class="d-flex justify-content-between align-items-center">
               <div>
                 <h6>Right Module</h6>
                 <div id="status-display-2" class="d-flex align-items-center">
@@ -69,10 +69,51 @@ <h6>Right Module</h6>
               </button>
             </div>
           </div>
+
+          <div class="card shadow-sm border-0 bg-body-tertiary rounded-4 p-3 mb-4">
+            <h5 class="mb-3 fw-semibold text-body-secondary">
+              Custom Word Lists
+            </h5>
+
+            <div class="mb-3">
+              <label for="custom-list-select" class="form-label">Select List</label>
+              <select id="custom-list-select" class="form-select">
+                <option value="no-list">No custom lists</option>
+              </select>
+            </div>
+
+            <div class="d-flex gap-2 justify-content-end mb-2">
+              <button id="add-list-btn" class="btn btn-primary">
+                <i class="bi bi-plus-lg"></i> New
+              </button>
+              <button id="edit-list-btn" class="btn btn-secondary">
+                <i class="bi bi-pencil"></i> Edit
+              </button>
+              <button id="delete-list-btn" class="btn btn-danger">
+                <i class="bi bi-trash"></i> Delete
+              </button>
+            </div>
+
+            <div class="mb-2" id="list-controls" style="display: none;">
+              <label for="list-name-input" class="form-label">Name</label>
+              <input type="text" id="list-name-input" class="form-control mb-3" />
+
+              <label for="custom-list-textarea" class="form-label">Words (one per line)</label>
+              <textarea id="custom-list-textarea" class="form-control mb-3" rows="6" style="font-size: 0.85rem; resize: vertical;"></textarea>
+              <div class="d-flex gap-2 justify-content-end">
+                <button id="save-list-btn" class="btn btn-primary">
+                  <i class="bi bi-floppy"></i> Save
+                </button>
+                <button id="cancel-edit-btn" class="btn btn-secondary">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="col-lg-6 mb-4">
-          <div class="card shadow-sm border-0 bg-body-tertiary rounded-4 p-3 pb-1">
+        <div class="col-lg-6">
+          <div class="card shadow-sm border-0 bg-body-tertiary rounded-4 p-3 mb-4">
             <h5 class="mb-3 fw-semibold text-body-secondary">
               Word Randomizer
             </h5>

public/js/CustomLists.js

@@ -0,0 +1,59 @@
+export class CustomLists {
+  constructor() {
+    this.storageKey = 'custom-word-lists';
+    this.lists = this.loadLists();
+  }
+
+  loadLists() {
+    const stored = localStorage.getItem(this.storageKey);
+    return stored ? JSON.parse(stored) : {};
+  }
+
+  saveLists() {
+    localStorage.setItem(this.storageKey, JSON.stringify(this.lists));
+  }
+
+  createList(name) {
+    if (!name || name.trim() === '') {
+      throw new Error('List name cannot be empty');
+    }
+
+    const id = 'list-' + Date.now();
+    this.lists[id] = {
+      id,
+      name: name.trim(),
+      words: [],
+      created: new Date().toISOString(),
+    };
+
+    this.saveLists();
+    return id;
+  }
+
+  deleteList(id) {
+    if (this.lists[id]) {
+      delete this.lists[id];
+      this.saveLists();
+    }
+  }
+
+  getList(id) {
+    return this.lists[id];
+  }
+
+  getListMetadata() {
+    return Object.values(this.lists).map(list => ({
+      id: list.id,
+      name: list.name,
+      wordCount: list.words.length,
+    }));
+  }
+
+  getRandomWord(id) {
+    const list = this.lists[id];
+    if (!list || list.words.length === 0) {
+      throw new Error('List is empty or not found');
+    }
+    return list.words[Math.floor(Math.random() * list.words.length)];
+  }
+}

public/js/data-sources.js public/js/DataSources.jspublic/js/data-sources.js renamed to public/js/DataSources.js

@@ -76,7 +76,7 @@ class OnlineJlptSource {
 */
 const WORD_SOURCES = [
   {
-    title: 'JLPT (offline)',
+    title: 'JLPT',
     value: 'jlpt1',
     fetch: async () => (await OfflineJlptSource.getEntry()).jp,
   },
@@ -85,13 +85,23 @@ const WORD_SOURCES = [
     value: 'wiki',
     fetch: async () => (await OfflineWikipediaSource.getEntry()).w,
   },
-  {
-    title: 'JLPT (online)',
-    value: 'jlpt2',
-    fetch: async () => (await OnlineJlptSource.getEntry()).word,
-  },
-];  
+];
+
+export class DataSources {
+  constructor(customLists) {
+    this.#customLists = customLists;
+  }
+
+  get() {
+    return [
+      ...WORD_SOURCES, 
+      ...this.#customLists.getListMetadata().map(list => ({
+        title: `Custom List: ${list.name}`,
+        value: `custom-${list.id}`,
+        fetch: async () => this.#customLists.getRandomWord(list.id)
+      }))
+    ];
+  }
 
-export function getSources() {
-  return WORD_SOURCES;
+  #customLists
 }