diff --git a/frontend/public/game.js b/frontend/public/game.js
index 1fc0b9d..3b51b91 100644
--- a/frontend/public/game.js
+++ b/frontend/public/game.js
@@ -1,20 +1,20 @@
-var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
+var __extends = (this && this.__extends) || (function(){
+ var extendStatics = function(d, b){
extendStatics = Object.setPrototypeOf ||
- ({__proto__: []} instanceof Array && function (d, b) {
+ ({__proto__: []} instanceof Array && function(d, b){
d.__proto__ = b;
}) ||
- function (d, b) {
- for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+ function(d, b){
+ for(var p in b) if(Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
};
return extendStatics(d, b);
};
- return function (d, b) {
- if (typeof b !== "function" && b !== null)
+ return function(d, b){
+ if(typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
- function __() {
+ function __(){
this.constructor = d;
}
@@ -45,21 +45,21 @@ var hasAlreadyScored = false;
var hasDied = true;
var ready = true;
-function preload() {
+function preload(){
font = loadFont(FONT_PATH);
backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
pipeImage = loadImage(PIPE_IMAGE_PATH);
floorImage = loadImage(FLOOR_IMAGE_PATH);
}
-function setup() {
+function setup(){
createCanvas(1085, 600);
floorHeight = height / 5;
setupObstacleConsts();
setupFont();
setupGame();
var originalSetItem = localStorage.setItem;
- localStorage.setItem = function (key, value) {
+ localStorage.setItem = function(key, value){
var event = new Event('itemInserted');
event.value = value; // Optional..
@@ -69,57 +69,57 @@ function setup() {
};
}
-function setupObstacleConsts() {
+function setupObstacleConsts(){
obstacleOffset = width / OBSTACLE_COUNT;
obstacleWidth = width / 22.727272727272727272;
Obstacle.distanceBetweenPipes = height / 2.5;
Obstacle.startX = width;
}
-function setupFont() {
+function setupFont(){
textSize(75);
textAlign(CENTER);
textFont(font);
}
-function setupGame() {
+function setupGame(){
paused = true;
raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
setupObstacles();
}
-function setupObstacles() {
+function setupObstacles(){
obstacles = [];
instantiateObstacles(OBSTACLE_COUNT);
- obstacles.forEach(function (obstacle) {
+ obstacles.forEach(function(obstacle){
return obstacle.randomizeHeight();
});
}
-function instantiateObstacles(number) {
- for (var i = 0; i < number; i++) {
+function instantiateObstacles(number){
+ for(var i = 0; i < number; i++){
obstacles.push(new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage));
}
}
-function draw() {
+function draw(){
update();
gameLoop();
drawGame();
}
-function drawGame() {
+function drawGame(){
drawScenery();
drawEntities();
displayScore();
}
-function drawScenery() {
+function drawScenery(){
background(backgroundImage);
drawFloor();
}
-function drawFloor() {
+function drawFloor(){
push();
noFill();
image(floorImage, 0, height - floorHeight, width, floorHeight);
@@ -127,68 +127,71 @@ function drawFloor() {
pop();
}
-function drawEntities() {
+function drawEntities(){
raspberry.draw();
drawObstacles();
}
-function drawObstacles() {
- obstacles.forEach(function (obstacle) {
+function drawObstacles(){
+ obstacles.forEach(function(obstacle){
obstacle.draw();
});
}
-function gameLoop() {
- if (!paused) {
+function gameLoop(){
+ if(!paused){
collisionCheck(obstacles[0]);
checkRaspberryScore();
}
}
-function collisionCheck(o) {
- if (o.collides(raspberry)) {
+function collisionCheck(o){
+ if(o.collides(raspberry)){
die();
setupGame();
}
}
-function die() {
+function die(){
+ if(localStorage.getItem("frontend-ready") == "false")
+ return;
+
ready = false;
hasDied = true;
playTime = Date.now() - startTime;
exportToLocalStorage();
- setTimeout(function () {
+ setTimeout(function(){
return ready = true;
}, 1000);
}
-function exportToLocalStorage() {
+function exportToLocalStorage(){
localStorage.setItem("game-playTime", String(playTime));
localStorage.setItem("game-score", String(score));
localStorage.setItem("game-isRunning", String(!hasDied));
}
-function displayScore() {
+function displayScore(){
push();
fill(195, 33, 34);
text(score, 0, height / 8, width, height);
pop();
}
-function update() {
- if (!paused) {
+function update(){
+ if(!paused){
raspberry.update();
}
- obstacles.forEach(function (obstacle) {
- if (!paused) {
+ obstacles.forEach(function(obstacle){
+ if(!paused){
obstacle.update();
checkObstacleReset(obstacle);
}
});
}
-function checkObstacleReset(obstacle) {
- if (obstacle.position.x < -obstacleWidth) {
+function checkObstacleReset(obstacle){
+ if(obstacle.position.x < -obstacleWidth){
obstacle.resetPosition();
obstacles.shift();
obstacles.push(obstacle);
@@ -196,40 +199,41 @@ function checkObstacleReset(obstacle) {
}
}
-function checkRaspberryScore() {
- if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
- && !hasAlreadyScored) {
+function checkRaspberryScore(){
+ if((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
+ && !hasAlreadyScored){
score += 1;
hasAlreadyScored = true;
}
}
-function resetScore() {
- if (hasDied) {
- hasDied = false;
- score = 0;
- hasAlreadyScored = false;
- startTime = Date.now();
- exportToLocalStorage();
- }
+function resetScore(){
+ if(!hasDied || localStorage.getItem("frontend-ready") == "false")
+ return;
+
+ hasDied = false;
+ score = 0;
+ hasAlreadyScored = false;
+ startTime = Date.now();
+ exportToLocalStorage();
}
-function keyPressed() {
- if (!ready)
+function keyPressed(){
+ if(!ready)
return;
- if (BOOST_KEYS.includes(key.toLowerCase())) {
+ if(BOOST_KEYS.includes(key.toLowerCase())){
resetScore();
raspberry.boost();
}
- if (key == "Escape") {
+ if(key == "Escape"){
paused = !paused;
- } else if (paused) {
+ } else if(paused){
paused = false;
}
}
-var Entity = (function () {
- function Entity(position, width, height, fill) {
+var Entity = (function(){
+ function Entity(position, width, height, fill){
this.position = position;
this.width = width;
this.height = height;
@@ -238,46 +242,46 @@ var Entity = (function () {
}
Object.defineProperty(Entity.prototype, "position", {
- get: function () {
+ get: function(){
return this._position;
},
- set: function (value) {
+ set: function(value){
this._position = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Entity.prototype, "width", {
- get: function () {
+ get: function(){
return this._width;
},
- set: function (value) {
+ set: function(value){
this._width = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Entity.prototype, "height", {
- get: function () {
+ get: function(){
return this._height;
},
- set: function (value) {
+ set: function(value){
this._height = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Entity.prototype, "showHitbox", {
- get: function () {
+ get: function(){
return this._showHitbox;
},
- set: function (value) {
+ set: function(value){
this._showHitbox = value;
},
enumerable: false,
configurable: true
});
- Entity.prototype.draw = function () {
+ Entity.prototype.draw = function(){
push();
fill(this.fill);
rect(this.position.x, this.position.y, this.width, this.height);
@@ -285,10 +289,10 @@ var Entity = (function () {
};
return Entity;
}());
-var Obstacle = (function (_super) {
+var Obstacle = (function(_super){
__extends(Obstacle, _super);
- function Obstacle(position, obstacleWidth, obstacleHeight, image) {
+ function Obstacle(position, obstacleWidth, obstacleHeight, image){
var _this = _super.call(this, position, obstacleWidth, obstacleHeight, 0) || this;
_this.speed = 3;
_this.padding = height / 6.6666666666666666;
@@ -297,62 +301,62 @@ var Obstacle = (function (_super) {
}
Object.defineProperty(Obstacle, "startX", {
- set: function (value) {
+ set: function(value){
this._startX = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Obstacle, "distanceBetweenPipes", {
- set: function (value) {
+ set: function(value){
this._distanceBetweenPipes = value;
},
enumerable: false,
configurable: true
});
- Obstacle.prototype.createPipes = function (position, obstacleHeight, obstacleWidth, pipeImage) {
+ Obstacle.prototype.createPipes = function(position, obstacleHeight, obstacleWidth, pipeImage){
this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
};
- Obstacle.prototype.resetPosition = function () {
+ Obstacle.prototype.resetPosition = function(){
this.randomizeHeight();
this.pipeBottom.position.x = Obstacle._startX;
this.pipeTop.position.x = Obstacle._startX;
};
- Obstacle.prototype.randomizeHeight = function () {
+ Obstacle.prototype.randomizeHeight = function(){
this.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle._distanceBetweenPipes);
this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes;
this.pipeBottom.height = height - this.pipeTop.height - this.padding;
};
- Obstacle.prototype.randomRange = function (min, max) {
+ Obstacle.prototype.randomRange = function(min, max){
return Math.random() * (max - min) + min;
};
- Obstacle.prototype.update = function () {
+ Obstacle.prototype.update = function(){
this.pipeTop.move(this.speed);
this.pipeBottom.move(this.speed);
this.position.x = this.pipeTop.position.x;
};
- Obstacle.prototype.draw = function () {
+ Obstacle.prototype.draw = function(){
this.pipeTop.draw();
this.pipeBottom.draw();
};
- Obstacle.prototype.collides = function (o) {
+ Obstacle.prototype.collides = function(o){
return this.pipeTop.collides(o) || this.pipeBottom.collides(o);
};
return Obstacle;
}(Entity));
-var Pipe = (function (_super) {
+var Pipe = (function(_super){
__extends(Pipe, _super);
- function Pipe(positionX, width, height, image) {
+ function Pipe(positionX, width, height, image){
var _this = _super.call(this, new Position(positionX, 0), width, height, 0) || this;
_this.image = image;
return _this;
}
- Pipe.prototype.update = function () {
+ Pipe.prototype.update = function(){
};
- Pipe.prototype.draw = function () {
+ Pipe.prototype.draw = function(){
push();
noFill();
var imageAspectRatio = this.image.height / this.image.width;
@@ -361,30 +365,30 @@ var Pipe = (function (_super) {
rect(this.position.x, this.position.y, this.width, this.height);
pop();
};
- Pipe.prototype.drawImage = function (computedImageHeight, imageAspectRatio) {
- if (this.height > computedImageHeight) {
+ Pipe.prototype.drawImage = function(computedImageHeight, imageAspectRatio){
+ if(this.height > computedImageHeight){
var maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight;
- for (var imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight) {
- if (imageYPosition + computedImageHeight >= maxImageYPos) {
+ for(var imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight){
+ if(imageYPosition + computedImageHeight >= maxImageYPos){
this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio);
break;
}
image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight);
}
- } else {
+ } else{
image(this.image, this.position.x, this.position.y, this.width, this.height);
}
};
- Pipe.prototype.cropLastImage = function (imageYPosition, computedImageHeight, imageAspectRatio) {
+ Pipe.prototype.cropLastImage = function(imageYPosition, computedImageHeight, imageAspectRatio){
var amountOfImages = Math.floor(imageYPosition / computedImageHeight);
var heightToEdge = this.height - (amountOfImages * computedImageHeight);
var croppedImage = this.image.get(0, 0, this.image.width, this.image.height - (heightToEdge * imageAspectRatio));
image(croppedImage, this.position.x, this.position.y + imageYPosition, this.width, heightToEdge);
};
- Pipe.prototype.move = function (speed) {
+ Pipe.prototype.move = function(speed){
this.position.x -= speed;
};
- Pipe.prototype.collides = function (o) {
+ Pipe.prototype.collides = function(o){
return this.position.x < (o.position.x + o.width) &&
(this.position.x + this.width) > o.position.x &&
this.position.y < (o.position.y + o.height) &&
@@ -392,27 +396,27 @@ var Pipe = (function (_super) {
};
return Pipe;
}(Entity));
-var Position = (function () {
- function Position(x, y) {
+var Position = (function(){
+ function Position(x, y){
this._x = x;
this._y = y;
}
Object.defineProperty(Position.prototype, "x", {
- get: function () {
+ get: function(){
return this._x;
},
- set: function (value) {
+ set: function(value){
this._x = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Position.prototype, "y", {
- get: function () {
+ get: function(){
return this._y;
},
- set: function (value) {
+ set: function(value){
this._y = value;
},
enumerable: false,
@@ -420,10 +424,10 @@ var Position = (function () {
});
return Position;
}());
-var Raspberry = (function (_super) {
+var Raspberry = (function(_super){
__extends(Raspberry, _super);
- function Raspberry(image) {
+ function Raspberry(image){
var _this = this;
Raspberry.position = new Position(width / 6, height / 2);
Raspberry.height = height / 14.2857142857142857;
@@ -438,73 +442,73 @@ var Raspberry = (function (_super) {
}
Object.defineProperty(Raspberry.prototype, "velocity", {
- get: function () {
+ get: function(){
return this._velocity;
},
- set: function (value) {
+ set: function(value){
this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Raspberry.prototype, "image", {
- get: function () {
+ get: function(){
return this._image;
},
- set: function (path) {
+ set: function(path){
this._image = loadImage(path);
},
enumerable: false,
configurable: true
});
- Raspberry.prototype.update = function () {
+ Raspberry.prototype.update = function(){
this.applyGravity();
this.forceBoundaries();
};
- Raspberry.prototype.applyGravity = function () {
+ Raspberry.prototype.applyGravity = function(){
this.velocity += this.gravity;
this.position.y += this.velocity;
};
- Raspberry.prototype.forceBoundaries = function () {
+ Raspberry.prototype.forceBoundaries = function(){
this.boundaryTop();
this.boundaryBottom();
};
- Raspberry.prototype.boundaryTop = function () {
- if (this.position.y < 0) {
+ Raspberry.prototype.boundaryTop = function(){
+ if(this.position.y < 0){
this.position.y = 0;
this.velocity = 0;
}
};
- Raspberry.prototype.boundaryBottom = function () {
- if (this.position.y + this.height + Raspberry.bottomFloorOffset > height) {
+ Raspberry.prototype.boundaryBottom = function(){
+ if(this.position.y + this.height + Raspberry.bottomFloorOffset > height){
this.position.y = height - this.height - Raspberry.bottomFloorOffset;
this.velocity = 0;
}
};
- Raspberry.prototype.boost = function () {
+ Raspberry.prototype.boost = function(){
this.velocity += this.lift;
};
- Raspberry.prototype.draw = function () {
+ Raspberry.prototype.draw = function(){
push();
noFill();
this.setPose();
this.drawObject();
pop();
};
- Raspberry.prototype.drawObject = function () {
+ Raspberry.prototype.drawObject = function(){
this.drawHitBox();
this.drawRocket();
};
- Raspberry.prototype.drawRocket = function () {
+ Raspberry.prototype.drawRocket = function(){
image(this.image, 0, 0, this.width, this.height);
rect(0, 0, this.width, this.height);
};
- Raspberry.prototype.drawHitBox = function () {
- if (!this.showHitbox) {
+ Raspberry.prototype.drawHitBox = function(){
+ if(!this.showHitbox){
noStroke();
}
};
- Raspberry.prototype.setPose = function () {
+ Raspberry.prototype.setPose = function(){
translate(this.position.x, this.position.y);
rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
};
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 005dd11..c4b8043 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -13,7 +13,7 @@
-
+
@@ -59,7 +59,9 @@ export default defineComponent({
leaderboardEvent: new Event('reloadLeaderboard')
}
},
-
+ created() {
+ localStorage.setItem("frontend-ready", "false");
+ },
methods: {
async fetchFromApi(path: string, method: "GET" | "POST") {
@@ -80,6 +82,11 @@ export default defineComponent({
await this.updateUserScores();
}
window.dispatchEvent(this.leaderboardEvent);
+ },
+ logOut(){
+ this.user = null;
+ this.userId = -1;
+ localStorage.setItem('frontend-ready', 'false');
}
},
});
@@ -99,9 +106,11 @@ export default defineComponent({
.everything {
margin-bottom: 4em;
}
+
.hidden {
visibility: hidden;
}
+
.logout-wrapper {
display: flex;
justify-content: right;
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 9c935b8..183d570 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -16,31 +16,34 @@ export default {
components: {
RRButton
},
- data() {
+ data(){
return {
username: '',
- user: null,
+ _user: null,
}
},
emits: ['userChange'],
methods: {
- async setUser() {
+ async setUser(){
let user;
user = await User.getByName(this.username);
- if (user.errors) {
+ if(user.errors){
user = await User.create(this.username);
}
- if (user.errors) {
+ if(user.errors){
console.error("Something when wrong when logging in, please contact admin!")
- return;
}
- if (user) {
- this.user = user;
- this.$emit('userChange', this.user);
+ if(user){
+ this.user(user);
}
},
+ user(user){
+ this._user = user;
+ localStorage.setItem("frontend-ready", "true");
+ this.$emit('userChange', this._user);
+ }
}
}