sprechtl/RaspberryRocketeer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed game sending player stats when not logged in

Browse source
This commit is contained in:
dhain 2023-01-31 08:31:40 +01:00
parent 3befee6fdd
commit c2bb6c104a
3 changed files with 142 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

234
frontend/public/game.js
View file

@ -1,20 +1,20 @@
var __extends = (this && this.__extends) || (function () { var __extends = (this && this.__extends) || (function(){
var extendStatics = function (d, b) { var extendStatics = function(d, b){
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({__proto__: []} instanceof Array && function (d, b) { ({__proto__: []} instanceof Array && function(d, b){
d.__proto__ = b; d.__proto__ = b;
}) || }) ||
function (d, b) { function(d, b){
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; for(var p in b) if(Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
}; };
return extendStatics(d, b); return extendStatics(d, b);
}; };
return function (d, b) { return function(d, b){
if (typeof b !== "function" && b !== null) if(typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b); extendStatics(d, b);
function __() { function __(){
this.constructor = d; this.constructor = d;
} }
@ -45,21 +45,21 @@ var hasAlreadyScored = false;
var hasDied = true; var hasDied = true;
var ready = true; var ready = true;
function preload() { function preload(){
font = loadFont(FONT_PATH); font = loadFont(FONT_PATH);
backgroundImage = loadImage(BACKGROUND_IMAGE_PATH); backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
pipeImage = loadImage(PIPE_IMAGE_PATH); pipeImage = loadImage(PIPE_IMAGE_PATH);
floorImage = loadImage(FLOOR_IMAGE_PATH); floorImage = loadImage(FLOOR_IMAGE_PATH);
} }
function setup() { function setup(){
createCanvas(1085, 600); createCanvas(1085, 600);
floorHeight = height / 5; floorHeight = height / 5;
setupObstacleConsts(); setupObstacleConsts();
setupFont(); setupFont();
setupGame(); setupGame();
var originalSetItem = localStorage.setItem; var originalSetItem = localStorage.setItem;
localStorage.setItem = function (key, value) { localStorage.setItem = function(key, value){
var event = new Event('itemInserted'); var event = new Event('itemInserted');
event.value = value; // Optional.. event.value = value; // Optional..
@ -69,57 +69,57 @@ function setup() {
}; };
} }
function setupObstacleConsts() { function setupObstacleConsts(){
obstacleOffset = width / OBSTACLE_COUNT; obstacleOffset = width / OBSTACLE_COUNT;
obstacleWidth = width / 22.727272727272727272; obstacleWidth = width / 22.727272727272727272;
Obstacle.distanceBetweenPipes = height / 2.5; Obstacle.distanceBetweenPipes = height / 2.5;
Obstacle.startX = width; Obstacle.startX = width;
} }
function setupFont() { function setupFont(){
textSize(75); textSize(75);
textAlign(CENTER); textAlign(CENTER);
textFont(font); textFont(font);
} }
function setupGame() { function setupGame(){
paused = true; paused = true;
raspberry = new Raspberry(RASPBERRY_IMAGE_PATH); raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
setupObstacles(); setupObstacles();
} }
function setupObstacles() { function setupObstacles(){
obstacles = []; obstacles = [];
instantiateObstacles(OBSTACLE_COUNT); instantiateObstacles(OBSTACLE_COUNT);
obstacles.forEach(function (obstacle) { obstacles.forEach(function(obstacle){
return obstacle.randomizeHeight(); return obstacle.randomizeHeight();
}); });
} }
function instantiateObstacles(number) { function instantiateObstacles(number){
for (var i = 0; i < number; i++) { for(var i = 0; i < number; i++){
obstacles.push(new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage)); obstacles.push(new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage));
} }
} }
function draw() { function draw(){
update(); update();
gameLoop(); gameLoop();
drawGame(); drawGame();
} }
function drawGame() { function drawGame(){
drawScenery(); drawScenery();
drawEntities(); drawEntities();
displayScore(); displayScore();
} }
function drawScenery() { function drawScenery(){
background(backgroundImage); background(backgroundImage);
drawFloor(); drawFloor();
} }
function drawFloor() { function drawFloor(){
push(); push();
noFill(); noFill();
image(floorImage, 0, height - floorHeight, width, floorHeight); image(floorImage, 0, height - floorHeight, width, floorHeight);
@ -127,68 +127,71 @@ function drawFloor() {
pop(); pop();
} }
function drawEntities() { function drawEntities(){
raspberry.draw(); raspberry.draw();
drawObstacles(); drawObstacles();
} }
function drawObstacles() { function drawObstacles(){
obstacles.forEach(function (obstacle) { obstacles.forEach(function(obstacle){
obstacle.draw(); obstacle.draw();
}); });
} }
function gameLoop() { function gameLoop(){
if (!paused) { if(!paused){
collisionCheck(obstacles[0]); collisionCheck(obstacles[0]);
checkRaspberryScore(); checkRaspberryScore();
} }
} }
function collisionCheck(o) { function collisionCheck(o){
if (o.collides(raspberry)) { if(o.collides(raspberry)){
die(); die();
setupGame(); setupGame();
} }
} }
function die() { function die(){
if(localStorage.getItem("frontend-ready") == "false")
return;
ready = false; ready = false;
hasDied = true; hasDied = true;
playTime = Date.now() - startTime; playTime = Date.now() - startTime;
exportToLocalStorage(); exportToLocalStorage();
setTimeout(function () { setTimeout(function(){
return ready = true; return ready = true;
}, 1000); }, 1000);
} }
function exportToLocalStorage() { function exportToLocalStorage(){
localStorage.setItem("game-playTime", String(playTime)); localStorage.setItem("game-playTime", String(playTime));
localStorage.setItem("game-score", String(score)); localStorage.setItem("game-score", String(score));
localStorage.setItem("game-isRunning", String(!hasDied)); localStorage.setItem("game-isRunning", String(!hasDied));
} }
function displayScore() { function displayScore(){
push(); push();
fill(195, 33, 34); fill(195, 33, 34);
text(score, 0, height / 8, width, height); text(score, 0, height / 8, width, height);
pop(); pop();
} }
function update() { function update(){
if (!paused) { if(!paused){
raspberry.update(); raspberry.update();
} }
obstacles.forEach(function (obstacle) { obstacles.forEach(function(obstacle){
if (!paused) { if(!paused){
obstacle.update(); obstacle.update();
checkObstacleReset(obstacle); checkObstacleReset(obstacle);
} }
}); });
} }
function checkObstacleReset(obstacle) { function checkObstacleReset(obstacle){
if (obstacle.position.x < -obstacleWidth) { if(obstacle.position.x < -obstacleWidth){
obstacle.resetPosition(); obstacle.resetPosition();
obstacles.shift(); obstacles.shift();
obstacles.push(obstacle); obstacles.push(obstacle);
@ -196,40 +199,41 @@ function checkObstacleReset(obstacle) {
} }
} }
function checkRaspberryScore() { function checkRaspberryScore(){
if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2) if((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
&& !hasAlreadyScored) { && !hasAlreadyScored){
score += 1; score += 1;
hasAlreadyScored = true; hasAlreadyScored = true;
} }
} }
function resetScore() { function resetScore(){
if (hasDied) { if(!hasDied || localStorage.getItem("frontend-ready") == "false")
hasDied = false; return;
score = 0;
hasAlreadyScored = false; hasDied = false;
startTime = Date.now(); score = 0;
exportToLocalStorage(); hasAlreadyScored = false;
} startTime = Date.now();
exportToLocalStorage();
} }
function keyPressed() { function keyPressed(){
if (!ready) if(!ready)
return; return;
if (BOOST_KEYS.includes(key.toLowerCase())) { if(BOOST_KEYS.includes(key.toLowerCase())){
resetScore(); resetScore();
raspberry.boost(); raspberry.boost();
} }
if (key == "Escape") { if(key == "Escape"){
paused = !paused; paused = !paused;
} else if (paused) { } else if(paused){
paused = false; paused = false;
} }
} }
var Entity = (function () { var Entity = (function(){
function Entity(position, width, height, fill) { function Entity(position, width, height, fill){
this.position = position; this.position = position;
this.width = width; this.width = width;
this.height = height; this.height = height;
@ -238,46 +242,46 @@ var Entity = (function () {
} }
Object.defineProperty(Entity.prototype, "position", { Object.defineProperty(Entity.prototype, "position", {
get: function () { get: function(){
return this._position; return this._position;
}, },
set: function (value) { set: function(value){
this._position = value; this._position = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Entity.prototype, "width", { Object.defineProperty(Entity.prototype, "width", {
get: function () { get: function(){
return this._width; return this._width;
}, },
set: function (value) { set: function(value){
this._width = value; this._width = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Entity.prototype, "height", { Object.defineProperty(Entity.prototype, "height", {
get: function () { get: function(){
return this._height; return this._height;
}, },
set: function (value) { set: function(value){
this._height = value; this._height = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Entity.prototype, "showHitbox", { Object.defineProperty(Entity.prototype, "showHitbox", {
get: function () { get: function(){
return this._showHitbox; return this._showHitbox;
}, },
set: function (value) { set: function(value){
this._showHitbox = value; this._showHitbox = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Entity.prototype.draw = function () { Entity.prototype.draw = function(){
push(); push();
fill(this.fill); fill(this.fill);
rect(this.position.x, this.position.y, this.width, this.height); rect(this.position.x, this.position.y, this.width, this.height);
@ -285,10 +289,10 @@ var Entity = (function () {
}; };
return Entity; return Entity;
}()); }());
var Obstacle = (function (_super) { var Obstacle = (function(_super){
__extends(Obstacle, _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; var _this = _super.call(this, position, obstacleWidth, obstacleHeight, 0) || this;
_this.speed = 3; _this.speed = 3;
_this.padding = height / 6.6666666666666666; _this.padding = height / 6.6666666666666666;
@ -297,62 +301,62 @@ var Obstacle = (function (_super) {
} }
Object.defineProperty(Obstacle, "startX", { Object.defineProperty(Obstacle, "startX", {
set: function (value) { set: function(value){
this._startX = value; this._startX = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Obstacle, "distanceBetweenPipes", { Object.defineProperty(Obstacle, "distanceBetweenPipes", {
set: function (value) { set: function(value){
this._distanceBetweenPipes = value; this._distanceBetweenPipes = value;
}, },
enumerable: false, enumerable: false,
configurable: true 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.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
this.pipeBottom = 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.randomizeHeight();
this.pipeBottom.position.x = Obstacle._startX; this.pipeBottom.position.x = Obstacle._startX;
this.pipeTop.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.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle._distanceBetweenPipes);
this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes; this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes;
this.pipeBottom.height = height - this.pipeTop.height - this.padding; 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; return Math.random() * (max - min) + min;
}; };
Obstacle.prototype.update = function () { Obstacle.prototype.update = function(){
this.pipeTop.move(this.speed); this.pipeTop.move(this.speed);
this.pipeBottom.move(this.speed); this.pipeBottom.move(this.speed);
this.position.x = this.pipeTop.position.x; this.position.x = this.pipeTop.position.x;
}; };
Obstacle.prototype.draw = function () { Obstacle.prototype.draw = function(){
this.pipeTop.draw(); this.pipeTop.draw();
this.pipeBottom.draw(); this.pipeBottom.draw();
}; };
Obstacle.prototype.collides = function (o) { Obstacle.prototype.collides = function(o){
return this.pipeTop.collides(o) || this.pipeBottom.collides(o); return this.pipeTop.collides(o) || this.pipeBottom.collides(o);
}; };
return Obstacle; return Obstacle;
}(Entity)); }(Entity));
var Pipe = (function (_super) { var Pipe = (function(_super){
__extends(Pipe, _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; var _this = _super.call(this, new Position(positionX, 0), width, height, 0) || this;
_this.image = image; _this.image = image;
return _this; return _this;
} }
Pipe.prototype.update = function () { Pipe.prototype.update = function(){
}; };
Pipe.prototype.draw = function () { Pipe.prototype.draw = function(){
push(); push();
noFill(); noFill();
var imageAspectRatio = this.image.height / this.image.width; 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); rect(this.position.x, this.position.y, this.width, this.height);
pop(); pop();
}; };
Pipe.prototype.drawImage = function (computedImageHeight, imageAspectRatio) { Pipe.prototype.drawImage = function(computedImageHeight, imageAspectRatio){
if (this.height > computedImageHeight) { if(this.height > computedImageHeight){
var maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight; var maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight;
for (var imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight) { for(var imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight){
if (imageYPosition + computedImageHeight >= maxImageYPos) { if(imageYPosition + computedImageHeight >= maxImageYPos){
this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio); this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio);
break; break;
} }
image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight); 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); 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 amountOfImages = Math.floor(imageYPosition / computedImageHeight);
var heightToEdge = this.height - (amountOfImages * computedImageHeight); var heightToEdge = this.height - (amountOfImages * computedImageHeight);
var croppedImage = this.image.get(0, 0, this.image.width, this.image.height - (heightToEdge * imageAspectRatio)); 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); 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; this.position.x -= speed;
}; };
Pipe.prototype.collides = function (o) { Pipe.prototype.collides = function(o){
return this.position.x < (o.position.x + o.width) && return this.position.x < (o.position.x + o.width) &&
(this.position.x + this.width) > o.position.x && (this.position.x + this.width) > o.position.x &&
this.position.y < (o.position.y + o.height) && this.position.y < (o.position.y + o.height) &&
@ -392,27 +396,27 @@ var Pipe = (function (_super) {
}; };
return Pipe; return Pipe;
}(Entity)); }(Entity));
var Position = (function () { var Position = (function(){
function Position(x, y) { function Position(x, y){
this._x = x; this._x = x;
this._y = y; this._y = y;
} }
Object.defineProperty(Position.prototype, "x", { Object.defineProperty(Position.prototype, "x", {
get: function () { get: function(){
return this._x; return this._x;
}, },
set: function (value) { set: function(value){
this._x = value; this._x = value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Position.prototype, "y", { Object.defineProperty(Position.prototype, "y", {
get: function () { get: function(){
return this._y; return this._y;
}, },
set: function (value) { set: function(value){
this._y = value; this._y = value;
}, },
enumerable: false, enumerable: false,
@ -420,10 +424,10 @@ var Position = (function () {
}); });
return Position; return Position;
}()); }());
var Raspberry = (function (_super) { var Raspberry = (function(_super){
__extends(Raspberry, _super); __extends(Raspberry, _super);
function Raspberry(image) { function Raspberry(image){
var _this = this; var _this = this;
Raspberry.position = new Position(width / 6, height / 2); Raspberry.position = new Position(width / 6, height / 2);
Raspberry.height = height / 14.2857142857142857; Raspberry.height = height / 14.2857142857142857;
@ -438,73 +442,73 @@ var Raspberry = (function (_super) {
} }
Object.defineProperty(Raspberry.prototype, "velocity", { Object.defineProperty(Raspberry.prototype, "velocity", {
get: function () { get: function(){
return this._velocity; return this._velocity;
}, },
set: function (value) { set: function(value){
this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value; this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Object.defineProperty(Raspberry.prototype, "image", { Object.defineProperty(Raspberry.prototype, "image", {
get: function () { get: function(){
return this._image; return this._image;
}, },
set: function (path) { set: function(path){
this._image = loadImage(path); this._image = loadImage(path);
}, },
enumerable: false, enumerable: false,
configurable: true configurable: true
}); });
Raspberry.prototype.update = function () { Raspberry.prototype.update = function(){
this.applyGravity(); this.applyGravity();
this.forceBoundaries(); this.forceBoundaries();
}; };
Raspberry.prototype.applyGravity = function () { Raspberry.prototype.applyGravity = function(){
this.velocity += this.gravity; this.velocity += this.gravity;
this.position.y += this.velocity; this.position.y += this.velocity;
}; };
Raspberry.prototype.forceBoundaries = function () { Raspberry.prototype.forceBoundaries = function(){
this.boundaryTop(); this.boundaryTop();
this.boundaryBottom(); this.boundaryBottom();
}; };
Raspberry.prototype.boundaryTop = function () { Raspberry.prototype.boundaryTop = function(){
if (this.position.y < 0) { if(this.position.y < 0){
this.position.y = 0; this.position.y = 0;
this.velocity = 0; this.velocity = 0;
} }
}; };
Raspberry.prototype.boundaryBottom = function () { Raspberry.prototype.boundaryBottom = function(){
if (this.position.y + this.height + Raspberry.bottomFloorOffset > height) { if(this.position.y + this.height + Raspberry.bottomFloorOffset > height){
this.position.y = height - this.height - Raspberry.bottomFloorOffset; this.position.y = height - this.height - Raspberry.bottomFloorOffset;
this.velocity = 0; this.velocity = 0;
} }
}; };
Raspberry.prototype.boost = function () { Raspberry.prototype.boost = function(){
this.velocity += this.lift; this.velocity += this.lift;
}; };
Raspberry.prototype.draw = function () { Raspberry.prototype.draw = function(){
push(); push();
noFill(); noFill();
this.setPose(); this.setPose();
this.drawObject(); this.drawObject();
pop(); pop();
}; };
Raspberry.prototype.drawObject = function () { Raspberry.prototype.drawObject = function(){
this.drawHitBox(); this.drawHitBox();
this.drawRocket(); this.drawRocket();
}; };
Raspberry.prototype.drawRocket = function () { Raspberry.prototype.drawRocket = function(){
image(this.image, 0, 0, this.width, this.height); image(this.image, 0, 0, this.width, this.height);
rect(0, 0, this.width, this.height); rect(0, 0, this.width, this.height);
}; };
Raspberry.prototype.drawHitBox = function () { Raspberry.prototype.drawHitBox = function(){
if (!this.showHitbox) { if(!this.showHitbox){
noStroke(); noStroke();
} }
}; };
Raspberry.prototype.setPose = function () { Raspberry.prototype.setPose = function(){
translate(this.position.x, this.position.y); translate(this.position.x, this.position.y);
rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity)); rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
}; };

13
frontend/src/App.vue
View file

@ -13,7 +13,7 @@
<Login v-if="!user" @userChange="(event) => {this.updateUser(event);}"> <Login v-if="!user" @userChange="(event) => {this.updateUser(event);}">
</Login> </Login>
<div v-if="user" class="logout-wrapper offset-10 col-2"> <div v-if="user" class="logout-wrapper offset-10 col-2">
<RRButton @click="this.user = null; this.userId = -1;" text="Logout"></RRButton> <RRButton @click="logOut()" text="Logout"></RRButton>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -59,7 +59,9 @@ export default defineComponent({
leaderboardEvent: new Event('reloadLeaderboard') leaderboardEvent: new Event('reloadLeaderboard')
} }
}, },
created() {
localStorage.setItem("frontend-ready", "false");
},
methods: { methods: {
async fetchFromApi(path: string, method: "GET" | "POST") { async fetchFromApi(path: string, method: "GET" | "POST") {
@ -80,6 +82,11 @@ export default defineComponent({
await this.updateUserScores(); await this.updateUserScores();
} }
window.dispatchEvent(this.leaderboardEvent); window.dispatchEvent(this.leaderboardEvent);
},
logOut(){
this.user = null;
this.userId = -1;
localStorage.setItem('frontend-ready', 'false');
} }
}, },
}); });
@ -99,9 +106,11 @@ export default defineComponent({
.everything { .everything {
margin-bottom: 4em; margin-bottom: 4em;
} }
.hidden { .hidden {
visibility: hidden; visibility: hidden;
} }
.logout-wrapper { .logout-wrapper {
display: flex; display: flex;
justify-content: right; justify-content: right;

21
frontend/src/components/Login.vue
View file

@ -16,31 +16,34 @@ export default {
components: { components: {
RRButton RRButton
}, },
data() { data(){
return { return {
username: '', username: '',
user: null, _user: null,
} }
}, },
emits: ['userChange'], emits: ['userChange'],
methods: { methods: {
async setUser() { async setUser(){
let user; let user;
user = await User.getByName(this.username); user = await User.getByName(this.username);
if (user.errors) { if(user.errors){
user = await User.create(this.username); user = await User.create(this.username);
} }
if (user.errors) { if(user.errors){
console.error("Something when wrong when logging in, please contact admin!") console.error("Something when wrong when logging in, please contact admin!")
return;
} }
if (user) { if(user){
this.user = user; this.user(user);
this.$emit('userChange', this.user);
} }
}, },
user(user){
this._user = user;
localStorage.setItem("frontend-ready", "true");
this.$emit('userChange', this._user);
}
} }
} }
</script> </script>