Add Tooltips (#874)

This adds tooltips to all settings. It's not optimal yet, because it
doesn't support mobile yet, where you don't have a cursor that could
hover the settings.

src/api/SpeedrunCom.ts

@@ -52,7 +52,7 @@ export interface VariableValues {
 
 export interface VariableValue {
     label: string,
-    rules?: string,
+    rules?: Option<string>,
 }
 
 export interface GameHeader {

src/css/Tooltip.scss

@@ -0,0 +1,30 @@
+@import 'variables';
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 300px;
+    background-color: $sidebar-background-color;
+    border: 1px solid $border-color;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: $ui-margin;
+    position: absolute;
+    z-index: 1;
+    bottom: calc(100% + $ui-margin);
+    left: 50%;
+    margin-left: -150px;
+    opacity: 0;
+    transition: opacity 0.25s;
+    transition-delay: 0.5s;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}

src/ui/RunEditor.tsx

@@ -696,6 +696,7 @@ export class RunEditor extends React.Component<Props, State> {
                 if (this.variableIsValidForCategory(variable, category)) {
                     speedrunComVariables.push({
                         text: variable.name,
+                        tooltip: "A variable on speedrun.com specific to the game.",
                         value: {
                             CustomCombobox: {
                                 value: metadata.speedrun_com_variables[variable.name] || "",
@@ -711,6 +712,7 @@ export class RunEditor extends React.Component<Props, State> {
                 regionOffset = fields.length;
                 fields.push({
                     text: "Region",
+                    tooltip: "The region of the game that is being played.",
                     value: {
                         CustomCombobox: {
                             value: metadata.region_name,
@@ -724,6 +726,7 @@ export class RunEditor extends React.Component<Props, State> {
                 platformOffset = fields.length;
                 fields.push({
                     text: "Platform",
+                    tooltip: "The platform that the game is being played on.",
                     value: {
                         CustomCombobox: {
                             value: metadata.platform_name,
@@ -737,6 +740,7 @@ export class RunEditor extends React.Component<Props, State> {
                 emulatorOffset = fields.length;
                 fields.push({
                     text: "Uses Emulator",
+                    tooltip: "Whether an emulator is being used to play the game.",
                     value: {
                         Bool: metadata.uses_emulator,
                     },
@@ -749,6 +753,7 @@ export class RunEditor extends React.Component<Props, State> {
             if (customVariableValue && customVariableValue.is_permanent) {
                 customVariables.push({
                     text: customVariableName,
+                    tooltip: "A custom variable specified by you. These can be displayed with the text component.",
                     value: {
                         RemovableString: customVariableValue.value,
                     },
@@ -1106,7 +1111,7 @@ export class RunEditor extends React.Component<Props, State> {
                 if (this.variableIsValidForCategory(variable, category) && variable["is-subcategory"]) {
                     const currentValue = this.state.editor.metadata.speedrun_com_variables[variable.name];
                     const foundValue = Object.values(variable.values.values).find((v) => v.label === currentValue);
-                    if (foundValue !== undefined && foundValue.rules !== undefined) {
+                    if (foundValue?.rules != null) {
                         subcategoryRules.push(renderMarkdown(`## ${foundValue.label} Rules\n${foundValue.rules}`));
                     }
                 }

src/ui/Settings.tsx

@@ -9,6 +9,8 @@ import { UrlCache } from "../util/UrlCache";
 import { openFileAsArrayBuffer } from "../util/FileUtil";
 import * as FontList from "../util/FontList";
 
+import "../css/Tooltip.scss";
+
 export interface Props<T> {
     context: string,
     setValue: (index: number, value: T) => void,
@@ -23,6 +25,7 @@ export interface ExtendedSettingsDescriptionJson {
 
 export interface ExtendedSettingsDescriptionFieldJson {
     text: string,
+    tooltip: string,
     value: ExtendedSettingsDescriptionValueJson,
 }
 
@@ -1351,7 +1354,10 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
 
             settingsRows.push(
                 <tr key={`${this.props.context}$${valueIndex}`}>
-                    <td>{field.text}</td>
+                    <td className="tooltip">
+                        {field.text}
+                        <span className="tooltip-text">{field.tooltip}</span>
+                    </td>
                     <td>{component}</td>
                 </tr>,
             );

tsconfig.json

@@ -3,7 +3,7 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "ESNext",
-        "target": "ES2018",
+        "target": "ES2022",
         "jsx": "react",
         "strictNullChecks": true,
         "noImplicitReturns": true,
@@ -17,7 +17,7 @@
         "allowSyntheticDefaultImports": true,
         "moduleResolution": "Node",
         "lib": [
-            "ES2018",
+            "ES2022",
             "DOM"
         ]
     },