completely rework app to use webpack, const/let, and ES6 modules and …

…fix a few small bugs

.editorconfig

@@ -9,3 +9,6 @@ end_of_line = lf
 
 [{*.js,*.html}]
 end_of_line = crlf
+
+[package.json]
+indent_size = 2

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`](src/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"]

src/cards.css → dist/cards.css

@@ -2,13 +2,13 @@
 @font-face
 {
     font-family:                Philosopher;
-    src:                        url(../dist/Philosopher-Bold.ttf);
+    src:                        url(Philosopher-Bold.ttf);
 }
 
 @font-face
 {
     font-family:                PirataOne;
-    src:                        url(../dist/PirataOne-Gloomhaven.ttf);
+    src:                        url(PirataOne-Gloomhaven.ttf);
 }
 
 @media only screen and (min-height: 500px) and (orientation: portrait) {
@@ -100,19 +100,19 @@
 
 .background.curse
 {
-    background-image:           url(../dist/images/curse.svg);
+    background-image:           url(images/curse.svg);
 }
 
 .background.bless
 {
-    background-image:           url(../dist/images/bless.svg);
+    background-image:           url(images/bless.svg);
 }
 
 .counter-icon.shuffle
 {
     background-repeat:          no-repeat;
     background-position:        center center;
-    background-image:           url(../dist/images/shuffle-black.svg);
+    background-image:           url(images/shuffle-black.svg);
     background-size:            50%;
     cursor:                     pointer;
 
@@ -153,14 +153,14 @@
 {
     opacity: 0.7;
     text-indent: -999em;
-    background: url(../dist/images/plus-circle.svg) center center no-repeat;
+    background: url(images/plus-circle.svg) center center no-repeat;
 }
 
 .decrement.button
 {
   opacity: 0.7;
   text-indent: -999em;
-  background: url(../dist/images/minus-circle.svg) center center no-repeat;
+  background: url(images/minus-circle.svg) center center no-repeat;
 }
 
 .draw-two.button
@@ -173,7 +173,7 @@
     background-repeat:          no-repeat;
     background-position:        center center;
     background-size:            50%;
-    background-image:           url(../dist/images/draw-two.svg);
+    background-image:           url(images/draw-two.svg);
     cursor:                     pointer;
 }
 
@@ -317,17 +317,17 @@
 
 .card.ability.front
 {
-    background-image:           url(../dist/images/front.jpg);
+    background-image:           url(images/front.jpg);
 }
 
 .card.ability.back
 {
-    background-image:           url(../dist/images/back.jpg);
+    background-image:           url(images/back.jpg);
 }
 
 .card.modifier.back
 {
-    background-image:           url(../dist/images/attack_mod_back.jpg);
+    background-image:           url(images/attack_mod_back.jpg);
 }
 
 .card.modifier.front img.cover

dist/index.html

@@ -5,23 +5,15 @@
         <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="stylesheet" href="../src/cards.css" />
-        <link rel="stylesheet" href="../src/style.css" />
+        <link rel="stylesheet" href="cards.css" />
+        <link rel="stylesheet" href="style.css" />
         <meta charset="UTF-8">
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <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="../src/util.js"></script>
-<!--        <script type="text/javascript" src="../src/cards.js"></script>-->
-<!--        <script type="text/javascript" src="../src/scenarios.js"></script>-->
-<!--        <script type="text/javascript" src="../src/macros.js"></script>-->
-<!--        <script type="text/javascript" src="../src/modifiers.js"></script>-->
-<!--        <script type="text/javascript" src="../src/monster_stats.js"></script>-->
-<!--        <script type="text/javascript" src="../src/logic.js"></script>-->
-<!--        <script type="text/javascript" src="../src/ui.js"></script>-->
-        <script async type="text/javascript" src="main.js"></script>
+        <script type="text/javascript" src="main.js"></script>
     </head>
     <body>
         <div class="panecontainer">

gen-manifest.sh

@@ -1,4 +1,6 @@
 #!/bin/sh
+#
+# TODO: not updated for webpack
 
 cat << EOF > app.manifest
 CACHE MANIFEST