{% include 'header.html' %}
<div id="app" class="gameArea">
<div class="leftCol">
<form method="{{ formMethod }}">
<h1 class="scale">Boggle 2.0 Lobby</h1>
<p class="scale">Welcome, {{ username }}! Select a game type, or join an existing game.</p>
<input class="radioHide" type="radio" name="preset" id="5x5" value="5x5" v-model="preset">
<label class="leftCol grayBox" for="5x5">
5x5, find words with 4 letters or more in 3 minutes<br/>
<img class="hideSmall" src="/static/boggle/5x5.png" style="width:70%"/>
</label>
<input class="radioHide" type="radio" name="preset" id="4x4" value="4x4" v-model="preset">
<label class="rightCol grayBox" for="4x4">
4x4, find words with 3 letters or more in 3 minutes<br/>
<img class="hideSmall" src="/static/boggle/4x4.png" style="width:70%"/>
</label>
<input class="radioHide" type="radio" name="preset" id="custom" value="custom" v-model="preset">
<label class="singleCol grayBox" for="custom">
Custom Board<br/>
<select class="customSelect" name="size" v-model="size" v-on:click="preset='custom'">
<option>2x2</option>
<option>3x3</option>
<option>4x4</option>
<option>5x5</option>
<option>6x6</option>
<option>7x7</option>
<option>8x8</option>
</select>, find words with
<select class="customSelect" name="letters" v-model.number="letters" v-on:click="preset='custom'">
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select> letters or more in
<select class="customSelect" name="minutes" v-model.number="minutes" v-on:click="preset='custom'">
<option>0.5</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select> minutes
</label>
<input class="radioHide" type="radio" name="preset" id="random" value="random" v-model="preset">
<label class="singleCol grayBox" for="random">
Random Board!<br/>
</label>
<input type="hidden" name="username" value="{{ username }}"/>
<input type="hidden" name="action" value="create"/>
<input type="hidden" name="page" value="pregame"/>
<input class="greenButton" type="submit" value="Create Game"/>
</form>
<br/>
<form method="{{ formMethod }}">
<input type="hidden" name="username" value="{{ username }}"/>
<input type="hidden" name="page" value="stats"/>
<input class="purpleButton" type="submit" value="Past Games & Stats"/>
</form>
<br/>
<form method="{{ formMethod }}" onsubmit="removeCookie()">
<input class="grayButton" type="submit" value="Logout"/>
</form>
</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>
<p><a href="?username={{ username}}&page=upload">process an image with BoggleCV</a></p>
<h2 class="scale" style="margin-bottom: 1em">Current Games</h2>
<div v-for="game in games" class="grayBox" v-cloak>
<div style="padding: 5px; border-bottom: 2px solid black;">
<form method="{{ formMethod }}">
<span v-if="!game.isStarted">
<input class="greenButton" type="submit" value="Join"/>
Game #[[ game._id ]] (waiting...)
<input type="hidden" name="id" v-bind:value="game._id"/>
<input type="hidden" name="action" value="join"/>
<input type="hidden" name="page" value="pregame"/>
</span>
<span v-else-if="!game.isDone">
<input class="blueButton" type="submit" value="Join Late"/>
Game #[[ game._id ]] (time left: [[ showTime(game.secondsLeft) ]])
<input type="hidden" name="id" v-bind:value="game._id"/>
<input type="hidden" name="action" value="join"/>
<input type="hidden" name="page" value="play"/>
</span>
<span v-else>
<input class="purpleButton" type="submit" value="View"/>
Game #[[ game._id ]] (time's up!)
<input type="hidden" name="id" v-bind:value="game._id"/>
<input type="hidden" name="page" value="view"/>
</span>
<input type="hidden" name="username" value="{{ username }}"/>
<input type="hidden" name="id" :value="game._id"/>
</form>
</div>
<div>
[[ game.size ]]x[[ game.size ]], [[ game.letters ]] letters, [[ game.minutes ]] min, [[ game.players.length ]] players:
<span v-for="(player, i) in game.players"><span v-if="i>0">, </span>[[ player ]]</span>
</div>
</div>
</div>
<div class="singleCol"></div>
</div>
{% include 'boggle/common.html' %}
<script>
function removeCookie() {
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
const REMOVE_COMPLETED_FROM_LOBBY_TIMEOUT = {{ remove_completed_from_lobby_timeout }}; //remove games that are finished after this many seconds
const app = new Vue ({
delimiters: ['[[',']]'],
el: "#app",
data: {
games: [],
size: "6x6",
letters: 4,
minutes: 3,
preset: "5x5"
},
created () {
this.getGames();
},
methods: {
everySecond: function() {
newgames = []
for (var i=0; i<this.games.length; i++) {
game = this.games[i];
if (game.isStarted) {
game.secondsLeft--;
if (game.secondsLeft <= 0) {
game.isDone = true;
}
if (game.secondsLeft > -REMOVE_COMPLETED_FROM_LOBBY_TIMEOUT) {
newgames.push(game);
}
} else {
newgames.push(game);
}
}
this.games = newgames;
},
//show time in the mm:ss format, with zero-padding on the seconds
showTime: function (t) {
var minutes = Math.floor(t / 60);
var seconds = (t % 60);
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
},
getGames: function() {
fetch('?request=games&page=lobby')
.then(response => response.json())
.then(json => {
json.games.sort((a, b) => (a._id < b._id) ? 1 : -1)
this.games = json.games
})
}
},
// watch: {
// size: function(val) {this.preset = "custom"},
// letters: function(val) {this.preset = "custom"},
// minutes: function(val) {this.preset = "custom"}
// }
mounted () {
setInterval(() => {
this.everySecond();
}, 1000);
setInterval(() => {
this.getGames();
}, 5000);
}
});
</script>
{% include 'footer.html' %}