Added Disable ASCII art to options (#832)

* hotfix getPlayer missing factions

* Added ability to disable ascii art in options. ASCII art is impossible to deal with for screenreaders.

index.html

@@ -511,6 +511,16 @@
                     <input class="optionCheckbox" type="checkbox" name="settingsDisableHotkeys" id="settingsDisableHotkeys">
                 </fieldset>
 
+                <!-- View city as list of buttons instead of ASCII art. -->
+                <fieldset>
+                    <label for="settingsDisableASCIIArt" class="tooltip">Disable ASCII art:
+                        <span class="tooltiptexthigh">
+                            If this is set all ASCII art will be disabled.
+                        </span>
+                    </label>
+                    <input class="optionCheckbox" type="checkbox" name="settingsDisableASCIIArt" id="settingsDisableASCIIArt">
+                </fieldset>
+
                 <!-- Locale for displaying numbers -->
                 <fieldset>
                     <label for="settingsLocale" class="tooltip">Locale:

src/Locations/ui/City.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 
 import { City } from "../City";
 import { LocationName } from "../data/LocationNames";
+import { Settings } from "../../Settings/Settings";
 
 import { StdButton } from "../../ui/React/StdButton";
 
@@ -16,7 +17,7 @@ type IProps = {
 }
 
 export class LocationCity extends React.Component<IProps, any> {
-    render() {
+    asciiCity() {
         const thiscity = this;
         const topprop = this.props
 
@@ -66,9 +67,29 @@ export class LocationCity extends React.Component<IProps, any> {
             elems.push(<pre key={i}>{lineElems(lines[i])}</pre>)
         }
 
+        return elems;
+    }
+
+    listCity() {
+        const locationButtons = this.props.city.locations.map((locName) => {
+            return (
+                <li key={locName}>
+                    <StdButton onClick={this.props.enterLocation.bind(this, locName)} text={locName} />
+                </li>
+            )
+        });
+
+        return (
+            <ul>
+                {locationButtons}
+            </ul>
+        )
+    }
+
+    render() {
         return (
             <>
-                {elems}
+                {Settings.DisableASCIIArt ? this.listCity() : this.asciiCity()}
             </>
         )
     }

src/Locations/ui/TravelAgencyLocation.tsx

@@ -10,6 +10,7 @@ import { createTravelPopup }    from "../LocationsHelpers";
 
 import { CONSTANTS }            from "../../Constants";
 import { IPlayer }              from "../../PersonObjects/IPlayer";
+import { Settings }             from "../../Settings/Settings";
 
 import { numeralWrapper }       from "../../ui/numeralFormat";
 import { StdButton }            from "../../ui/React/StdButton";
@@ -32,7 +33,7 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
         this.btnStyle = { display: "block" };
     }
 
-    render() {
+    asciiWorldMap() {
         const thisTravelAgencyLocation = this;
 
         function LocationLetter(props: any) {
@@ -76,4 +77,42 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
             </div>
         )
     }
+
+
+    listWorldMap() {
+        const travelBtns: React.ReactNode[] = [];
+        for (const key in CityName) {
+            const city = CityName[key];
+
+            // Skip current city
+            if (city === this.props.p.city) { continue; }
+
+            travelBtns.push(
+                <StdButton
+                    key={city}
+                    onClick={createTravelPopup.bind(null, city, this.props.travel)}
+                    style={this.btnStyle}
+                    text={`Travel to ${city}`}
+                />
+            )
+        }
+
+        return (
+            <div>
+                <p>
+                    From here, you can travel to any other city! A ticket
+                    costs {Money(CONSTANTS.TravelCost)}.
+                </p>
+                {travelBtns}
+            </div>
+        )
+    }
+
+    render() {
+        if (Settings.DisableASCIIArt) {
+            return this.listWorldMap();
+        } else {
+            return this.asciiWorldMap();
+        }
+    }
 }

src/Settings/Settings.ts

@@ -20,6 +20,11 @@ interface IDefaultSettings {
      */
     CodeInstructionRunTime: number;
 
+    /**
+     * Render city as list of buttons.
+     */
+    DisableASCIIArt: boolean;
+
     /**
      * Whether global keyboard shortcuts should be recognized throughout the game.
      */
@@ -101,6 +106,7 @@ interface ISettings extends IDefaultSettings {
 const defaultSettings: IDefaultSettings = {
     AutosaveInterval:                    60,
     CodeInstructionRunTime:              50,
+    DisableASCIIArt:                     false,
     DisableHotkeys:                      false,
     Locale:                              "en",
     MaxLogCapacity:                      50,
@@ -119,6 +125,7 @@ const defaultSettings: IDefaultSettings = {
 export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     AutosaveInterval:                    defaultSettings.AutosaveInterval,
     CodeInstructionRunTime:              25,
+    DisableASCIIArt:                     defaultSettings.DisableASCIIArt,
     DisableHotkeys:                      defaultSettings.DisableHotkeys,
     Editor:                              EditorSetting.Ace,
     EditorKeybinding:                    AceKeybindingSetting.Ace,

src/index.html

@@ -524,6 +524,16 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
                     <input class="optionCheckbox" type="checkbox" name="settingsDisableHotkeys" id="settingsDisableHotkeys">
                 </fieldset>
 
+                <!-- View city as list of buttons instead of ASCII art. -->
+                <fieldset>
+                    <label for="settingsDisableASCIIArt" class="tooltip">Disable ASCII art:
+                        <span class="tooltiptexthigh">
+                            If this is set all ASCII art will be disabled.
+                        </span>
+                    </label>
+                    <input class="optionCheckbox" type="checkbox" name="settingsDisableASCIIArt" id="settingsDisableASCIIArt">
+                </fieldset>
+
                 <!-- Locale for displaying numbers -->
                 <fieldset>
                     <label for="settingsLocale" class="tooltip">Locale:

src/ui/setSettingsLabels.js

@@ -23,6 +23,7 @@ function setSettingsLabels() {
     const suppressHospitalizationPopup = document.getElementById("settingsSuppressHospitalizationPopup");
     const autosaveInterval = document.getElementById("settingsAutosaveIntervalValLabel");
     const disableHotkeys = document.getElementById("settingsDisableHotkeys");
+    const disableASCIIArt = document.getElementById("settingsDisableASCIIArt");
     const locale = document.getElementById("settingsLocale");
 
     //Initialize values on labels
@@ -36,6 +37,7 @@ function setSettingsLabels() {
     suppressHospitalizationPopup.checked = Settings.SuppressHospitalizationPopup;
     setAutosaveLabel(autosaveInterval);
     disableHotkeys.checked = Settings.DisableHotkeys;
+    disableASCIIArt.checked = Settings.CityListView;
     locale.value = Settings.Locale;
     numeralWrapper.updateLocale(Settings.Locale); //Initialize locale
 
@@ -99,6 +101,10 @@ function setSettingsLabels() {
         Settings.DisableHotkeys = this.checked;
     }
 
+    disableASCIIArt.onclick = function() {
+        Settings.DisableASCIIArt = this.checked;
+    }
+
     //Locale selector
     locale.onchange = function() {
         if (!numeralWrapper.updateLocale(locale.value)) {