Switch to babel for builds.

Fix whitespace mangled by prettier

babel.config.js

@@ -1,9 +1,7 @@
-const TEST = process.env.NODE_ENV === "test";
-
 module.exports = {
   presets: [
     "@babel/preset-react",
-    TEST && "@babel/preset-env",
+    "@babel/preset-env",
-    TEST && "@babel/preset-typescript",
+    "@babel/preset-typescript",
-  ].filter(Boolean),
+  ],
 };

browserslist

@@ -0,0 +1 @@
+last 4 versions, not dead, not ie <= 11

package.json

@@ -44,8 +44,6 @@
     "react-dom": "^16.8.3",
     "react-modal": "^3.12.1",
     "sprintf-js": "^1.1.1",
-    "swc": "^1.0.11",
-    "swc-loader": "^0.1.14",
     "tapable": "^1.0.0",
     "treant-js": "^1.0.1",
     "uuid": "^3.2.1",
@@ -98,7 +96,6 @@
     "stylelint": "^9.2.1",
     "stylelint-declaration-use-variable": "^1.6.1",
     "stylelint-order": "^0.8.1",
-    "ts-loader": "^4.5.0",
     "typescript": "^4.2.4",
     "uglify-es": "^3.3.9",
     "uglifyjs-webpack-plugin": "^1.3.0",

src/Casino/CoinFlip.tsx

