Add metrika goals

package-lock.json

@@ -7926,7 +7926,7 @@
       }
     },
     "predictor": {
-      "version": "git+https://github.com/anwinged/predictor.git#4ffca9dcb87bbeb53412aefd2d54ee1d3f71ca08",
+      "version": "git+https://github.com/anwinged/predictor.git#86e67af488fda6d96c42a5199dc30753e254d338",
       "from": "git+https://github.com/anwinged/predictor.git",
       "dev": true
     },
@@ -9877,9 +9877,9 @@
       }
     },
     "webpack": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.12.0.tgz",
-      "integrity": "sha512-EJj2FfhgtjrTbJbJaNulcVpDxi9vsQVvTahHN7xJvIv6W+k4r/E6Hxy4eyOrj+IAFWqYgaUtnpxmSGYP8MSZJw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.12.1.tgz",
+      "integrity": "sha512-7LOKQ+fpPtSvPlP++2rkDRU/8o6pJt00ezGPCksmeIzliOhiz0us4erBmNCW3VeVwH7tLIhv80zFYdOmmqU9BQ==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.5.12",

package.json

@@ -22,7 +22,7 @@
     "vue-loader": "^15.2.4",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.12.0",
+    "webpack": "^4.12.1",
     "webpack-cli": "^2.1.5"
   },
   "scripts": {

source/_assets/about_me/about.vue

@@ -1,5 +1,6 @@
 <template>
     <section class="app">
+        <p class="fact-index">Факт {{ factIndex }}</p>
         <p class="note">{{ fact }}</p>
         <button @click.prevent="next" class="button-next">Узнать чуть лучше</button>
     </section>
@@ -22,12 +23,15 @@ const NOTES = [
     'Хотел бы побывать в горах.',
 ];
 
+const INTERESTING_GOAL = 'INTERESTING';
+
 export default {
     data() {
         return {
             notes: NOTES,
             shown: [],
             fact: '',
+            factIndex: null,
         };
     },
     mounted() {
@@ -36,7 +40,7 @@ export default {
     methods: {
         next() {
             this.pick();
-            Metrika.hit(location.href);
+            Metrika.goal(INTERESTING_GOAL);
         },
         pick() {
             let available = _.difference(this.notes, this.shown);
@@ -47,6 +51,7 @@ export default {
             const fact = _.sample(available);
             this.shown.push(fact);
             this.fact = fact;
+            this.factIndex = _.indexOf(NOTES, fact) + 1;
         },
     },
 };
@@ -58,10 +63,14 @@ export default {
     text-align: center;
 }
 
+.fact-index {
+    margin-top: 3em;
+}
+
 .note {
     display: block;
     font-size: 160%;
-    margin: 2em auto;
+    margin: 0 auto 2em;
     min-height: 3em;
 }
 

source/_assets/common/metrika.js

@@ -1,9 +1,23 @@
 class Metrika {
+    constructor(counterCb) {
+        this.cb = counterCb;
+    }
+
+    get counter() {
+        return this.cb.call();
+    }
+
     hit(name) {
-        if (window.yaCounter41913764) {
-            window.yaCounter41913764.hit(name);
+        if (this.counter) {
+            this.counter.hit(name);
+        }
+    }
+
+    goal(name, params = {}) {
+        if (this.counter) {
+            this.counter.reachGoal(name, params);
         }
     }
 }
 
-export default new Metrika();
+export default new Metrika(() => window.yaCounter41913764);

source/_assets/predictor/demo.vue

@@ -14,9 +14,12 @@
             <button class="restart-button" v-on:click.prevent="restart">Заново</button>
         </div>
         <div v-else>
-            <span class="score">
+            <p class="score">
                 {{ predictor.score }}
-            </span>
+            </p>
+            <p class="step">
+                Ход {{ step }}
+            </p>
             <div class="buttons">
                 <button class="pass-button __left" value="0" v-on:click.prevent="click(0)">Нечет</button>
                 <button class="pass-button __right" value="1" v-on:click.prevent="click(1)">Чет</button>
@@ -27,7 +30,9 @@
 
 <script>
 import Predictor from 'predictor';
+import Metrika from '../common/metrika';
 
+const PREDICTOR_GAME_END_GOAL = 'PREDICTOR_GAME_END';
 const MAX_SCORE = 50;
 
 function make_predictor() {
@@ -56,6 +61,9 @@ export default {
         isRobotWin() {
             return this.predictor.score <= -MAX_SCORE;
         },
+        step() {
+            return this.predictor.stepCount() + 1;
+        },
     },
     methods: {
         click(v) {
@@ -67,9 +75,23 @@ export default {
             this.pass(value);
         },
         pass(value) {
-            if (Math.abs(this.predictor.score) < MAX_SCORE) {
-                const prediction = this.predictor.pass(value);
-                // console.log('PREDICTED', prediction, 'PASS', value);
+            const oldScore = this.predictor.score;
+            if (Math.abs(oldScore) >= MAX_SCORE) {
+                return;
+            }
+
+            /* const prediction = */ this.predictor.pass(value);
+
+            const score = this.predictor.score;
+            const absScore = Math.abs(score);
+
+            // Game over
+            if (absScore === MAX_SCORE) {
+                Metrika.goal(PREDICTOR_GAME_END_GOAL, {
+                    winner: score > 0 ? 'human' : 'robot',
+                    step_count: this.predictor.stepCount(),
+                    score: score,
+                });
             }
         },
         restart() {
@@ -104,8 +126,13 @@ export default {
 
 .score {
     font-size: 400%;
-    margin-bottom: 0.8em;
-    display: inline-block;
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+}
+
+.step {
+    margin-top: 0;
+    margin-bottom: 3em;
 }
 
 .buttons {