johreh · wmakley · Oct 13, 2019 · Oct 13, 2019 · Oct 13, 2019 · Oct 13, 2019
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[{*.js,*.html}]
+end_of_line = crlf
+
+[package.json]
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 _config.yml
-app.manifest
-web.config
+web.config
+.idea
+node_modules
diff --git a/README.md b/README.md
@@ -1,14 +1,25 @@
 # Gloomy Companion
 
+## About the fork
+
+I want to add the following features:
+
+1. Sort monster decks by initiative.
+2. Sort player icons in between the monster decks.
+
+In the process I ended up implementing webpack and ES6 and fixing small bugs.
+
+## Original intro
+
 This is a web-app for managing the monster ability decks in the board game [Gloomhaven](https://boardgamegeek.com/boardgame/174430/gloomhaven)
 
 You can run it from the web directly on <https://johreh.github.io/gloomycompanion/>.
 
 You can also download it and run it locally without internet connection. Click __Clone or download__ above, then __Download ZIP__. Unpack the ZIP and start the app by opening `index.html`.
 
-If you want to add new cards, you need to update [`cards.js`](cards.js). The decks has the following syntax:
+If you want to add new cards, you need to update [`cards.js`](src/cards.js). The decks have the following syntax:
 
-```json
+```javascript
 { name: "Name of monster"
 , cards:
   [ [false, "42", "* First line", "** sub-line 1", "** sub-line 2", "* Second line"]
@@ -19,11 +30,15 @@ If you want to add new cards, you need to update [`cards.js`](cards.js). The dec
 
 The value in the first column is `true` if the deck shall be reshuffled after that card, `false` otherwise. The second colum is card initiative value. The following values is the card text, one row per column.
 
-A single `*` means a top-level action. Double asterisk `**` means it modifies the previous action. Commonly used text snippets can be expanded using macros. E.g. `%move%` expands to the text _Move_ followed by the move icon, `%immobilize%` expands to _IMMOBILIZE_ followed by the immobilization icon. The list of available macros can be seen in [`macros.js`](macros.js).
+A single `*` means a top-level action. Double asterisk `**` means it modifies the previous action. Commonly used text snippets can be expanded using macros. E.g. `%move%` expands to the text _Move_ followed by the move icon, `%immobilize%` expands to _IMMOBILIZE_ followed by the immobilization icon. The list of available macros can be seen in [`macros.js`](src/macros.js).
 
 ## Development
 
 * Clone the repository
-* Run the [`gen-manifest.sh`](gen-manifest.sh) script (Linux and MacOS only; you'll have to make the `app.manifest` by hand if you are running Windows)
+* `npm install`
+* `npm run dev-server`
+
+## PWA Development and Testing
 
-Any time a source/asset file is added or removed, re-run the above manifest generation script. Or manually make the appropriate change to the manifest instead.
+1. `npm run http-server`
+2. Browse to http://localhost:8080 and use Chrome developer tools for auditing and debugging.
diff --git a/app.webmanifest b/app.webmanifest
diff --git a/Philosopher-Bold.ttf → dist/Philosopher-Bold.ttf b/Philosopher-Bold.ttf → dist/Philosopher-Bold.ttf
diff --git a/PirataOne-Gloomhaven.ttf → dist/PirataOne-Gloomhaven.ttf b/PirataOne-Gloomhaven.ttf → dist/PirataOne-Gloomhaven.ttf
diff --git a/cards.css → dist/cards.css b/cards.css → dist/cards.css
diff --git a/images/add_target.svg → dist/images/add_target.svg b/images/add_target.svg → dist/images/add_target.svg
diff --git a/images/air.svg → dist/images/air.svg b/images/air.svg → dist/images/air.svg
diff --git a/images/any_element.svg → dist/images/any_element.svg b/images/any_element.svg → dist/images/any_element.svg
diff --git a/images/aoe-4-with-black.svg → dist/images/aoe-4-with-black.svg b/images/aoe-4-with-black.svg → dist/images/aoe-4-with-black.svg
diff --git a/images/aoe-circle-with-middle-black.svg → dist/images/aoe-circle-with-middle-black.svg b/images/aoe-circle-with-middle-black.svg → dist/images/aoe-circle-with-middle-black.svg
diff --git a/images/aoe-circle-with-side-black.svg → dist/images/aoe-circle-with-side-black.svg b/images/aoe-circle-with-side-black.svg → dist/images/aoe-circle-with-side-black.svg
diff --git a/images/aoe-circle.svg → dist/images/aoe-circle.svg b/images/aoe-circle.svg → dist/images/aoe-circle.svg
diff --git a/images/aoe-line-3-with-black.svg → dist/images/aoe-line-3-with-black.svg b/images/aoe-line-3-with-black.svg → dist/images/aoe-line-3-with-black.svg
diff --git a/images/aoe-line-4-with-black.svg → dist/images/aoe-line-4-with-black.svg b/images/aoe-line-4-with-black.svg → dist/images/aoe-line-4-with-black.svg
diff --git a/images/aoe-line-6-with-black.svg → dist/images/aoe-line-6-with-black.svg b/images/aoe-line-6-with-black.svg → dist/images/aoe-line-6-with-black.svg
diff --git a/images/aoe-triangle-2-side-with-black.svg → ...images/aoe-triangle-2-side-with-black.svg b/images/aoe-triangle-2-side-with-black.svg → ...images/aoe-triangle-2-side-with-black.svg
diff --git a/images/aoe-triangle-2-side.svg → dist/images/aoe-triangle-2-side.svg b/images/aoe-triangle-2-side.svg → dist/images/aoe-triangle-2-side.svg
diff --git a/...aoe-triangle-3-side-with-corner-black.svg → ...aoe-triangle-3-side-with-corner-black.svg b/...aoe-triangle-3-side-with-corner-black.svg → ...aoe-triangle-3-side-with-corner-black.svg
diff --git a/images/aoe1.svg → dist/images/aoe1.svg b/images/aoe1.svg → dist/images/aoe1.svg
diff --git a/images/aoe2.svg → dist/images/aoe2.svg b/images/aoe2.svg → dist/images/aoe2.svg
diff --git a/images/attack.svg → dist/images/attack.svg b/images/attack.svg → dist/images/attack.svg
diff --git a/images/attack_mod_+0.jpg → dist/images/attack_mod_+0.jpg b/images/attack_mod_+0.jpg → dist/images/attack_mod_+0.jpg
diff --git a/images/attack_mod_+1.jpg → dist/images/attack_mod_+1.jpg b/images/attack_mod_+1.jpg → dist/images/attack_mod_+1.jpg
diff --git a/images/attack_mod_+2.jpg → dist/images/attack_mod_+2.jpg b/images/attack_mod_+2.jpg → dist/images/attack_mod_+2.jpg
diff --git a/images/attack_mod_-1.jpg → dist/images/attack_mod_-1.jpg b/images/attack_mod_-1.jpg → dist/images/attack_mod_-1.jpg
diff --git a/images/attack_mod_-2.jpg → dist/images/attack_mod_-2.jpg b/images/attack_mod_-2.jpg → dist/images/attack_mod_-2.jpg
diff --git a/images/attack_mod_2x.jpg → dist/images/attack_mod_2x.jpg b/images/attack_mod_2x.jpg → dist/images/attack_mod_2x.jpg
diff --git a/images/attack_mod_back.jpg → dist/images/attack_mod_back.jpg b/images/attack_mod_back.jpg → dist/images/attack_mod_back.jpg
diff --git a/images/attack_mod_bless.jpg → dist/images/attack_mod_bless.jpg b/images/attack_mod_bless.jpg → dist/images/attack_mod_bless.jpg
diff --git a/images/attack_mod_curse.jpg → dist/images/attack_mod_curse.jpg b/images/attack_mod_curse.jpg → dist/images/attack_mod_curse.jpg
diff --git a/images/attack_mod_null.jpg → dist/images/attack_mod_null.jpg b/images/attack_mod_null.jpg → dist/images/attack_mod_null.jpg
diff --git a/images/back.jpg → dist/images/back.jpg b/images/back.jpg → dist/images/back.jpg
diff --git a/images/back.svg → dist/images/back.svg b/images/back.svg → dist/images/back.svg
diff --git a/images/bless.svg → dist/images/bless.svg b/images/bless.svg → dist/images/bless.svg
diff --git a/images/curse.svg → dist/images/curse.svg b/images/curse.svg → dist/images/curse.svg
diff --git a/images/dark.svg → dist/images/dark.svg b/images/dark.svg → dist/images/dark.svg
diff --git a/images/disarm.svg → dist/images/disarm.svg b/images/disarm.svg → dist/images/disarm.svg
diff --git a/images/draw-two.svg → dist/images/draw-two.svg b/images/draw-two.svg → dist/images/draw-two.svg
diff --git a/images/earth.svg → dist/images/earth.svg b/images/earth.svg → dist/images/earth.svg
diff --git a/images/elderDrake.special1Area.svg → dist/images/elderDrake.special1Area.svg b/images/elderDrake.special1Area.svg → dist/images/elderDrake.special1Area.svg
diff --git a/images/fire.svg → dist/images/fire.svg b/images/fire.svg → dist/images/fire.svg
diff --git a/images/fly.svg → dist/images/fly.svg b/images/fly.svg → dist/images/fly.svg
diff --git a/images/front.jpg → dist/images/front.jpg b/images/front.jpg → dist/images/front.jpg
diff --git a/images/heal.svg → dist/images/heal.svg b/images/heal.svg → dist/images/heal.svg
diff --git a/images/ice.svg → dist/images/ice.svg b/images/ice.svg → dist/images/ice.svg
diff --git a/images/icon.png → dist/images/icon.png b/images/icon.png → dist/images/icon.png
diff --git a/images/immobilize.svg → dist/images/immobilize.svg b/images/immobilize.svg → dist/images/immobilize.svg
diff --git a/images/inoxBodyguard.special1Area.svg → dist/images/inoxBodyguard.special1Area.svg b/images/inoxBodyguard.special1Area.svg → dist/images/inoxBodyguard.special1Area.svg
diff --git a/images/invisibility.svg → dist/images/invisibility.svg b/images/invisibility.svg → dist/images/invisibility.svg
diff --git a/images/jump.svg → dist/images/jump.svg b/images/jump.svg → dist/images/jump.svg
diff --git a/images/light.svg → dist/images/light.svg b/images/light.svg → dist/images/light.svg
diff --git a/images/loot.svg → dist/images/loot.svg b/images/loot.svg → dist/images/loot.svg
diff --git a/images/minus-circle.svg → dist/images/minus-circle.svg b/images/minus-circle.svg → dist/images/minus-circle.svg
diff --git a/images/move.svg → dist/images/move.svg b/images/move.svg → dist/images/move.svg
diff --git a/images/muddle.svg → dist/images/muddle.svg b/images/muddle.svg → dist/images/muddle.svg
diff --git a/images/pierce.svg → dist/images/pierce.svg b/images/pierce.svg → dist/images/pierce.svg
diff --git a/images/plus-circle.svg → dist/images/plus-circle.svg b/images/plus-circle.svg → dist/images/plus-circle.svg
diff --git a/images/poison.svg → dist/images/poison.svg b/images/poison.svg → dist/images/poison.svg
diff --git a/images/push.svg → dist/images/push.svg b/images/push.svg → dist/images/push.svg
diff --git a/images/range.svg → dist/images/range.svg b/images/range.svg → dist/images/range.svg
diff --git a/images/retaliate.svg → dist/images/retaliate.svg b/images/retaliate.svg → dist/images/retaliate.svg
diff --git a/images/settings.svg → dist/images/settings.svg b/images/settings.svg → dist/images/settings.svg
diff --git a/images/shield.svg → dist/images/shield.svg b/images/shield.svg → dist/images/shield.svg
diff --git a/images/shuffle-black.svg → dist/images/shuffle-black.svg b/images/shuffle-black.svg → dist/images/shuffle-black.svg
diff --git a/images/shuffle.svg → dist/images/shuffle.svg b/images/shuffle.svg → dist/images/shuffle.svg
diff --git a/images/sightlessEye.special1Area.svg → dist/images/sightlessEye.special1Area.svg b/images/sightlessEye.special1Area.svg → dist/images/sightlessEye.special1Area.svg
diff --git a/images/sightlessEye.special2Area.svg → dist/images/sightlessEye.special2Area.svg b/images/sightlessEye.special2Area.svg → dist/images/sightlessEye.special2Area.svg
diff --git a/images/strengthen.svg → dist/images/strengthen.svg b/images/strengthen.svg → dist/images/strengthen.svg
diff --git a/images/stun.svg → dist/images/stun.svg b/images/stun.svg → dist/images/stun.svg
diff --git a/images/target.svg → dist/images/target.svg b/images/target.svg → dist/images/target.svg
diff --git a/images/use_element.svg → dist/images/use_element.svg b/images/use_element.svg → dist/images/use_element.svg
diff --git a/images/wound.svg → dist/images/wound.svg b/images/wound.svg → dist/images/wound.svg
diff --git a/index.html → dist/index.html b/index.html → dist/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html manifest="app.manifest">
+<html lang="en">
     <head>
         <title>Gloomy Companion</title>
         <link rel="apple-touch-icon" sizes="192x192" href="images/icon.png" />
         <link rel="icon" type="image/png" sizes="192x192" href="images/icon.png" />
-        <link rel="manifest" href="app.webmanifest" />
+        <link rel="manifest" href="manifest.json" />
         <link rel="stylesheet" href="cards.css" />
         <link rel="stylesheet" href="style.css" />
         <meta charset="UTF-8">
@@ -13,16 +13,10 @@
         <meta name="apple-mobile-web-app-title" content="Gloomy Companion" />
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script type="text/javascript" src="util.js"></script>
-        <script type="text/javascript" src="cards.js"></script>
-        <script type="text/javascript" src="scenarios.js"></script>
-        <script type="text/javascript" src="macros.js"></script>
-        <script type="text/javascript" src="modifiers.js"></script>
-        <script type="text/javascript" src="monster_stats.js"></script>
-        <script type="text/javascript" src="logic.js"></script>
-        <script type="text/javascript" src="ui.js"></script>
+        <meta name="theme-color" content="#731819" />
+        <script type="text/javascript" src="main.js"></script>
     </head>
-    <body onload="init(); init_ui();">
+    <body>
         <div class="panecontainer">
             <div id="settingspane" class="pane expanded">
                 <ul class="tabcontainer">

diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -0,0 +1,19 @@
+{
+    "short_name":   "Gloomy Companion",
+    "name":         "Gloomy Companion",
+    "start_url":    "index.html",
+    "scope":        ".",
+    "display":      "standalone",
+    "icons": [
+        {
+            "src":      "/images/icon.png",
+            "sizes":    "192x192",
+            "type":     "image/png"
+        }
+    ],
+    "background_color": "#000",
+    "theme_color": "#731819",
+    "service_worker": {
+        "src": "/service-worker.js"
+    }
+}
diff --git a/dist/service-worker.js b/dist/service-worker.js
@@ -0,0 +1,146 @@
+// https://googlechrome.github.io/samples/service-worker/basic/
+
+/*
+ Copyright 2016 Google Inc. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+// Names of the two caches used in this version of the service worker.
+// Change to v2, etc. when you update any of the local resources, which will
+// in turn trigger the install event again.
+const PRECACHE = 'precache-v1';
+const RUNTIME = 'runtime';
+
+// A list of local resources we always want to be cached.
+const PRECACHE_URLS = [
+    'index.html',
+    './', // Alias for index.html
+    'cards.css',
+    'style.css',
+    'main.js',
+    'Philosopher-Bold.ttf',
+    'PirataOne-Gloomhaven.ttf',
+    'images/add_target.svg',
+    'images/air.svg',
+    'images/any_element.svg',
+    'images/aoe-4-with-black.svg',
+    'images/aoe-circle-with-middle-black.svg',
+    'images/aoe-circle-with-side-black.svg',
+    'images/aoe-circle.svg',
+    'images/aoe-line-3-with-black.svg',
+    'images/aoe-line-4-with-black.svg',
+    'images/aoe-line-6-with-black.svg',
+    'images/aoe-triangle-2-side-with-black.svg',
+    'images/aoe-triangle-2-side.svg',
+    'images/aoe-triangle-3-side-with-corner-black.svg',
+    'images/aoe1.svg',
+    'images/aoe2.svg',
+    'images/attack.svg',
+    'images/attack_mod_+0.jpg',
+    'images/attack_mod_+1.jpg',
+    'images/attack_mod_+2.jpg',
+    'images/attack_mod_-1.jpg',
+    'images/attack_mod_-2.jpg',
+    'images/attack_mod_2x.jpg',
+    'images/attack_mod_back.jpg',
+    'images/attack_mod_bless.jpg',
+    'images/attack_mod_curse.jpg',
+    'images/attack_mod_null.jpg',
+    'images/back.jpg',
+    'images/back.svg',
+    'images/bless.svg',
+    'images/curse.svg',
+    'images/dark.svg',
+    'images/disarm.svg',
+    'images/draw-two.svg',
+    'images/earth.svg',
+    'images/elderDrake.special1Area.svg',
+    'images/fire.svg',
+    'images/fly.svg',
+    'images/front.jpg',
+    'images/heal.svg',
+    'images/ice.svg',
+    'images/icon.png',
+    'images/immobilize.svg',
+    'images/inoxBodyguard.special1Area.svg',
+    'images/invisibility.svg',
+    'images/jump.svg',
+    'images/light.svg',
+    'images/loot.svg',
+    'images/minus-circle.svg',
+    'images/move.svg',
+    'images/muddle.svg',
+    'images/pierce.svg',
+    'images/plus-circle.svg',
+    'images/poison.svg',
+    'images/push.svg',
+    'images/range.svg',
+    'images/retaliate.svg',
+    'images/settings.svg',
+    'images/shield.svg',
+    'images/shuffle-black.svg',
+    'images/shuffle.svg',
+    'images/sightlessEye.special1Area.svg',
+    'images/sightlessEye.special2Area.svg',
+    'images/strengthen.svg',
+    'images/stun.svg',
+    'images/target.svg',
+    'images/use_element.svg',
+    'images/wound.svg'
+];
+
+// The install handler takes care of precaching the resources we always need.
+self.addEventListener('install', event => {
+    event.waitUntil(
+        caches.open(PRECACHE)
+            .then(cache => cache.addAll(PRECACHE_URLS))
+            .then(self.skipWaiting())
+    );
+});
+
+// The activate handler takes care of cleaning up old caches.
+self.addEventListener('activate', event => {
+    const currentCaches = [PRECACHE, RUNTIME];
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
+        }).then(cachesToDelete => {
+            return Promise.all(cachesToDelete.map(cacheToDelete => {
+                return caches.delete(cacheToDelete);
+            }));
+        }).then(() => self.clients.claim())
+    );
+});
+
+// The fetch handler serves responses for same-origin resources from a cache.
+// If no response is found, it populates the runtime cache with the response
+// from the network before returning it to the page.
+self.addEventListener('fetch', event => {
+    // Skip cross-origin requests, like those for Google Analytics.
+    if (event.request.url.startsWith(self.location.origin)) {
+        event.respondWith(
+            caches.match(event.request).then(cachedResponse => {
+                if (cachedResponse) {
+                    return cachedResponse;
+                }
+
+                return caches.open(RUNTIME).then(cache => {
+                    return fetch(event.request).then(response => {
+                        // Put a copy of the response in the runtime cache.
+                        return cache.put(event.request, response.clone()).then(() => {
+                            return response;
+                        });
+                    });
+                });
+            })
+        );
+    }
+});
diff --git a/style.css → dist/style.css b/style.css → dist/style.css
diff --git a/gen-manifest.sh b/gen-manifest.sh