lots of progress - basic functionality work - bundling working

app/components/ServerList/ServerList.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import fs from 'fs';
+import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
 import { AppState } from '../../state/AppState';
 
@@ -11,14 +13,62 @@ interface Props {
 @inject('AppState')
 @observer
 export class ServerList extends React.Component<Props, any> {
-
   constructor(props: Props) {
     super(props);
   }
 
+  private renderItems(): any {
+    const { AppState } = this.props;
+    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
+      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
+      return (
+        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
+          {server.name}
+        </div>
+      );
+    });
+  }
+
+  private async play(): Promise<void> {
+    const { directory } = this.props.AppState.selectedExpansion;
+
+    // set the realm list
+    await this.setRealmList();
+
+    // launch wow
+    exec(`"${directory}/WoW.exe"`, (err, output) => {
+      console.log(err);
+      console.log(output);
+    });
+  }
+
+  private setRealmList(): Promise<any> {
+    const { directory } = this.props.AppState.selectedExpansion;
+    const { realmlist } = this.props.AppState.selectedServer;
+
+    return new Promise((resolve, reject) => {
+      fs.writeFile(`${directory}/realmlist.wtf`, `set realmlist ${realmlist}`, err => {
+        err ? reject(err) : resolve();
+      });
+    });
+  }
+
   public render(): any {
+    const { selectedServer } = this.props.AppState;
+
     return (
-      <div className="server-list">Server list</div>
+      <div className="server-list">
+        <div className="server-list-heading">
+          <div>Servers</div>
+          <i className="fa fa-plus"/>
+        </div>
+        <div className="item-container">{this.renderItems()}</div>
+        <div className="start-button-container">
+          <button className="start-button" onClick={() => this.play()} disabled={!selectedServer}>
+            Play
+          </button>
+        </div>
+      </div>
     );
   }
 }