Skip to content

Commit a6b0453

Browse files
JoeMcMahon87CopilotJoe McMahon
authored
Fixes for UI Tour (#1429)
* Fix for bug #1421 - UI Tour corrupts main tools menu * Adding tests to cover the failure found with bug #1421 * Trying to tweak UI Tour button and fixing the back navigation issue * Fixes for UI Tour: new button styling, keyboard navigation of tour, changed color of tour titles, fixed back nav issue * Fixing lint error * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fixing lint findings * Changing directjs use * Updated use of driverjs --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Joe McMahon <joe@mcmahongroup.org>
1 parent ff54cd0 commit a6b0453

5 files changed

Lines changed: 233 additions & 63 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.css‎

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2411,32 +2411,44 @@ svg.button {
24112411

24122412
#tourPromptButton {
24132413
position: fixed;
2414-
bottom: 87px;
2415-
right: 26px;
2416-
width: 56px;
2417-
height: 56px;
2414+
bottom: 100px;
2415+
right: 36px;
2416+
width: 36px;
2417+
height: 36px;
24182418
border-radius: 50%;
2419+
background-color: var(--bg-main);
2420+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
24192421
display: flex;
24202422
align-items: center;
24212423
justify-content: center;
24222424
cursor: pointer;
24232425
user-select: none;
24242426
animation: fadeIn 1s ease-in;
2425-
transform: scale(0.65);
2426-
opacity: var(--bg-opacity);
24272427
z-index: 9999;
2428-
overflow: hidden;
24292428
}
24302429

2431-
#tourPromptButton img {
2432-
width: 100%;
2433-
height: 100%;
2434-
object-fit: cover;
2430+
#tourPromptButton button {
2431+
all: unset;
2432+
display: flex;
2433+
align-items: center;
2434+
justify-content: center;
2435+
cursor: pointer;
2436+
}
2437+
2438+
#tourPromptButton svg path {
2439+
fill: #000000;
2440+
stroke: none;
24352441
}
24362442

24372443
#tourPromptButton:hover {
2438-
transform: scale(0.7);
2439-
opacity: 1;
2444+
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
2445+
}
2446+
2447+
#tourPromptButton:hover svg path {
2448+
fill: none;
2449+
stroke: #000000;
2450+
stroke-width: 5;
2451+
stroke-linejoin: round;
24402452
}
24412453

