142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<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;
|
|
$font-size: 20px;
|
|
|
|
.app {
|
|
display: block;
|
|
margin: 1em auto;
|
|
width: 400px;
|
|
text-align: center;
|
|
padding: 2em;
|
|
border: 1px solid #ccc;
|
|
@media (max-width: 749px) {
|
|
padding: 2em 0;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.score {
|
|
font-size: 400%;
|
|
margin-bottom: 0.8em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
%button {
|
|
display: inline-block;
|
|
color: #fff;
|
|
background-color: #405480;
|
|
padding: 0.6em;
|
|
border: none;
|
|
font-size: $font-size;
|
|
}
|
|
|
|
.restart-button {
|
|
@extend %button;
|
|
padding: 0.6em 1.4em;
|
|
border-radius: $button-radius;
|
|
}
|
|
|
|
.pass-button {
|
|
@extend %button;
|
|
flex-grow: 0;
|
|
min-width: 7em;
|
|
margin: 0.2em;
|
|
}
|
|
|
|
.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>
|