init

app/Wrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import { Header } from './components/Header';
+import Home from './pages/Home/Home';
+
+// styling
+import './scss/index.scss';
+
+interface Props {}
+
+interface State {}
+
+export default class Wrapper extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render() {
+    return (
+      <BrowserRouter>
+        <div>
+          <Header />
+          <Switch>
+            {/* <Route exact path="/" component={} /> */}
+            <Route component={Home} />
+          </Switch>
+        </div>
+      </BrowserRouter>
+    );
+  }
+}

app/app.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Wrapper from './Wrapper';
+import 'babel-polyfill';
+
+ReactDOM.render(<Wrapper />, document.getElementById('app'));

app/components/Header/Header.scss

@@ -0,0 +1,43 @@
+@import '../../scss/variables.scss';
+
+.header {
+  background: $dark-blue--1;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 10px;
+}
+
+.header__draggable-region {
+  -webkit-app-region: drag;
+  flex: 1;
+  height: 100%;
+}
+
+.header-icon {
+  & + & {
+    margin-left: 10px;
+  }
+
+  cursor: pointer;
+
+  border-color: $blue;
+  color: $blue;
+
+  &:hover {
+    border-color: $blue--lighter;
+    color: $blue--lighter;
+  }
+}
+
+.header-icon--minimize {
+  height: 12px;
+  width: 12px;
+  border-bottom: 2px solid;
+}
+
+.header-icon--maximize {
+  height: 10px;
+  width: 10px;
+  border: 2px solid;
+}

app/components/Header/Header.tsx

@@ -0,0 +1,33 @@
+import { remote } from 'electron';
+import React from 'react';
+import './Header.scss';
+
+export class Header extends React.Component<any, any> {
+
+  exit() {
+    window.close();
+  }
+
+  maximize() {
+    if (remote.getCurrentWindow().isMaximized()) {
+      remote.getCurrentWindow().restore();
+    } else {
+      remote.getCurrentWindow().maximize();
+    }
+  }
+
+  minimize() {
+    remote.getCurrentWindow().minimize();
+  }
+
+  render() {
+    return (
+      <div className="header">
+        <div className="header__draggable-region"/>
+        <div className="header-icon header-icon--minimize" onClick={this.minimize.bind(this)}/>
+        <div className="header-icon header-icon--maximize" onClick={this.maximize.bind(this)}/>
+        <div className="fa fa-times fa-lg header-icon" onClick={() => this.exit()}/>
+      </div>
+    );
+  }
+}

app/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

app/pages/Home/Home.scss

@@ -0,0 +1,3 @@
+.Home {
+  padding: 10px;
+}

app/pages/Home/Home.tsx

@@ -0,0 +1,68 @@
+import * as _ from 'lodash';
+import fs from 'fs';
+import { exec } from 'child_process';
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './Home.scss';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {
+  path: string;
+}
+
+export default class Home extends React.Component<Props, State> {
+  constructor() {
+    super();
+    this.state = {
+      path: '',
+    };
+  }
+
+  onFolderSelect(e: React.ChangeEvent<HTMLInputElement>) {
+    const path: string = _.get(e, `target.files[0].path`);
+
+    if (path) {
+      this.setState({ path });
+    }
+  }
+
+  async startGame() {
+    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);
+    });
+  }
+
+  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();
+      });
+    });
+  }
+
+  render() {
+    const { path } = this.state;
+
+    return (
+      <div className="Home">
+        <div>{path}</div>
+        {/* hacky way of adding webkitdirectory to the input */}
+        <input type="file" {...{ webkitdirectory: 'true' }} onChange={this.onFolderSelect.bind(this)} />
+        <div>
+          <button onClick={this.startGame.bind(this)}>Start</button>
+        </div>
+      </div>
+    );
+  }
+}

app/pages/NotFound/NotFound.scss

@@ -0,0 +1,5 @@
+.NotFound {
+  font-size: 20px;
+  text-align: center;
+  padding-top: 200px;
+}

app/pages/NotFound/NotFound.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './NotFound.scss';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export default class NotFound extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  render() {
+    return <div className="NotFound">404 Not Found</div>;
+  }
+}

app/scss/index.scss

@@ -0,0 +1,4 @@
+@import '~font-awesome/css/font-awesome.css';
+@import '~normalize.css/normalize.css';
+@import './variables.scss';
+@import './style.scss';

app/scss/style.scss

@@ -0,0 +1,24 @@
+html {
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+body {
+  color: $light-blue;
+  background-color: $dark-blue;
+}
+
+.fa {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+a {
+  text-decoration: none;
+  color: $blue;
+  transition: all 0.1s linear;
+  cursor: pointer;
+
+  &:hover {
+    color: $blue--lighter;
+  }
+}

app/scss/variables.scss

@@ -0,0 +1,10 @@
+// colors
+$dark-blue: #1d2938;
+$dark-blue--1: lighten(#1d2938, 5%);
+$dark-blue--2: lighten(#1d2938, 10%);
+$blue: #258de5;
+$blue--lighter: saturate(lighten($blue, 10%), 100%);
+$green: #39ce83;
+$light-blue: #e9eef2;
+$red: #e95779;
+$white: #fff;