this repo has no description
working
+120
-25
+14
-6
index.html
+14
-6
index.html
···
21
21
<section id="part1" class="exercise-part">
22
22
<h2>Part 1: Initial Sorting</h2>
23
23
<div class="columns">
24
+
<div class="column" data-column="unassigned">
25
+
<h3>Unassigned</h3>
26
+
<div id="part1-unassignedContainer" class="card-container"></div>
27
+
</div>
24
28
<div class="column" data-column="veryImportant">
25
29
<h3>Very important to me</h3>
26
-
<div class="card-container" id="veryImportantContainer"></div>
30
+
<div id="part1-veryImportantContainer" class="card-container"></div>
27
31
</div>
28
32
<div class="column" data-column="important">
29
33
<h3>Important to me</h3>
30
-
<div class="card-container" id="importantContainer"></div>
34
+
<div id="part1-importantContainer" class="card-container"></div>
31
35
</div>
32
36
<div class="column" data-column="notImportant">
33
37
<h3>Not important to me</h3>
34
-
<div class="card-container" id="notImportantContainer"></div>
38
+
<div id="part1-notImportantContainer" class="card-container"></div>
35
39
</div>
36
40
</div>
37
41
<button id="toPart2">Next</button>
···
43
47
<p>Take the values from the "Not important to me" and "Important to me" columns and put them aside.</p>
44
48
<p>Create 3 columns again: "Very important to me", "Important to me" and "Not important to me" and do the same exercise as you did in Part 1, but with the "Very important to me" values only.</p>
45
49
<div class="columns">
50
+
<div class="column" data-column="unassigned">
51
+
<h3>Unassigned</h3>
52
+
<div id="part2-unassignedContainer" class="card-container"></div>
53
+
</div>
46
54
<div class="column" data-column="veryImportant">
47
55
<h3>Very important to me</h3>
48
-
<div class="card-container" id="veryImportantContainer"></div>
56
+
<div id="part2-veryImportantContainer" class="card-container"></div>
49
57
</div>
50
58
<div class="column" data-column="important">
51
59
<h3>Important to me</h3>
52
-
<div class="card-container" id="importantContainer"></div>
60
+
<div id="part2-importantContainer" class="card-container"></div>
53
61
</div>
54
62
<div class="column" data-column="notImportant">
55
63
<h3>Not important to me</h3>
56
-
<div class="card-container" id="notImportantContainer"></div>
64
+
<div id="part2-notImportantContainer" class="card-container"></div>
57
65
</div>
58
66
</div>
59
67
<button id="backToPart1">Back</button>
+106
-19
index.ts
+106
-19
index.ts
···
94
94
"CARING",
95
95
"CHALLENGE",
96
96
"CHANGE",
97
-
"COMFORT",
97
+
// "COMFORT",
98
98
// "COMMITMENT",
99
99
// "COMPASSION",
100
100
// "CONTRIBUTION",
···
200
200
document.getElementById("toPart2")?.addEventListener("click", () => {
201
201
const newState = this.undoManager.getState();
202
202
newState.currentPart = "part2";
203
-
// In Part2, we only keep the "veryImportant" cards and move them to "unassigned"
204
-
newState.cards = newState.cards
205
-
.filter((c) => c.column === "veryImportant")
206
-
.map((c) => ({ ...c, column: "unassigned" }));
203
+
204
+
// Get all cards that were in "veryImportant" from Part 1
205
+
const veryImportantCards = newState.cards.filter(card => card.column === "veryImportant");
206
+
207
+
// Move these cards to "unassigned" and remove all other cards
208
+
newState.cards = veryImportantCards.map(card => ({
209
+
...card,
210
+
column: "unassigned"
211
+
}));
212
+
213
+
// Log the state for debugging
214
+
console.log("Transitioning to Part 2:", {
215
+
totalCards: newState.cards.length,
216
+
cards: newState.cards.map(c => ({ name: c.name, column: c.column }))
217
+
});
218
+
207
219
this.updateState(newState);
208
220
});
209
221
document.getElementById("backToPart1")?.addEventListener("click", () => {
···
356
368
partElem.style.display = "block";
357
369
}
358
370
// Render cards for the current part.
359
-
if (this.state.currentPart === "part1" || this.state.currentPart === "part2") {
360
-
// Clear containers
371
+
if (this.state.currentPart === "part1") {
372
+
// Clear containers for Part 1
373
+
[
374
+
"part1-unassignedContainer",
375
+
"part1-veryImportantContainer",
376
+
"part1-importantContainer",
377
+
"part1-notImportantContainer",
378
+
].forEach((id) => {
379
+
const container = document.getElementById(id);
380
+
if (container) container.innerHTML = "";
381
+
});
382
+
// Render each card into its Part 1 container.
383
+
this.state.cards.forEach((card) => {
384
+
const containerId = "part1-" + card.column + "Container"; // Use Part 1 prefix
385
+
const container = document.getElementById(containerId);
386
+
if (container) {
387
+
const cardElem = document.createElement("div");
388
+
cardElem.className = "card";
389
+
cardElem.draggable = true;
390
+
cardElem.textContent = card.name;
391
+
cardElem.dataset.cardId = card.id.toString();
392
+
cardElem.addEventListener("dragstart", (e) => {
393
+
e.dataTransfer?.setData("text/plain", card.id.toString());
394
+
});
395
+
container.appendChild(cardElem);
396
+
}
397
+
});
398
+
} else if (this.state.currentPart === "part2") {
399
+
// Clear containers for Part 2
361
400
[
362
-
"unassignedContainer",
363
-
"veryImportantContainer",
364
-
"importantContainer",
365
-
"notImportantContainer",
401
+
"part2-unassignedContainer",
402
+
"part2-veryImportantContainer",
403
+
"part2-importantContainer",
404
+
"part2-notImportantContainer",
366
405
].forEach((id) => {
367
406
const container = document.getElementById(id);
368
407
if (container) container.innerHTML = "";
369
408
});
370
-
// Render each card into its container.
409
+
410
+
// Log the state for debugging (can be removed later)
411
+
// console.log("Rendering Part 2:", {
412
+
// totalCards: this.state.cards.length,
413
+
// cards: this.state.cards.map(c => ({ name: c.name, column: c.column }))
414
+
// });
415
+
416
+
// In Part 2, show all cards in their current Part 2 columns
371
417
this.state.cards.forEach((card) => {
372
-
const containerId = card.column + "Container";
418
+
const containerId = "part2-" + card.column + "Container"; // Use Part 2 prefix
373
419
const container = document.getElementById(containerId);
374
420
if (container) {
375
421
const cardElem = document.createElement("div");
···
381
427
e.dataTransfer?.setData("text/plain", card.id.toString());
382
428
});
383
429
container.appendChild(cardElem);
430
+
} else {
431
+
// Log error if container not found (can be removed later)
432
+
// console.error(`Container not found for card ${card.name} in column ${card.column}`);
384
433
}
385
434
});
386
435
} else if (this.state.currentPart === "part3") {
···
412
461
if (finalStatements) {
413
462
finalStatements.innerHTML = "";
414
463
const coreCards = this.state.cards.filter((c) => c.column === "core");
415
-
coreCards.forEach((card) => {
464
+
465
+
// Sort coreCards alphabetically by name for consistent order and tab index
466
+
coreCards.sort((a, b) => a.name.localeCompare(b.name));
467
+
468
+
coreCards.forEach((card, index) => {
416
469
const wrapper = document.createElement("div");
417
470
wrapper.className = "final-statement";
418
471
const label = document.createElement("label");
···
420
473
const input = document.createElement("input");
421
474
input.type = "text";
422
475
input.value = this.state.finalStatements[card.id] || "";
476
+
input.tabIndex = index + 1; // Set explicit tabindex for inputs (1 to N)
423
477
input.addEventListener("change", () => {
424
478
const newState = this.undoManager.getState();
425
479
newState.finalStatements[card.id] = input.value;
···
429
483
wrapper.appendChild(input);
430
484
finalStatements.appendChild(wrapper);
431
485
});
486
+
487
+
// Set tabindex for buttons after the inputs
488
+
const backBtn = document.getElementById("backToPart3") as HTMLButtonElement | null;
489
+
const finishBtn = document.getElementById("finish") as HTMLButtonElement | null;
490
+
const nextTabIndex = coreCards.length + 1;
491
+
if (finishBtn) finishBtn.tabIndex = nextTabIndex; // Finish button comes next
492
+
if (backBtn) backBtn.tabIndex = nextTabIndex + 1; // Back button comes after Finish
432
493
}
433
494
} else if (this.state.currentPart === "review") {
434
495
const reviewContent = document.getElementById("reviewContent");
···
439
500
const grid = document.createElement("div");
440
501
grid.className = "values-grid";
441
502
442
-
// Create sections for each category
503
+
// Create sections for core values and additional values
443
504
const categories = [
444
505
{ title: "Core Values (F*CK YEAH)", column: "core" },
445
-
{ title: "Important To Me", column: "important" },
446
-
{ title: "Very Important To Me", column: "veryImportant" },
447
-
{ title: "Not Important To Me", column: "notImportant" }
506
+
{ title: "Also Something I Want", column: "additional" }
448
507
];
449
508
450
509
categories.forEach(category => {
···
514
573
}
515
574
}
516
575
576
+
// Test Part 1 to Part 2 transition
577
+
const app = new App();
578
+
const initialState = app.undoManager.getState();
579
+
580
+
// Test initial state
581
+
assert(initialState.currentPart === "part1", "Initial part should be part1");
582
+
assert(initialState.cards.length > 0, "Should have cards in initial state");
583
+
assert(initialState.cards.every(c => c.column === "unassigned"), "All cards should start in unassigned");
584
+
585
+
// Test moving cards in Part 1
586
+
const part1State = app.undoManager.getState();
587
+
part1State.cards[0].column = "veryImportant";
588
+
app.updateState(part1State);
589
+
590
+
// Test transition to Part 2
591
+
const toPart2State = app.undoManager.getState();
592
+
toPart2State.currentPart = "part2";
593
+
const veryImportantCards = toPart2State.cards.filter(card => card.column === "veryImportant");
594
+
toPart2State.cards = veryImportantCards.map(card => ({
595
+
...card,
596
+
column: "unassigned"
597
+
}));
598
+
app.updateState(toPart2State);
599
+
600
+
const part2State = app.undoManager.getState();
601
+
assert(part2State.currentPart === "part2", "Should be in part2 after transition");
602
+
assert(part2State.cards.length > 0, "Should have cards in part2");
603
+
assert(part2State.cards.every(c => c.column === "unassigned"), "All cards should be in unassigned in part2");
604
+
517
605
// Test UndoManager
518
-
const initialState = { value: 1 };
519
606
const um = new UndoManager(initialState);
520
607
let state = um.getState();
521
608
assert(state.value === 1, "Initial state should be 1");