24422454
@media print {
@@ -2465,60 +2477,35 @@ svg.button {
24652477
background: #25252a;
24662478
}
24672479
}
2468-
.driver-popover {
2469-
background-color: #1a1a2e;
2470-
border: 1px solid #4a4a6a;
2471-
color: #c8c8d0;
2472-
font-family: Georgia, serif;
2480+
.fmg-tour.driver-popover {
24732481
border-radius: 4px;
24742482
}
24752483

2476-
.driver-popover-title {
2477-
color: #e8d5a3;
2484+
.fmg-tour .driver-popover-title {
24782485
font-size: 1.1em;
2479-
border-bottom: 1px solid #4a4a6a;
2486+
border-bottom: 1px solid;
24802487
padding-bottom: 0.4em;
24812488
margin-bottom: 0.5em;
24822489
}
24832490

2484-
.driver-popover-description {
2491+
.fmg-tour .driver-popover-description {
24852492
font-size: 0.9em;
24862493
line-height: 1.5;
24872494
}
24882495

2489-
.driver-popover-footer button {
2490-
background-color: #3a3a5c;
2491-
border: 1px solid #5a5a7a;
2492-
color: #c8c8d0;
2496+
.fmg-tour .driver-popover-footer button {
24932497
border-radius: 3px;
24942498
cursor: pointer;
24952499
}
24962500

2497-
.driver-popover-footer button:hover {
2498-
background-color: #4a4a6c;
2501+
.fmg-tour .driver-popover-footer button:hover {
2502+
background-color: #e0e0e0;
24992503
}
25002504

2501-
.driver-popover-progress-text {
2502-
color: #8a8aaa;
2505+
.fmg-tour .driver-popover-progress-text {
25032506
font-size: 0.8em;
25042507
}
25052508

2506-
.driver-popover-arrow-side-left.driver-popover-arrow {
2507-
border-left-color: #4a4a6a;
2508-
}
2509-
2510-
.driver-popover-arrow-side-right.driver-popover-arrow {
2511-
border-right-color: #4a4a6a;
2512-
}
2513-
2514-
.driver-popover-arrow-side-top.driver-popover-arrow {
2515-
border-top-color: #4a4a6a;
2516-
}
2517-
2518-
.driver-popover-arrow-side-bottom.driver-popover-arrow {
2519-
border-bottom-color: #4a4a6a;
2520-
}
2521-
25222509
/* Tooltip demo step: hide overlay and restore all pointer events so the map is fully hoverable */
25232510
body.tour-free-roam .driver-overlay {
25242511
opacity: 0 !important;

‎src/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8636,7 +8636,11 @@
86368636
<script defer src="modules/io/cloud.js?v=1.114.0"></script>
86378637
<script defer src="modules/io/export.js?v=1.120.5"></script>
86388638
<div id="tourPromptButton" style="display:none" data-tip="Take an interactive tour of the map generator">
8639-
<img src="images/tour-button-icon.png" alt="Take a tour" />
8639+
<button type="button" aria-label="Launch UI Tour">
8640+
<svg preserveAspectRatio="xMidYMid" viewBox="0 0 58 52" height="30px" width="30px">
8641+
<path d="M20 10 L20 42 L42 26 Z"/>
8642+
</svg>
8643+
</button>
86408644
</div>
86418645
</body>
86428646
</html>

‎src/modules/ui-tour.ts‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { driver } from "driver.js";
22
import "driver.js/dist/driver.css";
3+
34
const byId = (id: string) => document.getElementById(id);
45

56
function clickTab(tabId: string) {
@@ -41,7 +42,32 @@ function start() {
4142
const tour = driver({
4243
showProgress: true,
4344
allowClose: true,
45+
popoverClass: "fmg-tour",
46+
overlayColor: "rgb(0,0,0)",
47+
overlayOpacity: 0.75,
48+
stagePadding: 4,
49+
stageRadius: 4,
50+
onPopoverRender: (popover) => {
51+
Object.assign(popover.wrapper.style, {
52+
backgroundColor: "#ffffff",
53+
color: "#000000",
54+
border: "1px solid #cccccc",
55+
fontFamily: "Georgia, serif",
56+
});
57+
popover.title.style.color = "#000000";
58+
popover.title.style.borderBottomColor = "#cccccc";
59+
popover.progress.style.color = "#666666";
60+
popover.closeButton.style.color = "#000000";
61+
for (const btn of [popover.previousButton, popover.nextButton]) {
62+
Object.assign(btn.style, {
63+
backgroundColor: "#f0f0f0",
64+
border: "1px solid #cccccc",
65+
color: "#000000",
66+
});
67+
}
68+
},
4469
onDestroyStarted: () => {
70+
document.removeEventListener("keydown", handleKeydown);
4571
hideHeightmapCustomizationPanel();
4672
closeDialogs();
4773
tour.destroy();
@@ -72,6 +98,9 @@ function start() {
7298
},
7399
{
74100
element: "#tooltip",
101+
onHighlightStarted: () => {
102+
document.body.classList.add("tour-free-roam");
103+
},
75104
popover: {
76105
title: "Hover Tooltips",
77106
description:
@@ -84,6 +113,7 @@ function start() {
84113
element: "#optionsTrigger",
85114
onHighlightStarted: () => {
86115
document.body.classList.remove("tour-free-roam");
116+
closeOptionsPanel();
87117
},
88118
popover: {
89119
title: "Open the Options Menu",
@@ -201,6 +231,7 @@ function start() {
201231
{
202232
element: "#configureWorld",
203233
onHighlightStarted: () => {
234+
closeDialogs();
204235
clickTab("optionsTab");
205236
},
206237
popover: {
@@ -209,14 +240,16 @@ function start() {
209240
"This button opens the World Configurator where you can set the map's position on the globe, adjust equatorial and polar temperatures, and configure precipitation to shape the world's climate.",
210241
side: "right",
211242
onNextClick: () => {
212-
editWorld();
213243
tour.moveNext();
214244
},
215245
},
216246
},
217247
{
218248
element: "#worldConfigurator",
219249
disableActiveInteraction: false,
250+
onHighlightStarted: () => {
251+
editWorld();
252+
},
220253
popover: {
221254
title: "World Configurator",
222255
description:
@@ -254,14 +287,16 @@ function start() {
254287
"Open the Heightmap editor to manually sculpt terrain by raising or lowering elevation. Changes here reshape coastlines, rivers, and biomes.",
255288
side: "right",
256289
onNextClick: () => {
257-
showHeightmapCustomizationPanel();
258290
tour.moveNext();
259291
},
260292
},
261293
},
262294
{
263295
element: "#customizationMenu",
264296
disableActiveInteraction: false,
297+
onHighlightStarted: () => {
298+
showHeightmapCustomizationPanel();
299+
},
265300
onDeselected: () => {
266301
hideHeightmapCustomizationPanel();
267302
},
@@ -302,20 +337,25 @@ function start() {
302337
// ── Export / Save / Load ─────────────────────────────────────────────────
303338
{
304339
element: "#exportButton",
340+
onHighlightStarted: () => {
341+
closeDialogs();
342+
},
305343
popover: {
306344
title: "Export",
307345
description:
308346
"Click Export to open the export dialog where you can download the map as an SVG, PNG, or JPEG image, split it into tiles, or export the world data as JSON.",
309347
side: "top",
310348
onNextClick: () => {
311-
showExportPane();
312349
tour.moveNext();
313350
},
314351
},
315352
},
316353
{
317354
element: "#exportMapData",
318355
disableActiveInteraction: false,
356+
onHighlightStarted: () => {
357+
showExportPane();
358+
},
319359
popover: {
320360
title: "Export Options",
321361
description:
@@ -343,6 +383,28 @@ function start() {
343383
],
344384
});
345385

386+
function isEditableTarget(target: EventTarget | null): boolean {
387+
if (!(target instanceof HTMLElement)) return false;
388+
if (target.isContentEditable) return true;
389+
return !!target.closest(
390+
"input, textarea, select, [contenteditable], [contenteditable='plaintext-only']",
391+
);
392+
}
393+
394+
function handleKeydown(e: KeyboardEvent): void {
395+
if (!tour.isActive() || isEditableTarget(e.target)) return;
396+
if (e.key === "ArrowDown") {
397+
e.preventDefault();
398+
e.stopPropagation();
399+
document.querySelector<HTMLElement>(".driver-popover-next-btn")?.click();
400+
} else if (e.key === "ArrowUp") {
401+
e.preventDefault();
402+
e.stopPropagation();
403+
document.querySelector<HTMLElement>(".driver-popover-prev-btn")?.click();
404+
}
405+
}
406+
407+
document.addEventListener("keydown", handleKeydown);
346408
tour.drive();
347409
}
348410

0 commit comments

Comments
 (0)