You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.7 KiB
92 lines
2.7 KiB
import {Component} from '../../lib/vuetranslit.js'
|
|
import {GameState, instructions} from '../util/util.js'
|
|
import app from '../application.js'
|
|
|
|
const template = `
|
|
<div class='top-level-container'>
|
|
<div v-if="current_state === GameState.SizeSelect">
|
|
<div>
|
|
<hr class='separator--line'/>
|
|
<h1 class='header_title' id="test">Snake</h1>
|
|
<hr class='separator--dot' />
|
|
</div>
|
|
<div id="diminput">
|
|
<span class="instructions" v-if='instructions'>{{instructions}}</span><br />
|
|
<input type="number" v-model="rowinput"/>
|
|
<input type="number" v-model="colinput"/>
|
|
</div>
|
|
<button id='ai-btn' v-bind:class="{ hasai: has_ai, noai: !has_ai }" @click='set_has_ai()'>AI?</button>
|
|
<button id='start-btn' v-if="accept_bounds" @click='set_game_state(GameState.Gameplay)'>Start</button>
|
|
</div>
|
|
<div v-if="current_state === GameState.Gameplay">
|
|
<board-comp ref="board" v-bind:rows="rowinput" v-bind:cols="colinput" v-bind:cellsize="celldim"></board-comp>
|
|
<ai v-if="has_ai"></ai>
|
|
</div>
|
|
<div v-if="current_state === GameState.Fin">
|
|
<span class="instructions" id="endcredits" v-if='instructions'>{{instructions.replace('{end}', victory)}}</span>
|
|
</div>
|
|
</div>`
|
|
|
|
class TopComponent extends Component {
|
|
GameState = GameState
|
|
|
|
static get tag() { return 'top-comp'; }
|
|
static get template() { return template; }
|
|
static get props() { return {}; }
|
|
|
|
current_state = GameState.SizeSelect;
|
|
rowinput = 6;
|
|
colinput = 6;
|
|
has_ai = app.hasAI;
|
|
instructions = instructions[this.current_state];
|
|
victory = "";
|
|
|
|
watch_rowinput() {
|
|
this.rowinput = parseInt(this.rowinput);
|
|
app.rowCount = this.rowinput;
|
|
}
|
|
|
|
watch_colinput() {
|
|
this.colinput = parseInt(this.colinput);
|
|
app.colCount = this.colinput;
|
|
}
|
|
|
|
watch_current_state() {
|
|
this.instructions = instructions[this.current_state];
|
|
}
|
|
|
|
compute_celldim() {
|
|
let height = parseInt((window.screen.height - 150) / this.rowinput);
|
|
let width = parseInt(window.screen.width / this.colinput);
|
|
return Math.min(width, height);
|
|
}
|
|
|
|
compute_accept_bounds() {
|
|
return this.rowinput > 5 && this.colinput > 5 && (!(this.rowinput % 2) || !(this.colinput % 2));
|
|
}
|
|
|
|
set_game_state(state) {
|
|
this.current_state = state;
|
|
app.current_state = state;
|
|
}
|
|
|
|
set_has_ai() {
|
|
app.hasAI = !app.hasAI;
|
|
this.has_ai = app.hasAI;
|
|
}
|
|
|
|
on_create() {
|
|
app.rowCount = this.rowinput;
|
|
app.colCount = this.colinput;
|
|
this.current_state = app.get_current_state();
|
|
|
|
app.tester(async (state,victory) => {
|
|
this.current_state = state;
|
|
this.instructions = instructions[this.current_state];
|
|
if (victory) this.victory = 'win';
|
|
else this.victory = 'lose';
|
|
})
|
|
}
|
|
}
|
|
|
|
export default TopComponent; |