Add predictor demo

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),
+});