detailed values

index.html

···
         <button id="undoBtn" disabled>Undo</button>
         <button id="redoBtn" disabled>Redo</button>
         <button id="clearStorageBtn">Clear Storage</button>
+        <button id="useLimitedValuesBtn">Use 8 Values (Default)</button>
+        <button id="useAllValuesBtn">Use All Values</button>
       </div>
     </header>
 

index.test.ts

···
 import { UndoManager } from "./undoManager";
 import type { AppState, ValueCard } from "./index";
 import { describe, test, expect, beforeEach } from "bun:test";
+import { ALL_VALUE_DEFINITIONS, LIMITED_VALUE_DEFINITIONS, VALUES } from "./values"; // Import value counts for tests
+const ALL_VALUES_COUNT = VALUES.length;
+const LIMITED_VALUES_COUNT = 8;
 
 // Mock necessary DOM elements and event listeners
 beforeEach(() => {
   // Mock window.alert to prevent blocking tests
   window.alert = () => {}; // Replace alert with a non-blocking empty function
+  // Mock window.confirm to default to true (yes) for tests, unless overridden
+  window.confirm = () => true; 
 
   // The happy-dom environment should provide localStorage automatically.
   // We still need to clear it before each test if the environment doesn't do it automatically.
···
     expect(part4State.cards.filter(c => c.column === 'additional').length).toBe(1);
   });
 
+  // --- Tests for Value Set Toggling ---
+  test('Initial state uses limited value set', () => {
+      const state = app.undoManager.getState();
+      expect(state.valueSet).toBe('limited');
+      expect(state.cards.length).toBe(LIMITED_VALUES_COUNT);
+  });
+
+  test('Clicking "Use All Values" switches set and resets state', () => {
+      // Arrange: Start in default limited state
+      let initialState = app.undoManager.getState();
+      expect(initialState.valueSet).toBe('limited');
+      // Optional: Advance state to ensure reset happens
+      initialState.currentPart = 'part2';
+      initialState.finalStatements = { 1: 'test' }; 
+      app.updateState(initialState);
+
+      // Act: Call the method directly instead of simulating click
+      app.toggleValueSet();
+
+      // Assert
+      const newState = app.undoManager.getState();
+      expect(newState.valueSet).toBe('all');
+      expect(newState.cards.length).toBe(ALL_VALUES_COUNT);
+      expect(newState.currentPart).toBe('part1'); // Should reset to part1
+      expect(Object.keys(newState.finalStatements).length).toBe(0); // Statements cleared
+  });
+
+  test('Clicking "Use 8 Values" switches set back and resets state', () => {
+      // Arrange: Start, switch to All using direct call
+      // const buttonAll = document.getElementById('useAllValuesBtn');
+      // buttonAll?.click(); // Replace click simulation
+      app.toggleValueSet(); // Call directly to set state to 'all' for setup
+
+      let allState = app.undoManager.getState();
+      expect(allState.valueSet).toBe('all'); // Verify setup worked
+      // Optional: Advance state to ensure reset happens
+      allState.currentPart = 'part3';
+      app.updateState(allState);
+
+      // Act: Call the method directly instead of simulating click
+      app.toggleValueSet();
+
+      // Assert
+      const newState = app.undoManager.getState();
+      expect(newState.valueSet).toBe('limited');
+      expect(newState.cards.length).toBe(LIMITED_VALUES_COUNT);
+      expect(newState.currentPart).toBe('part1');
+      expect(Object.keys(newState.finalStatements).length).toBe(0);
+  });
+
+    test('Clicking the active value set button does nothing', () => {
+      const initialState = app.undoManager.getState();
+      expect(initialState.valueSet).toBe('limited');
+
+      // Act: Click the already active limited button
+      const buttonLimited = document.getElementById('useLimitedValuesBtn');
+      buttonLimited?.click();
+
+      // Assert: State should not have changed
+      const stateAfterClick = app.undoManager.getState();
+      expect(stateAfterClick).toEqual(initialState);
+  });
+
+    test('Switching value set does NOT happen if confirm returns false', () => {
+      const initialState = app.undoManager.getState();
+      expect(initialState.valueSet).toBe('limited');
+
+      // Arrange: Mock confirm to return false for this test
+      const originalConfirm = window.confirm;
+      window.confirm = () => false;
+
+      // Act: Click the button to switch to all values
+      const buttonAll = document.getElementById('useAllValuesBtn');
+      buttonAll?.click();
+
+      // Assert: State should not have changed
+      const stateAfterClick = app.undoManager.getState();
+      expect(stateAfterClick).toEqual(initialState);
+
+      // Cleanup: Restore original confirm
+      window.confirm = originalConfirm;
+  });
+
   // Add more tests for other transitions (Part 2 -> 3, 3 -> 4, etc.)
   // Add tests for card movement logic (moveCard)
   // Add tests for final statement input
