What is my JS Checkout About?
As a game dev, my JS checkout is a game, which I call dark hallways. After Mr. Mort’s statement on slack, I first, as a joke, and then actually thought about the duality of objects, such as hallways. How they can be ween in both an symbol of horror and a symbol of light. I decided to buy into this.
Breakdown of this Notebook
- Start out with the HTML styling (split screen, buttons, etc.)
- Talk about the logic (how button presses and functions are set, how they are managed)
- Talk about use of javascript events and local storage for leaderboard purposes
- Show leaderboard
CSS and Styling
%%html
<!-- escape.scss (menu, leaderboard, etc.) -->
<style>
// This defines a 3x3 grid
$grid-template-columns: repeat(3, 1fr);
$grid-template-rows: repeat(3, 1fr);
.container {
display:grid;
grid-template-rows:auto 1fr auto;
grid-template-columns:100%;
/* fallback height */
min-height:100vh;
/* new small viewport height for modern browsers */
min-height:100svh;
}
.menu{
background-color: white;
text-align: center;
top: 100%;
}
.image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.button{
border-width: 3px;
font-family:'Times New Roman', Times, serif;
width: 100px;
height: 30px;
}
#footer{
text-align: center;
color: purple;
}
// ... define other grid item classes as needed
/* Split the screen in half */
.splitty {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
</style>
%%html
<!-- center.scss (game) -->
<style>
/* Split the screen in half */
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
width: 60%;
background-color: black;
}
/* Control the right side */
.right {
right: 0;
width: 40%;
background-color: rgba(243, 230, 230, 0.176);
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 450px;
height: 550px;
}
.menu {
position: fixed;
bottom: -300px;
right: -280px;
width: 500px;
align-items: center;
}.button {
background-color: rgba(255, 255, 255, 0.441);
width: 100px;
height: 75px;
font-size: large;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
color: white;
}
.grid-container {
display: grid;
position: fixed;
grid-template-columns: auto auto auto;
background-color: #2195f36a;
padding: 10px;
bottom: 25px;
right: -80px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
flex: 25%;
text-align: center;
}
</style>
Input/Output and Logic and use of localStorage
%%html
<html>
<head>
<title> Dark Hallways </title>
<meta charset="utf-8">
<link rel="stylesheet" href="center.scss">
</script>
</head>
<script>
/*
Player Variables
*/
let armor = 0;
let damage = 0;
var local = "0";
/*
Logic for movement depending on locality (shorthand for where the player is)
*/
var all = {
"0": {
"script": "You approach a dark hallway. <br> There appears to be something on the ground. <br> Pick it up?",
"image": "hallway1.jpeg",
"choices": ["Yes", "No"],
"results" : {"Yes" : addToInv, "No":moveTo, "Yesfunc" : ["pistol", "1"], "Nofunc" : "1"}
},
"1": {
"script": "There appears to be something in the distance. <br> The hallway spans further. <br> Whatever is there appears to be approaching.",
"image": "hallway2.jpeg",
"choices": ["Approach", "Hide"],
"results" : {"Approach" : moveTo, "Hide":moveTo, "Approachfunc" : "3", "Hidefunc" : "2"}
},
"2": {
"script": "You sit behind a couch, waiting for whatever is there to disappear <br> It is possible to sneak <br> Do we sneak or stay?",
"image": "hallway2.jpeg",
"choices": ["Sneak", "Stay"],
"results" : {"Sneak" : moveTo, "Stay":moveTo, "Sneakfunc" : "6", "Stayfunc" : "2"}
},
"3": {
"script": "You approach the thing... <br> And it attacks! <br> Do we fight or run?",
"image": "hallway3.png",
"choices": ["Fight", "Run"],
"results" : {"Fight" : specialMove, "Run":addToInv, "Fightfunc" : [4, 5, 'damage', 0], "Runfunc" : ["Tendril", 1]}
},
"4": {
"script": "You fight furiously... <br> But you are too weak <br> You fall to the maw of the monster",
"image": "hallway3.png",
"choices": ["End", "Game"],
"results" : {"End" : leave, "Game":leave, "Endfunc" : "monster", "Gamefunc" : "monster"}
},
"5": {
"script": "You fight furiously ... <br> and you destroy the monster! <br> You see a door beyond. Will you walk through?",
"image": "hallway3.png",
"choices": ["Go Through", "Stay"],
"results" : {"Go Through" : moveTo, "Stay":moveTo, "Go Throughfunc" : "9", "Stayfunc" : "8"}
},
"6": {
"script": "You sneak by the monster <br> and behind it you see a door. Do we stay or do we go approach the door?",
"image": "hallway3.png",
"choices": ["Go!", "Stay"],
"results" : {"Go!" : moveTo, "Stay":moveTo, "Go!func" : "3", "Stayfunc" : "7"}
},
"7": {
"script": "You stay inside <br> but you are lost within the chaos of the labyrinth <br> You fall in the winding labyrinth",
"image": "hallway4.jpeg",
"choices": ["End", "Game"],
"results" : {"End" : leave, "Game":leave, "Endfunc" : "stay", "Gamefunc" : "stay"}
},
"8": {
"script": "Your raucous fight opens a door in the damp floor <br> unable to keep up your balance, you fall into the ground <br> and fall into the infinite chasm",
"image": "hallway5.jpg",
"choices": ["End", "Game"],
"results" : {"End" : leave, "Game":leave, "Endfunc" : "hole", "Gamefunc" : "hole"}
},
"9": {
"script": "You escape through the door into the light. <br> The air feels good, and the darkness fades <br> You escape!",
"image": "hallway6.jpg",
"choices": ["End", "Game"],
"results" : {"End" : victory, "Game":victory, "Endfunc" : "fighting", "Gamefunc" : "fighting"}
}
};
//TODO: Finish the sneak and the stay/go through (completion page)
// Then finish up backend and leaderboard
// Completed: sneak, ending of staying
var playerStats = {
"armor" : 0,
"damage" : 0,
"health" : 0,
"equipped" : {
"damage": "",
"armor" : ""
}
}
var inventory = {
}
var assets = {
"pistol" : ["damage", 1],
"vest" : ["armor", 2],
"tendril" : ["damage", 2]
}
function formatStuff(location) {
local = location;
console.log("Locality: " + local);
let point = all[location];
document.getElementById("hallwayIMG").src = "images/" + point["image"];
document.getElementById("C1").innerHTML = point["choices"][0];
document.getElementById("C2").innerHTML = point["choices"][1];
document.getElementById("script").innerHTML = point["script"];
}
function equip(item){
inventory[item] = !inventory[item];
if (inventory[item]){
document.getElementById("err").innerHTML = item + " equipped!"
setTimeout(function(){document.getElementById("err").innerHTML = ""},1000);
playerStats[assets[item][0]] += assets[item][1];
playerStats["equipped"][assets[item][0]] = item;
}
else {
document.getElementById("err").innerHTML = item + " unequipped."
setTimeout(function(){document.getElementById("err").innerHTML = ""},1000);
playerStats[assets[item][0]] -= assets[item][1];
}
}
function addToInv(stuff) {
let name = stuff[0];
let location = stuff[1];
let elems = document.getElementsByName("slot");
let ocured = false;
for(let i = 0; i < elems.length; i++){
slot = elems[i];
if(slot.innerHTML === ""){
var b = document.createElement("button");
b.innerHTML = name
b.id = name
b.addEventListener("click", function(event){
equip(name)
})
document.getElementById(slot.id).appendChild(b);
ocured = true;
document.getElementById("err").innerHTML = "You picked up a " + name
setTimeout(function(){document.getElementById("err").innerHTML = ""},1000);
break
}
}
if (!ocured){
document.getElementById("err").innerHTML = "Inventory Full!"
setTimeout(function(){document.getElementById("err").innerHTML = ""},1000);
}
moveTo(location);
}
function moveTo(location){
console.log("Location Passed in " + location)
formatStuff(location);
}
function specialMove(information){//)loc1, loc2, condition, parameter){
console.log(information)
console.log(playerStats[information[2]] > information[3])
if(playerStats[information[2]] > information[3]){
moveTo(information[1])
}
else {
moveTo(information[0])
}
}
function manageFunctions(value){
console.log(local)
console.log("Stuff: " + document.getElementById('C2').innerHTML);
let func = all[local]["results"];
console.log("value: " + value);
console.log(all[local]["results"])
func[value](func[value+"func"]);
}
function leave(cause){
localStorage.setItem("causeOfDeath", cause);
setTimeout(() => {
window.location = 'https://nvarap.github.io/gameover.html'
}, 500);
}
function victory(win){
localStorage.setItem("causeOfVictory", win);
setTimeout(() => {
window.location = 'https://nvarap.github.io/victory.html'
}, 500);
}
window.onload = (event) => {
formatStuff(local);
};
</script>
<body style="position: relative; background-color: black;">
<div class="split left">
<div class="centered">
<img src="images/hallway1.jpeg" alt="Hallway1" id="hallwayIMG">
<div style="color: white;">
<p id="script"> </p>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<h1 style="position: fixed; bottom: 270px; right: -80px; color: white;"> Inventory </h1>
<div class="grid-container">
<div id="slot1" name="slot" class="grid-item"></div>
<div id="slot2" name="slot" class="grid-item"></div>
<div id="slot3" name="slot" class="grid-item"></div>
<div id="slot4" name="slot" class="grid-item"></div>
<div id="slot5"name="slot" class="grid-item"></div>
<div id="slot6" name="slot" class="grid-item"></div>
<div id="slot7" name="slot" class="grid-item"></div>
<div id="slot8" name="slot" class="grid-item"></div>
<div id="slot9" name="slot" class="grid-item"></div>
<div id="slot10" name="slot" class="grid-item"></div>
<div id="slot11" name="slot" class="grid-item"></div>
<div id="slot12" name="slot" class="grid-item"></div>
<div id="slot13" name="slot" class="grid-item"></div>
<div id="slot14" name="slot" class="grid-item"></div>
<div id="slot15" name="slot" class="grid-item"></div>
</div>
<p id="err" style="position: fixed; top: 10px; right: -35px; color: white;"></p>
<div class="menu">
<button onclick="manageFunctions(document.getElementById('C1').innerHTML)" id="C1" data-inline="true" class="button" style="margin: 0px"> </button>
<button onclick="manageFunctions(document.getElementById('C2').innerHTML)" id="C2" data-inline="true" class="button" style="margin: 50px"> </button>
</div>
</div>
</div>
</div>
</body>
</html>
Leaderboard
backend
from flask import Blueprint, request, jsonify # jsonify creates an endpoint response object
from flask_restful import Api, Resource # used for REST API building
app_api = Blueprint('api', __name__,
url_prefix='/api/points')
# API generator https://flask-restful.readthedocs.io/en/latest/api.html#id1
api = Api(app_api)
class UsrAPI:
local_dic = [] # Stores all the users and IDs
def newScore(front, back, diction):
user_id = str(len(diction))
diction.append({'name':front, "points":back})
class _Create(Resource):
def post(self): # simply creates the endpoint, dne otherwise
body = request.get_json()
UsrAPI.newScore(body.get("name"), body.get("score"), UsrAPI.local_dic)
return {"message" : "new person added"}
class _Read(Resource):
def get(self):
return jsonify(sorted(UsrAPI.local_dic,key=lambda x: x["points"], reverse=True))
# init wikipedia by default
# getJoke(id)
# class _ReadWithName(Resource): # read when url have name query satisfied
# def get(self, name):
# return jsonify()# otherwise check with name
# getRandomJoke()
#class _ReadRandom(Resource):
# def get(self):
# return jsonify() # this exists for some reason
# building RESTapi resources/interfaces, these routes are added to Web Server
api.add_resource(_Create, '/create')
api.add_resource(_Read, '/')
Frontend
%%js
// fetching
fetch('http://127.0.0.1:8086/api/points/')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
let leaderboard = document.getElementById("leaderboard");
// Process the response data
console.log(data);
let i = 1;
data.forEach(element => {
let d = document.createElement("div");
d.style = "color: white; width: 500px";
d.innerHTML = i + ". | " + element["name"] + " | " + element["points"];
leaderboard.appendChild(d);
i ++;
});
})
.catch(error => {
// Handle any errors that occurred during the request
console.error('Error:', error);
});
%%js
// posting
var but = document.getElementById("add");
but.addEventListener("click", () => {
fetch('http://127.0.0.1:8086/api/points/create', {
method: 'POST',
mode: "cors",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ "name" : localStorage.getItem("name"), "score":Math.floor(100-Math.random()*100)})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Process the response data
console.log(data);
localStorage.clear()
setTimeout(() => {
window.location = 'https://nvarap.github.io/index.html'
}, 500);
})
.catch(error => {
// Handle any errors that occurred during the request
console.error('Error:', error);
});
})