v0.0.2 - webview and other updates

app/components/Content/Content.scss

@@ -2,6 +2,8 @@
 
 .content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 
   .path-container {
     display: flex;
@@ -12,13 +14,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $blue;
+    background: $dark-blue--3;
     transition: background 0.2s linear;
     outline: none;
     padding: 0 15px;
+    border-bottom: 2px solid lighten($dark-blue--3, 10%);
+    font-size: 14px;
+    color: $blue--lighter;
 
     &:hover {
-      background: darken($blue, 5%);
+      background: lighten($dark-blue--3, 5%);
     }
   }
 
@@ -28,9 +33,23 @@
     border: none;
     color: $blue--lighter;
     padding: 5px;
+    font-size: 14px;
 
     &::-webkit-input-placeholder {
-      color: $dark-blue--2;
+      color: $gray;
     }
   }
+
+  .webview {
+    flex: 1;
+  }
+
+  .noSite {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $gray;
+  }
+
 }

app/components/Content/Content.tsx

@@ -12,6 +12,9 @@ interface Props {
 @inject('AppState')
 @observer
 export class Content extends React.Component<Props, any> {
+
+  private webviewRef: any;
+
   constructor() {
     super();
     this.state = {
@@ -19,6 +22,12 @@ export class Content extends React.Component<Props, any> {
     };
   }
 
+  public componentDidMount(): void {
+    this.webviewRef.addEventListener('dom-ready', () => {
+      this.webviewRef.insertCSS(injectedCSS);
+    });
+  }
+
   private onFolderSelect(e: React.ChangeEvent<HTMLInputElement>): void {
     const path: string = _.get(e, `target.files[0].path`);
 
@@ -32,20 +41,15 @@ export class Content extends React.Component<Props, any> {
   }
 
   public render(): any {
-    const { selectedExpansion } = this.props.AppState;
+    const { selectedExpansion, selectedServer } = this.props.AppState;
+    const website = _.get(selectedServer, 'website');
 
     return (
       <div className="content">
         <div className="path-container">
-          <input
-            type="text"
-            className="content-input"
-            placeholder="Your wow directory"
-            value={selectedExpansion.directory}
-            onChange={this.onInputChange.bind(this)}
-          />
           <label htmlFor="folder-browser" className="content-button">
-            Browse
+            {/* <span>Browse</span> */}
+            <i className="fa fa-folder-open"/>
           </label>
           <input
             id="folder-browser"
@@ -54,8 +58,49 @@ export class Content extends React.Component<Props, any> {
             onChange={this.onFolderSelect.bind(this)}
             style={{ display: 'none' }}
           />
+          <input
+            type="text"
+            className="content-input"
+            placeholder="Your WoW directory"
+            value={selectedExpansion.directory}
+            onChange={this.onInputChange.bind(this)}
+          />
         </div>
+        <webview
+          id="foo"
+          className="webview"
+          src={website}
+          ref={(r: any) => this.webviewRef = r}
+          style={{ display: website ? null : 'none' }}
+        />
+        {!website && <div className="noSite"><h2>No Website Available</h2></div>}
       </div>
     );
   }
 }
+
+const injectedCSS: string = `
+  ::-webkit-scrollbar-track
+  {
+    border-radius: 10px;
+    background-color: none;
+  }
+
+  ::-webkit-scrollbar
+  {
+    width: 10px;
+    height: 10px;
+    background-color: none;
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb
+  {
+    border-radius: 10px;
+    background-color: #141d27;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+`;

app/components/Header/Header.scss

@@ -22,12 +22,12 @@
 
   cursor: pointer;
 
-  border-color: $blue;
-  color: $blue;
+  border-color: $gray;
+  color: $gray;
 
   &:hover {
-    border-color: $blue--lighter;
-    color: $blue--lighter;
+    border-color: $gray--1;
+    color: $gray--1;
   }
 }
 
@@ -43,6 +43,10 @@
   border: 2px solid;
 }
 
+.header-icon--close {
+  font-size: 30px;
+}
+
 .header__version {
   color: $blue--lighter;
   font-size: 12px;

app/components/Header/Header.tsx

@@ -37,11 +37,11 @@ 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__version"><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)}/>
-        <div className="fa fa-times fa-lg header-icon" onClick={() => this.exit()}/>
+        <div className="header-icon header-icon--close" onClick={() => this.exit()}>×</div>
       </div>
     );
   }

app/components/ServerList/ServerList.scss

@@ -3,7 +3,7 @@
 .server-list {
   display: flex;
   flex-direction: column;
-  background: darken($dark-blue, 1%);
+  background: $dark-blue;
   min-width: 200px;
   border-right: 1px solid $dark-blue--3;
 
@@ -15,10 +15,10 @@
 
     .fa {
       cursor: pointer;
-      color: $blue;
+      color: $gray;
 
       &:hover {
-        color: $blue--lighter;
+        color: $gray--1;
       }
     }
   }
@@ -33,7 +33,7 @@
     height: 50px;
     line-height: 50px;
     text-align: center;
-    background: darken($dark-blue, 1%);
+    background: $dark-blue;
     transition: all 0.2s linear;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;

app/components/ServerList/ServerList.tsx

@@ -3,6 +3,7 @@ import fs from 'fs';
 import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
 import { AppState } from '../../state/AppState';
+import { toast } from '../../util';
 
 import './ServerList.scss';
 
@@ -32,14 +33,24 @@ export class ServerList extends React.Component<Props, any> {
   private async play(): Promise<void> {
     const { directory } = this.props.AppState.selectedExpansion;
 
-    // set the realm list
-    await this.setRealmList();
+    if (directory === '') {
+      toast.error('Please set your root WoW directory');
+      return;
+    }
 
-    // launch wow
-    exec(`"${directory}/WoW.exe"`, (err, output) => {
-      console.log(err);
-      console.log(output);
-    });
+    try {
+      // set the realm list
+      await this.setRealmList();
+
+      // launch wow
+      exec(`"${directory}/WoW.exe"`, err => {
+        if (err) {
+          toast.error('Unable to find WoW.exe in current directory');
+        }
+      });
+    } catch {
+      toast.error('Unable to find realmlist.wtf in current directory');
+    }
   }
 
   private setRealmList(): Promise<any> {
@@ -47,8 +58,16 @@ export class ServerList extends React.Component<Props, any> {
     const { realmlist } = this.props.AppState.selectedServer;
 
     return new Promise((resolve, reject) => {
-      fs.writeFile(`${directory}/realmlist.wtf`, `set realmlist ${realmlist}`, err => {
-        err ? reject(err) : resolve();
+      fs.stat(`${directory}/realmlist.wtf`, readErr => {
+        // return if we can't find realmlist.wtf
+        if (readErr) {
+          reject(readErr);
+          return;
+        }
+
+        fs.writeFile(`${directory}/realmlist.wtf`, `set realmlist ${realmlist}`, err => {
+          err ? reject(err) : resolve();
+        });
       });
     });
   }
@@ -60,7 +79,7 @@ export class ServerList extends React.Component<Props, any> {
       <div className="server-list">
         <div className="server-list-heading">
           <div>Servers</div>
-          <i className="fa fa-plus"/>
+          <i className="fa fa-plus" />
         </div>
         <div className="item-container">{this.renderItems()}</div>
         <div className="start-button-container">

app/components/SubHeader/SubHeader.scss

@@ -16,7 +16,7 @@
     cursor: pointer;
 
     &:hover, &.selected {
-      background: $dark-blue--3;
+      background: $dark-blue--2;
     }
   }
 

app/components/SubHeader/SubHeader.tsx

@@ -6,11 +6,15 @@ import { AppState } from '../../state/AppState';
 import vanilla from '../../assets/vanilla.png';
 import bc from '../../assets/bc.png';
 import wotlk from '../../assets/wotlk.png';
+import cata from '../../assets/cata.png';
+import mop from '../../assets/mop.png';
 
 const images: any = {
   vanilla,
   bc,
   wotlk,
+  cata,
+  mop,
 };
 
 import './SubHeader.scss';