lots of progress - basic functionality work - bundling working

app/components/Content/Content.scss

@@ -13,7 +13,7 @@
     align-items: center;
     justify-content: center;
     background: $blue;
-    transition: background 0.2s;
+    transition: background 0.2s linear;
     outline: none;
     padding: 0 15px;
 

app/components/Content/Content.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// import fs from 'fs';
-// import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
 import * as _ from 'lodash';
 import { AppState } from '../../state/AppState';
@@ -21,29 +19,6 @@ export class Content extends React.Component<Props, any> {
     };
   }
 
-  // private async startGame(): Promise<void> {
-  //   const { path } = this.state;
-
-  //   // set the realm list
-  //   await this.setRealmList();
-
-  //   // launch wow
-  //   exec(`"${path}/WoW.exe"`, (err, output) => {
-  //     console.log(err);
-  //     console.log(output);
-  //   });
-  // }
-
-  // private setRealmList(): Promise<any> {
-  //   const { path } = this.state;
-
-  //   return new Promise((resolve, reject) => {
-  //     fs.writeFile(`${path}/realmlist.wtf`, 'set realmlist logon.elysium-project.org', err => {
-  //       err ? reject(err) : resolve();
-  //     });
-  //   });
-  // }
-
   private onFolderSelect(e: React.ChangeEvent<HTMLInputElement>): void {
     const path: string = _.get(e, `target.files[0].path`);
 

app/components/Header/Header.scss

@@ -42,3 +42,8 @@
   width: 10px;
   border: 2px solid;
 }
+
+.header__version {
+  color: $blue--lighter;
+  font-size: 12px;
+}

app/components/Header/Header.tsx

@@ -8,6 +8,8 @@ interface Props {
   AppState?: AppState;
 }
 
+declare const VERSION: any;
+
 @inject('AppState')
 @observer
 export class Header extends React.Component<Props, any> {
@@ -35,6 +37,7 @@ export class Header extends React.Component<Props, any> {
   public render(): any {
     return (
       <div className="header">
+        <div className="header__version">PS Launcher <span style={{ fontSize: '10px' }}>v{VERSION}</span></div>
         <div className="header__draggable-region"></div>
         <div className="header-icon header-icon--minimize" onClick={this.minimize.bind(this)}/>
         <div className="header-icon header-icon--maximize" onClick={this.maximize.bind(this)}/>

app/components/ServerList/ServerList.scss

@@ -1,7 +1,73 @@
 @import '../../scss/variables.scss';
 
 .server-list {
+  display: flex;
+  flex-direction: column;
   background: darken($dark-blue, 1%);
-  width: 200px;
+  min-width: 200px;
   border-right: 1px solid $dark-blue--3;
+
+  .server-list-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+
+    .fa {
+      cursor: pointer;
+      color: $blue;
+
+      &:hover {
+        color: $blue--lighter;
+      }
+    }
+  }
+
+  .item-container {
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .list-item {
+    cursor: pointer;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background: darken($dark-blue, 1%);
+    transition: all 0.2s linear;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+
+    &:hover, &.selected {
+      background: $dark-blue--1;
+      color: lighten($white, 10%);
+      border-left-color: $blue;
+    }
+  }
+
+  .start-button-container {
+    height: 100px;
+    padding: 10px;
+  }
+
+  .start-button {
+    height: 100%;
+    width: 100%;
+    border: none;
+    background: $blue;
+    border-radius: 4px;
+    cursor: pointer;
+    color: $white;
+    font-size: 30px;
+
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background: $blue--lighter;
+    }
+  }
+
 }

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>
     );
   }
 }

app/components/SubHeader/SubHeader.scss

@@ -5,10 +5,11 @@
   border-bottom: 1px solid $dark-blue--3;
   display: flex;
   height: 100px;
-  overflow: auto;
+  overflow-x: auto;
 
   .sub-header__item {
-    width: 100px;
+    min-width: 180px;
+    width: 180px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,6 +18,10 @@
     &:hover, &.selected {
       background: $dark-blue--3;
     }
+  }
 
+  .exp-image {
+    width: 90%;
+    height: auto;
   }
 }

app/components/SubHeader/SubHeader.tsx

@@ -3,6 +3,16 @@ import { inject, observer } from 'mobx-react';
 import * as _ from 'lodash';
 import { AppState } from '../../state/AppState';
 
+import vanilla from '../../assets/vanilla.png';
+import bc from '../../assets/bc.png';
+import wotlk from '../../assets/wotlk.png';
+
+const images: any = {
+  vanilla,
+  bc,
+  wotlk,
+};
+
 import './SubHeader.scss';
 
 interface Props {
@@ -26,10 +36,10 @@ export class SubHeader extends React.Component<Props, any> {
 
   private renderItems(): any {
     const { selectedExpKey } = this.props.AppState;
-    return _.map(this.props.AppState.expansions, (exp, key) => {
+    return _.map(this.props.AppState.expansions, (_, key) => {
       return (
         <div key={key} className={'sub-header__item ' + (key === selectedExpKey && 'selected')} onClick={() => this.selectExpansion(key)}>
-          <div style={{ textAlign: 'center' }}>{exp.name}</div>
+          <img src={images[key]} className="exp-image"/>
         </div>
       );
     });