···
         { id: 2, name: 'TEST2', column: 'unassigned', order: 1 },
       ],
       finalStatements: {},
+      valueSet: 'limited'
     };
     um = new UndoManager(initialState);
   });

index.ts

···
   cards: ValueCard[];
   // In part 4, user can add final statements for each core value (by card id)
   finalStatements: { [cardId: number]: string };
+  valueSet: 'limited' | 'all'; // Add state for current value set
 }
 
 // Import the UndoManager from its own file
 import { UndoManager } from './undoManager';
-// Import the default values from its own file
-import { DEFAULT_VALUES } from './values';
+// Import the original VALUES array
+import { VALUES } from './values'; 
 import { debounce } from 'lodash'; // Import debounce from lodash
 
+// Define the structure based on the imported VALUES
+interface ValueDefinition {
+    name: string;
+    description: string;
+}
+
+// Recreate ALL_VALUES and LIMITED_VALUES based on the import
+const ALL_VALUE_DEFINITIONS: ValueDefinition[] = VALUES;
+const LIMITED_VALUE_DEFINITIONS = ALL_VALUE_DEFINITIONS.slice(0, 8);
+
+// Create a global map for easy description lookup
+const valueDefinitionsMap = new Map<string, string>(
+    ALL_VALUE_DEFINITIONS.map((def: ValueDefinition) => [def.name, def.description])
+);
+
 // Main application class
 export class App {
   private state: AppState;
···
   constructor() {
     // Load state from localStorage or initialize default state.
     const saved = localStorage.getItem(this.storageKey);
+    let initialState: AppState;
     if (saved) {
       try {
-        this.state = JSON.parse(saved) as AppState;
+        initialState = JSON.parse(saved) as AppState;
+        // Ensure valueSet exists in saved state, default if not
+        if (!initialState.valueSet) {
+            initialState.valueSet = 'limited'; 
+        }
       } catch {
-        this.state = this.defaultState();
+        initialState = this.defaultState('limited'); // Default to limited on error
       }
     } else {
-      this.state = this.defaultState();
+      initialState = this.defaultState('limited'); // Default to limited initially
     }
+    this.state = initialState; // Set initial state before UndoManager
     this.undoManager = new UndoManager<AppState>(this.state);
 
     // Re-add initialization using lodash debounce
···
     this.updateUndoRedoButtons();
   }
 
-  // Default state with some sample value cards.
-  public defaultState(): AppState {
-    const sampleCards: ValueCard[] = DEFAULT_VALUES.map((name, index) => ({
+  // Default state with sample value cards based on the selected set
+  public defaultState(valueSet: 'limited' | 'all' = 'limited'): AppState {
+    const definitionsToUse = valueSet === 'all' ? ALL_VALUE_DEFINITIONS : LIMITED_VALUE_DEFINITIONS;
+    const sampleCards: ValueCard[] = definitionsToUse.map((definition: ValueDefinition, index: number) => ({
       id: index + 1,
-      name,
+      name: definition.name, // Use name from definition
       column: "unassigned",
       order: index,
     }));
···
       currentPart: "part1",
       cards: sampleCards,
       finalStatements: {},
+      valueSet: valueSet, // Store the set used
     };
   }
 
···
     this.saveState();
     this.render();
     this.updateUndoRedoButtons();
+  }
+
+  // Method to toggle between limited and all values
+  public toggleValueSet() {
+    const currentState = this.undoManager.getState();
+    const nextSet = currentState.valueSet === 'limited' ? 'all' : 'limited';
+    // Generate a fresh default state for the *new* set, resetting progress
+    const newState = this.defaultState(nextSet);
+    // Execute this change through the undo manager
+    this.updateState(newState);
   }
 
   // Bind event listeners for UI interactions.
   private bindEventListeners() {
+    const appInstance = this; // Capture the App instance
+
     // Navigation buttons
     document.getElementById("toPart2")?.addEventListener("click", () => {
       const newState = this.undoManager.getState();
···
       this.updateState(newState); // Call updateState directly
     });
 
+    // --- Add listeners for the toggle buttons ---
+    document.getElementById("useLimitedValuesBtn")?.addEventListener("click", () => {
+        // Use captured instance
+        const currentSet = appInstance.undoManager.getState().valueSet;
+        if (currentSet !== 'limited') {
+            if (confirm("Switching value sets will reset your current progress. Are you sure?")) {
+                appInstance.toggleValueSet(); // Use captured instance
+            }
+        }
+    });
+    document.getElementById("useAllValuesBtn")?.addEventListener("click", () => {
+        // Use captured instance
+        const currentSet = appInstance.undoManager.getState().valueSet;
+        if (currentSet !== 'all') {
+            if (confirm("Switching value sets will reset your current progress. Are you sure?")) {
+                appInstance.toggleValueSet(); // Use captured instance
+            }
+        }
+    });
+
     // Undo/Redo buttons
     document.getElementById("undoBtn")?.addEventListener("click", () => {
       const prev = this.undoManager.undo();
···
     }
   }
 
-  // Creates a draggable card element.
+  // Creates a draggable card element, now including the description.
   private createCardElement(card: ValueCard): HTMLElement {
     const cardElem = document.createElement("div");
     cardElem.className = "card";
     cardElem.draggable = true;
-    cardElem.textContent = card.name;
     cardElem.dataset.cardId = card.id.toString();
+
+    // Create elements for name and description
+    const nameElem = document.createElement("span");
+    nameElem.className = "card-name";
+    nameElem.textContent = card.name;
+
+    const descriptionElem = document.createElement("span");
+    descriptionElem.className = "card-description";
+    // Look up description from the map
+    descriptionElem.textContent = valueDefinitionsMap.get(card.name) || ""; 
+
+    cardElem.appendChild(nameElem);
+    cardElem.appendChild(descriptionElem);
+
     cardElem.addEventListener("dragstart", (e) => {
       e.dataTransfer?.setData("text/plain", card.id.toString());
     });
···
         });
         reviewContent.appendChild(list);
       }
+    }
+
+    // -- Update toggle button appearance based on current state --
+    const limitedBtn = document.getElementById("useLimitedValuesBtn") as HTMLButtonElement | null;
+    const allBtn = document.getElementById("useAllValuesBtn") as HTMLButtonElement | null;
+    if (limitedBtn) {
+        limitedBtn.classList.toggle('active', this.state.valueSet === 'limited');
+        limitedBtn.disabled = this.state.valueSet === 'limited'; // Disable active button
+    }
+    if (allBtn) {
+        allBtn.classList.toggle('active', this.state.valueSet === 'all');
+        allBtn.disabled = this.state.valueSet === 'all'; // Disable active button
     }
   }
 

