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';

app/scss/style.scss

@@ -1,3 +1,5 @@
+@import '~toastr/toastr.scss';
+
 * {
   &:focus {
     outline: 0;

app/scss/variables.scss

@@ -8,3 +8,5 @@ $blue--lighter: saturate(lighten($blue, 10%), 100%);
 $green: #39ce83;
 $red: #e95779;
 $white: darken(#e9eef2, 10%);
+$gray: lighten($dark-blue, 40%);
+$gray--1: lighten($dark-blue, 50%);

app/state/persistent-state-seed.ts

@@ -5,19 +5,54 @@ export const persistentStateSeed = (): any => {
       name: 'Vanilla',
       servers: [
         {
-          name: 'Lights Hope',
-          realmlist: 'logon.lightshope.org',
-          website: 'www.lightshope.org',
+          name: 'Covenant WoW',
+          realmlist: 'logon.covenant-wow.com',
+          website: 'https://www.covenant-wow.com/https://covenant-wow.com/',
         },
         {
           name: 'Elysium',
           realmlist: '',
-          website: 'www.elysium-project.org',
+          website: 'https://www.elysium-project.org',
         },
         {
           name: 'Kronos',
           realmlist: 'login.kronos-wow.com',
-          website: 'www.kronos-wow.com',
+          website: 'https://www.kronos-wow.com?lang=en',
+        },
+        {
+          name: `Light's Hope`,
+          realmlist: 'logon.lightshope.org',
+          website: 'https://www.lightshope.org',
+        },
+        {
+          name: 'Firestorm (Blackrock)',
+          realmlist: 'vanilla.logon.firestorm-servers.com',
+          website: 'https://firestorm-servers.com/us/',
+        },
+        {
+          name: 'NostalGeek',
+          realmlist: 'auth.nostalgeek-serveur.com',
+          website: 'https://www.nostalgeek-serveur.com/',
+        },
+        {
+          name: 'Nostralia',
+          realmlist: 'login.nostralia.org',
+          website: 'https://nostralia.org/news',
+        },
+        {
+          name: 'Retro WoW',
+          realmlist: 'logon.retro-wow.com',
+          website: 'http://retro-wow.com/news',
+        },
+        {
+          name: 'Vanilla Awakened',
+          realmlist: '147.135.254.223',
+          website: 'https://vanilla.awakenednetwork.com/',
+        },
+        {
+          name: 'Vanilla Gaming',
+          realmlist: 'Logon.vanillagaming.org',
+          website: 'http://www.vanillagaming.org/',
         },
       ],
       directory: '',
@@ -25,12 +60,186 @@ export const persistentStateSeed = (): any => {
     },
     bc: {
       name: 'Burning Crusade',
-      servers: [] as any,
+      servers: [
+        {
+          name: 'Ares',
+          realmlist: 'north.ares-wow.com',
+          website: 'http://www.ares-wow.com/',
+        },
+        {
+          name: 'Back2Basics',
+          realmlist: 'logon.back2basics-wow.eu',
+          website: 'https://www.back2basics-wow.eu/',
+        },
+        {
+          name: 'DeathSide',
+          realmlist: 'login.deathside.ru',
+          website: 'http://deathside.ru/',
+        },
+        {
+          name: 'Excalibur',
+          realmlist: 'exwow-serv.exnw.com',
+          website: 'http://www.excalibur.ws/',
+        },
+        {
+          name: 'The Geek Crusade',
+          realmlist: 'auth.thegeekcrusade-serveur.com',
+          website: 'https://www.thegeekcrusade-serveur.com/',
+        },
+        {
+          name: 'Korakion',
+          realmlist: 'tbc.korakion.com',
+          website: 'http://www.korakion.com/',
+        },
+        {
+          name: 'Primal WoW',
+          realmlist: 'login.truewow.org',
+          website: 'https://truewow.org/',
+        },
+        {
+          name: 'PsychoFun 2.4.3',
+          realmlist: '176.31.182.217',
+          website: 'http://wow.psycho-project.eu/',
+        },
+        {
+          name: 'Smolderforge',
+          realmlist: 'connect.smolderforge.com',
+          website: 'https://www.smolderforge.com/site/',
+        },
+        {
+          name: 'Vengeance WoW',
+          realmlist: 'logon.vengeancewow.com',
+          website: 'https://www.vengeancewow.com/',
+        },
+        {
+          name: 'Warmane',
+          realmlist: 'logon.warmane.com',
+          website: 'https://www.warmane.com/',
+        },
+      ] as any,
       directory: '',
       selectedServerIndex: 0,
     },
     wotlk: {
       name: 'Wrath of the Lich King',
+      servers: [
+        {
+          name: 'Dalaran WoW',
+          realmlist: 'logon.dalaran-realmlist.org ',
+          website: 'http://www.dalaran-wow.com/',
+        },
+        {
+          name: 'Deffender',
+          realmlist: 'logon.deffender.eu',
+          website: 'https://deffender.eu/',
+        },
+        {
+          name: 'Eternal WoW',
+          realmlist: 'logon.eternal-wow.com',
+          website: 'http://eternal-wow.com/',
+        },
+        {
+          name: 'Firestorm (Icecrown)',
+          realmlist: 'wotlk.logon.firestorm-servers.com',
+          website: 'https://firestorm-servers.com/us/',
+        },
+        {
+          name: 'Frostgate',
+          realmlist: 'play.frostgale.com',
+          website: 'https://frostgale.com/news.php',
+        },
+        {
+          name: 'Gamer District',
+          realmlist: 'wow.gamer-district.org',
+          website: 'https://www.gamer-district.org/',
+        },
+        {
+          name: 'Laenalith WoW',
+          realmlist: 'logon.laenalith-wow.com',
+          website: 'https://www.laenalith-wow.com/',
+        },
+        {
+          name: 'Nexus WoW',
+          realmlist: 'realmlist nexuswow.org',
+          website: 'http://nexuswow.org/',
+        },
+        {
+          name: 'OmegaWoW',
+          realmlist: 'logon.omegawow.eu',
+          website: 'http://omegawow.eu/news',
+        },
+        {
+          name: `Red's Realm`,
+          realmlist: 'redsrealm.dyndns.org',
+          website: 'http://redsrealm.us/',
+        },
+        {
+          name: 'Rising Gods',
+          realmlist: 'logon.rising-gods.de',
+          website: 'https://www.rising-gods.de/',
+        },
+        {
+          name: 'Sunwell',
+          realmlist: 'logon.sunwell.pl',
+          website: 'https://sunwell.pl/',
+        },
+        {
+          name: 'TrueWoW',
+          realmlist: 'login.truewow.org',
+          website: 'https://truewow.org/',
+        },
+        {
+          name: 'TwinStart (Hyperion)',
+          realmlist: 'wow.twinstar.cz',
+          website: 'http://www.twinstar.cz/?lang=en',
+        },
+        {
+          name: 'Warmane',
+          realmlist: 'logon.warmane.com',
+          website: 'https://www.warmane.com/',
+        },
+        {
+          name: 'WoW Circle',
+          realmlist: 'logon.wowcircle.com',
+          website: 'http://wowcircle.com/en/',
+        },
+        {
+          name: 'WoW Mania',
+          realmlist: 'wotlk.wow-mania.com',
+          website: 'http://www.wow-mania.com/',
+        },
+        {
+          name: 'WoW Mortal',
+          realmlist: 'logon.wowmortal.com ',
+          website: 'https://wowmortal.com/',
+        },
+        {
+          name: 'WoW Sulvus',
+          realmlist: 'wowsulvus.es',
+          website: 'http://wowsulvus.es/fusion/',
+        },
+        {
+          name: 'WoWGasm Reloaded',
+          realmlist: 'logon.wowgasm-reloaded.org',
+          website: 'https://wowgasm-reloaded.org/',
+        },
+        {
+          name: 'World of the Gods',
+          realmlist: 'logon.worldofthegods.com',
+          website: 'https://www.worldofthegods.com/',
+        },
+      ] as any,
+      directory: '',
+      selectedServerIndex: 0,
+    },
+    cata: {
+      name: 'Cataclysm',
+      servers: [] as any,
+      directory: '',
+      selectedServerIndex: 0,
+    },
+    mop: {
+      name: 'Mists of Pandaria',
       servers: [] as any,
       directory: '',
       selectedServerIndex: 0,

app/util/index.ts

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

app/util/toast/toast.scss

@@ -0,0 +1,3 @@
+#toast-container > div {
+  box-shadow: none !important;
+}

app/util/toast/toast.ts

@@ -0,0 +1,24 @@
+import 'jquery';
+import toastr from 'toastr';
+import './toast.scss';
+
+toastr.options = {
+  closeButton: false,
+  debug: false,
+  newestOnTop: false,
+  progressBar: false,
+  positionClass: 'toast-bottom-right',
+  preventDuplicates: true,
+  showDuration: 300,
+  hideDuration: 1000,
+  timeOut: 5000,
+  extendedTimeOut: 1000,
+  showEasing: 'swing',
+  hideEasing: 'linear',
+  showMethod: 'fadeIn',
+  hideMethod: 'fadeOut',
+  tapToDismiss: false,
+};
+
+export const toast = toastr;
+