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.
 
 
 
 
 

88 lines
3.5 KiB

{% include 'header.html' %}
<div class="gameArea">
<div class="singleCol">
<h1 class="scale" style="margin-bottom: 1em">Boggle 2.0</h1>
</div>
<div class="leftCol">
<img src="/static/boggle/5x5.png" style="width: 70%">
</div>
<div class="rightCol">
<form method="{{ formMethod }}" action="/boggle" name="login" onsubmit="return validateUsername()">
<input type="text" class="underlineText" id="name" name="username" placeholder="Nickname" required autofocus/>
<input class="greenButton" type="submit" value="Enter Lobby"/>
<p id="error" style="background-color: #e33; color: white;"></p>
<input id="stay" name="stay" type="checkbox"> Stay logged in?<br/>
</form>
</div>
<div class="singleCol">
<input type="hidden" name="page" value="lobby"/>
<p class="scale">Boggle is a word game with a grid of random letters. The goal is to find letters next to each other that form words. The game lasts 3 minutes and the person with the highest score (longer words are worth more) at the end wins.</p>
<form method="{{ formMethod }}">
<input type="hidden" name="page" value="stats"/>
<input type="hidden" name="prev" value="login"/>
<input class="purpleButton" type="submit" value="Past Games & Stats" style="float: left"/>
</form><br/><br/>
<p class="scale">
<a href="/static/boggle/boggle-2.0-design-doc-2019-12-27.pdf">design document</a> |
<a target="_blank" href="https://codeberg.org/johanvandegriff/games.johanv.net/src/branch/master/boggle.py">server code</a> |
<a target="_blank" href="https://codeberg.org/johanvandegriff/games.johanv.net/src/branch/master/templates/boggle">client code</a> |
<a target="_blank" href="https://codeberg.org/johanvandegriff/games.johanv.net/src/branch/master/static/boggle.css">client css</a> |
<a target="_blank" href="https://codeberg.org/johanvandegriff/BoggleCV">machine learning code</a>
</p>
<p class="scale">play the old version: <a href="/boggle_old">Boggle 1.0</a></p>
</div>
</div>
<script>
//https://www.w3schools.com/js/js_cookies.asp
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
username = getCookie("username");
if (username != undefined && username != "") {
window.location = "?username="+username+"&page=lobby";
}
function validateUsername() {
var username = document.forms["login"]["username"].value;
if (username != username.replace(/[^a-zA-Z\d]/g, "")) {
document.getElementById("error").innerHTML = "Illegal character in username. Only letters and numbers allowed.";
return false;
}
if (username.length > 32) {
document.getElementById("error").innerHTML = "Username too long. Max length is 32 characters.";
return false;
}
if (document.getElementById("stay").checked) {
setCookie("username", username, 365);
}
}
</script>
{% include 'boggle/common.html' %}
{% include 'footer.html' %}