add electron frontend, closes #6

mtgatracker · Mar 17, 2018 · 7901be4 · 7901be4
1 parent f161282
commit 7901be4
Show file tree

Hide file tree

Showing 42 changed files with 658 additions and 1 deletion.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1 @@
+MIT License
diff --git a/README.md b/README.md
@@ -1,2 +1,11 @@
-# mtga-tools
+# MTGA Tracker
 Collection of tools built up around the MTGA Client logs
+
+### Backend
+
+The back end is at it's core a python log parser project. There's a flask app tacked on top to communicate state with
+the frontend.
+
+### Front end
+
+The front end of MTGA Tracker is an electron app that uses node / http to communicate with the backend
diff --git a/app/flask_app.py b/app/flask_app.py
@@ -0,0 +1,22 @@
+import flask
+from flask import Flask, request
+from app.mtga_app import mtga_watch_app
+
+http_app = Flask(__name__)
+
+
+@http_app.route('/')
+def get_draw_odds():
+    if mtga_watch_app.game:
+        with mtga_watch_app.game_lock:
+            info = mtga_watch_app.game.hero.calculate_draw_odds(mtga_watch_app.game.ignored_iids)
+            return flask.jsonify(info)
+    return flask.jsonify({"sorry": "no game yet"})
+
+
+@http_app.route('/die')
+def shutdown_server():
+    func = request.environ.get('werkzeug.server.shutdown')
+    if func is None:
+        raise RuntimeError('Not running with the Werkzeug Server')
+    func()
diff --git a/front/.gitignore b/front/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+build/
+dist/
+mtgatrackerdist/
diff --git a/front/README.md b/front/README.md
@@ -0,0 +1,35 @@
+# MTGA Tracker Frontend
+
+The MTGA Tracker frontend is an electron app that uses node http module to communicate with the python flask webserver.
+
+Based on [fyears/electron-python-example](https://github.com/fyears/electron-python-example).
+
+### Setup
+
+#### Setup python (one-time)
+
+```bash
+cd /path/to/mtga-tools/app
+python -m virtualenv venv
+source venv/Scripts/activate
+pip install -r requirements.txt
+```
+
+#### Setup electron (one-time)
+
+```bash
+cd /path/to/mtga-tools/app/front
+npm install --runtime=electron --target=1.7.6
+```
+
+### Running it
+
+```bash
+./node_modules/.bin/electron
+```
+
+### Debugging
+
+You might want to run your own version of the python log-watcher / flask server,
+for example, in a pycharm debugging session. This is easy to do; simply set no_server to true in ``main.js``.
+Electron should launch the UI, and you should see a red error until you start the debug server.
diff --git a/front/card_bgs/b.png b/front/card_bgs/b.png
diff --git a/front/card_bgs/b.psd b/front/card_bgs/b.psd
diff --git a/front/card_bgs/b_flip.png b/front/card_bgs/b_flip.png
diff --git a/front/card_bgs/b_flip.psd b/front/card_bgs/b_flip.psd
diff --git a/front/card_bgs/bw.gif b/front/card_bgs/bw.gif
diff --git a/front/card_bgs/bw.png b/front/card_bgs/bw.png
diff --git a/front/card_bgs/bw.psd b/front/card_bgs/bw.psd
diff --git a/front/card_bgs/bw_flip.png b/front/card_bgs/bw_flip.png
diff --git a/front/card_bgs/bw_flip.psd b/front/card_bgs/bw_flip.psd
diff --git a/front/card_bgs/bw_test.png b/front/card_bgs/bw_test.png
diff --git a/front/card_bgs/c.png b/front/card_bgs/c.png
diff --git a/front/card_bgs/c.psd b/front/card_bgs/c.psd
diff --git a/front/card_bgs/c_flip.png b/front/card_bgs/c_flip.png
diff --git a/front/card_bgs/g.png b/front/card_bgs/g.png
diff --git a/front/card_bgs/g_flip.png b/front/card_bgs/g_flip.png
diff --git a/front/card_bgs/r.png b/front/card_bgs/r.png
diff --git a/front/card_bgs/r_flip.png b/front/card_bgs/r_flip.png
diff --git a/front/card_bgs/u.png b/front/card_bgs/u.png
diff --git a/front/card_bgs/u_flip.png b/front/card_bgs/u_flip.png
diff --git a/front/card_bgs/w.png b/front/card_bgs/w.png
diff --git a/front/card_bgs/w.psd b/front/card_bgs/w.psd
diff --git a/front/card_bgs/w_flip.png b/front/card_bgs/w_flip.png
diff --git a/front/card_bgs/w_flip.psd b/front/card_bgs/w_flip.psd
diff --git a/front/fonts/Beleren-Bold.ttf b/front/fonts/Beleren-Bold.ttf
diff --git a/front/fonts/Beleren-Bold.woff b/front/fonts/Beleren-Bold.woff
diff --git a/front/fonts/Beleren-Small-Caps.ttf b/front/fonts/Beleren-Small-Caps.ttf
diff --git a/front/fonts/Beleren-Small-Caps.woff b/front/fonts/Beleren-Small-Caps.woff
diff --git a/front/hide-512.png b/front/hide-512.png
diff --git a/front/index.html b/front/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MTGA Tracker</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  <!-- TODO: https://github.com/magarena/magarena/tree/master/resources/cardbuilder/fonts -->
+  </head>
+  <body>
+    <div id="floating-eye">
+      <img src="hide-512.png" width="30px" height="30px">
+    </div>
+    <div id="container">
+      <h1 class="deck-title">{ deck_name }</h1>
+      <p class="header-warning" rv-show="cant_connect">Haven't heard from game in { last_connect_as_seconds } seconds...</p>
+      <h3>{ total_cards_in_deck } cards in deck</h3>
+      <div class="card" rv-each-stat="draw_stats" rv-card_color="stat.colors">
+        <div class="card-text">
+          <b>{ stat.odds_of_draw }</b> { stat.count_in_deck }x <i>{ stat.card }</i>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
+  <!--https://github.com/mikeric/rivets/issues/699-->
+  <!--<script type="text/javascript" src="jquery.js"></script>-->
+  <script type="text/javascript" src="rivets.bundled.min.js"></script>
+  <script>
+    let $ = require("./jquery.js")
+    let renderer = require('./renderer.js')
+  </script>
+  <script>if (window.module) module = window.module;</script>
+</html>
diff --git a/front/jquery.js b/front/jquery.js
diff --git a/front/main.js b/front/main.js
@@ -0,0 +1,139 @@
+const electron = require('electron')
+const app = electron.app
+const BrowserWindow = electron.BrowserWindow
+const path = require('path')
+const console = require('console');
+const request = require('request');
+
+
+/*************************************************************
+ * py process
+ *************************************************************/
+
+const PY_DIST_FOLDER = 'mtgatracker_dist'
+const PY_FOLDER = 'app'
+const PY_MODULE = 'main' // without .py suffix
+
+let pyProc = null
+let pyPort = null
+
+let debug = false;
+let no_server = false;
+global.debug = debug;
+
+const guessPackaged = () => {
+  const fullPath = path.join(__dirname, PY_DIST_FOLDER)
+  return require('fs').existsSync(fullPath)
+}
+
+const getScriptPath = () => {
+  if (!guessPackaged()) {
+    return path.join(__dirname, "..", PY_FOLDER, PY_MODULE + '.py')
+  }
+  if (process.platform === 'win32') {
+    return path.join(__dirname, "..", "..", PY_DIST_FOLDER, PY_MODULE, PY_MODULE + '.exe')
+  }
+  return path.join(__dirname, "..", "..", PY_DIST_FOLDER, PY_MODULE, PY_MODULE)
+}
+
+const getPyBinPath = () => {
+    return path.join(__dirname, "..", "venv", "Scripts", "python.exe")
+}
+
+const selectPort = () => {
+  pyPort = 8080
+  return pyPort
+}
+
+port = selectPort()
+
+const createPyProc = () => {
+  let script = getScriptPath()
+
+  if (guessPackaged()) {
+    pyProc = require('child_process').execFile(script, [port])
+  } else {
+    pyProc = require('child_process').spawn(getPyBinPath(), [script], {shell: true})
+  }
+
+  if (pyProc != null) {
+    console.log('child process success on port ' + port)
+  }
+}
+
+if (!no_server) {
+    app.on('ready', createPyProc)
+}
+
+
+/*************************************************************
+ * window management
+ *************************************************************/
+
+let mainWindow = null
+
+let window_width = 354;
+if (debug) {
+    window_width = 1220;
+}
+if (!debug) {
+    app.disableHardwareAcceleration()
+}
+const createWindow = () => {
+  mainWindow = new BrowserWindow({width: window_width,
+                                  height: 200,
+                                  show: false,
+                                  transparent: !debug,
+                                  resizable: debug,
+                                  frame: debug,
+                                  alwaysOnTop: true,
+                                  toolbar: false,
+                                  titlebar: false,
+                                  title: false,
+                                  maximizable: false})
+  mainWindow.loadURL(require('url').format({
+    pathname: path.join(__dirname, 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+  if (debug) {
+    mainWindow.webContents.openDevTools()
+  }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show()
+    console.timeEnd('init')
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+   if (!no_server) {
+       request.get({
+        url: "http://localhost:8080/die",
+        json: true,
+        headers: {'User-Agent': 'request'}
+      }, (err, res, data) => {
+        console.log("doop");
+        console.log(err, res, data)
+        pyProc.kill()
+        pyProc = null
+        pyPort = null
+        app.quit()
+      })
+   } else {
+    app.quit()
+   }
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
diff --git a/front/package.json b/front/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "mtga-tracker",
+  "version": "1.0.0",
+  "description": "Application to track MTGA decks in-game",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron ."
+  },
+  "repository": "https://github.com/shawkinsl/mtga-tools",
+  "keywords": [
+    "Electron",
+    "Python",
+    "flask",
+    "deck",
+    "mtg",
+    "mtga"
+  ],
+  "author": "shawkins",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "electron": "^1.7.6",
+    "electron-packager": "^9.0.1"
+  }
+}