Add Tour

.eslintrc.cjs

@@ -176,6 +176,7 @@ module.exports = {
 	globals: {
 		globalThis: false,
 		GURPS: false,
+		Tour: false
 	},
 
 	overrides: [

.prettierignore

@@ -0,0 +1,6 @@
+dist
+
+**/*.js
+**/*.mjs
+**/*.html
+**/*.hbs

src/lang/en.json

@@ -105,6 +105,72 @@
     "LatinAlphabet": "Latin Alphabet",
     "ToggleRunes": "Toggle Runes",
     "Runes": "Runes",
+    "TOURS": {
+      "Main": {
+        "title": "Getting Started With Polyglot",
+        "desc": "Understand Polyglot's interaction with Foundry's UI.",
+        "Canvas": {
+          "Title": "Welcome to Polyglot",
+          "Content": "This tour will guide you through the features Polyglot adds to UI and how they interact with Foundry, and some guidance for newcomers about the character selection."
+        },
+        "LanguageSelector": {
+          "Title": "Language Selector",
+          "Content": "The <span class='reference'>Language Selector</span> is where you can select which language you want to speak in, scrambling the messages sent while it is active."
+        },
+        "LanguageSelectorCheckbox": {
+          "Title": "Language Selector's Checkbox",
+          "Content": "The <span class='reference'>Checkbox</span> toggles the scrambling. Any user who unchecks it will speak as if the module was disabled."
+        },
+        "LanguageSelectorSelect": {
+          "Title": "Language Selector's Dropdown",
+          "Content": "The <span class='reference'>Dropdown</span> contains all the languages in your world.<br>Depending on your game system, the languages may have already been set, while in other game systems, you may need to configure them in the <span class='reference'>Game Settings</span>.<br>It will display languages between the ones Known and Unknown by your players' actors."
+        },
+        "LanguageSelectorPips": {
+          "Title": "Language Selector's Pips",
+          "Content": "A <span class='reference'>Pip</span>, similar to the ones shown on the Players List, will be displayed right next to known languages for each player who has at least one actor that understands it. Hovering over a Pip will display the user's name and the list of actors providing access to the language."
+        },
+        "ChatMessage": {
+          "Title": "Chat Messages",
+          "Content": "This is what a message looks like if it uses Polyglot."
+        },
+        "ChatMessageScrambled": {
+          "Title": "Scrambled Text",
+          "Content": "This is what players that don't understand the message's language see."
+        },
+        "ChatMessageTranslation": {
+          "Title": "Translated Text",
+          "Content": "This is what players that understand the message's language see.<br>There is a setting to disable the Scrambled Text from being shown to players that do understand it. Hovering over it will display the language's name."
+        },
+        "ChatMessageGlobe": {
+          "Title": "The Globe",
+          "Content": "This globe can have 3 colors: <ul><li><span style=\"color: green\">Green</span> for Known languages. Hovering over it will display the language's name.</li><li><span style=\"color: blue\">Blue</span> for languages that can be read but the player will have no idea which language it is.<li><span style=\"color: red\">Red</span> for Unknown languages.</li></li></ul>"
+        },
+        "ChatMessageEnding": {
+          "Title": "Chat Messages' Settings",
+          "Content": "Be sure to check out the module settings, where you can make changes to how the chat messages are displayed.<br>There is a particular thing about Foundry and Chat Messages that is related to the <span class='reference'>User Configuration</span>."
+        },
+        "PlayersList": {
+          "Title": "Players List",
+          "Content": "While Polyglot itself doesn't change anything related to it, you should be aware about Core Foundry behavior related to the <span class='reference'>User Configuration</span>. You can open it yourself by right-clicking an user's name on this list here."
+        },
+        "UserConfig": {
+          "Title": "User Configuration",
+          "Content": "This configuration opens up to non-GM users whenever they load into the world if they don't have <span class='reference'>selected a character</span>."
+        },
+        "UserConfigSelectCharacter": {
+          "Title": "Select Character",
+          "Content": "As a GM, you should never have a character selected, as this will make your messages to be sent as that character if it is ever present on a scene.<br>For the players, make sure they select their main character; otherwise, their messages will always be sent as the player instead of their character and they won't be able to read messages on languages their character understands unless its token is present on the canvas.<br>You can tell if a player has selected a character if their name on the Players List is followed by a character's name.<br>This is Core Foundry behavior, Polyglot only follows it."
+        },
+        "ActorOwnership": {
+          "Title": "Actor Ownership",
+          "Content": "About Actor Ownership, if you give a player the \"Owner\" or \"Observer\" permission to an actor, that player will be able to read and write messages as that actor if its token is present on the canvas. If there are more than one token, selecting the token on the canvas will change the player's actor.<br>This is also Core Foundry behavior, Polyglot only follows it."
+        },
+        "End": {
+          "Title": "Ending",
+          "Content": "This concludes this tour. I hope this has cleared some doubts about Polyglot's interaction with Core Foundry behavior.<br>If you want to get more in-depth with the module, check out its settings on the <span class='reference'>Game Settings</span>.<br>If this still proves insufficient, try checking the <a class=\"hyperlink\" href=\"https://github.com/mclemente/fvtt-module-polyglot/wiki\" target=\"_blank\" rel=\"nofollow noopener\">module's wiki</a> for more information."
+        }
+      }
+    },
     "UESRPG.Language": "Language",
     "Generic": {
       "Language": "Language"

src/module/polyglot.js

@@ -8,6 +8,7 @@ import {
 	renderPolyglotGeneralSettingsHandler,
 	renderSettingsConfigHandler,
 } from "./settings.js";
+import { registerTours } from "./tour.js";
 
 Hooks.once("init", () => {
 	CONFIG.TinyMCE.content_css.push("/modules/polyglot/styles/polyglot.css");
@@ -37,6 +38,7 @@ Hooks.on("setup", async () => {
 		);
 	}
 	registerProviderSettings();
+	registerTours();
 	await game.polyglot.languageProvider.setup();
 });
 Hooks.on("ready", () => {

src/module/tour.js

@@ -0,0 +1,161 @@
+
+class PolyglotTour extends Tour {
+	async _preStep() {
+		await super._preStep();
+
+		if (this.currentStep.actions) await this.performActions(this.currentStep.actions);
+
+		// If there's tab info, switch to that tab
+		if (this.currentStep.tab) await this.switchTab(this.currentStep.tab);
+	}
+
+	async performActions(actions) {
+		for (const action of actions) {
+			switch (action) {
+				case "chat-message": {
+					await ChatMessage.create({ content: "Polyglot Test Message", flags: { polyglot: { language: "test" } } });
+					break;
+				}
+				case "user-config": {
+					await game.user.sheet._render(true);
+					break;
+				}
+				case "end": {
+					this.configurator?.close();
+					game.user.sheet.close();
+					break;
+				}
+			}
+		}
+	}
+
+	async switchTab(tab) {
+		switch (tab.parent) {
+			case "sidebar":
+				ui.sidebar.activateTab(tab.id);
+				break;
+			case "settings": {
+				const app = game.settings.sheet;
+				await app._render(true);
+				app.activateTab(tab.id);
+				break;
+			}
+			case "general": {
+				if (!this.configurator) {
+					const configurator = game.settings.menus.get("polyglot.GeneralSettings");
+					this.configurator = new configurator.type();
+				}
+				await this.configurator._render(true);
+				this.configurator.activateTab(tab.id);
+				break;
+			}
+		}
+	}
+}
+
+export function registerTours() {
+	game.tours.register("polyglot", "test", new PolyglotTour(
+		{
+			title: "POLYGLOT.TOURS.Main.title",
+			description: "POLYGLOT.TOURS.Main.desc",
+			restricted: true,
+			display: true,
+			canBeResumed: true,
+			steps: [
+				{
+					id: "canvas",
+					title: "POLYGLOT.TOURS.Main.Canvas.Title",
+					content: "POLYGLOT.TOURS.Main.Canvas.Content",
+					tab: { parent: "sidebar", id: "chat" }
+				},
+				{
+					id: "language-selector",
+					selector: ".polyglot-lang-select",
+					title: "POLYGLOT.TOURS.Main.LanguageSelector.Title",
+					content: "POLYGLOT.TOURS.Main.LanguageSelector.Content"
+				},
+				{
+					id: "language-selector-checkbox",
+					selector: ".polyglot-lang-select input[name=\"polyglot-checkbox\"]",
+					title: "POLYGLOT.TOURS.Main.LanguageSelectorCheckbox.Title",
+					content: "POLYGLOT.TOURS.Main.LanguageSelectorCheckbox.Content"
+				},
+				{
+					id: "language-selector-dropdown",
+					selector: ".polyglot-lang-select span.select2-container",
+					title: "POLYGLOT.TOURS.Main.LanguageSelectorSelect.Title",
+					content: "POLYGLOT.TOURS.Main.LanguageSelectorSelect.Content"
+				},
+				{
+					id: "language-selector-pips",
+					selector: ".polyglot-lang-select span.select2-container",
+					title: "POLYGLOT.TOURS.Main.LanguageSelectorPips.Title",
+					content: "POLYGLOT.TOURS.Main.LanguageSelectorPips.Content",
+					actions: ["chat-message"]
+				},
+				{
+					id: "chat-message",
+					selector: "#chat-log .chat-message:last-of-type",
+					title: "POLYGLOT.TOURS.Main.ChatMessage.Title",
+					content: "POLYGLOT.TOURS.Main.ChatMessage.Content",
+				},
+				{
+					id: "chat-message-scrambled",
+					selector: "#chat-log .chat-message:last-of-type .polyglot-original-text",
+					title: "POLYGLOT.TOURS.Main.ChatMessageScrambled.Title",
+					content: "POLYGLOT.TOURS.Main.ChatMessageScrambled.Content",
+				},
+				{
+					id: "chat-message-translation",
+					selector: "#chat-log .chat-message:last-of-type .polyglot-translation-text",
+					title: "POLYGLOT.TOURS.Main.ChatMessageTranslation.Title",
+					content: "POLYGLOT.TOURS.Main.ChatMessageTranslation.Content",
+				},
+				{
+					id: "chat-message-globe",
+					selector: "#chat-log .chat-message:last-of-type .polyglot-message-language",
+					title: "POLYGLOT.TOURS.Main.ChatMessageGlobe.Title",
+					content: "POLYGLOT.TOURS.Main.ChatMessageGlobe.Content",
+				},
+				{
+					id: "chat-message-ending",
+					selector: "#chat-log .chat-message:last-of-type",
+					title: "POLYGLOT.TOURS.Main.ChatMessageEnding.Title",
+					content: "POLYGLOT.TOURS.Main.ChatMessageEnding.Content",
+				},
+				{
+					id: "players-list",
+					selector: "#ui-left aside#players",
+					title: "POLYGLOT.TOURS.Main.PlayersList.Title",
+					content: "POLYGLOT.TOURS.Main.PlayersList.Content"
+				},
+				{
+					id: "user-config",
+					selector: ".window-app.user-config",
+					title: "POLYGLOT.TOURS.Main.UserConfig.Title",
+					content: "POLYGLOT.TOURS.Main.UserConfig.Content",
+					actions: ["user-config"]
+				},
+				{
+					id: "user-config-select-character",
+					selector: ".window-app.user-config .form-group:has(ul#characters)",
+					title: "POLYGLOT.TOURS.Main.UserConfigSelectCharacter.Title",
+					content: "POLYGLOT.TOURS.Main.UserConfigSelectCharacter.Content"
+				},
+				{
+					id: "actor-ownership",
+					selector: "#sidebar #actors",
+					title: "POLYGLOT.TOURS.Main.ActorOwnership.Title",
+					content: "POLYGLOT.TOURS.Main.ActorOwnership.Content",
+					tab: { parent: "sidebar", id: "actors" }
+				},
+				{
+					id: "end",
+					title: "POLYGLOT.TOURS.Main.End.Title",
+					content: "POLYGLOT.TOURS.Main.End.Content",
+					actions: ["end"]
+				}
+			]
+		}
+	));
+}