My personal website's games section https://games.johanv.net
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.
 
 
 
 
 

97 lines
3.9 KiB

{% include 'header.html' %}
<div id="app" class="gameArea" v-cloak><form method="{{ formMethod }}">
<div class="leftCol">
<h1 class="scale" style="margin-bottom: 1em">Boggle 2.0</h1>
<p class="scale" v-if="game != undefined">
Game #[[ game._id ]]<br/>
<span v-if="game.wasImported != undefined && game.wasImported">This game was imported from BoggleCV.</span><br/>
[[ game.size ]]x[[ game.size ]], [[ game.letters ]] letters, [[ game.minutes ]] min<br/>
<span v-if="isHost">
host (you): [[ username ]]<br/>
</span>
<span v-else>
host: [[ game.players[0] ]]<br/>
you: [[ username ]]<br/>
</span>
Waiting for players...<br/>
</p>
<span v-if="isHost">
<form method="{{ formMethod }}">
<input type="hidden" name="username" value="{{ username }}"/>
<input type="hidden" name="action" value="start"/>
<input type="hidden" name="id" value="{{ id }}"/>
<input type="hidden" name="page" value="play"/>
<input class="greenButton" style="float: left; margin: 10px;" type="submit" value="Begin"/>
</form>
</span>
<form method="{{ formMethod }}">
<input type="hidden" name="username" value="{{ username }}"/>
<input type="hidden" name="action" value="cancel"/>
<input type="hidden" name="id" value="{{ id }}"/>
<input type="hidden" name="page" value="lobby"/>
<input class="redButton" style="float: left; margin: 10px;" type="submit" value="Cancel" v-if="isHost"/>
<input class="redButton" style="float: left; margin: 10px;" type="submit" value="Leave Game" v-if="isNotHost"/>
</form>
<br/><br/>
</div>
<div class="rightCol">
<h2 class="scale">Video Call</h2>
<p><a target="_blank" href="https://drive.confuzer.cloud/index.php/call/wscgqe9r">Join the video chat!</a></p>
<h2>[[ game.players.length ]] players total</h2>
<p class="scale" v-if="game != undefined">
<span v-for="(player, i) in game.players"><span v-if="i>0">, </span>[[ player ]]</span>
</p>
</div>
<div class="singleCol"></div>
</form></div>
{% include 'boggle/common.html' %}
<script>
const app = new Vue ({
delimiters: ['[[',']]'],
el: "#app",
data: {
game: undefined,
username: "{{ username }}",
isHost: false,
isNotHost: false
},
created () {
fetch('?request=game&id={{ id }}')
.then(response => response.json())
.then(json => {
this.game = json.game
console.log(this.game)
this.isHost = (this.game.players[0] == this.username)
this.isNotHost = !this.isHost;
})
},
methods: {
getBasic: function() {
fetch('?request=basic&id={{ id }}')
.then(response => response.json())
.then(json => {
console.log(json)
if (Object.keys(json).length == 0) { //game has been deleted
window.location = "?username={{ username }}&page=lobby"; //go back to lobby
}
this.game.players = json.players;
this.isHost = (this.game.players[0] == this.username)
this.isNotHost = !this.isHost;
if (json.isStarted) {
window.location = "?username={{ username }}&id={{ id }}&page=play";
}
})
}
},
mounted () {
setInterval(() => {
this.getBasic();
}, 1000);
}
});
</script>
{% include 'footer.html' %}