v0.0.2 - webview and other updates

@types/all/index.d.ts

@@ -1 +1,7 @@
 declare module '*.png';
+
+declare module JSX {
+  interface IntrinsicElements {
+    'webview': any;
+  }
+}

README.md

@@ -1,7 +1,15 @@
 # Work in progress
 
+## TODO
+- Add modals for server editing
+- Remove/edit servers in the list
+- App icon
+
+## Prototype 3 10/25/2017
+![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype3.png?raw=true "Prototype 3")
+
 ## Prototype 2 10/18/2017
-![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype2.PNG?raw=true "Prototype 2")
+![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype2.png?raw=true "Prototype 2")
 
 ## Early Prototype 10/17/2017
-![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype1.PNG?raw=true "Prototype 1")
+![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype1.png?raw=true "Prototype 1")

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

main.js

@@ -13,7 +13,7 @@ let mainWindow;
 
 function createWindow() {
   // Create the browser window.
-  mainWindow = new BrowserWindow({ width: 800, height: 600, frame: false });
+  mainWindow = new BrowserWindow({ width: 1200, height: 800, frame: false });
 
   // and load the index.html of the app.
   mainWindow.loadURL(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps-launcher",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A seed for a simple react application with typescript.",
   "main": "main.js",
   "scripts": {
@@ -31,11 +31,6 @@
   "author": "Mitchell Gerber",
   "license": "MIT",
   "dependencies": {
-    "@types/electron": "^1.6.10",
-    "@types/lodash": "^4.14.77",
-    "@types/react": "^16.0.10",
-    "@types/react-dom": "^16.0.1",
-    "@types/react-router-dom": "^4.0.2",
     "autoprefixer": "^7.1.5",
     "babel-core": "^6.21.0",
     "babel-loader": "^7.1.2",
@@ -51,6 +46,7 @@
     "file-loader": "^1.1.5",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^2.24.1",
+    "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "mobx": "^3.3.1",
     "mobx-react": "^4.3.3",
@@ -61,15 +57,22 @@
     "react-dom": "^16.0.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
+    "toastr": "^2.1.2",
     "ts-loader": "^2.0.3",
     "tslint": "^5.7.0",
     "tslint-config-airbnb": "^5.3.0",
     "typescript": "^2.2.2",
     "url-loader": "^0.6.2",
-    "webpack": "3.7.1",
-    "webpack-dev-server": "2.9.2"
+    "webpack": "3.7.1"
   },
   "devDependencies": {
+    "webpack-dev-server": "2.9.2",
+    "@types/electron": "^1.6.10",
+    "@types/lodash": "^4.14.77",
+    "@types/react": "^16.0.10",
+    "@types/react-dom": "^16.0.1",
+    "@types/react-router-dom": "^4.0.2",
+    "@types/toastr": "^2.1.35",
     "electron": "^1.7.9",
     "electron-builder": "^19.37.2"
   }

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es6",
     "module": "es6",
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "preserve",
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "noImplicitThis": true,

yarn.lock

@@ -32,6 +32,10 @@
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.0.tgz#093d67ed780d889c9543f6dca24ebee0b6b9fc45"
 
+"@types/jquery@*":
+  version "3.2.15"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.15.tgz#3f620a9f5a0b296866f4bc729825226d0a35fba6"
+
 "@types/lodash@^4.14.77":
   version "4.14.77"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.77.tgz#0bc699413e84d6ed5d927ca30ea0f0a890b42d75"
@@ -74,6 +78,12 @@
   version "16.0.10"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.10.tgz#a24b630f5f1f170866a148a147d4fc8636ea88e0"
 
+"@types/toastr@^2.1.35":
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/@types/toastr/-/toastr-2.1.35.tgz#9b29ee786744994c4f7eafee415b125f835dd854"
+  dependencies:
+    "@types/jquery" "*"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -3446,6 +3456,10 @@ isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
+
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
@@ -5689,6 +5703,10 @@ to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+toastr@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/toastr/-/toastr-2.1.2.tgz#fd69066ae7578a5b3357725fc9c7c335e9b681df"
+
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"