Documentation¶
Front-end¶
The front-end website shows the user what dice number they’ve rolled and what it means, as well as the last rolled number.
This is what I want my front-end website to look like.
This is what I’ve coded so far.
Front-end code¶
This is the html code of my front-end website.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="static/css/dice.css" />
<!-- <script src="/static/js/tunnel-script.js"></script> -->
<title>Digital dice</title>
</head>
<body>
<header>
<h1>dice game</h1>
</header>
<main>
<div class="split left">
<div class="centered">
<h2>You've rolled number:</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<h3>Last rolled numbers:</h3>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
This is the css code of my front-end website.
/*Author: Kasinah Latumanuwy, student minor Internet of Things on the Hogeschool van Amsterdam*/
/*License: Open source*/
/*Goal: Create a digital dice with a Wemos device that's used to play a drinking game*/
*{
padding: 0;
margin: 0;
}
@font-face {
font-family: Montserrat-ExtraBold, sans-serif;
src: url(../assets/Montserrat-ExtraBold.ttf);
}
@font-face {
font-family: Montserrat-SemiBold, sans-serif;
src: url(../assets/Montserrat-SemiBold.ttf);
}
body {
height: 100vh;
}
header h1 {
font-family: Montserrat-ExtraBold, sans-serif;
color: white;
font-size: 1em;
padding: 1em;
position: fixed;
z-index: 2;
text-transform: uppercase;
}
main {
font-family: Montserrat-SemiBold, sans-serif;
}
main h2 {
font-size: 1.5em;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #FDC835;
}
.right {
right: 0;
}
.centered {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
update I managed to display the last rolled number on my front-end website. I therefor had to adjust the html and css file. They now look like this:
<!--Author: Kasinah Latumanuwy, student minor Internet of Things on the Hogeschool van Amsterdam-->
<!--License: Open source-->
<!--Goal: Create a digital dice with a Wemos device that's used to play a drinking game-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="static/css/dice.css" />
<title>Digital dice</title>
</head>
<body>
<header>
<h1>dice game</h1>
</header>
<main>
<div class="split left">
<h2>You've rolled number:</h2>
<div class="centered">
<img id="rolled-dice" />
<div id="meaning-dice"></div>
</div>
</div>
<div class="split right">
<h2>Last rolled numbers:</h2>
<div class="centered">
<ul>
<li><img id="last-rolled-dice1" /><div id="meaning-rolled-dice1">1</div></li>
<li><img id="last-rolled-dice2" /><div id="meaning-rolled-dice2">2</div></li>
<li><img id="last-rolled-dice3" /><div id="meaning-rolled-dice3">3</div></li>
<li><img id="last-rolled-dice4" /><div id="meaning-rolled-dice4">4</div></li>
<li><img id="last-rolled-dice5" /><div id="meaning-rolled-dice5">5</div></li>
</ul>
</div>
</div>
</main>
<footer>
<script src="/static/js/app.js"></script>
</footer>
</body>
</html>
I only added this to my css:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
img#rolled-dice {
padding-top: 50px;
padding-bottom: 30px;
height: 200px;
}
#meaning-dice {
font-family: Montserrat-ExtraBold, sans-serif;
font-size: 1.25em;
}
ul {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 14px;
}
ul img {
height: 50px;
}
li {
display: flex;
align-items: center;
gap: 25px;
}
Back-end¶
The purpose of my back-end website is to show the user what number they’ve rolled and what the last rolled numbers are, including the meaning of that number.
I’ve not used an API and JSON yet.
This is the insert.php file:
<?php
$servername = "mariadb";
$username = "root";
$password = "7YKyE8R2AhKzswfN";
$dbname = "dice_roller";
$dice = $_GET["dice"];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO dice (value)
VALUES ($dice)";
if ($conn->query($sql) === TRUE) {
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
// If the value of the dice equals 1, show the image and text
if($dice == 1) {
echo 'dice = 1';
}
// If the value of the dice equals 2, show the image and text
if($dice == 2) {
echo 'dice = 2';
}
// If the value of the dice equals 3, show the image and text
if($dice == 3) {
echo 'dice = 3';
}
// If the value of the dice equals 4, show the image and text
if($dice == 4) {
echo 'dice = 4';
}
// If the value of the dice equals 5, show the image and text
if($dice == 5) {
echo 'dice = 5';
}
// If the value of the dice equals 6, show the image and text
if($dice == 6) {
echo 'dice = 6';
}
$conn->close();
?>
update I added another php file to get the information out of my database and print it to json. I’ve fetched this file to my dice.html file in my localhost.
The getdb.php file consists of the following code:
// Author: Kasinah Latumanuwy, student minor Internet of Things on the Hogeschool van Amsterdam
// License: Open source
// Goal: Create a digital dice with a Wemos device that's used to play a drinking game
<?php
$servername = "mariadb";
$username = "root";
$password = "7YKyE8R2AhKzswfN";
$dbname = "dice_roller";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// order the items by time and show only 6 items from the database dice (includes the rolled number and the last 5)
$sql = "SELECT * FROM `dice` ORDER BY time DESC LIMIT 6";
$result = $conn->query($sql);
$data[] = array();
$counter = 0;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$data[$counter]["value"] = $row['value'];
$data[$counter]["time"] = $row['time'];
$counter++;
}
} else {
echo "0 results";
}
$conn->close();
print_r(json_encode($data));
?>
This is the code for my javascript file:
var meaningRoll = ['Give the dice to the person on your right', 'TAKE A SHOT', 'Almost had you!', 'Lucky you...', 'Keep rolling', 'Give the dice to the person on your left']
function rollDice(){
fetch('http://localhost/getdb.php')
.then((response) => response.json())
.then((data) => {
console.log(data);
var lastRoll = data[0]['value'];
document.getElementById('rolled-dice').src = '/static/images/dice' + lastRoll + '.svg';
document.getElementById('meaning-dice').innerHTML = meaningRoll[lastRoll-1];
});
}
// function showLastRolls(data){
// var lastRolls = data.slice(1, 6);
// console.log(lastRolls);
// lastRolls.forEach((roll, index) => {
// var rollIndex = index + 1;
// var imgSelector = 'last-rolled-dice' + rollIndex;
// var meaningSelector = 'meaning-rolled-dice' + rollIndex;
// document.getElementById(imgSelector).src = '/static/images/dice' + roll.value + '.svg';
// document.getElementById(meaningSelector).innerHTML = meaningRoll[roll.value-1];
// });
// }
window.addEventListener("DOMContentLoaded", () => {
setInterval(rollDice, 100);
rollDice();
})
The function showLastRolls worked when I was at school, but when I got home and tested it again, it didn’t work anymore. I’ve commented the function out for now.
update I showed my code to Mats and he solved the problem. My js didn’t call my function showLastRolls anywhere, that’s why it didn’t work. The working code now looks like this:
//Author: Kasinah Latumanuwy, student minor Internet of Things on the Hogeschool van Amsterdam
//License: Open source
//Goal: Create a digital dice with a Wemos device that's used to play a drinking game
// Store the meanings of the dice rolls, sorted by number
var meaningRoll = ['Give the dice to the person on your right', 'TAKE A SHOT', 'Almost had you!', 'Lucky you...', 'Keep rolling', 'Give the dice to the person on your left']
function rollDice(){
fetch('http://localhost/getdb.php')
.then((response) => response.json())
.then((data) => {
var lastRoll = data[0]['value'];
// Insert the svg of the dice roll that is equal to the first value of the array 'value'
document.getElementById('rolled-dice').src = '/static/images/dice' + lastRoll + '.svg';
// Change the HTML with the meaning out of the var meaningRoll ...
////
document.getElementById('meaning-dice').innerHTML = meaningRoll[lastRoll-1];
showLastRolls(data);
});
}
function showLastRolls(data){
var lastRolls = data.slice(1, 6);
console.log(lastRolls);
lastRolls.forEach((roll, index) => {
var rollIndex = index + 1;
var imgSelector = 'last-rolled-dice' + rollIndex;
var meaningSelector = 'meaning-rolled-dice' + rollIndex;
document.getElementById(imgSelector).src = '/static/images/dice' + roll.value + '.svg';
document.getElementById(meaningSelector).innerHTML = meaningRoll[roll.value-1];
});
}
window.addEventListener("DOMContentLoaded", () => {
// Roll the dice when the DOM content is loaded
rollDice();
// Roll the dice every .1 second
setInterval(rollDice, 100);
})
Database Design¶
ERD schematic¶
The only relevant information that is used in the table of my digital dice database is the time and the value.
The time is the primary key, because I want the columns to be sorted by the timestamp. The five last rolled dices will be displayed on my front-end website.
Database¶
I haven’t gotten that far yet with my database so these are screenshots of what I do have.
You can see that I have two columns, one for the time of the dice roll and one for the value of the dice roll.
I’ve hardcoded the content of the table of my database by using the url.
update
I’ve got my embedded device connected to my database now. When I roll my dice, the value of the dice displays in the table of my database.
Last update:
November 7, 2022