package.json

···
   "scripts": {
     "dev": "parcel ./index.html",
     "build": "parcel build ./index.html",
-    "test": "bun test"
+    "test": "bun test",
+    "deploy": "bun run build && bunx wrangler pages deploy dist"
   }
 }

styles.css

···
     margin: 0.5em 0;
     border-radius: 4px;
     cursor: grab;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  
+  .card-name {
+    font-weight: bold;
+    margin-bottom: 4px;
+    display: block;
+  }
+  
+  .card-description {
+    font-size: 0.85em;
+    color: #555;
+    display: block;
+    padding-left: 4px;
+    padding-right: 4px;
   }
   
   .values-grid {

values.ts

···
-// Top-level constant for default values
-export const DEFAULT_VALUES = [
-  "ACCEPTANCE",
-  "ACCURACY",
-  "ACHIEVEMENT",
-  "ADVENTURE",
-  "ATTRACTIVENESS",
-  "AUTHORITY",
-  "AUTONOMY",
-  "BEAUTY",
-  "CARING",
-  "CHALLENGE",
-  "CHANGE",
-  // "COMFORT",
-  // "COMMITMENT",
-  // "COMPASSION",
-  // "CONTRIBUTION",
-  // "COOPERATION",
-  // "COURTESY",
-  // "CREATIVITY",
-  // "DEPENDABILITY",
-  // "DUTY",
-  // "ECOLOGY",
-  // "EXCITEMENT",
-  // "FAITHFULNESS",
-  // "FAME",
-  // "FAMILY",
-  // "FITNESS",
-  // "FLEXIBILITY",
-  // "FORGIVENESS",
-  // "FRIENDSHIP",
-  // "FUN",
-  // "GENEROSITY",
-  // "GENUINENESS",
-  // "GOD'S WILL",
-  // "GROWTH",
-  // "HEALTH",
-  // "HELPFULNESS",
-  // "HONESTY",
-  // "HOPE",
-  // "HUMILITY",
-  // "HUMOR",
-  // "INDEPENDENCE",
-  // "INDUSTRY",
-  // "INNER PEACE",
-  // "INTIMACY",
-  // "JUSTICE",
-  // "KNOWLEDGE",
-  // "LEISURE",
-  // "LOVED",
-  // "LOVING",
-  // "MASTERY",
-  // "MINDFULNESS",
-  // "MODERATION",
-  // "MONOGAMY",
-  // "NONCONFORMITY",
-  // "NURTURANCE",
-  // "OPENNESS",
-  // "ORDER",
-  // "PASSION",
-  // "PLEASURE",
-  // "POPULARITY",
-  // "POWER",
-  // "PURPOSE",
-  // "RATIONALITY",
-  // "REALISM",
-  // "RESPONSIBILITY",
-  // "RISK",
-  // "ROMANCE",
-  // "SAFETY",
-  // "SELF-ACCEPTANCE",
-  // "SELF-CONTROL",
-  // "SELF-ESTEEM",
-  // "SELF-KNOWLEDGE",
-  // "SERVICE",
-  // "SEXUALITY",
-  // "SIMPLICITY",
-  // "SOLITUDE",
-  // "SPIRITUALITY",
-  // "STABILITY",
-  // "TOLERANCE",
-  // "TRADITION",
-  // "VIRTUE",
-  // "WEALTH",
-  // "WORLD PEACE",
-]; 
+export const VALUES = [
+  {
+    "name": "ACCEPTANCE",
+    "description": "to be accepted as I am"
+  },
+  {
+    "name": "ACCURACY",
+    "description": "to be accurate in my opinions and beliefs"
+  },
+  {
+    "name": "ACHIEVEMENT",
+    "description": "to have important accomplishments"
+  },
+  {
+    "name": "ADVENTURE",
+    "description": "to have new and exciting experiences"
+  },
+  {
+    "name": "ATTRACTIVENESS",
+    "description": "to be physically attractive"
+  },
+  {
+    "name": "AUTHORITY",
+    "description": "to be in charge of and responsible for others"
+  },
+  {
+    "name": "AUTONOMY",
+    "description": "to be self-determined and independent"
+  },
+  {
+    "name": "BEAUTY",
+    "description": "to appreciate beauty around me"
+  },
+  {
+    "name": "CARING",
+    "description": "to take care of others"
+  },
+  {
+    "name": "CHALLENGE",
+    "description": "to take on difficult tasks and problems"
+  },
+  {
+    "name": "CHANGE",
+    "description": "to have a life full of change and variety"
+  },
+  {
+    "name": "COMFORT",
+    "description": "to have a pleasant and comfortable life"
+  },
+  {
+    "name": "COMMITMENT",
+    "description": "to make enduring, meaningful commitments"
+  },
+  {
+    "name": "COMPASSION",
+    "description": "to feel and act on concern for others"
+  },
+  {
+    "name": "CONTRIBUTION",
+    "description": "to make a lasting contribution in the world"
+  },
+  {
+    "name": "COOPERATION",
+    "description": "to work collaboratively with others"
+  },
+  {
+    "name": "COURTESY",
+    "description": "to be considerate and polite toward others"
+  },
+  {
+    "name": "CREATIVITY",
+    "description": "to have new and original ideas"
+  },
+  {
+    "name": "DEPENDABILITY",
+    "description": "to be reliable and trustworthy"
+  },
+  {
+    "name": "DUTY",
+    "description": "to carry out my duties and obligations"
+  },
+  {
+    "name": "ECOLOGY",
+    "description": "to live in harmony with the environment"
+  },
+  {
+    "name": "EXCITEMENT",
+    "description": "to have a life full of thrills and stimulation"
+  },
+  {
+    "name": "FAITHFULNESS",
+    "description": "to be loyal and true in relationships"
+  },
+  {
+    "name": "FAME",
+    "description": "to be known and recognized"
+  },
+  {
+    "name": "FAMILY",
+    "description": "to have a happy, loving family"
+  },
+  {
+    "name": "FITNESS",
+    "description": "to be physically fit and strong"
+  },
+  {
+    "name": "FLEXIBILITY",
+    "description": "to adjust to new circumstances easily"
+  },
+  {
+    "name": "FORGIVENESS",
+    "description": "to be forgiving of others"
+  },
+  {
+    "name": "FRIENDSHIP",
+    "description": "to have close, supportive friends"
+  },
+  {
+    "name": "FUN",
+    "description": "to play and have fun"
+  },
+  {
+    "name": "GENEROSITY",
+    "description": "to give what I have to others"
+  },
+  {
+    "name": "GENUINENESS",
+    "description": "to act in a manner that is true to who I am"
+  },
+  {
+    "name": "GOD'S WILL",
+    "description": "to seek and obey the will of God"
+  },
+  {
+    "name": "GROWTH",
+    "description": "to keep changing and growing"
+  },
+  {
+    "name": "HEALTH",
+    "description": "to be physically well and healthy"
+  },
+  {
+    "name": "HELPFULNESS",
+    "description": "to be helpful to others"
+  },
+  {
+    "name": "HONESTY",
+    "description": "to be honest and truthful"
+  },
+  {
+    "name": "HOPE",
+    "description": "to maintain a positive and optimistic outlook"
+  },
+  {
+    "name": "HUMILITY",
+    "description": "to be modest and unassuming"
+  },
+  {
+    "name": "HUMOR",
+    "description": "to see the humorous side of myself and the world"
+  },
+  {
+    "name": "INDEPENDENCE",
+    "description": "to be free from dependence on others"
+  },
+  {
+    "name": "INDUSTRY",
+    "description": "to work hard and well at my life tasks"
+  },
+  {
+    "name": "INNER PEACE",
+    "description": "to experience personal peace"
+  },
+  {
+    "name": "INTIMACY",
+    "description": "to share my innermost experiences with others"
+  },
+  {
+    "name": "JUSTICE",
+    "description": "to promote fair and equal treatment for all"
+  },
+  {
+    "name": "KNOWLEDGE",
+    "description": "to learn and contribute valuable knowledge"
+  },
+  {
+    "name": "LEISURE",
+    "description": "to take time to relax and enjoy"
+  },
+  {
+    "name": "LOVED",
+    "description": "to be loved by those close to me"
+  },
+  {
+    "name": "LOVING",
+    "description": "to give love to others"
+  },
+  {
+    "name": "MASTERY",
+    "description": "to be competent in my everyday activities"
+  },
+  {
+    "name": "MINDFULNESS",
+    "description": "to live consciously and mindfully of the present moment"
+  },
+  {
+    "name": "MODERATION",
+    "description": "to avoid excesses and find a middle ground"
+  },
+  {
+    "name": "MONOGAMY",
+    "description": "to have one close, loving relationship"
+  },
+  {
+    "name": "NONCONFORMITY",
+    "description": "to question and challenge authority and norms"
+  },
+  {
+    "name": "NURTURANCE",
+    "description": "to take care of and nurture others"
+  },
+  {
+    "name": "OPENNESS",
+    "description": "to be open to new experiences, ideas, and options"
+  },
+  {
+    "name": "ORDER",
+    "description": "to have a life that is well-ordered and organized"
+  },
+  {
+    "name": "PASSION",
+    "description": "to have deep feelings about ideas, activities, or people"
+  },
+  {
+    "name": "PLEASURE",
+    "description": "to feel good"
+  },
+  {
+    "name": "POPULARITY",
+    "description": "to be well-liked by many people"
+  },
+  {
+    "name": "POWER",
+    "description": "to have control over others"
+  },
+  {
+    "name": "PURPOSE",
+    "description": "to have meaning and direction in my life"
+  },
+  {
+    "name": "RATIONALITY",
+    "description": "to be guided by reason and logic"
+  },
+  {
+    "name": "REALISM",
+    "description": "to see and act realistically and practically"
+  },
+  {
+    "name": "RESPONSIBILITY",
+    "description": "to make and carry out responsible decisions"
+  },
+  {
+    "name": "RISK",
+    "description": "to take risks and chances"
+  },
+  {
+    "name": "ROMANCE",
+    "description": "to have intense, exciting love in my life"
+  },
+  {
+    "name": "SAFETY",
+    "description": "to be safe and secure"
+  },
+  {
+    "name": "SELF-ACCEPTANCE",
+    "description": "to accept myself as I am"
+  },
+  {
+    "name": "SELF-CONTROL",
+    "description": "to be disciplined in my own actions"
+  },
+  {
+    "name": "SELF-ESTEEM",
+    "description": "to feel good about myself"
+  },
+  {
+    "name": "SELF-KNOWLEDGE",
+    "description": "to have a deep and honest understanding of myself"
+  },
+  {
+    "name": "SERVICE",
+    "description": "to be of service to others"
+  },
+  {
+    "name": "SEXUALITY",
+    "description": "to have an active and satisfying sex life"
+  },
+  {
+    "name": "SIMPLICITY",
+    "description": "to live life simply, with minimal needs"
+  },
+  {
+    "name": "SOLITUDE",
+    "description": "to have time and space where I can be apart from others"
+  },
+  {
+    "name": "SPIRITUALITY",
+    "description": "to grow and mature spiritually"
+  },
+  {
+    "name": "STABILITY",
+    "description": "to have a life that stays fairly consistent"
+  },
+  {
+    "name": "TOLERANCE",
+    "description": "to accept and respect those who differ from me"
+  },
+  {
+    "name": "TRADITION",
+    "description": "to follow respected patterns of the past"
+  },
+  {
+    "name": "VIRTUE",
+    "description": "to live a morally pure and excellent life"
+  },
+  {
+    "name": "WEALTH",
+    "description": "to have plenty of money"
+  },
+  {
+    "name": "WORLD PEACE",
+    "description": "to work to promote peace in the world"
+  }
+]
+