Add predictor demo

.env

@@ -1,3 +1,3 @@
 PHP_BASE_IMAGE=php:7.2-cli
 PHP_IMAGE=homepage-php
-NODE_IMAGE=node:10-alpine
+NODE_IMAGE=node:10

Makefile

@@ -15,6 +15,7 @@ build-prod:
 
 format:
 	./tools/npm run format-js
+	./tools/npm run format-vue
 	./tools/npm run format-style
 	./tools/npm run format-md
 

package.json

@@ -12,10 +12,15 @@
     "css-loader": "^0.28.11",
     "jquery": "^3.3.1",
     "node-sass": "^4.9.0",
+    "predictor": "git+https://github.com/anwinged/predictor.git",
     "prettier": "^1.12.1",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.21.0",
     "underscore": "^1.9.0",
+    "vue": "^2.5.16",
+    "vue-loader": "^15.2.4",
+    "vue-style-loader": "^4.1.0",
+    "vue-template-compiler": "^2.5.16",
     "webpack": "^4.5.0",
     "webpack-cli": "^2.0.14"
   },
@@ -24,6 +29,7 @@
     "build": "webpack --config webpack.config.js --progress",
     "build-prod": "webpack --config webpack.config.js --env.production",
     "format-js": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.js\"",
+    "format-vue": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.vue\"",
     "format-style": "prettier --single-quote --write \"source/_assets/**/*.scss\"",
     "format-md": "prettier --write \"source/**/*.md\""
   },

source/_assets/predictor/Demo.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="app" tabindex="0" v-on:keyup="press">
+        <div v-if="isHumanWin">
+            <p>
+                Победа! Было очень сложно, но вы справились, поздравляю!
+            </p>
+            <button class="restart-button" v-on:click.prevent="restart">Заново</button>
+        </div>
+        <div v-else-if="isRobotWin">
+            <p>
+                Упс, железяка победила. Оказывается, предсказать выбор человека
+                не так уж и сложно, да?
+            </p>
+            <button class="restart-button" v-on:click.prevent="restart">Заново</button>
+        </div>
+        <div v-else>
+            <span class="score">
+                {{ predictor.score }}
+            </span>
+            <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>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Predictor from 'predictor';
+
+const MAX_SCORE = 50;
+
+function make_predictor() {
+    return new Predictor({
+        daemons: [
+            { human: 3, robot: 3 },
+            { human: 4, robot: 4 },
+            { human: 5, robot: 5 },
+            { human: 6, robot: 6 },
+            { human: 8, robot: 8 },
+            { human: 12, robot: 12 },
+        ],
+    });
+}
+
+export default {
+    data() {
+        return {
+            predictor: make_predictor(),
+        };
+    },
+    computed: {
+        isHumanWin() {
+            return this.predictor.score >= MAX_SCORE;
+        },
+        isRobotWin() {
+            return this.predictor.score <= -MAX_SCORE;
+        },
+    },
+    methods: {
+        click(v) {
+            const value = v ? 1 : 0;
+            this.pass(value);
+        },
+        press(evt) {
+            const value = evt.key === '1' ? 0 : 1;
+            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);
+            }
+        },
+        restart() {
+            this.predictor = make_predictor();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+$button-radius: 0.5em;
+
+.app {
+    display: block;
+    margin: 1em auto;
+    width: 400px;
+    text-align: center;
+    padding: 2em;
+    border: 1px solid #ccc;
+    font-size: 24px;
+    @media (max-width: 749px) {
+        padding: 2em 0;
+        width: auto;
+    }
+}
+
+.score {
+    font-size: 300%;
+    margin-bottom: 0.8em;
+    display: inline-block;
+}
+
+%button {
+    display: inline-block;
+    color: #fff;
+    background-color: #2e4380;
+    padding: 0.6em 1.2em;
+    border: none;
+}
+
+.restart-button {
+    @extend %button;
+    border-radius: $button-radius;
+}
+
+.pass-button {
+    @extend %button;
+    min-width: 8em;
+}
+
+.pass-button.__left {
+    border-top-left-radius: $button-radius;
+    border-bottom-left-radius: $button-radius;
+}
+
+.pass-button.__right {
+    border-top-right-radius: $button-radius;
+    border-bottom-right-radius: $button-radius;
+}
+</style>

source/_assets/predictor/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Demo from './Demo.vue';
+
+new Vue({
+    el: '#app',
+    render: h => h(Demo),
+});

source/projects/predictor/index.html.twig

@@ -0,0 +1,29 @@
+---
+layout: internal
+title: Гадалка
+---
+
+{% block js %}
+  <script src="/static/predictor.js?v={{ date().timestamp }}"></script>
+{% endblock %}
+
+{% block content %}
+
+  <h1>Гадалка</h1>
+
+  <p>
+    Правила игры простые. Робот пытается предсказать, что выберет человек: чет или нечет.
+    Если предсказание удалось, робот получает очко, а счет уменьшается на единицу.
+    Если же предугадать выбор не удалось, то очко достается человеку, а счет увеличивается.
+    Игрок победит, если доберется до 50 очков. Но когда счет опустится до -50, победа будет
+    за железякой.
+  </p>
+
+  <p>
+    Чтобы выбирать вариант с клавиатуры, кликните внутри серой рамки,
+    а потом пользуйтесь клавишами "1" - нечет или "2" - чет.
+  </p>
+
+  <div id="app"></div>
+
+{% endblock %}

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 
 module.exports = income_env => {
@@ -13,7 +14,7 @@ module.exports = income_env => {
             layout_default: './source/_assets/layout_default/style.scss',
             layout_internal: './source/_assets/layout_internal/style.scss',
             about_me: './source/_assets/about_me/index.js',
-            // wishlist: './source/_assets/wishlist/index.js',
+            predictor: './source/_assets/predictor/index.js',
         },
         output: {
             filename: '[name].js',
@@ -32,11 +33,29 @@ module.exports = income_env => {
                     },
 
                 },
+                {
+                    test: /\.css$/,
+                    use: ['style-loader', 'css-loader'],
+                },
                 {
                     test: /\.scss$/,
                     use: ['style-loader', 'css-loader', 'sass-loader'],
-                }
+                },
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: {
+                        loaders: {
+                            'css': 'vue-style-loader!css-loader',
+                            'scss': 'vue-style-loader!css-loader!sass-loader',
+                            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+                        }
+                    }
+                },
             ]
-        }
+        },
+        plugins: [
+            new VueLoaderPlugin(),
+        ],
     }
 };