@@ -81,14 +81,15 @@ export class CoinFlip extends Game<IProps, IState> {
   render(): React.ReactNode {
     return (
       <>
+        <pre>{`+———————+`}</pre>
+        <pre>{`| |   | |`}</pre>
         <pre>
-          +———————+
+          {`| | `}
-          <br />
+          {this.state.result}
-          | | | |<br />| | {this.state.result} | |<br />
+          {` | |`}
-          | | | |<br />
-          +———————+
-          <br />
         </pre>
+        <pre>{`| |   | |`}</pre>
+        <pre>{`+———————+`}</pre>
         <span className="text">Play for: </span>
         <input
           type="number"

src/Casino/SlotMachine.tsx

@@ -307,25 +307,16 @@ export class SlotMachine extends Game<IProps, IState> {
 
   render(): React.ReactNode {
     const t = this.getTable();
+    // prettier-ignore
     return (
       <>
-        <pre>
+<pre>+———————————————————————+</pre>
-          +———————————————————————+
+<pre>| | {t[0][0]} | {t[0][1]} | {t[0][2]} | {t[0][3]} | {t[0][4]} | |</pre>
-          <br />| | {t[0][0]} | {t[0][1]} | {t[0][2]} | {t[0][3]} | {t[0][4]} |
+<pre>| |   |   |   |   |   | |</pre>
-          |<br />
+<pre>| | {symbols[this.state.index[0]]} | {symbols[this.state.index[1]]} | {symbols[this.state.index[2]]} | {symbols[this.state.index[3]]} | {symbols[this.state.index[4]]} | |</pre>
-          | | | | | | | |<br />| | {symbols[this.state.index[0]]} |{" "}
+<pre>| |   |   |   |   |   | |</pre>
-          {symbols[this.state.index[1]]} | {symbols[this.state.index[2]]} |{" "}
+<pre>| | {symbols[(this.state.index[0]+1)%symbols.length]} | {symbols[(this.state.index[1]+1)%symbols.length]} | {symbols[(this.state.index[2]+1)%symbols.length]} | {symbols[(this.state.index[3]+1)%symbols.length]} | {symbols[(this.state.index[4]+1)%symbols.length]} | |</pre>
-          {symbols[this.state.index[3]]} | {symbols[this.state.index[4]]} | |
+<pre>+———————————————————————+</pre>
-          <br />
-          | | | | | | | |<br />| |{" "}
-          {symbols[(this.state.index[0] + 1) % symbols.length]} |{" "}
-          {symbols[(this.state.index[1] + 1) % symbols.length]} |{" "}
-          {symbols[(this.state.index[2] + 1) % symbols.length]} |{" "}
-          {symbols[(this.state.index[3] + 1) % symbols.length]} |{" "}
-          {symbols[(this.state.index[4] + 1) % symbols.length]} | |<br />
-          +———————————————————————+
-          <br />
-        </pre>
         <input
           type="number"
           className="text-input"
@@ -341,32 +332,21 @@ export class SlotMachine extends Game<IProps, IState> {
         />
         <h1>{this.state.status}</h1>
         <h2>Pay lines</h2>
-        <pre>
-          ----- ····· ····· <br />
-          ····· ----- ····· <br />
-          ····· ····· ----- <br />
-        </pre>
-        <br />
 
-        <pre>
+<pre>-----   ·····   ·····</pre>
-          ··^·· \···/ \···/
+<pre>·····   -----   ·····</pre>
-          <br />
+<pre>·····   ·····   -----</pre>
-          ·/·\· ·\·/· ·---·
+<br />
-          <br />
-          /···\ ··v·· ·····
-          <br />
-        </pre>
-        <br />
 
-        <pre>
+<pre>··^··   \···/   \···/</pre>
-          ····· ·---· ·····
+<pre>·/·\·   ·\·/·   ·---·</pre>
-          <br />
+<pre>/···\   ··v··   ·····</pre>
-          ·---· /···\ \···/
+<br />
-          <br />
+
-          /···\ ····· ·---·
+<pre>·····   ·---·   ·····</pre>
-          <br />
+<pre>·---·   /···\   \···/</pre>
-        </pre>
+<pre>/···\   ·····   ·---·</pre>
-      </>
+        </>
     );
   }
 }

src/Infiltration/ui/Intro.tsx

@@ -62,8 +62,8 @@ export function Intro(props: IProps): React.ReactElement {
         </Grid>
         <Grid item xs={10}>
           <pre>[{coloredArrow(props.Difficulty)}]</pre>
-          <pre> ^ ^ ^ ^</pre>
+          <pre>{` ^            ^            ^           ^`}</pre>
-          <pre> Trivial Normal Hard Impossible</pre>
+          <pre>{` Trivial    Normal        Hard    Impossible`}</pre>
         </Grid>
         <Grid item xs={10}>
           <p>

src/Infiltration/ui/KeyHandler.tsx

@@ -10,7 +10,6 @@ export function KeyHandler(props: IProps): React.ReactElement {
   useEffect(() => elem.focus());
 
   function onKeyDown(event: React.KeyboardEvent<HTMLElement>): void {
-    console.log("isTrusted?", event.isTrusted);
     if (!event.isTrusted) {
       console.log("untrusted event!");
       props.onFailure({ automated: true });

src/Locations/ui/TravelAgencyLocation.tsx

@@ -58,52 +58,36 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
       return <span>{props.city[0]}</span>;
     };
 
+    // map needs all this whitespace!
+    // prettier-ignore
     return (
       <div className="noselect">
         <p>
           From here, you can travel to any other city! A ticket costs{" "}
           <Money money={CONSTANTS.TravelCost} player={this.props.p} />.
         </p>
-        <pre> ,_ . ._. _. .</pre>
+        <pre>               ,_   .  ._. _.  .</pre>
-        <pre> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</pre>
+        <pre>           , _-\','|~\~      ~/      ;-'_   _-'     ,;_;_,    ~~-</pre>
-        <pre> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</pre>
+        <pre>  /~~-\_/-'~'--' \~~| ',    ,'      /  / ~|-_\_/~/~      ~~--~~~~'--_</pre>
-        <pre>
+        <pre>  /              ,/'-/~ '\ ,' _  , '<LocationLetter city="Volhaven" />,'|~                   ._/-, /~</pre>
-          {" "}
+        <pre>  ~/-'~\_,       '-,| '|. '   ~  ,\ /'~                /    /_  /~</pre>
-          / ,/'-/~ '\ ,' _ , '<LocationLetter city="Volhaven" />
+        <pre>.-~      '|        '',\~|\       _\~     ,_  ,     <LocationLetter city="Chongqing" />         /,</pre>
-          ,'|~ ._/-, /~
+        <pre>          '\     <LocationLetter city="Sector-12" />  /'~          |_/~\\,-,~  \ "         ,_,/ |</pre>
-        </pre>
+        <pre>           |       /            ._-~'\_ _~|              \ ) <LocationLetter city="New Tokyo" /></pre>
-        <pre> ~/-'~\_, '-,| '|. ' ~ ,\ /'~ / /_ /~</pre>
+        <pre>            \   __-\           '/      ~ |\  \_          /  ~</pre>
-        <pre>
+        <pre>  .,         '\ |,  ~-_      - |          \\_' ~|  /\  \~ ,</pre>
-          .-~ '| '',\~|\ _\~ ,_ , <LocationLetter city="Chongqing" /> /,
+        <pre>               ~-_'  _;       '\           '-,   \,' /\/  |</pre>
-        </pre>
+        <pre>                 '\_,~'\_       \_ _,       /'    '  |, /|'</pre>
-        <pre>
+        <pre>                   /     \_       ~ |      /         \  ~'; -,_.</pre>
-          {" "}
+        <pre>                   |       ~\        |    |  ,        '-_, ,; ~ ~\</pre>
-          '\ <LocationLetter city="Sector-12" /> /'~ |_/~\\,-,~ \ " ,_,/ |
+        <pre>                    \,   <LocationLetter city="Aevum" />  /        \    / /|            ,-, ,   -,</pre>
-        </pre>
+        <pre>                     |    ,/          |  |' |/          ,-   ~ \   '.</pre>
-        <pre>
+        <pre>                    ,|   ,/           \ ,/              \   <LocationLetter city="Ishima" />   |</pre>
-          {" "}
+        <pre>                    /    |             ~                 -~~-, /   _</pre>
-          | / ._-~'\_ _~| \ ) <LocationLetter city="New Tokyo" />
+        <pre>                    | ,-'                                    ~    /</pre>
-        </pre>
+        <pre>                    / ,'                                      ~</pre>
-        <pre> \ __-\ '/ ~ |\ \_ / ~</pre>
+        <pre>                    ',|  ~</pre>
-        <pre> ., '\ |, ~-_ - | \\_' ~| /\ \~ ,</pre>
+        <pre>                      ~'</pre>
-        <pre> ~-_' _; '\ '-, \,' /\/ |</pre>
-        <pre> '\_,~'\_ \_ _, /' ' |, /|'</pre>
-        <pre> / \_ ~ | / \ ~'; -,_.</pre>
-        <pre> | ~\ | | , '-_, ,; ~ ~\</pre>
-        <pre>
-          {" "}
-          \, <LocationLetter city="Aevum" /> / \ / /| ,-, , -,
-        </pre>
-        <pre> | ,/ | |' |/ ,- ~ \ '.</pre>
-        <pre>
-          {" "}
-          ,| ,/ \ ,/ \ <LocationLetter city="Ishima" /> |
-        </pre>
-        <pre> / | ~ -~~-, / _</pre>
-        <pre> | ,-' ~ /</pre>
-        <pre> / ,' ~</pre>
-        <pre> ',| ~</pre>
-        <pre> ~'</pre>
       </div>
     );
   }

webpack.config.js

@@ -108,34 +108,12 @@ module.exports = (env, argv) => {
     module: {
       rules: [
         {
-          test: /\.tsx?$/,
+          test: /\.(js|jsx|ts|tsx)$/,
           exclude: /node_modules/,
           use: {
-            loader: "swc-loader",
+            loader: "babel-loader",
             options: {
-              jsc: {
+              cacheDirectory: true,
-                parser: {
-                  syntax: "typescript",
-                  tsx: true,
-                },
-                target: "es2016",
-              },
-            },
-          },
-        },
-        {
-          test: /\.(jsx)$/,
-          exclude: /node_modules/,
-          use: {
-            loader: "swc-loader",
-            options: {
-              jsc: {
-                parser: {
-                  syntax: "ecmascript",
-                  jsx: true,
-                },
-                target: "es2017",
-              },
             },
           },
         },