Version 1.0

src/server/controllers/BoardController.js

@@ -0,0 +1,24 @@
+const GameModel = require("../models/GameModel");
+const UserModel = require("../models/UserModel")
+const BoardModel = require("../models/BoardModel")
+
+const BoardController = require("./BoardController");
+
+exports.game_list = (req, res) => {
+    GameModel.find((err, games) => {
+        res.send(JSON.stringify(games));
+      });
+};
+
+exports.board_read = (req, res) => {
+    BoardModel.findOne({name: boardName, ownerId: username})
+  res.send(`NOT IMPLEMENTED: User detail: ${req.params.id}`);
+};
+
+exports.game_create = (req, res) => {
+    let newGame = new GameModel();
+    newGame.host = UserModel.findOne({username: req.params.username});
+    newGame.boardId = BoardModel.findOne({name: req.params.board}, "");
+    newGame.save();
+    res.send("{success:true}");
+};

src/server/controllers/BoardControllerMongoose.js

@@ -0,0 +1,99 @@
+
+const BoardModel = require("../models/BoardModel");
+const ImageModel = require("../models/ImageModel");
+
+exports.listBoards = (req, res) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.find({})
+      .then((boards) => {
+        resolve(boards);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.findBoard = ( boardId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: boardId })
+      .then( ( board ) => {
+        if( board === null ){
+          let userNotFoundError = new Error(`No board found with id "${boardId}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          resolve( board );
+        }
+      })
+      .catch( ( err ) => {
+        reject ( err );
+      });
+  });
+};
+
+exports.isBoardFromUser = ( boardId, userId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: boardId, ownerId: userId })
+      .then( ( board ) => {
+        resolve( board !== null );
+      })
+      .catch( ( err ) => {
+        reject ( err );
+      });
+  });
+};
+
+exports.addBoard = ( postObject, ownerId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: postObject.boardId })
+      .then( ( board ) => {
+        if ( board === null ) {
+          //TODO validate postObject at some point!
+          let newBoard = new BoardModel({
+            ownerId: ownerId,
+            name: postObject.boardName,
+            categories: postObject.categories,
+          });
+          return newBoard.save();
+        } else {
+          board.setFromPostObject = postObject;
+          return board.save();
+        }
+      })
+      .then( ( board ) => {
+        resolve( board );
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.addUploadedImages = ( imagesArray, ownerId ) => {
+  return new Promise((resolve, reject) => {
+    let imageArray = [];
+    for( let iIdx in imagesArray ){
+      let imageIndex = Number(iIdx);
+      let indices = imagesArray[imageIndex].originalname.split(":");
+      let image = new ImageModel({
+        ownerId: ownerId,
+        categoryIndex: indices[0],
+        boardEntryIndex: indices[1],
+        questionIndex: indices[2],
+        filename: imagesArray[imageIndex].filename,
+      });
+      imageArray.push( image );
+    }
+    ImageModel.bulkSave( imageArray )
+    .then( ( images ) => {
+      if( images ){
+        resolve( images );
+      }
+      reject( new Error("Error while persisting image References") );
+    } )
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+};

src/server/controllers/GameControllerMongoose.js

@@ -0,0 +1,383 @@
+const mongoose = require("mongoose");
+
+const util = require("../util");
+const GameModel = require("../models/GameModel");
+const PlayerModel = require("../models/PlayerModel");
+const UserModel = require("../models/UserModel");
+
+exports.listGames = () => {
+  return new Promise((resolve, reject) => {
+    GameModel.find({})
+      .then((games) => {
+        resolve(games);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its code and resolves with it
+ * @param {String} code 
+ * @returns A promise
+ */
+exports.findGameWithCode = (code) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ code: code })
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${code}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its code and resolves with it
+ * @param {String} code 
+ * @returns A promise
+ */
+exports.findGameByHostId = ( hostId ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ host: hostId })
+      .then((game) => {
+        resolve(game);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameById = (id) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("players")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameByIdAndPopulateBoard = (id) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and sets its state and then resolves with it with board populated
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameByIdAndSetStateAndPopulateBoard = ( id, state ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate( id, { $set: { state: state } } ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with its board
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findBoardForGameId = ( id, state ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game.board);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @param {Number} categoryIndex Index of Category of Board Entry to be marked as answered
+ * @param {Number} boardEntryIndex Index of BoardEntry in category to be marked as answered
+ * @returns A promise
+ */
+exports.findGameAndAddAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) => {
+  return new Promise((resolve, reject) => {
+    let dbEntry = {
+      categoryIndex: categoryIndex,
+      boardEntryIndex: boardEntryIndex,
+    }
+    GameModel.findByIdAndUpdate(id, { $addToSet: { "answeredBoardEntries": dbEntry } }, { new: true } ).populate("board")
+    .then( ( game ) => {
+      if( game === null ){
+        let gameNotFoundError = new Error(`No game found with id "${id}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve(game);
+      }
+    })
+    .catch( ( err ) => {
+      reject(err);
+    });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @param {Number} categoryIndex Index of Category of Board Entry to be marked as NOT answered
+ * @param {Number} boardEntryIndex Index of BoardEntry in category to be marked as NOT answered
+ * @returns A promise
+ */
+exports.findGameAndRemoveAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate(id, { $pull: { answeredBoardEntries: { categoryIndex: categoryIndex, boardEntryIndex: boardEntryIndex } } }, { new: true } ).populate("board")
+    .then( ( game ) => {
+      if( game === null ){
+        let gameNotFoundError = new Error(`No game found with id "${id}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve(game);
+      }
+    })
+    .catch( ( err ) => {
+      reject(err);
+    });
+  });
+};
+
+exports.findAcceptingGameAndSetNotAccepting = ( id ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOneAndUpdate({ _id : id, acceptAnswers: true }, { acceptAnswers: false }, { new: true })
+      .then((game) => {
+        if( game === null){
+          resolve( false );
+        } else {
+          resolve( true );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.findGameAndSetAccepting = ( id, isAccepting ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate( id, { acceptAnswers: isAccepting }, { new: true }).populate("players")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve( game );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.findGameAcceptingAnswers = ( id ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ _id : id, acceptAnswers: true } )
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}" and acceptAnswers "true"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve( game );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.setPlayerPointsAndReturnGame = ( gameId, playerId, pointsAdjusted ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndUpdate(
+      mongoose.Types.ObjectId( playerId ),
+      { 
+        $set: {
+          points: pointsAdjusted,
+        }
+      },
+      { new: true }
+    )
+    .then( ( player ) => {
+      if( player === null ){
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        throw playerNotFoundError;
+      }
+      return this.findGameById( gameId );
+    })
+    .then( ( game ) => {
+      if( game === null){
+        let gameNotFoundError = new Error(`No game found with id "${gameId}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve( game );
+      }
+    })
+    .catch((err) => {
+      reject(err);
+    });
+  });
+};
+
+/**
+ * Creates a new Game and adds the user with username of "hostName" as the host
+ * @param {String} hostName 
+ * @returns A promise which resolves when a new game has been created. Rejects if an error occurs or host is not found.
+ */
+exports.addGame = (hostId) => {
+  return new Promise((resolve, reject) => {
+    UserModel.findById( hostId, '-password' )
+    .then( (host) => {
+      if( host === null ){
+        return null;
+      }
+      let newGame = new GameModel({
+        code: util.makeid(8),
+        host: host,
+        state: "CREATED",
+      });
+      return newGame.save();
+    })
+    .then( ( game ) => {
+      if( game === null ){
+        reject( "No User found" );
+      } else {
+        resolve( game );
+      }
+    })
+    .catch( (err) => {
+      reject( err );
+    });
+  });
+};
+
+/**
+ * Deletes a Game
+ * @param {String} hostName 
+ * @returns A promise which resolves when a new game has been created. Rejects if an error occurs or host is not found.
+ */
+exports.deleteGame = ( gameId ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndRemove( gameId )
+    .then( ( game ) => {
+      if( game === null ){
+        throw new Error( "No Game found for deletion" );
+      } else {
+        return PlayerModel.deleteMany( { _id: { $in: game.players } } )
+      }
+    })
+    .then( ( _deletedCount ) => {
+      resolve();
+    })
+    .catch( (err) => {
+      reject( err );
+    });
+  });
+};
+
+exports.addPlayerToGame = ( gameCode, player ) => {
+  return new Promise( (resolve, reject) => {
+    GameModel.findOne(
+      { code: gameCode },
+    )
+    .then( game => {
+      if( game === null ){
+        throw new Error( "Game not found" );
+      } else {
+        game.players.push( player._id );
+        return game.save();
+      }
+    })
+    .then( ( gameSaved ) => {
+      return gameSaved.populate( "players" );
+    })
+    .then( ( gamePopulated ) => {
+      resolve( gamePopulated );
+    })
+    .catch( err => {
+      reject( err );
+    });
+  })
+}
+
+exports.removePlayerFromGame = ( gameId, playerId ) => {
+  return new Promise( (resolve, reject) => {
+    GameModel.findByIdAndUpdate( gameId, { $pull: { players: { playerId } } } )
+    .then( _game => {
+      resolve();  
+    })
+    .catch( err => {
+      reject( err );
+    });
+  })
+}

src/server/controllers/GameControllerNonPersistent.js

@@ -0,0 +1,58 @@
+let games = [{
+  id: "123456",
+  hostId: 1,
+  players: [],
+}];
+
+exports.listGames = (req, res) => {
+  return games;
+};
+
+exports.findGameWithid = ( id ) => {
+  return new Promise( (resolve, reject) =>{
+    let game = games.find( x => x.id === id );
+    if( game !== undefined ){
+        resolve( game );
+    }else{
+        reject( "Not Found " );
+    }
+  });
+};
+
+exports.addGame = ( hostId ) => {
+  return new Promise( ( resolve, reject ) => {
+    let id = getIdForNewGame();
+    if( id === false ){
+      reject( "Too many games are being currently played. Try again later" );
+    }
+    let newGame = {
+      id: id,
+      host: hostId,
+      board: null,
+      players: [],
+    };
+    games.push( newGame );
+    resolve(newGame);
+});
+
+function getIdForNewGame(){
+  let newid;
+  if( games.length <= 10000 ){
+    newid = Math.floor(Math.random() * 1000000);
+    while( games.findIndex( game => game.id !== newid ) ){
+      newid = Math.floor(Math.random() * 1000000);
+    }
+  } else {
+    if( games.length >= 899999 ){
+      return false;
+    } else {
+      games.sort( (a, b) => a.id - b.id );
+      newid = games[games.length-1].id + 1;
+      if( newid >= 1000000 ){
+        newid = 100000
+      }
+    }
+  }
+  return newid;
+}
+};

src/server/controllers/PlayerControllerMongoose.js

@@ -0,0 +1,110 @@
+const GameModel = require("../models/GameModel");
+const PlayerModel = require("../models/PlayerModel");
+
+/**
+ * Creates a new Player and resolves with it
+ * @param {String} hostName
+ * @returns A promise which resolves when a new player has been created. Rejects if an error occurs
+ */
+exports.addPlayer = (playerName) => {
+  return new Promise((resolve, reject) => {
+    let newPlayer = new PlayerModel({
+      name: playerName,
+      points: 0,
+    });
+
+    newPlayer.save()
+    .then( ( user ) => {
+        resolve( user );
+    })
+    .catch( ( err ) => {
+        reject( err );
+    });
+  });
+}
+
+/**
+ * Deletes a player
+ * @param {String} hostName
+ * @returns A promise which resolves when the player has been deleted
+ */
+exports.deletePlayer = ( playerId ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndRemove( playerId )
+    .then( ( deletedUser ) => {
+        resolve( deletedUser );
+    })
+    .catch( ( err ) => {
+        reject( err );
+    });
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.setAllPlayersAcceptAnswers = ( playerIds, acceptAnswersValue ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.updateMany( { _id: { $in : playerIds } }, { acceptAnswers: acceptAnswersValue } )
+    .then( ( players ) => {
+      if( players ){
+        resolve();
+      } else {
+        let playerNotFoundError = new Error(`No players found with any id of "${playerIds}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.checkPlayerAcceptAnswers = ( playerId ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findById( playerId )
+    .then( ( player ) => {
+      if( player ){
+        resolve( player.acceptAnswers );
+      } else {
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question and sets it to the specified value
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.checkPlayerAcceptAnswersAndSetAccepting = ( playerId, canAcceptAfter ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndUpdate( playerId, { acceptAnswers: canAcceptAfter }, { new: false } )
+    .then( ( player ) => {
+      if( player ){
+        resolve( player.acceptAnswers );
+      } else {
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}

src/server/controllers/UserControllerMongoose.js

@@ -0,0 +1,143 @@
+const bcrypt = require("bcryptjs");
+
+const UserModel = require("../models/UserModel");
+const BoardModel = require("../models/BoardModel");
+
+exports.listUsers = (req, res) => {
+  return new Promise((resolve, reject) => {
+    UserModel.find({}, "-password")
+      .then((users) => {
+        resolve(users);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.findUser = (username) => {
+  return new Promise((resolve, reject) => {
+    UserModel.findOne({ _id: username }, "-password")
+      .then((user) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found with username "${username}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          resolve(user);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.addUser = (username, password) => {
+  return new Promise((resolve, reject) => {
+    //Check if username is already taken before hashing the password
+    UserModel.findOne({ username: username }, "-password")
+      .then((user) => {
+        if ( user === null ) {
+          return bcrypt.hash(password, 12);
+        } else {
+          let userTakenError = new Error( "Username is taken!" );
+          userTakenError.name = "UserTakenError";
+          throw userTakenError;
+        }
+      })
+      .then((hash) => {
+        let newUser = new UserModel({
+          username: username,
+          password: hash,
+        });
+        return newUser.save();
+      })
+      .then((user) => {
+        user.password = undefined;
+        resolve(user);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.loginUser = (username, password) => {
+  return new Promise((resolve, reject) => {
+    let retUser;
+    UserModel.findOne({ username: username })
+      .then((user) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found with username "${username}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          retUser = user;
+          return bcrypt.compare(password, user.password);
+        }
+      })
+      .then((res) => {
+        if (res) {
+          retUser.password = undefined;
+          resolve( retUser );
+        } else {
+          let wrongCredentialsError = new Error("Password did not match");
+          wrongCredentialsError.name = "WrongCredentialsError";
+          throw wrongCredentialsError;
+        }
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.getUserBoards = ( userId ) => {
+  return new Promise( ( resolve, reject ) => {
+    UserModel.findById( userId, "username boards").populate("boards")
+      .then( ( user ) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found in session"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        }
+        resolve( user.boards );
+      })
+      .catch( ( err ) => {
+        reject( err );
+      })
+  });
+};
+
+exports.addBoardToUser = ( board ) => {
+  let boardId;
+  return new Promise( ( resolve, reject ) => {
+    UserModel.findById( board.ownerId)
+      .then( ( user ) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found in session"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        }
+        if( !user.boards.includes( board._id ) ){
+          user.boards.push( board._id );
+        }
+        boardId = board._id;
+        return user.save();
+      })
+      .then( ( _user ) => {
+        return BoardModel.findById( boardId );
+      })
+      .then( ( board ) => {
+        if( board === null ){
+          reject();
+        } else {
+          resolve( board );
+        }
+      })
+      .catch( ( err ) => {
+        reject( err );
+      })
+  });
+};

src/server/controllers/UserControllerNonPersistent.js

@@ -0,0 +1,62 @@
+
+const bcrypt = require("bcryptjs");
+
+let users = [];
+
+exports.listUsers = (req, res) => {
+    return users;
+};
+
+exports.findUser = (username) => {
+    return new Promise( (resolve, reject) =>{
+        let user = users.find( x => x.username === username );
+        if( user !== undefined ){
+            resolve( user );
+        }else{
+            reject( "Not Found " );
+        }
+    });
+};
+
+exports.addUser = (username, password) => {
+    return new Promise( (resolve, reject) => {
+        if( users.some( x => x.username === username ) ){
+            reject({
+                userTaken: true,
+                message: "Username Already Taken",
+            });
+        } else {
+            bcrypt.hash(password, 13).then( hash => {
+                let newUser = {
+                    username: username,
+                    password: hash,
+                }
+                users.push(newUser);
+                resolve(newUser);
+            })
+            .catch( err => {
+                reject(err);
+            })
+        }
+    });
+};
+
+exports.loginUser = (username, password) => {
+    return new Promise( (resolve, reject) => {
+        let retUser;
+        this.findUser(username).then( user => {
+            retUser = user;
+            return bcrypt.compare(password, user.password)
+        })
+        .then( res => {
+            if(res){
+                resolve(retUser);
+            }else{
+                reject( "Wrong Credentials" );
+            }
+        })
+        .catch( err =>{
+            reject( "Wrong Credentials" );
+        })
+    });
+};

src/server/models/AnswerModel.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const AnswerSchema = new Schema({
+    value: { type: String, required: true, maxLength: 255 },
+});
+
+// Virtual for player's URL
+AnswerSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/answer/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Answer", AnswerSchema);

src/server/models/BoardEntryModel.js

@@ -0,0 +1,21 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const BoardEntrySchema = new Schema({
+    name: { type: String, required: true, maxLength: 100 },
+    orderValue: { type: Number },
+    boardId: { type: Schema.Types.ObjectId, ref: "Board", required: true },
+    entryType: { type: String, required: true, enum: ["SimpleQuestion", "PictureQuestion", "MultipleChoice"] },
+    questionId: { type: Schema.Types.ObjectId, ref: "Question", required: true },
+    answerId: { type: Schema.Types.ObjectId, ref: "Answer", required: true },
+});
+
+// Virtual for player's URL
+BoardEntrySchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/board/entry/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("BoardEntry", BoardEntrySchema);

src/server/models/BoardModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const BoardSchema = new Schema({
+  ownerId: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  name: { type: String, required: true, maxLength: 100 },
+  categories: { type: [Object], required: false, default: [] },
+});
+
+// Virtual for player's URL
+BoardSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/board/${this._id}`;
+});
+
+BoardSchema.virtual("setFromPostObject").set( function( postObject ){
+  this.name = postObject.boardName;
+  this.categories = postObject.categories;
+})
+
+// Export model
+module.exports = mongoose.model("Board", BoardSchema);

src/server/models/GameModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const GameSchema = new Schema({
+  code: { type: String, required: true },
+  host: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  board: { type: Schema.Types.ObjectId, ref: "Board", required: false },
+  players: { type: [Schema.Types.ObjectId], ref: "Player", required: true },
+  acceptAnswers: { type: Boolean, required: true, default: false },
+  answeredBoardEntries: { type: [Object], default: [] },
+  state: { type: String, required: true, default: "CREATED" },
+  createdTimestamp: { type: Date, required: true, default: new Date() },
+});
+
+// Virtual for player's URL
+GameSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/game/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Game", GameSchema);

src/server/models/ImageModel.js

@@ -0,0 +1,14 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const ImageSchema = new Schema({
+  ownerId: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  categoryIndex: { type: Number, required: true },
+  boardEntryIndex: { type: Number, required: true },
+  questionIndex: { type: Number, required: true },
+  filename: { type: String, required: true, },
+});
+
+// Export model
+module.exports = mongoose.model("Image", ImageSchema);

src/server/models/PlayerModel.js

@@ -0,0 +1,12 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const PlayerSchema = new Schema({
+  name: { type: String, required: true, maxLength: 100 },
+  points: { type: Number },
+  acceptAnswers: { type: Boolean, default: false }
+});
+
+// Export model
+module.exports = mongoose.model("Player", PlayerSchema);

src/server/models/QuestionModel.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const QuestionSchema = new Schema({
+    value: { type: String, required: true, maxLength: 255 },
+});
+
+// Virtual for player's URL
+QuestionSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/question/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Question", QuestionSchema);

src/server/models/UserModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const UserSchema = new Schema({
+  username: { 
+    type: String,
+    required: true,
+    maxLength: 100,
+    unique: true,
+   },
+  password: { type: String, required: true, },
+  boards: [{ type: Schema.Types.ObjectId, ref: "Board" }],
+});
+
+// Virtual for player's URL
+UserSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/user/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("User", UserSchema);

src/server/routes/GameRouter.js

@@ -0,0 +1,105 @@
+const express = require("express");
+const router = express.Router();
+
+const gameController = require("../controllers/GameControllerMongoose");
+
+router.get("/list", (req, res) => {
+  res.send(gameController.listGames());
+});
+
+// Add Game route.
+router.post("/host", (req, res) => {
+  if (req.session.user !== undefined) {
+    gameController.findGameByHostId( req.session.user )
+    .then( ( game ) => {
+      if( game ){
+        return game;
+      } else {
+        return gameController.addGame(req.session.user)
+      }
+    })
+    // gameController
+      // .addGame(req.session.user)
+      .then( ( game ) => {
+        return setSessionGame( req, game );
+      })
+      .then((game) => {
+        res.send({ success: true, code: game.code });
+      })
+      .catch((err) => {
+        res.send({ success: false, error: err });
+      });
+  } else {
+    res.send({ success: false, error: "To host a game you need to be logged in!" });
+  }
+});
+
+router.get("/join/setup/:code", (req, res) => {
+  console.log("Getting game with code: ", req.params.code);
+  gameController.findGameWithCode(req.params.code)
+    .then( ( game ) => {
+      return setSessionGame( req, game );
+    })
+		.then( ( game ) => {
+			res.send({ success: true, });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/check/:gameId", (req, res) => {
+  console.log("Getting game with id: ", req.params.gameId);
+  let isHost = false;
+  gameController.findGameById( req.params.gameId )
+    .then( ( game ) => {
+      if( req.session.user !== undefined && game.host === req.session.user ){
+        isHost = true;
+      }
+      return setSessionGame( req, game );
+    })
+		.then( ( game ) => {
+			res.send({ success: true, gameCode: game.code, isHost: isHost, gameState: game.state });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/:gameId/board", (req, res) => {
+  console.log("Getting board for game with id: ", req.params.gameId);
+  gameController.findBoardForGameId( req.params.gameId )
+    .then( ( board ) => {
+			res.send({ success: true, board: board, });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/file/:filename", (req, res) => {
+  console.log("Getting file: ", req.params.filename);
+  let options = {
+    root: 'public/uploads',
+    dotfiles: 'deny',
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    }
+  }
+  res.sendFile( req.params.filename, options );
+});
+
+module.exports = router;
+
+function setSessionGame( req, game) {
+  return new Promise((resolve, reject) => {
+    req.session.game = game._id.toString();
+    req.session.save((errSave) => {
+      if (errSave) {
+        reject();
+      } else {
+        resolve( game );
+      }
+    });
+  });
+}

src/server/routes/UserRouter.js

@@ -0,0 +1,284 @@
+const express = require("express");
+const router = express.Router();
+
+const userController = require("../controllers/UserControllerMongoose");
+const boardController = require("../controllers/BoardControllerMongoose");
+const multer = require('multer');
+const fs = require("node:fs/promises");
+
+// Initialize Multer File Uplaod
+const storage = multer.diskStorage({
+    destination: (req, file, cb) => {
+        cb( null, 'public/uploads' )
+    },
+    filename: (req, file, cb) => {
+        let fileExtension = '.jpg';
+        if( file.mimetype === 'image/png' ){
+            fileExtension = '.png';
+        }
+        if( file.mimetype === 'image/gif' ){
+            fileExtension = '.gif';
+        }
+        if( file.mimetype === 'audio/mpeg' ){
+            fileExtension = '.mp3';
+        }
+
+        let board = JSON.parse( req.body.board );
+        let indices = file.originalname.split(":");
+        let filename = board.boardId + '_' +
+            indices[0] + '_' +
+            indices[1] + '_' +
+            indices[2] +
+            fileExtension;
+
+        fs.access( "public/uploads/" + filename, fs.constants.F_OK )
+        .then( ( ) =>{
+            return fs.rm( "public/uploads/" + filename );
+        })
+        .then( () => {
+
+        })
+        .catch( ( _err ) => {
+            //No need to delete, but need to catch it so it won't bubble
+        })
+        .finally( () => {
+            cb( null, filename );
+        });
+
+    }
+});
+
+const fileFilterFn = function( req, file, cb ){
+
+    if( req.session.user === undefined ){
+        cb( new Error( "Only logged in Users can upload pictures" ) );
+        return;
+    }
+
+    if( !["image/jpeg","image/jpg","image/png","image/gif","audio/mpeg"].includes( file.mimetype ) ){
+        cb( new Error( "MIME Type not supported!" ) );
+        return;
+    }
+    
+    if( file.size > 1024 * 1024 * 5){
+        cb( new Error( "File is too large! Must be less than 5MB" ) );
+        return;
+    }
+
+    let board = JSON.parse( req.body.board );
+
+    boardController.isBoardFromUser( board.boardId, req.session.user )
+    .then( ( isFromUser ) => {
+        if( !isFromUser && board.boardId !== undefined ){
+            cb( new Error( "The associated board is not the users" ) );
+        } else {
+            if( req.session.user === undefined ){
+                cb( new Error( "Only logged in Users can upload pictures" ) );
+                return;
+            }
+        
+            let indices = file.originalname.split(":");
+            if( indices.length !== 3 ){
+                cb( new Error( "Image index not found" ) );
+                return;
+            }
+            if(
+
+                board.categories[indices[0]] === undefined ||
+                board.categories[indices[0]].boardEntries[indices[1]] === undefined ||
+                ( 
+                    board.categories[indices[0]].boardEntries[indices[1]].questions[indices[2]] === undefined &&
+                    indices[2] !== 'answer'
+                )
+            ){
+                cb( new Error( "No entry found for image" ) );
+                return;
+            }
+
+            cb( null, true );
+        }
+    });
+
+}
+
+const upload = multer({ storage: storage, fileFilter: fileFilterFn });
+
+router.get("/", (req, res)=>{
+    if( req.session.user !== undefined ){
+        userController.findUser( req.session.user )
+        .then( user => {
+            res.send({success: true, user: { username: user.username } } );
+        })
+        .catch( err => {
+            console.debug(err);
+            res.send( { success: false, error: "No User found" } );
+        });
+    }else{
+        res.send( { success: false, error: "No User found" } );
+    }
+});
+
+router.get("/list", (req, res)=>{
+    res.send(userController.listUsers());
+});
+
+// Add User route.
+router.post("/signup", (req, res)=>{
+    userController.addUser(req.body.username, req.body.password)
+    .then( (user) => {
+        return setSessionUser( req, user );
+    })
+    .then( ( user ) => {
+        res.send({success: true, user: { username: user.username } } );
+    })
+    .catch( (err) => {
+        if( err.userTaken ){
+            res.send( { success: false, error: err.message } );
+        } else {
+            res.status(500).send({success:false, error: "Error while persisting data"})
+        }
+    })
+});
+
+router.post("/login", (req, res)=>{
+    if( req.session.user !== undefined ){
+        userController.findUser( req.session.user )
+        .then( ( res ) => {
+            res.send({success: true, user: { username: req.session.user } } );
+        })
+        .catch( ( err ) => {
+            res.send({success:false, error: "Error with logging you in" });
+        })
+    }else{
+        userController.loginUser(req.body.username, req.body.password)
+        .then( (user) => {
+            return setSessionUser( req, user );
+        })
+        .then( ( user ) => {
+            res.send({success: true, user: { username: user.username } } );
+        })
+        .catch( (err) => {
+            if( err.name === "WrongCredentialsError" ){
+                res.send({ success: false, error: "Wrong or unknown credentials" });
+            }else{
+                res.status(500).send({success:false, error: "Error while persisting data" });
+            }
+        })
+    }
+});
+
+router.post("/logout", (req, res)=>{
+    if( req.session.user === undefined ){
+        //Is not logged in
+        res.send({success: false, error: "Not logged in!" });
+    }else{
+        req.session.destroy( ( errDes )=>{
+            if( errDes ){
+                res.status( 500 ).send({success:false, error: "Error while logging out of session"});
+            } else {
+                res.send({success: true, message: "Successfully logged out"});
+            }
+        });
+    }
+});
+
+router.get("/boards", (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        userController.getUserBoards( req.session.user )
+        .then( ( boards ) => {
+            res.send( { success: true, boards: boards } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err, message: err.message } );
+        });
+    }
+});
+
+router.post("/boards/save", upload.fields( [ { name: "images" }, { name: "audio" } ] ), (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        let board = JSON.parse( req.body.board );
+        let imageFiles = [];
+        let audioFiles = [];
+        if( req.files["images"] ){
+            imageFiles = req.files["images"];
+        }
+        if( req.files["audio"] ){
+            audioFiles = req.files["audio"];
+        }
+        let filesCombined = imageFiles.concat( audioFiles );
+        for( let file of filesCombined ){
+            let indices = file.originalname.split(":");
+            let cIndex = Number(indices[0]);
+            let bEIndex = Number(indices[1]);
+            let qIndex = Number(indices[2]);
+            if( indices[2] === "answer" ){
+                board.categories[cIndex].boardEntries[bEIndex].answer.filename = file.filename;
+            } else {
+                board.categories[cIndex].boardEntries[bEIndex].questions[qIndex].filename = file.filename
+            }
+        }
+        return boardController.addBoard( board, req.session.user )
+        .then( ( board ) => {
+            return userController.addBoardToUser( board );
+        })
+        .then( ( board ) => {
+            res.send( { success: true, board: board } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err } );
+        });
+    }
+});
+
+router.get("/boards/:id", (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        userController.findUser( req.session.user )
+        .then( ( user ) => {
+            let boardId;
+            for( let userBoard of user.boards ){
+                if( userBoard.toString() === req.params.id ){
+                    boardId = userBoard;
+                    break;
+                }
+            }
+            if( boardId !== undefined ){
+                return boardController.findBoard( boardId )
+            } else {
+                throw new Error("No board found with id " + req.params.id + " for user " + req.session.user );
+            }
+        })
+        .then( ( board ) => {
+            res.send( { success: true, board: board } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err } );
+        });
+    }
+});
+
+module.exports = router;
+
+function setSessionUser( req, user ){
+    return new Promise( ( resolve, reject ) => {
+        req.session.regenerate( ( errReg )=>{
+            if( errReg ){
+                reject();
+            }else{
+                req.session.user = user._id.toString();
+                req.session.save( ( errSave )=>{
+                    if( errSave ){
+                        reject();
+                    }else{
+                        resolve( user );
+                    }
+                } );
+            }
+        });
+    })
+}

src/server/server.js

@@ -0,0 +1,178 @@
+const express = require('express');
+const path = require('path');
+const WebSocketServer = require("ws").Server;
+const logger = require('morgan');
+const bodyParser = require('body-parser');
+const history = require('connect-history-api-fallback');
+const session = require("express-session");
+const cors = require("cors");
+const mongoose = require("mongoose");
+const MongoDBStore = require("connect-mongodb-session")(session);
+const helmet = require("helmet");
+
+require("dotenv").config();
+
+//Create Express app
+const app = express();
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({'extended':'false'}));
+app.use(cors({
+  origin: ["jeobeardy.com", "www.jeobeardy.com"],
+  credentials: true,
+}));
+
+app.use(helmet(
+  {
+    contentSecurityPolicy: {
+      // useDefaults: false,
+      directives: {
+        "default-src": ["'self'"],
+        "object-src": ["'none'"],
+        "script-src": ["'unsafe-inline'", "'unsafe-eval'", "'self'" ],
+        "base-uri": ["'none'"],
+        "frame-src": ["'none'"],
+        "media-src": ["'self'", "data:"],
+        "style-src-elem": ["'self'", "'unsafe-inline'"],
+        "connect-src": ["'self'", "ws:"],
+	"img-src": ["'self'", "blob:", "data:"],
+      }
+    }
+  }
+));
+
+
+const mongoDB = process.env.API_MONGO_CONN_URI;
+const storeSecret = process.env.API_SESSION_STORE_SECRET;
+const sessionSecureFlag = process.env.API_SESSION_COOKIE_SECURE === 'true';
+
+// Initialize sesssion storage.
+const store = new MongoDBStore({
+  uri: mongoDB,
+  collection: 'sessions',
+});
+
+store.on('error', function(error) {
+  console.log("Store Error: ", error);
+});
+
+//Setup Mongoose
+mongoose.set('strictQuery', false);
+
+main().then(()=> console.log("Connected to MongoDB")).catch(err => console.log(err));
+async function main() {
+  await mongoose.connect(mongoDB);
+}
+
+const sessionParser = session({
+  store: store,
+  secret: storeSecret,
+  cookie: {
+    secure: sessionSecureFlag,
+    httpOnly: true,
+    sameSite: true,
+  },
+  resave: false,
+  saveUninitialized: false
+})
+app.use(sessionParser);
+app.set("trust proxy", 1);
+
+
+//Setup WebSocketServer
+const webSocketHandler = require("./websocket/handler.js");
+let wsServerList = [];
+
+let wsServerOnConnectionCallback = ( socket, wsServer, sessionObjects  ) => {
+
+  console.log(sessionObjects.sessionUserId);
+  if( sessionObjects ) {
+    socket.locals = {};
+    socket.locals.user = sessionObjects.sessionUserId;
+    socket.locals.game = sessionObjects.sessionGameId;
+  }
+
+  socket.on("error", ( data ) => {
+    console.log("Got Error: ", data );
+  });
+  socket.on("message", ( data ) => {
+    let gameSocketList = wsServerList.find( wsServerEntry => wsServerEntry.game === socket.locals.game );
+    webSocketHandler.handleMessage( gameSocketList, socket, data )
+    .catch( ( err ) => {
+      console.error( err );
+    });
+  });
+  socket.on("open", ( ) => {
+    console.log("WS opened!");
+  });
+  socket.on("close", ( ) => {
+    let gameSocketList = wsServerList.find( wsServerEntry => wsServerEntry.game === socket.locals.game );
+    webSocketHandler.handleConnectionClose( gameSocketList, socket);
+    console.log("WS closed!");
+  });
+  console.log("WS Connected!");
+}
+
+function onSocketError( error ){
+  console.log( error );
+}
+
+
+//Import Routes
+const userRoutes = require("./routes/UserRouter");
+const gameRoutes = require("./routes/GameRouter");
+
+//API Endpoints
+app.use('/api/user', userRoutes);
+app.use('/api/game', gameRoutes);
+
+
+//Enable History for Vue Routes
+app.use(history());
+app.use(logger('dev'));
+app.use(express.static(path.join(__dirname, '/../../dist')));
+
+//Listen to port
+const port = 3000;
+const server = app.listen(port, () => {
+  console.log(`Listening on port ${port}!`);
+});
+
+server.on("upgrade", ( req, socket, head ) => {
+  sessionParser( req, {}, () => {
+    if( req.session.game === undefined ){
+      return;
+    }
+
+    let isNew = false;
+    let sessionObjects = {
+      sessionUserId: req.session.user,
+      sessionGameId: req.session.game,
+    }
+    
+    let wsServerEntryFound = wsServerList.find( wsServerEntry => wsServerEntry.game === req.session.game );
+    let wsServer;
+    if( wsServerEntryFound === undefined ){
+      wsServer = new WebSocketServer( { noServer: true } );
+      isNew = true;
+      wsServer.on( "connection", wsServerOnConnectionCallback );
+    } else {
+      wsServer = wsServerEntryFound.wsServer;
+    }
+
+    wsServer.handleUpgrade(req, socket, head, function(ws){
+        wsServer.emit('connection', ws, wsServer, sessionObjects);
+    });
+
+    if( isNew ){
+      wsServerList.push( {
+        game: req.session.game,
+        wsServer: wsServer,
+      } );
+    }
+
+
+  });
+
+  socket.on("error", onSocketError);
+
+});

src/server/util.js

@@ -0,0 +1,13 @@
+const crypto = require("crypto");
+
+exports.makeid = (length) => {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(crypto.randomInt(0, charactersLength) );
+    counter += 1;
+  }
+  return result.toUpperCase();
+}

src/server/websocket/handler.js

@@ -0,0 +1,429 @@
+const gameController = require("../controllers/GameControllerMongoose");
+const playerController = require("../controllers/PlayerControllerMongoose");
+
+
+exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
+  return new Promise( (resolve, reject) => {
+
+    if( dataRaw === undefined || !(dataRaw instanceof Object) ){
+      console.log("Data not parseable")
+      return false;
+    }
+    let data = JSON.parse( dataRaw );
+    
+    console.log(data)
+    let payload = data.payload;
+    console.log(payload)
+    let sendObj = {};
+
+    if( payload === undefined && !["host"].includes( data.event ) ){
+      sendObj = { event: "payloadIncomplete", message: "The sent event doesn't have all required attributes in the payload!" };
+      socket.send( JSON.stringify( sendObj ) );
+      socket.close();
+      reject( new Error("No payload sent"));
+    }
+
+    switch( data.event ){
+      case "joinGame":
+        if( payload.gameCode !== undefined && payload.playerName !== undefined ){
+          playerController.addPlayer( payload.playerName )
+          .then( ( player ) => {
+            if( socket.locals === undefined ){
+              socket.locals = {};
+            }
+            socket.locals.player = player._id.toString();
+            return gameController.addPlayerToGame( payload.gameCode, player );
+          })
+          .then( ( game ) => {
+            if( game === null ){
+              throw new Error("Game not found");
+            }
+            //TODO: GameState? InLobby, InGame?????
+            sendObj = { event: "joinSuccess", message: "Succesfully joined the game!", payload: { gameId: game._id, playerId: socket.locals.player, gameState: game.state }, };
+            socket.send( JSON.stringify( sendObj ) );
+            if( game.state === "IN_PROGRESS" ){
+              sendObj = { event: "gameStarted", message: "Game is starting", payload: { gameId: game._id, board: game.board }, };
+              socket.send( JSON.stringify( sendObj ) );
+            }
+            let message = `${payload.playerName} joined the Game`;
+            let sendingData = { players: game.players }
+            sendAllPlayers( socket, gameSocketList, "playersUpdated", message, sendingData )
+            resolve();
+          })
+          .catch( err => {
+            sendObj = { event: "joinFail", message: "Something went wrong while joining the game!" };
+            socket.send( JSON.stringify( sendObj ) );
+            reject( err );
+          });
+        } else {
+          sendObj = { event: "payloadIncomplete", message: "The sent event doesn't have all required attributes in the payload!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        }
+        break;
+      case "host":
+        if( socket.locals === undefined || socket.locals.user === undefined || socket.locals.game === undefined ){
+          sendObj = { event: "noUser", message: "No User detected. Make sure you are logged in to host a game!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        } else {
+          gameController.findGameByIdAndSetStateAndPopulateBoard( socket.locals.game, "IN_LOBBY" )
+          .then( ( game ) => {
+            console.log("Game successfully entered as host: ", game._id );
+            socket.locals.game = game._id.toString();
+            socket.locals.isHost = true;
+            sendObj = { event: "gameCreated", payload: { gameId: game._id, players: game.players }, message: "Game successfully created!" };
+            socket.send( JSON.stringify( sendObj ) );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        }
+        break;
+      case "continueHost":
+        if( socket.locals === undefined || socket.locals.user === undefined || socket.locals.game === undefined ){
+          sendObj = { event: "noUser", message: "No User detected. Make sure you are logged in to host a game!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        } else {
+          gameController.findGameById( socket.locals.game )
+          .then( ( game ) => {
+            console.log("Game successfully entered as host: ", game._id );
+            // socket.locals.game = game._id.toString();
+            socket.locals.isHost = true;
+            sendObj = { event: "hostRejoined", payload: { gameId: game._id, players: game.players }, message: "Host rejoined Game successfully!" };
+            socket.send( JSON.stringify( sendObj ) );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        }
+        break;
+      case "selectBoardForGame":
+        if( socket.locals.isHost ){
+          gameController.findGameById( socket.locals.game )
+          .then( ( game ) => {
+            game.board = payload.boardId;
+            return game.save();
+          })
+          .then( ( savedGame ) => {
+            let message = "The board which will be played has been changed";
+            let sendingData = { boardId: savedGame.board };
+            sendAllPlayers( socket, gameSocketList, "boardSelectedForGame", message, sendingData);
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "startGame":
+        if( socket.locals.isHost ){
+          gameController.findGameByIdAndSetStateAndPopulateBoard( socket.locals.game, "IN_PROGRESS" )
+          .then( ( game ) => {
+            let message = "Game is starting";
+            let sendingData = { gameId: game._id, board: game.board };
+            sendAllPlayers( socket, gameSocketList, "gameStarted", message, sendingData);
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectBoardEntry":
+        if( socket.locals.isHost ){
+          let message = `BoardEntry ${payload.boardEntryIndex} selected`;
+          let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex };
+          sendAllPlayers( socket, gameSocketList, "boardEntrySelected", message, sendingData );
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectBoard":
+        if( socket.locals.isHost ){
+          let message = "Board selected";
+          sendAllPlayers( socket, gameSocketList, "boardSelected", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "showQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, true )
+          .then( ( game ) => {
+            return playerController.setAllPlayersAcceptAnswers( game.players.map( playerEntry => playerEntry._id ), true )
+          })
+          .then( () => {
+            let message = "Question revealed";
+            sendAllPlayers( socket, gameSocketList, "questionRevealed", message, {});
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "playAudioForQuestion":
+        if( socket.locals.isHost ){
+          let message = "Audio started playing";
+          sendAllPlayers( socket, gameSocketList, "audioPlaying", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "stopAudioForQuestion":
+        if( socket.locals.isHost ){
+          let message = "Audio stopped playing";
+          sendAllPlayers( socket, gameSocketList, "audioStopped", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "hideQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            let message = "Question hidden";
+          sendAllPlayers( socket, gameSocketList, "questionHidden", message, {});
+          resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectQuestionLayer":
+        if( socket.locals.isHost ){
+          let message = `Question Layer ${payload.questionIndex} selected`;
+          let sendingData = { questionIndex: payload.questionIndex };
+          sendAllPlayers( socket, gameSocketList, "questionLayerSelected", message, sendingData );
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "showAnswer":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            let message = "Answer revealed";
+            sendAllPlayers( socket, gameSocketList, "answerRevealed", message, {});
+            resolve();
+          })
+          .catch( ( err ) =>  {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "hideAnswer":
+        if( socket.locals.isHost ){
+          let message = "Answer hidden";
+          sendAllPlayers( socket, gameSocketList, "answerHidden", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "addPointsToPlayer":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, payload.reopenQuestion )
+          .then( ( game ) => {
+            let playerIndex = game.players.findIndex( playerEntry => playerEntry._id.toString() === payload.playerId );
+            if( playerIndex === -1 ){
+              throw new Error("Player not found");
+            }
+            let adjustedPoints = Number(game.players[playerIndex].points) + Number(payload.pointsAdjustment);
+            return gameController.setPlayerPointsAndReturnGame( game._id, payload.playerId, adjustedPoints );
+          })
+          .then( ( game ) => {
+            let playerIndex = game.players.findIndex( playerEntry => playerEntry._id.toString() === payload.playerId );
+            if( playerIndex === -1 ){
+              throw new Error("Player not found");
+            } else {
+              let message = `Player ${payload.playerName} got ${payload.pointsAdjustment} points`;
+              let sendingData = { players: game.players, acceptAnswers: game.acceptAnswers }
+              sendAllPlayers( socket, gameSocketList, "pointsAdjusted", message, sendingData );
+              resolve();
+            };
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "questionAnswered":
+        if( socket.locals.isHost ){
+          gameController.findGameAndAddAnsweredEntry( socket.locals.game, payload.categoryIndex, payload.boardEntryIndex )
+          .then( ( _game ) => {
+            let message = `A question has been marked as answered`;
+            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex }
+            sendAllPlayers( socket, gameSocketList, "questionAnswered", message, sendingData );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "questionAnsweredRevert":
+        if( socket.locals.isHost ){
+          gameController.findGameAndRemoveAnsweredEntry( socket.locals.game, payload.categoryIndex, payload.boardEntryIndex )
+          .then( ( _game ) => {
+            let message = `A answered question has been reverted to not answered`;
+            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex }
+            sendAllPlayers( socket, gameSocketList, "questionNotAnswered", message, sendingData );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "pressBuzzer":
+          if( socket.locals.player !== undefined ){
+            //maybe add game option if player can buzzer multiple times?
+            playerController.checkPlayerAcceptAnswersAndSetAccepting( socket.locals.player, false )
+            .then( ( isAcceptingAnswers ) => {
+              if( isAcceptingAnswers ){
+                return gameController.findAcceptingGameAndSetNotAccepting( socket.locals.game )
+              } else {
+                return false;
+              }
+            })
+            .then( ( foundGame ) => {
+              if( foundGame ){
+                sendAllPlayers( socket, gameSocketList, "playerBuzzered", "A player pressed the buzzer", { playerId: socket.locals.player });
+              }
+              resolve();
+            })
+            .catch( ( err ) => {
+              reject( err );
+            });
+          } else {
+            reject( new Error("No playerId found for connection") );
+          }
+        break;
+      case "updateAnswerText":
+        if( socket.locals.player !== undefined ){
+          gameController.findGameAcceptingAnswers( socket.locals.game )
+          .then( ( _game ) => {
+            sendToHost( socket, gameSocketList, "playerAnswerTextUpdated", "A player updated their answer text", { playerId: socket.locals.player, updatedText: payload.updatedText });
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          })
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+      case "lockQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            sendAllPlayers( socket, gameSocketList, "questionLocked", "Question was locked. Answers can no longer be changed", {});
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+      case "revealPlayerAnswers":
+        if( socket.locals.isHost ){
+          sendAllPlayers( socket, gameSocketList, "playerAnswersRevealed", "Answers of one or more players revealed", { revealedAnswers: payload });
+          resolve();
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+    }
+  });
+}
+
+exports.handleConnectionClose = ( gameSocketList, socket) => {
+  if( gameSocketList.wsServer.clients.size === 0 ){
+    gameController.deleteGame( socket.locals.game )
+    .catch( ( err ) => {
+      console.error( "An error occured while deleting an unused game!" );
+      console.error( err );
+    })
+  }
+  if( socket.locals.isHost ){
+    //TODO implement for host
+  } else {
+    gameController.removePlayerFromGame( socket.locals.game, socket.locals.player )
+    .then( ( _updatedGame ) => {
+      return playerController.deletePlayer( socket.locals.player )
+    })
+    .then( ( player ) => {
+      if( player ){
+        sendAllPlayers( socket, gameSocketList, "playerLeft", "A player left the game", { player: player }, );
+      }else {
+        throw new Error(`Player not found for deletion: ${socket.locals.player}`);
+      }
+    })
+    .catch( ( err ) => {
+      console.error( err );
+    });
+  }
+}
+
+function sendAllPlayers( socket, gameSocketList, eventName, message, payload ){
+  if( gameSocketList === undefined ){
+    throw new Error("Game not Found in SocketList");
+  }
+  gameSocketList.wsServer.clients.forEach( playerSocket => {
+    let sendObj = {
+      event: eventName,
+      message: message,
+      payload: payload
+    };
+    playerSocket.send( JSON.stringify( sendObj ) );
+  });
+}
+
+function sendToHost( socket, gameSocketList, eventName, message, payload ){
+  if( gameSocketList === undefined ){
+    throw new Error("Game not Found in SocketList");
+  }
+  gameSocketList.wsServer.clients.forEach( playerSocket => {
+    if( playerSocket.locals.isHost ){
+      let sendObj = {
+        event: eventName,
+        message: message,
+        payload: payload
+      };
+      playerSocket.send( JSON.stringify( sendObj ) );
+      return;
+    }
+  });
+}

src/webapp/App.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { RouterView } from "vue-router";
+import Navbar from "./components/common/Navbar.vue";
+import { useUserStore } from "@/stores/UserStore";
+
+const userStore = useUserStore();
+
+userStore.initialUserPromise
+.then( ( userData ) => {
+  userStore.setUser( userData );
+})
+.catch( ( err ) => {
+  console.debug( err );
+});
+
+</script>
+
+<template>
+  <Navbar />
+  <div class="full-height-wrapper">
+    <RouterView />
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/assets/icons/jeobeardy_logo.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="103.44236mm"
+   height="80.726883mm"
+   viewBox="0 0 103.44236 80.726882"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="logo_draft2_thicker_thick_q_white.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="90.156115"
+     inkscape:cy="38.890873"
+     inkscape:window-width="2560"
+     inkscape:window-height="1355"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-51.241626,-83.781469)"><image
+       width="133.08542"
+       height="125.14792"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfcAAAHZCAYAAACb03JhAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAg AElEQVR4Xuy927MsWXrY9ftWZlXtfc4+l+7pnu4eyeORNB5LYWSNLMLYOECyIXggHP5veCPAELwS RPBGBA888YBeMChwYIxvgMJGYGEbhSVLFh6PRpr2zHRPn8u+VGWuj4dV397fXmetzKyqrH32OX1+ 3Scyc12+61q5MrOyaouqKo5f+bd/hWfPniMivhgAVUVEaNv2en8uYoyEEIgxVmVbuYgU21iZyQkh 3Kq/z0z1P4RQ9d8Yqz8Ek5sNm3vP1Ni948uFjYWheXdMXud4HJvLvj7GWLTxTT7njjF2Tj527kx2 13VVParK48eP+Dt/7+/kVYi6zP7FX/4VXrw4n5TIYzLkiMj44n4oNfnHxE+kmu5auTEWnznYR/YU 34yx+n1RTYv7O95RYsrYrDHWb2he+rlx18wxL4d8OzZ3GbuSb3elv3ZxATfntbOzB/ztv/t3btVd L+5/5S//Ff7oj75fFJCzr1PW79hXeYfaNzZQx+pfN/v6P4TJbJpmdt+9vXPLzjlGbN7x5jLHXJ56 3ihh7fu+37nvoexj710yNlePfd44ND5jd/5j7KJfVfnaJx/z137tf7guE1XV//Sv/if82q/9T7ca DjFFWYmpho5Rc7pUtgvWvyb/mPiBOkbNvlLZXBwzNt73uWV7jiX3HW8+U+ZdjUPmxl2N/TFKuuc4 Jx2Tu4xdSf4u8Sn1n8qYfC/3L//lf5//6K/+x6lcVfUXf+EXadvFdYO7SlRutOk89p19jak+31V8 7hM+H4f4Pha7obp3vOM+MjRmxxYA3/d1nPPuM2Ox8wzl4FiM3Znnx3NTik/XbfjNf/SbAMif/zf+ vK7Xm1uNj7G47pKgEEIxWMekFKicY8bnPuNjcoycWNyPIfsd77grppxDahx7jr2JjC2entdxDjF9 U+wzprSZSi0+y+WCX//7v057dbW+1cEG2ZxGQJJbMiRv87qYOjisfqzd20TJ111zZbEtXRiVTool ne94x30jH7P5OaR2Aja+jOeTqeSxGYpRKbZ3hWr6WKBEft6b00aTZbpte3W15lf/u19F/sy3f+na Km/IIZQGuXe+5uRc+seo2WflNVTvxxvXJfth+gCf2s4YislUfG6H9E/Jw5eVWsyMsZiN9T+UMf1v I7W5aFhdbXEvMaXNXEy1qdTuLudqbc0wSnm4K/uGcqta/wruXPaV9SutF2z7JUN2Je9rTpohJebU P0Yu2we6pvsu7RujpHvKQBFJL/7sQp67XfvDTewsvjXuQ2zvM36cGrvEbCj2++B1T9H/tlHKh2fK uDcZx7i7G8N01WwzSjZZWaluDnxsa/b5sZfPgftin283p31j+ttcsDWG8YTXqDniE5HrNebQvw+5 zTX74PaEfR3kthqlshJT2xl5THbp6xnKrbcpr3vHDaXc2/GUuO2buxq76H4b8eM5z4vhy0v1cPjc 2hezbUxvybe7yL3JHrLRz4lj2lLikNzOYfOQ/rb0mHlfpV5R3lckPZoKIRR/4c7rtHa5jEMxHaXP fT15kAzv2z7xOZSh+FpZ7RGQ1du/vG4IP3h26ecZ6/e6Y3vfUVWaprmVC49I/dGvH/d53RyYzL7v jyL/PmNjdcrcqNX78lqbY+HHRj52/FyMMbpeN/W2zfvOgY/trudqGH/f4VDMvpptntJ57dD4jem/ 9VjeMCW7KoPbC0De347NGY931Cd1brzs3IYpDPl3F4zp93HMsbJSvyEOiVdOLbdWNuTbl51abvO8 lmI3V/5y8nlb0v22Yz4Pjespsa/NjWPibc9tnJJbX1aqPxRv367k8TyWfWO2+djlNhwavyH9rzyW nwM/KHJ8md+vOT8nuezcPhsIY3f2r5tafGux9WX5gJ/C3LkpySmVveOGodzmdXksfd7nxo/Fku4v EyXfd507U9vNhR8b+fjIc1uiVj43pbiM3Zn747xuTmqyp8y7obqp1PS3ecG+THVEpPzyQ6lfzeh9 KMkvsetkvCt2iW+NUtzfcf/x8wZeHZt27MeIb1Mqm4vcpmPpecf85ONlKG9D5x047hir4cdeyb5S 2V3a5+M7FptjxG/Wxd22Q0b6djnW7xhvjaqOv/Fdsum+MDX5tfj6ifCON4tSznx+x3Kbl+dj4xC8 7FzPO+43pXz5seHPJSLji/9Q/bGpjeljriljmK7aOdnKfLs57at+5r6rIp/8kkyYbry1q8kZo2S/ 7Y/J9XVD7Q6hZB8Mx2dKTMb63wU13w5lqsyp7d4kxnJXqvcxKNXPRUn2mxb/ucbMPnKmzOv7wBT7 cv/vwjfV+kcGhtlUy81Y/0Mw2XlsPCLDF077Uv3MvVZewyeyFixfXmpjZaU3N3cl7zvVPtV0h3+o /jFKsq3M22rYvtlY6l9q74+tz7HfJSjZdig+NkMcQ/frxsbk2FMnkfIdikh6k963m5Mh3W8C+Vzb B5H9TtDWZ5++hzL2mXV+zikxlPtj+2a6zf4S3va8jeX92PaNxc+3m9OWWe/cbWv/Svi6UhvTDa8m Yyol+3ex71D9hzAUn5I/OVP6H9OvUuznwGSOyT2G7tdNns+af0P1U8bOIQzpvu/MNWb2keNP7HeN 6R3L3ZT61+WHPy8M2Vfy4S5sniO++/LKL9RZIHYdqN7Apmmy2lcpybayfYPubc77ep/G7NtX/xgm t/Y2vt1d1ep9zIbil+/nx3P7BcOxnwOTWfp78j5f+d3D24D5IzJ8Aivt52WlukMZ033fUR3+fYgh rL39PfZdsT6q9Sdyx8L7W9IrcvPbJKWnmRY3m3f5+WrsycChePtr5/Tcv9wG8/GY9uVxqbGrfrO5 Nu5eeSxfC8IYY4p2YV8bIPWp9bfjMRtr/efAYlSLVU2371Pq5/E6DH+cy56LodjPQc1/O859flsY Gi85pdzD+Jifg5ru+46P7a5xsvaHjHvfZ5/+h2D6SnnLY1KKjS/L6/PxkMufgynzomb/HLkbY4p9 8GqspjBm92xvy48puktqyTT2CeQc5Ppy+1Snfz6Uy8rJ6/PjY1Gz/1C8vFy21/k68npspubcKLUr lR2Du9IzJ0Nja4x87O3Dvv3mpJS3fNzlbWyu1Xz37fO+czJVttlq5PtT5ezKVLlT2xk+/iVmW9xf N2OOwk0ba7drMA9hyC6PtRtq/zrsH2JK7A/FZJd8tjLb3qfYvON+488JUB5fU1AtL3C78KbN67Fz Van8Ln0r6ffk54v7FPspeLtLtr9Vi7ttS44ah07ifVGd9sazffYHdRtr/V8XdzUx/EDOy0v773jH GKXxko+vIazt2Jydwl3MoV2YMq+tzt4XyrH+pbfpj83YOXeOnL1OcvtzP4qLuw3YXQb5LkwZNLsi cnP1XbM7Xxhq7Q6l5J+VjTE19mP1x6Lk21SbD8Fkl8bMMfW+4x1TyM8t+1KaW1PPHceipnuXeZ/7 5cum9N8Hf64q6SiV5TaOUfIrp6RnLmzclXRcvy3vA1E6gc/N3LJ9EkuOwk0gSm9+zk0u2/Tu+51M KxOpv21/V4z5ltfPgY/HfY7NO94sDn2j28/X0ricQj52vQ22v6tdczAWmym+W/nr8M1sHrOvFvsp WHuvy9eV4jYXJru2ptx6W94b6rdzcwyn/UCxfyV8Au7Sv7xsyD7bltp4Oceyf1em+nYoPiYlHfcx Nu+438wxdn2fffrD/Ry7U2Nj83KoPj8fQnlBnBuTPWaf3+6C+VCTcRf+1XRfL+6qr35ncW6jvCFD smuDYQjvYO07j8axBtWQfyI33xkt+edtqt15etnHsH8I01m7M7YyGzc13/K6qfg+pf6vMzbveHPx c7E0rsawPkP9vfx8/Ku+et71jN09H5Ox2IjcnNPatn3FPj8XS2uK7R9yXhjC25/H1fA699E/lNtj 524sP8XP3I1Sh0PIDRmSP1RXwg+kMabo34cx/7x9uZ2+3CctbzMk/9h4u3L74VWfDN+n1mYq9zU2 73hzsbFSGldjDM0Hw+qGxq61yeXkffK+x2YoNrnvue2+vGb/kPw58PKHyOM8hdy/vH/u8y6yp+Lj n/PKL9TBcYyAVwNdM6oUqDGOGcCpTPWvVD/F/qG6Y5Przn3zYyevy/OZy9qVUv9S2TvesQv7jKGp Y9rPgfyca2X5vIHbcsd0HJOS7rws9w1unyfyOl+Wy5qbKfKntPH43Ndy6/d3lT+VmtzZflt+jJLz OdbmGPqPzaH+lfrdF/9LttVQLZ+kjJLv73jH28rYeaFWbpTq78vcKdnm8b6Pzfk38bwwNbe+3V36 98rPz8JxrjKmOmf1Y+3uGz6RQ376djnWb983N4+F6vjb8OaPfbZVagPHGVvveMd9Zcp5T6T+xjO8 ueeF/FxX8s/3K8m4z3i/SrbbcV5+VxTv3KGciKmUnDHnh+TmdfnxHJRsyyklagyRmzvyGlPkmowx WYcwZkPOLjbZQB9irP7LjI/1VKbmBnbP/Ri76P4yU4tPrTzH8jaUv9q4mapjV3Y9L5RsM4bqjsVU 22uM2VySO9anREnOFF75zF2k/kb0VEpBs33V8lWO1cE8f899iJJ9fqDuo9fLrCWjFA+PlXlb7gOq 076jb9tSG/Pn0LH1ZWDXvFv7XfvNwevU/SYw9sb02LyB23V5mynnrVr5oZjemu1TffP7x7K1xKFj 1+wdOy9abmptavjc7sMrj+W9wF2NMWpB88d5neH17qt/CAu07ed1sN8gy2XW+g/pN47pP9T11rCc iEz/SklJh5dzLN/e8Y77hB/zdpwz5Zww1MaOa+etY841kz0050v7nppfx2aOc9FYbmE4d0Mcat+t r8Llg2RXoX4BKN2djSX6UP1jqKY70JLine truncated
+       id="image140"
+       x="27.046398"
+       y="61.828457"
+       style="display:none;opacity:0.4039" /><path
+       style="opacity:1;fill:#e86a92;fill-opacity:1;stroke:#e86a92;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 89.597943,161.46239 c 4.957603,-11.31418 10.365454,-13.95841 18.872727,-16.46612 l -0.969,2.23271 10.17543,-3.72589 -1.44748,2.89495 c 7.77057,-2.08212 9.96019,-3.12838 17.29351,-0.22855 8.26326,-4.46932 15.33088,-3.99272 18.58862,-16.15077 0.39797,-1.48523 0.47248,-3.46705 -16.76023,-13.25582 0.6718,-1.59948 -0.64483,-6.30424 -1.44747,-7.69446 -11.87841,-11.878406 -22.82609,-9.786559 -25.14034,-11.122693 -5.10133,-2.945257 -5.77849,-9.894901 -10.741782,-10.89415 -6.64933,-1.781683 -10.639666,-0.422382 -8.015124,7.302597 -4.755054,-0.07748 -19.311199,0.225543 -19.311199,0.225543 l 4.218975,2.479364 -10.418322,0.541411 4.479459,2.526958 c -6.00567,0.93796 -10.085508,3.02646 -13.849528,6.19633 l 3.879167,3.25675 c 11.896264,-8.5256 27.407274,-7.5637 31.986403,1.85066 8.053096,14.19441 -5.364775,20.05902 -11.44594,30.07143 1.070396,5.80331 1.412146,7.38337 3.627235,11.42304 1.414891,2.45066 5.193343,11.34733 6.424889,8.53671 z"
+       id="path919"
+       sodipodi:nodetypes="sccccccccccccccccccccs" /><path
+       style="opacity:1;fill:none;stroke:#ffffff;stroke-width:8;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 57.671788,111.83817 c 4.776043,-5.45079 12.940609,-7.24498 19.118918,-7.24498 13.656487,0 13.875779,8.51413 14.475615,10.75275 0,14.09963 -13.925936,15.13618 -10.506511,27.69217 0.653123,2.43749 0.932727,3.34729 2.242618,6.17334"
+       id="path2566"
+       sodipodi:nodetypes="ccccc" /><ellipse
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.80661;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       id="path2620"
+       cy="182.73756"
+       cx="-0.050881278"
+       rx="3.2998796"
+       ry="3.4343019"
+       transform="rotate(-29.11515)" /></g></svg>

src/webapp/assets/images/soundform.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="115.22386mm"
+   height="33.715347mm"
+   viewBox="-3 -2 131.8969 38.594"
+   version="1.1"
+   id="svg5"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-21.975686,-21.052838)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 20.975686,39.361128 c 9.393449,0 9.778022,-6.732235 13.656397,-6.732235 4.363505,0 3.215481,10.942656 6.656914,10.942656 4.076696,0 5.680598,-13.656727 9.582053,-13.656727 3.267077,0 5.734719,17.064777 8.985079,17.064777 3.368218,0 3.259782,-20.961349 7.580609,-20.961349 4.594301,0 3.440897,24.535907 7.075557,24.535907 3.635658,-0.08378 2.929635,-30.251319 7.849764,-30.251319 4.946458,0 4.18451,36.473046 9.161492,36.473046 5.325714,0 3.671731,-36.100712 10.078299,-36.100712 5.62464,0 2.28344,36.429035 9.69084,36.429035 6.41649,-0.002 5.18604,-28.905808 10.34433,-28.905808 5.20636,0 2.08351,21.387216 6.14903,21.385359 3.86298,-0.0018 5.29683,-11.873254 9.19071,-11.873254 1.64054,0 5.03504,4.164663 11.47819,4.164663"
+       id="path846"
+       sodipodi:nodetypes="ccccccccccccscc" />
+  </g>
+  <metadata
+     id="metadata1368">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://artlibre.org/licence/lal" />
+      </cc:Work>
+      <cc:License
+         rdf:about="http://artlibre.org/licence/lal">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" />
+        <cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>

src/webapp/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/webapp/assets/scss/styles.scss

@@ -0,0 +1,187 @@
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "~bootstrap/scss/functions";
+
+
+@font-face {
+  font-family: "Urbanist";
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+  unicode-range: U+000-5FF;
+  src: local("Urbanist"), url(@/assets/fonts/Urbanist-Regular.woff2) format("woff2");
+}
+
+/* COLOR THEME */
+
+/* SCSS HEX */
+$raisin-black: #272838ff;
+$teal: #0e7b81ff;
+$teal-darkened: #0d6064;
+$tiffany-blue: #7dded9ff;
+$light-coral: #eb8a90ff;
+$cyclamen: #e86a92ff;
+
+$space-cadet: #2b2d42ff;
+$cool-gray: #8d99aeff;
+$celadon: #95d7aeff;
+$green-active: #158a42;
+$tangerine: #f28f3bff;
+$sandy-brown: #ee964bff;
+$prussian-blue: #0b3954ff;
+$oxfort-blue: #13273eff;
+
+$mint: #21D19F;
+$malachite: #53DD6C;
+$rusty-red: #D33F49;
+$amaranth: #DF3B57;
+$scarlet: #FF331F;
+$rusty-scarlet: #E53A35;
+
+// /* SCSS RGB */
+// $raisin-black: rgba(39, 40, 56, 1);
+// $teal: rgba(14, 123, 129, 1);
+// $tiffany-blue: rgba(125, 222, 217, 1);
+// $light-coral: rgba(235, 138, 144, 1);
+// $cyclamen: rgba(232, 106, 146, 1);
+
+// /* SCSS Gradient */
+// $gradient-top: linear-gradient(0deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-right: linear-gradient(90deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-bottom: linear-gradient(180deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-left: linear-gradient(270deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-top-right: linear-gradient(45deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-bottom-right: linear-gradient(135deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-top-left: linear-gradient(225deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-bottom-left: linear-gradient(315deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+// $gradient-radial: radial-gradient(#272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
+
+$primary: $prussian-blue;
+$secondary: $tiffany-blue;
+$danger: #a41522;
+$tertiary: $teal-darkened;
+$accent-primary: $teal;
+$accent-secondary: $teal-darkened;
+$pink-accent-primary: $cyclamen;
+$pink-accent-secondary: $light-coral;
+$dark-primary: $oxfort-blue;
+$dark-secondary: $space-cadet;
+$dark-blue: $prussian-blue;
+
+$body-bg: $dark-primary;
+$body-color: #f0dcdc;
+$link-color: #f0dcdc; 
+
+//Form Control
+$form-file-button-bg: shade-color($prussian-blue, 10%);
+$input-disabled-bg: shade-color($oxfort-blue, 10%);
+
+//Accordion
+$accordion-button-active-bg: shade-color($body-bg, 5%);
+$accordion-button-active-color: #f0dcdc;
+
+
+//Modal
+$modal-content-bg: $dark-blue;
+
+
+
+$font-family-base: "Urbanist";
+
+
+
+// 2. Include any default variable overrides here
+// $form-select-indicator-color: $primary;
+// $form-select-border-color: $primary;
+// $input-border-color: $dark-blue;
+// $input-box-shadow: $pink-accent-primary;
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "~bootstrap/scss/variables";
+
+
+
+$custom-colors: (
+  "dark-primary": $dark-primary,
+  "dark-secondary": $dark-secondary,
+  "dark-blue": $dark-blue,
+  "tertiary": $tertiary,
+  "accent-primary": $accent-primary,
+  "accent-secondary": $accent-secondary,
+  "pink-accent-primary": $pink-accent-primary,
+  "pink-accent-primary-disabled": shade-color( $pink-accent-primary, 40%),
+  "pink-accent-secondary": $pink-accent-secondary,
+  "correct-accent-primary": $malachite,
+  "correct-accent-secondary": $mint,
+  "wrong-accent-primary": $rusty-scarlet,
+  "wrong-accent-secondary": $scarlet,
+  "gray": $gray-500,
+);
+
+// Merge the maps
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "~bootstrap/scss/bootstrap";
+// @import "~bootstrap/scss/mixins";
+// @import "~bootstrap/scss/root";
+
+// // 6. Optionally include any other parts as needed
+@import "~bootstrap/scss/utilities";
+// @import "~bootstrap/scss/reboot";
+// @import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+// @import "~bootstrap/scss/containers";
+// @import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/helpers";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "border-color": map-merge(
+      map-get($utilities, "border-color"),
+      (
+        state: hover,
+      ),
+    ),
+  )
+);
+
+// "rounded-start": (
+//   property: border-bottom-left-radius border-top-left-radius,
+//   class: rounded-start,
+//   values: (null: var(--#{$prefix}border-radius))
+// ),
+
+
+
+// // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "~bootstrap/scss/utilities/api";
+
+// // 8. Add additional custom code here
+
+.pointer {
+  cursor: pointer;
+}
+
+.buzzer{
+	height: 10rem;
+	width: 10rem;
+	cursor: pointer;
+  background-color: $pink-accent-primary;
+}
+
+.buzzer:active{
+  background-color: shade-color( $pink-accent-primary, 10% );
+  transform: translateY( 3px );
+  transition: transform ease 0.1s;
+}
+
+.buzzer-answering{
+  background-color: $green-active;
+}
+
+.buzzer-answering:active{
+  background-color: shade-color( $green-active, 10% );
+}

src/webapp/components/blocks/BoardCard.vue

@@ -0,0 +1,41 @@
+<script setup>
+
+const props = defineProps({
+  boardName: String,
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["boardCardClicked"]);
+
+function boardCardClicked(_event) {
+  emit("boardCardClicked");
+}
+
+</script>
+
+<template>
+	<div class="card bg-primary border-1 border-pink-accent-primary-hover board-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="boardCardClicked">
+		<div class="card-header" :class="[{ 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected }]">
+				<h5 class="mb-0 text-truncate">{{ props.boardName }}</h5>
+		</div>
+		<div class="card-body">
+			<div class="d-flex flex-column align-items-center justify-content-center h-100">
+				<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-border-all" size="2x" />
+				<h5>
+					Edit Board
+				</h5>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.board-card {
+  width: 12em;
+  height: 9em;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/blocks/BoardEntryCard.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+
+
+const props = defineProps({
+  boardEntry: Object,
+  isHost: {
+    type: Boolean,
+    default: false,
+  },
+  isBeingPlayed: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["boardEntryCardClicked", "boardEntryAnsweredClicked", "boardEntryAnsweredRevertClicked" ]);
+
+const showingSetAnswered = computed( () => {
+  return props.isHost && props.isBeingPlayed;
+})
+
+function questionCardClicked(){
+  if( !props.boardEntry.isAnswered ){
+    emit("boardEntryCardClicked");
+  }
+}
+
+function boardEntryAnsweredClicked(){
+  emit("boardEntryAnsweredClicked");
+}
+function boardEntryAnsweredRevertClicked(){
+  emit("boardEntryAnsweredRevertClicked");
+}
+
+</script>
+
+<template>
+  <div
+    class="card border-1 mb-1 flex-fill board-entry-card bg-primary"
+    :class="[ 
+      { 'border-pink-accent-primary-disabled' : props.boardEntry.isAnswered },
+      { 'border-pink-accent-primary' : !props.boardEntry.isAnswered },
+      { 'bg-dark-primary': props.boardEntry.isAnswered },
+      { 'pointer': !props.boardEntry.isAnswered && props.isHost },
+    ]"
+    @click="questionCardClicked"
+  >
+    <div class="card-body">
+      <div class="d-flex justify-content-center align-items-center h-100">
+        <div v-if="showingSetAnswered" class="position-absolute start-0 top-0 ms-1 mt-1">
+          <button v-if="!boardEntry.isAnswered" class="btn btn-sm btn-pink-accent-primary" @click.stop="boardEntryAnsweredClicked">
+            <font-awesome-icon icon="fa-solid fa-square-check" size="lg" />
+          </button>
+          <button v-else class="btn btn-sm btn-pink-accent-primary" @click.stop="boardEntryAnsweredRevertClicked">
+            <font-awesome-icon icon="fa-solid fa-square-minus" size="lg" />
+          </button>
+        </div>
+        <h5 class="mb-0 user-select-none">
+          {{ props.boardEntry.points }}
+        </h5> 
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.board-entry-card{
+  max-height: 20%;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/blocks/BoardListCard.vue

@@ -0,0 +1,43 @@
+<script setup>
+
+const props = defineProps({
+  boardName: String,
+  categoryAmount: {
+    type: Number,
+    default: 0,
+  },
+  questionAmount: {
+    type: Number,
+    default: 0,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const emit = defineEmits(["boardCardClicked"]);
+
+function boardCardClicked(_event) {
+  if( !props.isSelected ) {
+    emit("boardCardClicked");
+  };
+}
+
+</script>
+
+<template>
+	<div class="card bg-primary border-1 border-pink-accent-primary-hover board-card m-3 pointer" :class="[ { 'border-pink-accent-primary': props.isSelected } ]" @click="boardCardClicked">
+		<div class="card-body">
+				<h5 class="mb-0 overflow-auto">{{ props.boardName }}</h5>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.board-card {
+  width: 12em;
+  height: 9em;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/blocks/CategoryCard.vue

@@ -0,0 +1,40 @@
+<script setup>
+
+const props = defineProps({
+  category: Object,
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["categoryCardClicked"]);
+
+function categoryCardClicked(_event) {
+  emit("categoryCardClicked");
+}
+
+</script>
+
+<template>
+	<div class="card bg-primary border-1 border-pink-accent-primary-hover category-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="categoryCardClicked">
+		<div class="card-header" :class="[{ 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected }]">
+				<h5 class="mb-0 text-truncate">{{ category.categoryName }}</h5>
+		</div>
+		<div class="card-body">
+			<div class="d-flex flex-column align-items-center justify-content-center h-100">
+				<h5>
+					Edit Category
+				</h5>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.category-card {
+  width: 12em;
+  height: 9em;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/blocks/CategoryHeaderCard.vue

@@ -0,0 +1,27 @@
+<script setup>
+
+const props = defineProps({
+  categoryName: String,
+  categoryDescription: String,
+});
+
+</script>
+
+<template>
+  <div class="card bg-pink-accent-primary mb-1 flex-fill category-header-card" :title="props.categoryDescription">
+    <div class="card-body text-center">
+      <div class="d-flex justify-content-center align-items-center h-100">
+        <h4 class="mb-0 user-select-none">
+          {{ props.categoryName }}
+        </h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.category-header-card{
+  max-height: 20%;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/blocks/CreateActions.vue

@@ -0,0 +1,60 @@
+<script setup>
+
+const props = defineProps({
+  saveRequestInProgress: {
+    type: Boolean,
+    default: false,
+  },
+  saveAndExitRequestInProgress: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits( [ "save", "saveAndExit", "discardAndExit" ] );
+
+function saveButtonClicked( _event ){
+    emit("save");
+}
+
+function saveAndExitButtonClicked( _event ){
+    emit("saveAndExit");
+}
+
+function discardAndExitButtonClicked( _event ){
+    emit("discardAndExit");
+}
+
+</script>
+
+<template>
+  <div class="m-3">
+    <div class="row">
+      <div class="col-xl-4 col-12 px-1">
+        <button class="btn btn-pink-accent-primary text-center w-100 h-100" @click="saveButtonClicked">
+          <span v-show="!props.saveRequestInProgress">
+            Save
+          </span>
+          <span v-show="props.saveRequestInProgress">
+            <font-awesome-icon icon="fa-solid fa-spinner" spin />
+          </span>
+        </button>
+      </div>
+      <div class="col-xl-4 col-12 px-1">
+        <button class="btn btn-pink-accent-primary text-center w-100 h-100" @click="saveAndExitButtonClicked">
+          <span v-show="!props.saveAndExitRequestInProgress">
+            Save & Exit
+          </span>
+          <span v-show="props.saveAndExitRequestInProgress">
+            <font-awesome-icon icon="fa-solid fa-spinner" spin />
+          </span>
+        </button>
+      </div>
+      <div class="col-xl-4 col-12 px-1">
+        <button class="btn btn-danger text-center w-100 h-100" @click="discardAndExitButtonClicked">Discard & Exit</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/blocks/CustomTextSaveOrCancel.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+const props = defineProps({
+  saveText: {
+    type: String,
+    default: "Save",
+  },
+  cancelText: {
+    type: String,
+    default: "Cancel",
+  },
+});
+
+</script>
+
+<template>
+  <div class="m-3">
+    <div class="d-flex justify-content-end align-items-center">
+      <button class="btn btn-pink-accent-primary me-3">{{ props.saveText }}</button>
+      <button class="btn btn-danger">{{ props.cancelText }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/blocks/PlayerListEntry.vue

@@ -0,0 +1,87 @@
+<script setup>
+
+const props = defineProps({
+  player: Object,
+  isHost: {
+	type: Boolean,
+	default: false,
+  },
+  acceptAnswers: {
+	type: Boolean,
+	default: false,
+  }
+});
+
+const emit = defineEmits(["manualPointsAdjustment", "answerRuled", "revealPlayerAnswer"]);
+
+function revealAnswer(){
+	emit("revealPlayerAnswer", props.player._id);
+}
+
+</script>
+
+<template>
+	<div class="card bg-primary my-1 player-card">
+		<div class="card-body p-2">
+			<h5 class="mb-0 text-truncate">
+				<template v-if="props.player.isAnswering">
+					<font-awesome-layers :title="'Player is answering'">
+						<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-square" size="lg" fade style="--fa-animation-duration:2s" />
+						<font-awesome-icon class="text-white" icon="fa-solid fa-angle-right" size="sm" />
+					</font-awesome-layers>
+				</template>
+				{{ props.player.name }}
+			</h5>
+
+			<div v-if="props.isHost || props.player.currentTextAnswer" class="row mt-2">
+				<div class="col-sm-2 text-nowrap">
+					Answer
+				</div>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm border-0" :value="props.player.currentTextAnswer" readonly>
+				</div>
+			</div>
+			<div v-if="props.isHost && !props.acceptAnswers" class="row mt-2">
+				<div class="col-sm-2 text-nowrap d-flex justify-content-start align-items-center">
+					Reveal
+				</div>
+				<div class="col-sm-10">
+					<button class="btn btn-sm btn-pink-accent-primary" @click="revealAnswer">Reveal Answer</button>
+				</div>
+			</div>
+			<div class="row mt-2">
+				<div class="col-sm-2 d-flex justify-content-start align-items-center">
+					<span>Points</span>
+				</div>
+				<div class="col-sm-10 d-flex">
+					<input type="text" class="form-control form-control-sm border-0" readonly :value="props.player.points">
+					<template v-if="props.isHost">
+						<button class="btn btn-sm btn-pink-accent-primary mx-1" @click="emit('manualPointsAdjustment', true )">
+							<font-awesome-icon class="text-black" icon="fa-solid fa-plus"/>
+						</button>
+						<button class="btn btn-sm btn-pink-accent-primary" @click="emit('manualPointsAdjustment', false )">
+							<font-awesome-icon class="text-black" icon="fa-solid fa-minus"/>
+						</button>
+					</template>
+				</div>
+			</div>
+			<div v-if="props.isHost && props.player.isAnswering" class="row mt-2">
+				<div class="col-sm-2 d-flex justify-content-start align-items-center">
+					Award
+				</div>
+				<div class="col-sm-10">
+					<div class="d-flex justify-content-evenly align-items-center">
+						<div class="flex-fill d-grid me-1">
+							<button class="btn btn-sm btn-correct-accent-primary flex-fill-1" @click="emit('answerRuled', true )">Correct Answer</button>
+						</div>
+						<div class="flex-fill d-grid ms-1">
+							<button class="btn btn-sm btn-wrong-accent-primary flex-fill-1" @click="emit('answerRuled', false )">Wrong Answer</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped></style>

src/webapp/components/blocks/QuestionCard.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { computed } from 'vue';
+import { QUESTION_TYPES } from '../../services/GameService';
+
+
+const props = defineProps({
+  boardEntry: Object,
+  isSelected: {
+    type: Boolean,
+    default: false,
+  }
+});
+const emit = defineEmits(["questionCardClicked", "questionCardDeleteClicked"]);
+
+let questionTypes = computed( () => {
+  let uniqueArray = [ ...new Set( props.boardEntry.questions.map( question => question.questionType ) ) ].map( uniqueType => QUESTION_TYPES[uniqueType] );
+  return uniqueArray.join("; ");
+});
+let questionTexts = computed( () => {
+  return props.boardEntry.questions.map( question => question.questionText ).join("; ");
+});
+
+function questionCardClicked(_event){
+  emit("questionCardClicked");
+}
+
+function deleteCardClicked(_event){
+  emit("questionCardDeleteClicked");
+}
+
+</script>
+
+<template>
+  <div class="card bg-primary border-1 border-pink-accent-primary-hover question-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="questionCardClicked">
+    <div class="card-header px-2" :class="[ { 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected } ]">
+      <div class="w-100 d-flex justify-content-between">
+          <h5 class="text-truncate mb-0">
+            {{ questionTypes }}
+          </h5>
+        <span class="px-1 pointer" @click.stop="deleteCardClicked">
+          <font-awesome-icon class="text-danger" icon="fa-solid fa-trash"/>
+        </span>
+      </div>
+    </div>
+    <div class="card-body p-1">
+      <div class="d-flex align-items-center justify-content-center h-100">
+        <div class="text-center question-card-body-text mb-0">
+          {{ questionTexts }}
+        </div>
+      </div>
+    </div>
+    <div class="card-footer py-1">
+      <div class="w-100 d-flex justify-content-between">  
+        <span class="text-truncate">
+          {{ props.boardEntry.answer.answerText }}
+        </span>
+        <span class="px-1 pointer" @click.stop="deleteCardClicked">
+          {{ props.boardEntry.points }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.question-card{
+  width: 16em;
+  height: 9em;
+  max-width: 90vw;
+}
+.question-card-title{
+  width: 13em;
+}
+.question-card-footer{
+  max-width: 13em;
+}
+.question-card-body-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>

src/webapp/components/common/Navbar.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { useUserStore } from '@/stores/UserStore';
+
+const userStore = useUserStore();
+
+function logoutButtonClicked(_event){
+  userStore.logout()
+  .then( res => {
+    if( res.data.success ){
+      userStore.$reset();
+    }else{
+      console.debug( res );
+    }
+  })
+  .catch( err => {
+    console.debug(err);
+  })
+}
+
+</script>
+
+<template>
+  <nav id="navbar" class="navbar navbar-dark navbar-expand-md bg-dark-blue text-light">
+    <div class="container">
+      <div class="d-md-none d-block">
+        <RouterLink to="/">
+          <img src="../../assets/icons/jeobeardy_logo.svg" alt="Logo" class="nav-logo my-1">
+        </RouterLink>
+      </div>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarNavContainer"
+        aria-controls="navbarNavContainer"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNavContainer">
+        <div class="navbar-nav w-100 justify-content-center align-items-center">
+          <div class="row w-100">
+            <div class="col-md-4 col-12 mb-md-0 mb-3">
+              <div class="d-flex justify-content-md-end justify-content-center align-items-center h-100 fs-4">
+                <RouterLink class="text-light text-decoration-none px-3" to="/">
+                  Home
+                </RouterLink>
+              </div>
+            </div>
+            <div class="col-md-4 col-12 d-none d-md-inline">
+              <div class="d-flex justify-content-center align-items-center h-100">
+                <RouterLink to="/" class="text-center">
+                  <img src="../../assets/icons/jeobeardy_logo.svg" alt="Logo" class="nav-logo my-1">
+                </RouterLink>
+              </div>
+            </div>
+            <div class="col-md-4 col-12 mb-md-0 mb-3">
+              <div class="d-flex justify-content-md-start justify-content-center align-items-center h-100 fs-4">
+                <RouterLink class="text-light text-decoration-none px-3" to="/about">
+                  About
+                </RouterLink>
+              </div>
+            </div>
+            <div class="col-md-4 col-12 d-md-none d-inline mb-md-0 mb-3">
+              <div class="d-flex justify-content-center align-items-center h-100 fs-4">
+                <div v-if="userStore.loggedIn">
+                  <div class="dropdown text-center">
+                    <a class="dropdown-toggle text-decoration-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                      {{ userStore.username }}
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-dark-blue">
+                      <li>
+                        <RouterLink class="dropdown-item" to="/profile">
+                          Profile
+                        </RouterLink>
+                      </li>
+                      <li><hr class="dropdown-divider"></li>
+                      <li>
+                        <a class="dropdown-item" href="#" @click="logoutButtonClicked">Logout</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div v-else>
+                  <RouterLink class="text-light text-decoration-none px-3" to="/login">
+                    Login  
+                  </RouterLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="position-absolute end-0 top-50 translate-middle d-md-inline d-none">
+          <div class="d-flex justify-content-start align-items-center h-100 fs-5">
+            <div v-if="userStore.loggedIn">
+              <div class="dropdown">
+                <a class="dropdown-toggle text-decoration-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  {{ userStore.username }}
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-dark-blue">
+                  <li>
+                    <RouterLink class="dropdown-item" to="/profile">
+                      Profile
+                    </RouterLink>
+                  </li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li>
+                    <a class="dropdown-item" href="#" @click="logoutButtonClicked">Logout</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div v-else>
+              <RouterLink class="text-light text-decoration-none px-3" to="/login">
+                Login  
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.nav-logo{
+  height: 3.75em;
+}
+</style>

src/webapp/components/pages/About.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3">
+      <div class="col">
+        <h1 class="text-center">What is Jeobeardy?</h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div class="d-flex h-100 justify-content-evenly align-items-top w-100">
+          <div class="d-flex flex-column w-100 m-5 justify-content-start align-items-center fs-3">
+            <span>
+              Jeobeardy is very similiar to Jeopardy.
+            </span>
+            <span>
+              But for you!
+            </span>
+            <span>
+              To play with your Friends!
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row mt-3">
+      <div class="col">
+        <div class="d-flex flex-column h-100 justify-content-center align-items-center w-100 pt-5 border-top border-light">
+          <h4>
+            Privacy Policy
+          </h4>
+          <p class="mb-0">
+            Jeobeardy's privacy policy is really simple: we don't collect or store any of your data, or track your usage in any way.
+          </p>
+          <p class="mb-0">
+            Only cookies that are essential to run the site are used.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="row mt-5 mb-3">
+      <div class="col">
+        <div class="d-flex flex-column h-100 justify-content-center align-items-center w-100 pt-5 border-top border-light">
+          <h4>
+            Contact
+          </h4>
+          <p class="mb-0">
+            e-mail:
+            <a href="mailto:jeobeardy@proton.me">
+              jeobeardy@proton.me
+            </a>
+          </p>
+          <p class="mb-0">
+            Source Code:
+            <a href="https://github.com/EisiBaer/Jeobeardy" target="_blank">
+              GitHub
+            </a>
+          </p>
+          <p class="mb-0">
+            License:
+            <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">
+              GNU General Public License v3 (GPL-3)
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-card {
+  height: 20rem;
+  width: 25rem;
+}
+</style>

src/webapp/components/pages/Create.vue

@@ -0,0 +1,360 @@
+<script setup>
+import { onMounted, ref, computed, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Modal } from "bootstrap";
+
+import BoardEntryEditView from '@/components/views/BoardEntryEditView.vue'; 
+import CategoryEditView from '@/components/views/CategoryEditView.vue'; 
+import BoardEditView from '@/components/views/BoardEditView.vue'; 
+import BoardCard from '@/components/blocks/BoardCard.vue';
+import GameQuestionsView from '@/components/views/GameQuestionsView.vue';
+import BoardCategoriesView from '@/components/views/BoardCategoriesView.vue';
+import GameView from '@/components/views/GameView.vue';
+import { useGameCreationStore } from '@/stores/GameCreationStore';
+import { useUserStore } from '@/stores/UserStore';
+import Board from '@/models/Board';
+import Category from '@/models/Category';
+import BoardEntry from '@/models/BoardEntry';
+import CreateActions from '@/components/blocks/CreateActions.vue';
+import GenericMultiButtonModal from '@/components/views/GenericMultiButtonModal.vue';
+
+const router = useRouter();
+const route = useRoute();
+const gameCreationStore = useGameCreationStore();
+const userStore = useUserStore();
+let navbarHeight = ref(0);
+let boardIsLoading = ref( true );
+let showingBottomView = ref( true );
+let showingAnswer = ref( true );
+let showingQuestion = ref( true );
+
+let categoryIndex = ref( -1 );
+let boardEntryIndex = ref( -1 );
+let questionIndex = ref(0);
+let selectedObject = ref( null );
+let saveRequestInProgress = ref( false );
+let saveAndExitRequestInProgress = ref( false );
+let audioInstance = ref(null);
+
+const isBoardSelected = computed( () => {
+  return selectedObject.value instanceof Board;
+});
+const getEditComponent = computed( () => {
+  if( selectedObject.value instanceof BoardEntry ){
+    return BoardEntryEditView;
+  }
+  if( selectedObject.value instanceof Category ){
+    return CategoryEditView;
+  }
+  if( selectedObject.value instanceof Board ){
+    return BoardEditView;
+  }
+  return null;
+});
+const getPropsForSelectedObjectEditView = computed( () => {
+  if( selectedObject.value instanceof Category ){
+    return {
+      categoryIndex: categoryIndex.value,
+    };
+  }
+  if( selectedObject.value instanceof BoardEntry ){
+    return {
+      categoryIndex: categoryIndex.value, 
+      boardEntryIndex: boardEntryIndex.value,
+      questionIndex: questionIndex.value,
+    }
+  }
+  return {};
+});
+const getSelectedObjectType = computed( () => {
+  if( selectedObject.value instanceof BoardEntry ){
+    return "BoardEntry";
+  }
+  return "Board";
+});
+
+function boardSelected(){
+  selectedObject.value = gameCreationStore.board;
+  categoryIndex.value = -1;
+  boardEntryIndex.value = -1;
+  showingQuestion.value = true;
+  showingAnswer.value = true;
+}
+function categorySelected( cIndex ){
+  selectedObject.value = gameCreationStore.board.categories[cIndex];
+  categoryIndex.value = cIndex;
+  boardEntryIndex.value = -1;
+}
+function boardEntrySelected( entryIndex ){
+  selectedObject.value = gameCreationStore.board.categories[categoryIndex.value].boardEntries[entryIndex];
+  boardEntryIndex.value = entryIndex;
+}
+function selectBoardEntryWithCategory( cIndex, entryIndex ){
+  categoryIndex.value = cIndex;
+  boardEntryIndex.value = entryIndex;
+  selectedObject.value = gameCreationStore.board.categories[cIndex].boardEntries[entryIndex];
+}
+function addNewBoardEntry(){
+  if( !isBoardSelected.value ){
+    gameCreationStore.addEmptyBoardEntryToCategoryOnIndex( categoryIndex.value );
+    boardEntrySelected( gameCreationStore.board.categories[categoryIndex.value].boardEntries.length - 1 ); 
+  }
+}
+function deleteBoardEntry( bEIndex ){
+  if( !isBoardSelected.value ){
+    gameCreationStore.deleteBoardEntry( categoryIndex.value, bEIndex );
+
+    let boardEntriesLen = gameCreationStore.board.categories[categoryIndex.value].boardEntries.length;
+    if( boardEntriesLen === 0 ){
+      categorySelected( categoryIndex.value );
+    } else {
+      let newIdx = bEIndex;
+      if( bEIndex === boardEntriesLen ){
+        newIdx--;
+      }
+      boardEntryIndex.value = newIdx;
+    }
+  }
+}
+
+function specificQuestionLayerSelected( index ){
+  questionIndex.value = index;
+}
+
+function playAudio( cIndex, bEIndex, qIndex ){
+  let audio = gameCreationStore.audios.find( audioEntry => audioEntry.cIndex === cIndex && audioEntry.bEIndex === bEIndex && audioEntry.qIndex === qIndex.value );
+
+    if( audio && !audioInstance.value ){
+      audioInstance.value = new Audio( audio.url );
+      audioInstance.value.play();
+    }
+}
+
+function stopAudio(){
+  if( audioInstance.value ){
+    audioInstance.value.pause();
+    audioInstance.value = null;
+  }
+}
+
+function showQuestion(){
+  showingQuestion.value = true;
+}
+function showAnswer(){
+  showingAnswer.value = true;
+}
+function hideQuestion(){
+  showingQuestion.value = false;
+}
+function hideAnswer(){
+  showingAnswer.value = false;
+}
+
+function saveBoard(){
+  saveRequestInProgress.value = true;
+  gameCreationStore.saveBoard()
+  .catch( ( error ) => {
+    console.error( error );
+    openModal("failedSavingModal")
+  })
+  .finally( () => {
+    saveRequestInProgress.value = false;
+  });
+}
+
+function saveBoardAndExit(){
+  saveAndExitRequestInProgress.value = true;
+  gameCreationStore.saveBoard()
+  .then( () => {
+    exitCreatePage();
+  })
+  .catch( ( error ) => {
+    console.error( error );
+    openModal("failedSavingModal")
+  })
+  .finally( () => {
+    saveAndExitRequestInProgress.value = false;
+  });
+}
+
+function handleModalButtonClick( buttonIndex ){
+  switch( buttonIndex ){
+    case 0:
+      exitCreatePage();
+      break;
+    case 1:
+    default:
+      return;
+  }
+}
+
+function exitCreatePage(){
+  router.push("/profile");
+}
+
+//Maybe extract
+function openModal( modalId ){
+  let modalElement = document.getElementById( modalId );
+  let modalInstance = Modal.getOrCreateInstance( modalElement );
+  modalInstance.show();
+}
+
+function toggleBottomView(){
+  showingBottomView.value = !showingBottomView.value;
+}
+
+onMounted(()=>{
+  navbarHeight.value = document.getElementById("navbar").clientHeight;
+});
+
+if( route.params.boardId !== undefined ){
+  userStore.userService.getBoardFromUser( route.params.boardId )
+  .then( ( res ) => {
+    if( res.data.success ){
+      gameCreationStore.setBoardWithConversion( res.data.board );
+      selectedObject.value = gameCreationStore.board;
+    } else {
+      console.debug( res );
+    }
+  })
+  .catch( ( error ) => {
+    console.error(error);
+  })
+  .finally( () => {
+    boardIsLoading.value = false;
+  });
+} else {
+  gameCreationStore.board = new Board( undefined, "New Board", [] );
+  selectedObject.value = gameCreationStore.board;
+  boardIsLoading.value = false;
+}
+
+</script>
+
+<template>
+  <div class="container-fluid px-0" :style="{'height': 'calc(100vh - ' + navbarHeight + 'px)'}">
+    <div v-if="boardIsLoading" class="h-100 w-100 d-flex justify-content-center align-items-center">
+      <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-spinner" spin size="4x"/>
+    </div>
+    <template v-else>
+      <div class="row h-100 w-100 mx-0">
+        <div class="col-9 px-0 position-relative">
+          <div class="d-flex flex-column w-100">
+            <GameView 
+              :objToDisplay="getSelectedObjectType"
+              :board="gameCreationStore.board"
+              :cIndex="categoryIndex"
+              :bEIndex="boardEntryIndex"
+              :isQuestionRevealed="showingQuestion"
+              :isAnswerRevealed="showingAnswer"
+              :showingBottomView="showingBottomView"
+              :isHost="true"
+              @showBoard="boardSelected"
+              @showQuestion="showQuestion"
+              @showAnswer="showAnswer"
+              @hideQuestion="hideQuestion"
+              @hideAnswer="hideAnswer"
+              @boardEntryClicked="selectBoardEntryWithCategory"
+              @specificQuestionLayerSelected="specificQuestionLayerSelected"
+              @playAudio="playAudio"
+              @stopAudio="stopAudio"
+            />
+            <div v-if="showingBottomView" id="bottom-view" class="d-flex border-top border-2 border-pink-accent-primary">
+
+              <div class="border-end border-1 border-pink-accent-primary">
+                <BoardCard
+                  :boardName="gameCreationStore.board.boardName"
+                  :isSelected="isBoardSelected"
+                  @boardCardClicked="boardSelected"
+                />
+              </div>
+              <div class="d-flex border-end border-1 border-pink-accent-primary" :class="[{ 'overflow-auto': isBoardSelected }]">
+                <div class="d-flex">
+                  <BoardCategoriesView
+                    :categories="gameCreationStore.board.categories"
+                    :selectedCategoryIndex="categoryIndex"
+                    :isSelected="!isBoardSelected && boardEntryIndex === -1"
+                    @categorySelected="categorySelected"
+                  />
+                </div>
+              </div>
+
+              <template v-if="!isBoardSelected" >
+                <GameQuestionsView
+                :entries="gameCreationStore.board.categories[categoryIndex].boardEntries"
+                :selectedEntryIndex="boardEntryIndex"
+                :isEditable="true"            
+                @boardEntrySelected="boardEntrySelected"
+                @addNewBoardEntry="addNewBoardEntry"
+                @deleteBoardEntry="deleteBoardEntry"
+                />
+              </template>
+            </div>
+          </div>
+          <div class="position-absolute bottom-0 end-0 me-5">
+            <div class="border border-2 border-pink-accent-primary border-bottom-0 py-2 px-3 rounded-top bg-primary pointer" @click="toggleBottomView">
+              <font-awesome-icon v-if="showingBottomView" class="text-pink-accent-primary" icon="fa-solid fa-angle-down"/>
+              <font-awesome-icon v-else class="text-pink-accent-primary" icon="fa-solid fa-angle-up"/>
+            </div>
+          </div>
+        </div>
+        <div class="col-3 border-start border-2 border-pink-accent-primary px-0 h-100">
+          <div class="d-flex flex-column w-100 justify-content-between h-100">
+            <div class="overflow-auto">
+              <component :is="getEditComponent" v-bind="getPropsForSelectedObjectEditView" @questionIndexChanged="specificQuestionLayerSelected"/>
+            </div>
+            <div id="save-cancel-button-div" class="w-100 border-top border-pink-accent-primary">
+              <CreateActions
+                :saveRequestInProgress="saveRequestInProgress"
+                :saveAndExitRequestInProgress="saveAndExitRequestInProgress"
+                @save="saveBoard"
+                @saveAndExit="saveBoardAndExit"
+                @discardAndExit="openModal('discardConfirmModal')"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </template>
+
+    <GenericMultiButtonModal
+      :id="'discardConfirmModal'"
+      :hasTitle="true"
+      :title="'Are you sure?'"
+      :modalText="'Are you sure you want to discard any changes made to the Board?'"
+      :buttonList="[
+        {
+					text: 'Yes, discard!',
+					emitsEvent: 'discardClicked',
+					bgColorClass: 'btn-danger',
+				},
+				{
+					text: 'Cancel',
+					bgColorClass: 'btn-pink-accent-primary',
+				},
+      ]"
+      @buttonClicked="handleModalButtonClick"
+    />
+
+    <GenericMultiButtonModal
+      :id="'failedSavingModal'"
+      :hasTitle="true"
+      :title="'Failed to save'"
+      :modalText="'Something went wrong while saving!'"
+      :buttonList="[
+				{
+					text: 'Ok',
+					bgColorClass: 'btn-pink-accent-primary',
+				},
+      ]"
+    />
+
+  </div>
+</template>
+
+<style scoped>
+.height-bottom-view{
+  height: 9rem;
+}
+</style>

src/webapp/components/pages/Game.vue

@@ -0,0 +1,457 @@
+<script setup>
+import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onBeforeRouteLeave, useRoute } from 'vue-router';
+
+import PlayersView from '@/components/views/PlayersView.vue'; 
+import PlayerInteractionView from '@/components/views/PlayerInteractionView.vue'; 
+import HostInteractionView from '@/components/views/HostInteractionView.vue'; 
+import GameView from '@/components/views/GameView.vue';
+import { useGameStore } from '@/stores/GameStore';
+import Board from '@/models/Board';
+import BoardEntry from '@/models/BoardEntry';
+
+import BuzzerSound from "../../assets/sounds/buzzbuzz.mp3";
+import NoBuzzerSound from "../../assets/sounds/dingdongy.mp3";
+import CorrectAudio from "../../assets/sounds/correct.mp3";
+import WrongAudio from "../../assets/sounds/wrong.mp3";
+
+const gameStore = useGameStore();
+const route = useRoute();
+let navbarHeight = ref(0);
+let boardIsLoading = ref( true );
+let buzzBuzz = new Audio( BuzzerSound );
+buzzBuzz.volume = 0.3
+let buzzNoBuzz = new Audio( NoBuzzerSound );
+buzzNoBuzz.volume = 0.7
+let answerCorrectAudio = new Audio( CorrectAudio );
+let answerWrongAudio = new Audio( WrongAudio );
+
+
+let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
+let hostname = window.location.hostname;
+if( window.location.hostname.includes("localhost" ) ){
+    hostname += ':3000';
+}
+
+const API_URL = `${protocol}${hostname}/api`;
+
+
+let categoryIndex = ref( -1 );
+let boardEntryIndex = ref( -1 );
+let selectedObject = ref( null );
+let questionIndexForAudio = ref(0);
+let audioInstance = ref(null);
+let showingAnswer = ref( false );
+let showingQuestion = ref( false );
+
+
+const isBoardSelected = computed( () => {
+  return selectedObject.value instanceof Board;
+});
+
+const getSelectedObjectType = computed( () => {
+  if( selectedObject.value instanceof BoardEntry ){
+    return "BoardEntry";
+  }
+  return "Board";
+});
+
+const playerIsAnswering = computed( () => {
+  return gameStore.players.findIndex( playerEntry => playerEntry.isAnswering && playerEntry._id === gameStore.playerId ) !== -1;
+});
+
+const anyPlayerIsAnswering = computed( () => {
+  return gameStore.players.findIndex( playerEntry => playerEntry.isAnswering ) !== -1;
+});
+
+
+function boardSelected(){
+  selectedObject.value = gameStore.board;
+  categoryIndex.value = -1;
+  boardEntryIndex.value = -1;
+}
+function selectBoardEntryWithCategory( cIndex, entryIndex ){
+  categoryIndex.value = cIndex;
+  boardEntryIndex.value = entryIndex;
+  selectedObject.value = gameStore.board.categories[cIndex].boardEntries[entryIndex];
+}
+
+function setUpListeners(){
+  gameStore.addSocketListener("boardEntrySelected", ( data ) => {
+    showingAnswer.value = false;
+    showingQuestion.value = false;
+    selectBoardEntryWithCategory( data.payload.categoryIndex, data.payload.boardEntryIndex );
+  });
+  gameStore.addSocketListener("boardSelected", ( _data ) => {
+    showingAnswer.value = false;
+    showingQuestion.value = false;
+    if( !gameStore.isHost ){
+      for( let i in gameStore.players ){
+        delete gameStore.players[i].currentTextAnswer;
+      }
+    }
+    boardSelected();
+  });
+  gameStore.addSocketListener("pointsAdjusted", ( data ) => {
+    gameStore.players = data.payload.players;
+    let self = data.payload.players.find( playerEntry => playerEntry._id === gameStore.playerId );
+    if( self ){
+      gameStore.acceptAnswers = data.payload.acceptAnswers && self.acceptAnswers;
+    } else {
+      gameStore.acceptAnswers = data.payload.acceptAnswers;
+    }
+  });
+  gameStore.addSocketListener("playerAnswerRevealed", ( data ) => {
+    gameStore.setAnswersForPlayers( data.payload.revealedAnswers );
+  });
+  gameStore.addSocketListener("playerAnswerTextUpdated", ( data ) => {
+    let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === data.payload.playerId );
+    if( playerIndex !== -1 ){
+      gameStore.players[playerIndex].currentTextAnswer = data.payload.updatedText;
+    }
+  });
+  gameStore.addSocketListener("audioPlaying", ( _data ) => {
+    if( !audioInstance.value ){
+      let audioUrl = API_URL + '/game/file/' + gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].questions[questionIndexForAudio.value].filename;
+      audioInstance.value = new Audio( audioUrl );
+      audioInstance.value.onended = (_event) => {
+        audioInstance.value = null;
+      }
+      audioInstance.value.play();
+    }
+  });
+  gameStore.addSocketListener("audioStopped", ( _data ) => {
+    if( audioInstance.value ){
+      audioInstance.value.pause();
+      audioInstance.value = null;
+    }
+  });
+  gameStore.addSocketListener("playerBuzzered", ( data ) => {
+    playerBuzzered( data );
+    if( audioInstance.value ){
+      audioInstance.value.pause();
+      audioInstance.value = null;
+    }
+  });
+  gameStore.addSocketListener("questionRevealed", ( _data ) => {
+    gameStore.acceptAnswers = true;
+    showingQuestion.value = true;
+  });
+  gameStore.addSocketListener("questionHidden", ( _data ) => {
+    gameStore.acceptAnswers = false;
+    showingQuestion.value = false;
+  });
+  gameStore.addSocketListener("answerRevealed", ( _data ) => {
+    gameStore.acceptAnswers = false;
+    gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].isAnswered = true;
+    showingAnswer.value = true;
+  });
+  gameStore.addSocketListener("answerHidden", ( _data ) => {
+    showingAnswer.value = false;
+  });
+  gameStore.addSocketListener("questionLocked", ( _data ) => {
+    gameStore.acceptAnswers = false;
+  });
+  gameStore.addSocketListener("playerAnswersRevealed", ( data ) => {
+    for( let playerAnswer of data.payload.revealedAnswers ){
+      let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === playerAnswer.playerId );
+      if( playerIndex !== -1 ) {
+        gameStore.players[playerIndex].currentTextAnswer = playerAnswer.answer;
+      }
+    }
+  });
+  gameStore.addSocketListener("questionAnswered", ( data ) => {
+    let cIndex = data.payload.categoryIndex;
+    let bEIndex = data.payload.boardEntryIndex;
+    gameStore.board.categories[cIndex].boardEntries[bEIndex].isAnswered = true;
+  });
+  gameStore.addSocketListener("questionNotAnswered", ( data ) => {
+    let cIndex = data.payload.categoryIndex;
+    let bEIndex = data.payload.boardEntryIndex;
+    gameStore.board.categories[cIndex].boardEntries[bEIndex].isAnswered = false;
+  });
+  gameStore.addSocketListener("playerLeft", ( data ) => {
+    let playerId = data.payload.player._id;
+    let playerName = data.payload.player.name;
+    let playerPoints = data.payload.player.points;
+    if( gameStore.isHost ){
+      alert( `${playerName} left the game (Points: ${playerPoints})`);
+    }
+    console.info(`${playerName} left the game (Points: ${playerPoints})`);
+    let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === playerId );
+    if( playerIndex !== -1 ){
+      gameStore.players.splice( playerIndex, 1 );
+    }
+  });
+}
+
+function playerBuzzered( data ){
+  gameStore.acceptAnswers = false;
+  if( gameStore.playerId === data.payload.playerId ){
+    buzzBuzz.play();
+  } else {
+    if( !gameStore.isHost ){
+      buzzNoBuzz.play();
+    }
+  }
+  let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === data.payload.playerId );
+  if( playerIndex !== -1 ){
+    gameStore.players[playerIndex].isAnswering = true;
+  }
+}
+
+function removeListeners(){
+  gameStore.removeSocketListener("boardEntrySelected");
+  gameStore.removeSocketListener("boardSelected");
+  gameStore.removeSocketListener("pointsAdjusted");
+  gameStore.removeSocketListener("playerAnswerRevealed");boardIsLoading
+  gameStore.removeSocketListener("playerAnswerTextUpdated");
+  gameStore.removeSocketListener("audioPlaying")
+  gameStore.removeSocketListener("audioStopped")
+  gameStore.removeSocketListener("playerBuzzered");
+  gameStore.removeSocketListener("questionRevealed");
+  gameStore.removeSocketListener("questionHidden");
+  gameStore.removeSocketListener("answerRevealed");
+  gameStore.removeSocketListener("answerHidden");
+  gameStore.removeSocketListener("questionLocked");
+  gameStore.removeSocketListener("playerAnswersRevealed");
+  gameStore.removeSocketListener("questionAnswered");
+  gameStore.removeSocketListener("questionNotAnswered");
+  gameStore.removeSocketListener("playerLeft");
+}
+
+function showBoard(){
+  gameStore.sendEvent( "selectBoard", {} );
+}
+function boardEntryClicked( cIndex, entryIndex ){
+  if( gameStore.isHost ){
+    gameStore.sendEvent( "selectBoardEntry", { categoryIndex: cIndex, boardEntryIndex: entryIndex } );
+  }
+}
+
+function buzzerPressed(){
+  if( gameStore.acceptAnswers ){
+    gameStore.sendEvent( "pressBuzzer", {} );
+  }
+}
+
+function answerTextUpdated( updatedText ){
+  if( gameStore.acceptAnswers ){
+    gameStore.sendEvent( "updateAnswerText", { updatedText: updatedText } );
+  }
+}
+
+function playAudio( _cIndex, _bEIndex, qIndex ){
+  questionIndexForAudio.value = Number(qIndex);
+  gameStore.sendEvent("playAudioForQuestion", {} );
+}
+
+function stopAudio(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("stopAudioForQuestion", {} );
+  }
+}
+
+function showQuestion(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent( "showQuestion", {} );
+  }
+}
+function showAnswer(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("showAnswer", {} );
+  }
+}
+function hideQuestion(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("hideQuestion", {} );
+  }
+}
+function hideAnswer(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("hideAnswer", {} );
+  }
+}
+
+function questionAnswered( cIndex, bEIndex ){
+  let payload = {
+    categoryIndex: cIndex,
+    boardEntryIndex: bEIndex,
+  }
+  gameStore.sendEvent("questionAnswered", payload );
+}
+function questionAnsweredRevert( cIndex, bEIndex ){
+  let payload = {
+    categoryIndex: cIndex,
+    boardEntryIndex: bEIndex,
+  }
+  gameStore.sendEvent("questionAnsweredRevert", payload );
+}
+
+function manualPointsAdjustment( playerId, playerName, points ){
+  let payload = {
+    reopenQuestion: false,
+    playerId: playerId,
+    playerName: playerName,
+    pointsAdjustment: points,
+  }
+  gameStore.sendEvent( "addPointsToPlayer", payload );
+}
+function answerRuled( playerId, playerName, points, reopenQuestion ){
+  let payload = {
+    reopenQuestion: reopenQuestion,
+    playerId: playerId,
+    playerName: playerName,
+    pointsAdjustment: points,
+  }
+  gameStore.sendEvent( "addPointsToPlayer", payload );
+}
+
+function lockQuestion(){
+  gameStore.sendEvent("lockQuestion", {});
+}
+
+function revealPlayerAnswers( playerIds ){
+  let payload = [];
+  let ids;
+  if( playerIds ){
+    ids = playerIds;
+  } else {
+    ids = gameStore.players.map( playerEntry => playerEntry._id );
+  }
+  for( let playerId of ids ){
+    let player = gameStore.players.find( playerEntry => playerEntry._id === playerId );
+    if( player ){
+      payload.push({
+        playerId: player._id,
+        answer: player.currentTextAnswer,
+      });
+    }
+  }
+  gameStore.sendEvent("revealPlayerAnswers", payload);
+}
+
+gameStore.getBoardToGame( route.params.gameId )
+.then( () => {
+  selectedObject.value = gameStore.board;
+})
+.catch( ( err ) => {
+  console.debug( err );
+  alert("An error occured while loading the board");
+})
+.finally( () => {
+  boardIsLoading.value = false;
+});
+
+onMounted(()=>{
+  setUpListeners();
+  navbarHeight.value = document.getElementById("navbar").clientHeight;
+});
+
+onUnmounted( () => {
+  removeListeners();
+});
+
+onBeforeRouteLeave((to, from) => {
+  const answer = window.confirm(
+    'Do you really want to leave the lobby?'
+  )
+  // cancel the navigation and stay on the same page
+  if (!answer) {
+    return false
+  } else {
+    gameStore.closeWebSocket();
+  } 
+});
+
+//TODO List:
+//  -Buzzer sound
+//  -Profile Pic
+//  -More Question Types
+//  -Players selecting BoardEntry
+
+</script>
+
+<template>
+  <div class="container-fluid px-0" :style="{'height': 'calc(100vh - ' + navbarHeight + 'px)'}">
+    <div v-if="boardIsLoading" class="h-100 w-100 d-flex justify-content-center align-items-center">
+      <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-spinner" spin size="4x"/>
+    </div>
+    <template v-else>
+      <div class="row h-100 w-100 mx-0">
+        <div class="col-9 px-0 position-relative">
+          <div class="d-flex flex-column w-100">
+            <GameView 
+              :objToDisplay="getSelectedObjectType"
+              :isQuestionRevealed="showingQuestion"
+              :isAnswerRevealed="showingAnswer"
+              :board="gameStore.board"
+              :cIndex="categoryIndex"
+              :bEIndex="boardEntryIndex"
+              :showingBottomView="true"
+              :isHost="gameStore.isHost"
+              :anyPlayerIsAnswering="anyPlayerIsAnswering"
+              :isBeingPlayed="isBeingPlayed"
+              @showBoard="showBoard"
+              @showQuestion="showQuestion"
+              @showAnswer="showAnswer"
+              @hideQuestion="hideQuestion"
+              @hideAnswer="hideAnswer"
+              @boardEntryClicked="boardEntryClicked"
+              @playerBuzzered="playerBuzzered"
+              @playAudio="playAudio"
+              @stopAudio="stopAudio"
+              @questionAnswered="questionAnswered"
+              @questionAnsweredRevert="questionAnsweredRevert"
+            />
+          </div>
+        </div>
+        <div class="col-3 border-start border-2 border-pink-accent-primary px-0 h-100">
+          <div class="d-flex flex-column w-100 justify-content-between h-100">
+            <div class="overflow-auto">
+              <PlayersView
+                :players="gameStore.players"
+                :questionPoints="(isBoardSelected ? 0 : Number(selectedObject.points) )"
+                :answerInteraction="(isBoardSelected ? '' : selectedObject.answer.answerInteraction )"
+                :isHost="gameStore.isHost"
+                :acceptAnswers="gameStore.acceptAnswers && !isBoardSelected"
+                @manualPointsAdjustment="manualPointsAdjustment"
+                @answerRuled="answerRuled"
+                @revealPlayerAnswers="revealPlayerAnswers"
+              />
+            </div>
+
+            <PlayerInteractionView
+              v-if="!gameStore.isHost"
+              :objToDisplay="getSelectedObjectType"
+              :board="gameStore.board"
+              :cIndex="categoryIndex"
+              :bEIndex="boardEntryIndex"
+              :playerIsAnswering="playerIsAnswering"
+              :acceptAnswers="gameStore.acceptAnswers"
+              @buzzerPressed="buzzerPressed"
+              @answerTextUpdated="answerTextUpdated"
+            />
+            <HostInteractionView
+              v-if="gameStore.isHost"
+              :objToDisplay="getSelectedObjectType"
+              :board="gameStore.board"
+              :cIndex="categoryIndex"
+              :bEIndex="boardEntryIndex"
+              :playerIsAnswering="playerIsAnswering"
+              :acceptAnswers="gameStore.acceptAnswers"
+              @lockQuestion="lockQuestion"
+              @revealPlayerAnswers="revealPlayerAnswers"
+              @questionAnswered="questionAnswered"
+              @questionAnsweredRevert="questionAnsweredRevert"
+            />
+          </div>
+
+        </div>
+      </div>
+    </template>
+
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/components/pages/Home.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { useGameStore } from "@/stores/GameStore";
+import { useUserStore } from "@/stores/UserStore";
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+
+const gameStore = useGameStore();
+const userStore = useUserStore();
+const router = useRouter();
+
+let errorMessageJoin = ref("");
+let errorMessageHost = ref("");
+let joinRequest = ref(false);
+let hostRequest = ref(false);
+
+let gameCodeInput = ref("");
+
+function hostButtonClicked(_event) {
+  if( !userStore.loggedIn ){
+    router.push("/login");
+    return;
+  }
+
+  hostRequest.value = true;
+
+  gameStore.setupNewHostGame()
+  .then( (res) => {
+    return gameStore.setupWebsocket();
+  })
+  .then( () => {
+    return gameStore.hostNewGame()
+  })
+  .then( ( gameId ) => {
+    router.push("/lobby/" + gameId);
+  })
+  .catch( (err) => {
+    console.error( err );
+    errorMessageHost.value = "An unexpected error occured: " + err;
+    setTimeout( () => {
+      errorMessageHost.value = "";
+    }, 2500);
+  })
+  .finally( () => {
+    hostRequest.value = false;
+  });
+}
+
+function joinButtonClicked(_event) {
+  joinRequest.value = true;
+  gameStore.prepareGameWithCode( gameCodeInput.value )
+  .then( () => {
+    return gameStore.setupWebsocket();
+  })
+  .then( res => {
+    router.push("/join");
+  })
+  .catch( err => {
+    errorMessageJoin.value = err.message;
+    setTimeout( () => {
+      errorMessageJoin.value = "";
+    }, 2500);
+    console.error(err);
+  })
+  .finally( () => {
+    joinRequest.value = true;
+  });
+}
+
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3 mb-5">
+      <div class="col">
+        <h1 class="text-center">Welcome to Jeobeardy!</h1>
+      </div>
+    </div>
+    <div class="row">
+    <!-- <div class="d-flex h-100 justify-content-evenly align-items-top w-100"> -->
+      <div class="col-12 col-md-6 mb-5 mb-md-0 d-flex flex-column justify-content-start align-items-center">
+        <!-- <RouterLink to="/join" class="text-decoration-none fw-bold"> -->
+        <div class="card bg-primary home-card">
+          <div class="card-header">
+            <h2 class="m-2">Join a Game</h2>
+          </div>
+          <div class="card-body text-center">
+            <div class="d-flex flex-column h-100">
+              <div class="fs-4 flex-grow-1 d-flex align-items-center justify-content-center">
+                Enter the Code you get from your host and join the lobby
+              </div>
+              <div class="d-flex px-3">
+                <div class="flex-grow me-3">
+                  <input v-model="gameCodeInput" class="form-control form-control-lg bg-gray text-center text-dark" type="text" name="game-id" id="game-id" />
+                </div>
+                <div>
+                  <button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="joinButtonClicked">
+                    Join<font-awesome-icon class="ps-1" icon="fa-solid fa-right-to-bracket" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-warning mt-3">
+          {{ errorMessageJoin }}
+        </div>
+        <!-- </RouterLink> -->
+      </div>
+      <div class="col-12 col-md-6 d-flex flex-column justify-content-start align-items-center">
+        <div class="card bg-primary home-card">
+          <div class="card-header">
+            <h2 class="m-2">Host a Game</h2>
+          </div>
+          <div class="card-body text-center">
+            <div class="d-flex flex-column h-100">
+              <div class="fs-4 flex-grow-1 d-flex align-items-center justify-content-center">
+                Create a Lobby for your friends to join. You host the game!
+              </div>
+              <div class="px-3">
+                <button class="btn btn-lg btn-pink-accent-primary" @click="hostButtonClicked">
+                  Host
+                  <font-awesome-icon v-if="!hostRequest" class="ms-1" icon="fa-solid fa-users" />
+                  <font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-warning mt-3">
+          {{ errorMessageHost }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-card {
+  height: 20rem;
+  width: 25rem;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/pages/Join.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/UserStore";
+import { useGameStore } from "@/stores/GameStore";
+import { ref } from "vue";
+
+let errorMessage = ref("");
+let playerName = ref("");
+let joinRequest = ref(false);
+let forwardTo = { name: "gameLobby", params: { gameId: -1 } };
+
+const router = useRouter();
+const route = useRoute();
+const gameStore = useGameStore();
+
+function joinButtonClicked(_event) {
+  if( joinRequest.value === true ){
+    return;
+  }
+  joinRequest.value = true;
+  gameStore.joinGame( playerName.value )
+  .then( ( gameId ) => {
+    forwardTo.params.gameId = gameId;
+    router.push( forwardTo );
+  })
+  .catch( ( err ) => {
+    errorMessage.value = err.message;
+  })
+  .finally( () => {
+    joinRequest.value = false;
+  });
+}
+
+let gameId = route.params.gameId;
+if( gameId ){
+  joinRequest.value = true;
+  let localIsHost = false;
+  gameStore.checkExistingGame( gameId )
+  .then( ( data ) => {
+    localIsHost = data.isHost;
+    switch( data.gameState ){
+      case "IN_LOBBY":
+        forwardTo.name = "gameLobby";
+        break;
+      case "IN_PROGRESS":
+        forwardTo.name = "gameWithGameId";
+        break;
+      case "ENDED":
+        throw new Error("Game already ended");
+      case "CREATED":
+        throw new Error("Game is not yet ready to accept join requests");
+    }
+    return gameStore.setupWebsocket();
+  })
+  .then( () => {
+    if( localIsHost ){
+      return gameStore.continueHosting();
+    } else {
+      return false;
+    }
+  })
+  .then( ( gameId ) => {
+    if( gameId !== false ){
+      router.push( { name: "gameWithGameId", params: { gameId: gameId } } );
+    }
+  })
+  .catch( ( err ) => {
+    console.debug( err );
+    alert(err);
+  })
+  .finally( () => {
+    joinRequest.value = false;
+  })
+}
+
+
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3">
+      <div class="col">
+        <h1 class="text-center">Choose your username for this Jeobeardy game!</h1>
+      </div>
+    </div>
+    <div class="d-flex h-100 justify-content-evenly align-items-center w-100">
+      <div class="d-flex w-100 m-5 justify-content-center">
+        <div class="card bg-primary join-card">
+          <div class="card-header text-center">
+            <h2 class="m-2">Choose a Username</h2>
+          </div>
+          <div class="card-body text-center">
+            <div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
+              <div class="d-flex px-3 w-100">
+                <div class="w-100 text-start">
+                  <label for="username" class="fs-5 mb-1">Username</label>
+                  <input
+                    v-model="playerName"
+                    v-focus
+                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    type="text"
+                    name="playername"
+                    id="playername"
+                    placeholder="Username"
+                    @keyup.enter="joinButtonClicked"
+                  />
+                </div>
+              </div>
+              <div class="d-flex justify-content-center w-100 px-3">
+                <button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="joinButtonClicked">
+                  Join
+                  <font-awesome-icon v-if="!joinRequest" class="ms-1" icon="fa-solid fa-right-to-bracket" />
+                  <font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-warning">
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.join-card {
+  min-height: 20rem;
+  min-width: 25rem;
+}
+</style>

src/webapp/components/pages/Lobby.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useRouter, onBeforeRouteLeave, useRoute } from 'vue-router';
+
+import { useGameStore } from '@/stores/GameStore';
+
+import BoardListView from "@/components/views/BoardListView.vue";
+
+const router = useRouter();
+const route = useRoute();
+const gameStore = useGameStore();
+
+let selectedBoardId = ref("0");
+let showBoardMessage = ref( false );
+
+
+function startGame(){
+  if( selectedBoardId.value !== "0" ){
+    gameStore.sendEvent( "startGame", {} );
+  } else {
+    showBoardMessage.value = true;
+  }
+}
+
+function boardSelected( id ){
+  showBoardMessage.value = false;
+  gameStore.sendEvent( "selectBoardForGame", { boardId: id } );
+}
+
+onMounted( () => {
+  gameStore.addSocketListener("gameStarted", ( data ) => {
+    router.push( { name: "gameWithGameId", params: { gameId: route.params.gameId } } );
+  });
+
+  gameStore.addSocketListener("boardSelectedForGame", ( data ) => {
+    selectedBoardId.value = data.payload.boardId;
+  });
+});
+
+onUnmounted( () => {
+  gameStore.removeSocketListener("boardSelectedForGame");
+  gameStore.removeSocketListener("gameStarted");
+})
+
+onBeforeRouteLeave((to, from) => {
+  if( ["game", "gameWithGameId", "gameWithGameIdAndBoardId" ].includes( to.name ) ){
+    return true;
+  }
+  const answer = window.confirm(
+    'Do you really want to leave the lobby?'
+  )
+  // cancel the navigation and stay on the same page
+  if (!answer) {
+    return false
+  } else {
+    gameStore.closeWebSocket();
+  } 
+});
+
+</script>
+
+<template>
+  <div class="container mt-5">
+    <div class="row">
+      <div class="col d-flex justify-content-center align-items-center">
+        <span class="fs-4">Gamecode: <span class="fs-3" @click="log">{{ gameStore.gameCode }}</span></span>
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="col text-center">
+        Waiting for host to start
+        <font-awesome-icon class="ms-1" icon="fa-solid fa-spinner" spin />
+      </div>
+    </div>
+    <template v-if="gameStore.isHost" >
+      <div class="row">
+        <div class="col">
+          <BoardListView
+            :selectedBoard="selectedBoardId"
+            @boardSelected="boardSelected"
+          />
+        </div>
+      </div>
+      <div v-show="showBoardMessage" class="row">
+        <div class="col">
+          <div class="d-flex justify-content-center align-items-center">
+            <div class="d-flex justify-content-center align-items-center bg-wrong-accent-primary px-2 py-1 rounded">
+              <font-awesome-icon class="me-1" icon="fa-solid fa-circle-exclamation" />
+              <span>
+                Please select a board before starting the game
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-if="gameStore.isHost" class="row my-3">
+      <div class="col text-center">
+        <button class="btn btn-pink-accent-primary" @click="startGame">
+          <span class="align-middle">
+            Start Game
+          </span>
+          <font-awesome-layers class="ms-1" fixed-width>
+            <font-awesome-icon icon="fa-solid fa-square" size="xl" />
+            <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-play" size="sm" />
+            <!-- <font-awesome-icon class="align-middle border-dark rounded" icon="fa-solid fa-play" border /> -->
+          </font-awesome-layers>
+        </button>
+      </div>
+    </div>
+    <div v-if="gameStore.players.length === 0" class="row">
+      <div class="col">
+        <div class="d-flex justify-content-center align-items-center">
+          No Players in the lobby, yet.
+        </div>
+      </div>
+    </div>
+    <div v-else class="row">
+      <template v-for="(player, playerIdx) in gameStore.players" :key="player.id">
+        <div class="col-4 my-3">
+          <div class="card bg-primary">
+            <div class="card-body fs-4 text-center">
+              {{ playerIdx + 1 }} - {{ player.name }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/components/pages/Login.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/UserStore";
+import { ref } from "vue";
+
+let username = ref("");
+let password = ref("");
+let loginRequest = ref(false);
+let errorMessage = ref("");
+
+const router = useRouter();
+const userStore = useUserStore();
+
+function signUpButtonClicked(_event) {
+  router.push("/signup");
+}
+
+function loginButtonClicked(_event) {
+  loginRequest.value = true;
+  userStore
+    .login(username.value, password.value)
+    .then((response) => {
+      loginRequest.value = false;
+      if (response.data.success === false) {
+        errorMessage.value = response.data.error;
+        setTimeout(() => {
+          errorMessage.value = "";
+        }, 2500);
+      } else {
+        userStore.setUser(response.data.user);
+        router.push("/profile");
+      }
+    })
+    .catch((err) => {
+      loginRequest.value = false;
+      errorMessage.value = "An error occured while logging you in";
+      setTimeout(() => {
+        errorMessage.value = "";
+      }, 2500);
+      console.debug(err);
+    });
+}
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3">
+      <div class="col">
+        <h1 class="text-center">Login to your Jeobeardy Account!</h1>
+      </div>
+    </div>
+    <div class="d-flex h-100 justify-content-evenly align-items-center w-100">
+      <div class="d-flex flex-column m-5 justify-content-center align-items-center">
+        <div class="card bg-primary login-card">
+          <div class="card-header">
+            <h2 class="m-2">Login</h2>
+          </div>
+          <div class="card-body text-center">
+            <div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
+              <div class="d-flex px-3 w-100">
+                <div class="w-100 text-start">
+                  <label for="username" class="fs-5 mb-1">Username</label>
+                  <input
+                    v-model="username"
+                    v-focus
+                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    type="text"
+                    name="username"
+                    id="username"
+                    placeholder="Username"
+                    @keyup.enter="loginButtonClicked"
+                  />
+                  <label for="password" class="fs-5 mb-1">Password</label>
+                  <input
+                    v-model="password"
+                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    type="password"
+                    name="password"
+                    id="password"
+                    placeholder="Password"
+                    @keyup.enter="loginButtonClicked"
+                  />
+                </div>
+              </div>
+              <div class="d-flex justify-content-between w-100 px-3">
+                <button class="btn btn-sm btn-primary text-nowrap" @click="signUpButtonClicked">Sign Up</button>
+                <button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="loginButtonClicked">
+                  Login
+                  <font-awesome-icon v-if="!loginRequest" class="ms-1" icon="fa-solid fa-right-to-bracket" />
+                  <font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-warning mt-3">
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-card {
+  min-height: 20rem;
+  width: 25rem;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/pages/Profile.vue

@@ -0,0 +1,46 @@
+<script setup>
+
+import BoardListView from '@/components/views/BoardListView.vue';
+import { useUserStore } from "@/stores/UserStore";
+import { useLoginCheck } from "@/composables/loginCheck";
+import { useRouter } from 'vue-router';
+
+useLoginCheck();
+
+const router = useRouter();
+const userStore = useUserStore();
+
+function boardSelected( boardId ){
+  if( boardId ){
+    router.push({
+      name: "createBoardWithParams",
+      params: { boardId: boardId },
+    });
+  } else {
+    router.push( { name: "createBoard" });
+  }
+}
+
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3">
+      <div class="col">
+        <h1 class="text-center">Hi, {{ userStore.username }}!</h1>
+      </div>
+    </div>
+    <BoardListView @boardSelected="boardSelected"/>
+    <div class="row">
+      <div class="col">
+        <button class="btn btn-pink-accent-primary" @click="boardSelected()">
+          New Board
+          <font-awesome-icon icon="fa-solid fa-plus-square" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/pages/Signup.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/UserStore";
+import { ref } from "vue";
+
+let username = ref("");
+let password = ref("");
+let passwordCheck = ref("");
+let signupRequest = ref(false);
+let errorMessage = ref("");
+
+const router = useRouter();
+const userStore = useUserStore();
+
+function singUpButtonClicked(_event) {
+  if( !areInputsValid() ){
+    return;
+  }
+
+  signupRequest.value = true;
+  userStore.signup(username.value, password.value)
+  .then((response) => {
+    signupRequest.value = false;
+    if (response.data.success === false) {
+      errorMessage.value = response.data.error;
+      setTimeout(() => {
+        errorMessage.value = "";
+      }, 2500);
+    } else {
+      userStore.setUser(response.data.user);
+      router.push("/");
+    }
+  })
+  .catch((err) => {
+    signupRequest.value = false;
+    errorMessage.value = "Something went wrong while Signing you up!";
+    setTimeout(() => {
+      errorMessage.value = "";
+    }, 2500);
+    console.debug(err);
+  });
+  
+}
+
+function areInputsValid(){
+  let isValid = true;
+  if( password.value !== passwordCheck.value){
+    isValid = false;
+    errorMessage.value = "Passwords are not identical";
+  }
+  if( passwordCheck.value === "" ){
+    isValid = false;
+    errorMessage.value = "Password check is empty";
+  }
+  if( password.value === "" ){
+    isValid = false;
+    errorMessage.value = "Password is empty";
+  }
+  if( username.value === "" ){
+    isValid = false;
+    errorMessage.value = "Username is empty";
+  }
+  if( !isValid ){
+    setTimeout(() => {
+      errorMessage.value = "";
+    }, 2500);
+  }
+  return isValid;
+}
+
+</script>
+
+<template>
+  <div class="container pt-5">
+    <div class="row pt-3">
+      <div class="col">
+        <h1 class="text-center">Sign up to Jeobeardy!</h1>
+      </div>
+    </div>
+    <div class="d-flex h-100 justify-content-evenly align-items-center w-100">
+      <div class="d-flex flex-column m-5 justify-content-center align-items-center">
+        <div class="card bg-primary signup-card">
+          <div class="card-header">
+            <h2 class="m-2">Create User</h2>
+          </div>
+          <div class="card-body text-center">
+            <div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
+              <div class="d-flex px-3 w-100">
+                <div class="w-100 text-start">
+                  <label for="username" class="fs-5 mb-1">Username</label>
+                  <input
+                    v-model="username"
+                    v-focus
+                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    type="text"
+                    name="username"
+                    id="username"
+                    placeholder="Username"
+                    @keyup.enter="singUpButtonClicked"
+                  />
+                  <label for="password" class="fs-5 mb-1">Password</label>
+                  <input
+                    v-model="password"
+                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    type="password"
+                    name="password"
+                    id="password"
+                    placeholder="Password"
+                    @keyup.enter="singUpButtonClicked"
+                  />
+                  <input
+                    v-model="passwordCheck"
+                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    type="password"
+                    name="passwordCheck"
+                    id="passwordCheck"
+                    placeholder="Re-Enter Password"
+                    @keyup.enter="singUpButtonClicked"
+                  />
+                </div>
+              </div>
+              <div class="d-flex justify-content-end w-100 px-3">
+                <button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="singUpButtonClicked">
+                  Sign Up
+                  <font-awesome-icon v-if="!signupRequest" class="ms-1" icon="fa-solid fa-user-plus" />
+                  <font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-warning mt-3">
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.signup-card {
+  min-height: 20rem;
+  width: 25rem;
+  max-width: 90vw;
+}
+</style>

src/webapp/components/views/AnswerView.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+
+import { useGameCreationStore } from "@/stores/GameCreationStore";
+import { useRoute } from "vue-router";
+
+
+const props = defineProps({
+  answer: Object,
+  board: Object,
+  cIndex: Number,
+  bEIndex: Number,
+});
+
+let route = useRoute();
+
+const imageRef = ref(null);
+let gameCreationStore = useGameCreationStore();
+
+let getImageInGameCreationStore = computed( () => {
+  return gameCreationStore.answerImages.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex );
+});
+
+
+let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
+let hostname = window.location.hostname;
+if( window.location.hostname.includes("localhost" ) ){
+    hostname += ':3000';
+}
+const API_URL = `${protocol}${hostname}/api`;
+
+
+onMounted( () => {
+  if( imageRef.value ){
+    imageRef.value.src = API_URL + '/game/file/' + props.answer.filename;
+  }
+})
+
+</script>
+
+<template>
+    <template v-if="answer.answerType === 'imageAnswer'">
+        <div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-0 h-100 w-100 bg-dark-primary">
+            <template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
+                <div class="h-75 w-100 text-center">
+                    <img class="h-100" :src="getImageInGameCreationStore.url"  />
+                </div>
+            </template>
+            <template v-else-if="answer.filename">
+                <div class="h-75 w-100 text-center">
+                    <img ref="imageRef" class="h-100" src=""  />
+                </div>
+            </template>
+            <div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle mt-5">
+                <h3 class="bg-primary rounded-1 px-2 py-1">
+                    {{ props.answer.answerText }}
+                </h3>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle mt-5">
+            <h3 class="bg-primary rounded-1 px-2 py-1">
+                {{ props.answer.answerText }}
+            </h3>
+        </div>
+    </template>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/views/BoardCategoriesView.vue

@@ -0,0 +1,41 @@
+<script setup>
+
+import CategoryCard from '@/components/blocks/CategoryCard.vue';
+
+const props = defineProps({
+  categories: Array,
+  selectedCategoryIndex: Number,
+  isSelected: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const emit = defineEmits(["categorySelected"]);
+
+function changeSelectedCategory( boardEntryIndex ) {
+  emit("categorySelected", boardEntryIndex );
+}
+
+</script>
+
+<template>
+  <template v-if="props.selectedCategoryIndex === -1">
+    <template v-for="( categoryEntry, categoryEntryIndex ) in props.categories" :key="categoryEntry.categoryName">
+      <CategoryCard
+      :category="categoryEntry"
+      :isSelected="props.isSelected"
+      @categoryCardClicked=" () => changeSelectedCategory( categoryEntryIndex )"
+      />
+    </template>
+  </template>
+  <template v-else>
+    <CategoryCard
+    :category="props.categories[selectedCategoryIndex]"
+    :isSelected="props.isSelected"
+    @categoryCardClicked=" () => changeSelectedCategory( props.selectedCategoryIndex )"
+    />
+  </template>
+</template>
+
+<style scoped></style>

src/webapp/components/views/BoardEditView.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from "vue";
+import Draggable from "vue3-draggable";
+import { onMounted } from "vue";
+
+import { useGameCreationStore } from '@/stores/GameCreationStore';
+import CustomTextSaveOrCancel from '@/components/blocks/CustomTextSaveOrCancel.vue';
+import Category from "@/models/Category";
+
+
+const gameCreationStore = useGameCreationStore();
+let buttonDivHeight = ref("3rem");
+let navbarHeight = ref("4rem");
+
+let newCategoryName = ref("");
+
+function addCategoryButtonClicked(_event){
+  if( newCategoryName.value === "" ){
+    return;
+  }
+  let category = new Category( newCategoryName.value, "New Category", [] );
+  gameCreationStore.$patch((state)=>{
+    state.board.categories.push( category );
+  })
+  newCategoryName.value = "";
+  // gameCreationStore.board.categories.push( category );
+}
+function deleteCategoryButtonClicked( cIndex ){
+  gameCreationStore.$patch((state)=>{
+    state.board.categories.splice( cIndex, 1 );
+  })
+}
+
+onMounted( () => {
+  buttonDivHeight.value = document.getElementById("save-cancel-button-div").offsetHeight;
+  navbarHeight.value = document.getElementById("board-entry-edit-view-container").offsetHeight;
+});
+
+</script>
+
+<template>
+  <div id="board-entry-edit-view-container" class="container-fluid h-100 px-0">
+    <div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
+      <div class="my-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Board</h3>
+        <div>
+          <label class="form-label fs-4 mt-3" for="question-type">Name</label>
+          <input v-model="gameCreationStore.board.boardName" class="form-control bg-dark-blue" type="text">
+        </div>
+        <div>
+          <label class="form-label fs-4 mt-3">Categories</label>
+          <div v-if="gameCreationStore.board.categories.length === 0">No categories yet</div>
+          <template v-else>
+            <div v-for="( category, categoryListIndex ) in gameCreationStore.board.categories" :key="category.categoryName">
+              <div class="input-group mb-1">
+                <span class="form-control border-pink-accent-primary">{{ category.categoryName }}</span>
+                <button tabindex="-1" class="btn btn-pink-accent-primary" @click="deleteCategoryButtonClicked(categoryListIndex)">
+                  <font-awesome-icon icon="fa-solid fa-trash" />
+                </button>
+              </div>
+            </div>
+          </template>
+          <label class="form-label fs-5" for="new-category">Add category</label>
+          <div class="input-group">
+            <input v-model="newCategoryName" class="form-control bg-dark-blue" type="text" id="new-category" name="new-category" @keydown.enter="addCategoryButtonClicked">
+            <button class="btn btn-pink-accent-primary" @click="addCategoryButtonClicked">
+              <font-awesome-icon icon="fa-solid fa-square-plus" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-card {
+  height: 20rem;
+  width: 25rem;
+}
+</style>

src/webapp/components/views/BoardEntryEditView.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+import { QUESTION_TYPES } from "@/services/GameService";
+import { ANSWER_TYPES } from "@/services/GameService";
+import { ANSWER_INTERACTION } from "@/services/GameService";
+import { useGameCreationStore } from '@/stores/GameCreationStore';
+
+const props = defineProps({
+  categoryIndex: Number,
+  boardEntryIndex: Number,
+  questionIndex: Number,
+});
+
+const emit = defineEmits(["questionIndexChanged"]);
+
+const gameCreationStore = useGameCreationStore();
+let buttonDivHeight = ref("3rem");
+let navbarHeight = ref("4rem");
+let accordionButtons = ref([]);
+let accordionCollapses = ref([]);
+
+
+let answerImageInput = ref(null);
+let questionImageInput = ref(null);
+
+
+function addQuestionAbove( insertIndex ){
+  gameCreationStore.addEmptyQuestionToBoardEntry( props.categoryIndex, props.boardEntryIndex, insertIndex );
+}
+function addQuestionBelow( insertIndex ){
+  let insertIndexBelow = insertIndex + 1;
+  gameCreationStore.addEmptyQuestionToBoardEntry( props.categoryIndex, props.boardEntryIndex, insertIndexBelow );
+  nextTick( () => {
+    setQuestionIndex( insertIndexBelow );
+  })
+}
+
+function removeQuestion( removeIndex ){
+  gameCreationStore.removeQuestionFromBoardEntry( props.categoryIndex, props.boardEntryIndex, removeIndex );
+  if( 1 <= gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length && gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length <= removeIndex ){
+    nextTick( () => {
+      setQuestionIndex( removeIndex - 1 );
+    });
+  }
+}
+
+function questionTypeChanged( event, qIndex ){
+  let newQuestionType = event.target.selectedOptions[0].value;
+  gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions[qIndex].questionType = newQuestionType;
+}
+
+function onQuestionImageChanged( questionIndex, event ){
+  let files = event.target.files || event.dataTransfer.files;
+  if (!files.length){
+    return;
+  }
+
+  gameCreationStore.addImageToQuestion( props.categoryIndex, props.boardEntryIndex, questionIndex, files[0]);
+}
+
+function onAnswerImageChanged( event ){
+  let files = event.target.files || event.dataTransfer.files;
+  if (!files.length){
+    return;
+  }
+
+  gameCreationStore.addImageToAnswer( props.categoryIndex, props.boardEntryIndex, files[0]);
+}
+
+function onQuestionAudioChanged( questionIndex, event ){
+  let files = event.target.files || event.dataTransfer.files;
+  if (!files.length){
+    return;
+  }
+
+  gameCreationStore.addAudioToQuestion( props.categoryIndex, props.boardEntryIndex, questionIndex, files[0]);
+}
+
+function setQuestionIndex( questionIndex ){
+  emit("questionIndexChanged", questionIndex)
+}
+
+watch(
+  () => props.questionIndex,
+  ( newVal, oldVal ) => {
+    if( !accordionCollapses.value[newVal].classList.contains("show") ){
+      accordionButtons.value[newVal].click();
+    }
+  }
+);
+watch(
+  () => props.boardEntryIndex,
+  ( newVal, oldVal ) => {
+    answerImageInput.value.value = "";
+    questionImageInput.value.value = "";
+  }
+);
+
+</script>
+
+<template>
+  <div id="board-entry-edit-view-container">
+    <div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
+      <div class="my-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">General</h3>
+        <div>
+          <label class="form-label fs-4 mt-3" for="question-type">Points</label>
+          <input v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].points" class="form-control bg-dark-blue" type="text">
+        </div>
+      </div>
+      <div class="my-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Question</h3>
+        <div class="accordion" id="questionAccordion">
+          <template v-for="(question, questionIndex) in gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions" :key="questionIndex">
+            <div class="accordion-item">
+              <h2 class="accordion-header" :id="'questionCollapseHeading' + questionIndex">
+                <button
+                  ref="accordionButtons"
+                  class="accordion-button"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  :data-bs-target="'#questionCollapse' + questionIndex"
+                  :aria-expanded="(questionIndex === props.questionIndex ? 'true' : 'false')"
+                  :aria-controls="'questionCollapse' + questionIndex"
+                  @click="setQuestionIndex(questionIndex)"
+                >
+                  Question Layer {{ 1 + questionIndex }}
+                </button>
+              </h2>
+              <div ref="accordionCollapses" :id="'questionCollapse' + questionIndex" class="accordion-collapse collapse" :class="[{'show': questionIndex === 0 }]" :aria-labelledby="'questionCollapseHeading' + questionIndex" data-bs-parent="#questionAccordion">
+                <div class="accordion-body">
+                    <div>
+                      <label class="form-label fs-4" for="question-type">Question Type</label>
+                      <select @change="questionTypeChanged($event, questionIndex)" v-model="question.questionType" class="form-select bg-dark-blue" aria-label="Question Type" name="question-type" id="question-type">
+                        <option v-for="(questionText, questionTypeKey) in QUESTION_TYPES" :key="questionTypeKey" :value="questionTypeKey">{{ questionText }}</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label class="form-label fs-4 mt-3" for="question-type">Question Text</label>
+                      <template v-if="question.questionType === 'multilineQuestion'">
+                        <textarea class="form-control bg-dark-blue" v-model="question.questionText">
+                        </textarea>
+                      </template>
+                      <template v-else>
+                        <input v-model="question.questionText" class="form-control bg-dark-blue" type="text">
+                      </template>
+                    </div>
+                    <div v-if="question.questionType === 'imageQuestion'">
+                      <label class="form-label fs-4 mt-3" for="question-image">Question Image</label>
+                      <input class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="onQuestionImageChanged( questionIndex, $event )" accept="image/*">
+                    </div>
+                    <div v-if="question.questionType === 'audioQuestion'">
+                      <label class="form-label fs-4 mt-3" for="question-audio">Question Audio</label>
+                      <input ref="questionImageInput" class="form-control bg-dark-blue" type="file" name="question-audio" id="question-audio" @change="onQuestionAudioChanged( questionIndex, $event )" accept="audio/mpeg">
+                    </div>
+                    <div class="row mt-3">
+                      <div class="col-xxl-4 col-12 mb-1 px-1">
+                        <button class="btn btn-pink-accent-primary w-100 h-100" @click="addQuestionAbove(questionIndex)">Insert Above</button>
+                      </div>
+                      <div class="col-xxl-4 col-12 mb-1 px-1">
+                        <button class="btn btn-pink-accent-primary w-100 h-100" @click="addQuestionBelow(questionIndex)">Insert Below</button>
+                      </div>
+                      <div class="col-xxl-4 col-12 mb-1 px-1">
+                        <button class="btn btn-pink-accent-primary w-100 h-100" @click="removeQuestion(questionIndex)" :disabled="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length <= 1">Remove Layer</button>
+                      </div>
+                    </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="my-3 pb-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Answer</h3>
+        <div>
+          <label class="form-label fs-4" for="answer-type">Answer Type</label>
+          <select v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerType" class="form-select bg-dark-blue" aria-label="Answer Type" name="answer-type" id="answer-type">
+            <option v-for="(answerText, answerTypeKey) in ANSWER_TYPES" :key="answerTypeKey" :value="answerTypeKey">{{ answerText }}</option>
+          </select>
+        </div>
+        <div>
+          <label class="form-label fs-4" for="answer-type">Answer Interaction</label>
+          <select v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerInteraction" class="form-select bg-dark-blue" aria-label="Answer Interaction" name="answer-interaction" id="answer-interaction">
+            <option v-for="(answerInteraction, answerInteractionKey) in ANSWER_INTERACTION" :key="answerInteractionKey" :value="answerInteractionKey">{{ answerInteraction }}</option>
+          </select>
+        </div>
+        <div>
+          <label class="form-label fs-4 mt-3" for="answer-type">Answer Text</label>
+          <input v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerText" class="form-control bg-dark-blue" type="text">
+        </div>
+        <div v-if="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerType === 'imageAnswer'">
+          <label class="form-label fs-4 mt-3" for="answer-image">Answer Image</label>
+          <input ref="answerImageInput" class="form-control bg-dark-blue" type="file" name="answer-image" id="answer-image" @change="onAnswerImageChanged" accept="image/*">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/components/views/BoardEntryView.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed } from 'vue';
+
+import QuestionView from "@/components/views/QuestionView.vue"
+import AnswerView from "@/components/views/AnswerView.vue"
+
+const props = defineProps({
+  board: Object,
+  categoryName: String,
+  cIndex: Number,
+  bEIndex: Number,
+  isHost: {
+    type: Boolean,
+    default: false,
+  },
+  isQuestionRevealed: {
+    type: Boolean,
+    default: false,
+  },
+  isAnswerRevealed: {
+    type: Boolean,
+    default: false,
+  },
+  anyPlayerIsAnswering: {
+    type: Boolean,
+    default: false,
+  },
+  isBeingPlayed: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["specificQuestionLayerSelected", "backToBoard", "playerBuzzered", "playAudio", "stopAudio", "showQuestion", "showAnswer", "hideQuestion", "hideAnswer" ]);
+
+let boardEntry = computed( () => {
+  return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
+})
+
+const showingQuestion = computed( () => {
+  return props.isAnswerRevealed || ( props.isQuestionRevealed && !props.anyPlayerIsAnswering );
+});
+
+function showQuestion(){
+  emit("showQuestion");
+}
+
+function hideQuestion(){
+  emit("hideQuestion");
+}
+function showAnswer(){
+  emit("showAnswer");
+}
+
+function hideAnswer(){
+  emit("hideAnswer");
+}
+
+function backToBoard(){
+  emit("backToBoard");
+}
+
+function specificQuestionLayerSelected( index ){
+  emit("specificQuestionLayerSelected", index );
+}
+
+function playAudio( cIndex, bEIndex, qIndex ){
+  emit("playAudio", cIndex, bEIndex, qIndex );
+}
+
+function stopAudio(){
+  emit( "stopAudio" );
+}
+
+</script>
+
+<template>
+  <div class="container-fluid h-100 d-flex justify-content-center align-items-center">
+    <div v-show="showingQuestion" class="w-100 h-100">
+      <QuestionView
+      :cIndex="props.cIndex"
+      :bEIndex="props.bEIndex"
+      :questions="boardEntry.questions"
+      :board="props.board"
+      :isHost="props.isHost"
+      @specificQuestionLayerSelected="specificQuestionLayerSelected"
+      @playAudio="playAudio"
+      @stopAudio="stopAudio"
+      />
+    </div>
+    <div v-show="props.isAnswerRevealed">
+      <AnswerView
+        :answer="boardEntry.answer"
+      />
+    </div>
+
+    <div class="position-absolute bottom-0 end-0 mb-2">
+      <span class="fs-2 fw-bold">
+        {{ boardEntry.points }}
+      </span>
+    </div>
+    <div class="position-absolute top-0 start-0 mt-2">
+      <span class="fs-2 fw-bold">
+        {{ props.board.categories[props.cIndex].categoryName }}
+      </span>
+    </div>
+    <div v-if="props.isHost" class="position-absolute top-0 start-50 translate-middle-x mt-2">
+      <button class="btn btn-sm btn-outline-pink-accent-primary" @click="backToBoard">
+        Back to Board
+      </button>
+    </div>
+    <div v-if="props.isHost" class="position-absolute top-0 end-0 mt-2">
+      <div class="me-3 d-inline-block">
+        <template v-if="!props.isQuestionRevealed">
+          <button class="btn btn-sm btn-outline-pink-accent-primary" @click="showQuestion">
+            Show Question
+          </button>
+        </template>
+        <template v-else>
+          <button class="btn btn-sm btn-outline-pink-accent-primary" @click="hideQuestion">
+            Hide Question
+          </button>
+        </template>
+      </div>
+      <div class="d-inline-block">
+        <template v-if="!props.isAnswerRevealed">
+          <button class="btn btn-sm btn-outline-pink-accent-primary" @click="showAnswer">
+            Show Answer
+          </button>
+        </template>
+        <template v-else>
+          <button class="btn btn-sm btn-outline-pink-accent-primary" @click="hideAnswer">
+            Hide Answer
+          </button>
+        </template>
+      </div>
+    </div>  
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/views/BoardListView.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from "vue";
+
+import { useUserStore } from "@/stores/UserStore";
+import BoardListCard from "@/components/blocks/BoardListCard.vue";
+
+const props = defineProps({
+	selectedBoard: {
+		type: String,
+		default: "",
+	}
+})
+
+const emit = defineEmits(["boardSelected"]);
+
+const userStore = useUserStore();
+const userBoards = ref([]);
+let boardRequestDone = ref(false);
+
+userStore.userService.getUserBoards()
+.then( ( response ) => {
+	if( !response.data.success ){
+		console.error( response.data.message );
+		return;
+	}
+	userBoards.value = response.data.boards;
+})
+.catch( ( err ) => {
+	console.error( err );
+})
+.finally( () => {
+	boardRequestDone.value = true;
+});
+
+function boardSelected( id ){
+	emit( "boardSelected", id );
+}
+
+</script>
+
+<template>
+	<div class="d-flex h-100 justify-content-start align-items-start w-100 flex-column">
+		<h2>Your Boards</h2>
+		<template v-if="!boardRequestDone">
+			Loading...
+		</template>
+		<template v-else-if="userBoards.length === 0">
+			<div class="d-flex align-items-center min-card-height-board-list">
+				No Boards
+			</div>
+		</template>
+		<template v-else>
+			<div class="row">
+				<template v-for="board in userBoards" :key="board.name">
+					<div class="col-auto">
+						<BoardListCard
+							:boardName="board.name"
+							:isSelected="board._id === props.selectedBoard"
+							@boardCardClicked="boardSelected(board._id)"
+						/>
+					</div>
+				</template>
+			</div>
+		</template>	
+	</div>
+</template>
+
+<style scoped>
+.min-card-height-board-list{
+	min-height: 9em;
+}
+</style>

src/webapp/components/views/BoardView.vue

@@ -0,0 +1,62 @@
+<script setup>
+import CategoryHeaderCard from '@/components/blocks/CategoryHeaderCard.vue';
+import BoardEntryCard from '@/components/blocks/BoardEntryCard.vue';
+
+const props = defineProps({
+  board: Object,
+  isHost: {
+    type: Boolean,
+    default: false,
+  },
+  isBeingPlayed: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["boardEntryClicked", "questionAnswered", "questionAnsweredRevert" ])
+
+function boardEntryCardClicked( categoryIndex, boardEntryIndex ){
+  if( props.isHost ){
+    emit("boardEntryClicked", categoryIndex, boardEntryIndex);
+  }
+}
+
+</script>
+
+<template>
+  <div class="container-fluid h-100 d-flex justify-content-center align-items-center">
+    <div class="d-flex flex-column justify-content-center align-items-center mt-3 h-100 w-100">
+      <h2>
+        {{ board.boardName }}
+      </h2>
+      
+      <div class="row w-100 h-100">
+        <template v-for="( category, categoryIndex ) of board.categories" :key="category.name">
+          <div class="col">
+            <div class="d-flex flex-column h-100">
+              <CategoryHeaderCard
+                :categoryName="category.categoryName"
+                :categoryDescription="category.categoryDescription"
+              />
+              <template v-for="( boardEntry, boardEntryIndex ) of category.boardEntries" :key="boardEntryIndex">
+                <BoardEntryCard
+                  :isHost="isHost"
+                  :isBeingPlayed="props.isBeingPlayed"
+                  :boardEntry="boardEntry"
+                  @boardEntryCardClicked="boardEntryCardClicked( categoryIndex, boardEntryIndex )"
+                  @boardEntryAnsweredClicked="emit( 'questionAnswered', categoryIndex, boardEntryIndex )"
+                  @boardEntryAnsweredRevertClicked="emit( 'questionAnsweredRevert', categoryIndex, boardEntryIndex )"
+                />
+              </template>
+            </div>
+          </div>
+        </template>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/views/CategoryEditView.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from "vue";
+
+import { useGameCreationStore } from '@/stores/GameCreationStore';
+import CustomTextSaveOrCancel from '@/components/blocks/CustomTextSaveOrCancel.vue';
+import { onMounted, watch } from "vue";
+
+const props = defineProps({
+  categoryIndex: Number,
+})
+
+const gameCreationStore = useGameCreationStore();
+let buttonDivHeight = ref("3rem");
+let navbarHeight = ref("4rem");
+
+
+onMounted( () => {
+  buttonDivHeight.value = document.getElementById("save-cancel-button-div").offsetHeight;
+  navbarHeight.value = document.getElementById("board-entry-edit-view-container").offsetHeight;
+});
+
+</script>
+
+<template>
+  <div id="board-entry-edit-view-container" class="container-fluid h-100 px-0">
+    <div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
+      <div class="my-3 pb-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Category</h3>
+        <div>
+          <label class="form-label fs-4" for="category-name-input">Catogry Name</label>
+          <input v-model="gameCreationStore.board.categories[props.categoryIndex].categoryName" class="form-control bg-dark-blue" type="text" name="category-name-input" id="category-name-input">
+        </div>
+        <div>
+          <label class="form-label fs-4 mt-3" for="category-description-input">Category Description</label>
+          <textarea v-model="gameCreationStore.board.categories[props.categoryIndex].categoryDescription" class="form-control bg-dark-blue" type="text" rows="3" name="category-description-input" id="category-description-input" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/components/views/GameQuestionsView.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+
+import QuestionCard from '@/components/blocks/QuestionCard.vue';
+import { useGameCreationStore } from '@/stores/GameCreationStore';
+
+const props = defineProps({
+  isEditable: {
+    type: Boolean,
+    default: false,
+  },
+  selectedEntryIndex: Number,
+  entries: Object,
+})
+
+const emit = defineEmits(["boardEntrySelected", "addNewBoardEntry", "deleteBoardEntry"]);
+
+function addBoardEntryClicked(_event) {
+  emit("addNewBoardEntry");
+}
+function changeSelectedBoardEntry( boardEntryIndex ) {
+  emit("boardEntrySelected", boardEntryIndex );
+}
+function deleteBoardEntry( boardEntryIndex ){
+  emit("deleteBoardEntry", boardEntryIndex );
+}
+
+</script>
+
+<template>
+  <div class="d-flex overflow-auto">
+    <div class="d-flex">
+      <template v-for="( boardEntry, boardEntryIndex ) in props.entries" :key="boardEntryIndex">
+        <QuestionCard
+        :boardEntry="boardEntry"
+        :isSelected="selectedEntryIndex === boardEntryIndex"
+        @questionCardClicked="changeSelectedBoardEntry( boardEntryIndex )"
+        @questionCardDeleteClicked="deleteBoardEntry( boardEntryIndex )"
+        />
+      </template>
+      <div v-if="isEditable" class="card bg-primary m-3 border-1 border-pink-accent-primary-hover question-card pointer" @click="addBoardEntryClicked">
+        <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
+          <h4>
+            Add Question
+          </h4>
+          <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-plus-square" size="3x"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.question-card {
+  height: 9rem;
+  width: 16rem;
+}
+</style>

src/webapp/components/views/GameView.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import BoardView from '@/components/views/BoardView.vue';
+import BoardEntryView from '@/components/views/BoardEntryView.vue';
+
+const props = defineProps({
+  objToDisplay: String,
+  board: Object,
+  cIndex: Number,
+  bEIndex: Number,
+  showingBottomView: Boolean,
+  isHost: {
+    type: Boolean,
+    default: false,
+  },
+  isQuestionRevealed: {
+    type: Boolean,
+    default: false,
+  },
+  isAnswerRevealed: {
+    type: Boolean,
+    default: false,
+  },
+  anyPlayerIsAnswering: {
+    type: Boolean,
+    default: false,
+  },
+  isBeingPlayed: {
+    type: Boolean,
+    default: true,
+  }
+});
+
+const emit = defineEmits(["boardEntryClicked", "specificQuestionLayerSelected", "showBoard", "playerBuzzered", "playAudio", "stopAudio",
+  "showQuestion", "showAnswer", "hideQuestion", "hideAnswer", "questionAnswered", "questionAnsweredRevert" ]);
+
+let navbarHeight = document.getElementById("navbar").offsetHeight;
+let bottomViewHeight = ref("10rem");
+
+function boardEntryClicked( categoryIndex, boardEntryIndex ){
+  emit("boardEntryClicked", categoryIndex, boardEntryIndex );
+}
+
+function specificQuestionLayerSelected( qIndex ){
+  emit("specificQuestionLayerSelected", qIndex );
+}
+
+function showBoard(){
+  emit("showBoard");
+}
+
+function playerBuzzered( data ){
+  emit("playerBuzzered", data );
+}
+
+function playAudio( cIndex, bEIndex, qIndex ){
+  emit( "playAudio", cIndex, bEIndex, qIndex );
+}
+
+function stopAudio(){
+  emit( "stopAudio" );
+}
+
+function showQuestion(){
+  emit( "showQuestion" );
+}
+function showAnswer(){
+  emit( "showAnswer" );
+}
+function hideQuestion(){
+  emit( "hideQuestion" );
+}
+function hideAnswer(){
+  emit( "hideAnswer" );
+}
+
+function questionAnswered( cIndex, bEIndex ){
+  emit( "questionAnswered", cIndex, bEIndex );
+}
+function questionAnsweredRevert( cIndex, bEIndex ){
+  emit( "questionAnsweredRevert", cIndex, bEIndex );
+}
+
+onMounted(()=>{
+  let bottomViewElement = document.getElementById("bottom-view");
+  if( bottomViewElement ){
+    bottomViewHeight.value = document.getElementById("bottom-view").offsetHeight;
+  } else {
+    bottomViewHeight.value = 0;
+  }
+});
+
+watch(
+  () => props.showingBottomView,
+  ( newVal, oldVal ) => {
+    if( newVal ){
+      nextTick( () => {
+        let bottomViewElement = document.getElementById("bottom-view");
+        if( bottomViewElement ){
+          bottomViewHeight.value = document.getElementById("bottom-view").offsetHeight;
+        } else {
+          bottomViewHeight.value = 0;
+        }
+      })
+    } else {
+      bottomViewHeight.value = 0;
+    }
+  }
+)
+
+</script>
+
+<template>
+  <div class="container-fluid overflow-auto" :style="[ {'height': 'calc(100vh - (' + navbarHeight + 'px + ' + bottomViewHeight + 'px ) )'}]">
+    <div class="ratio ratio-16x9">
+      <div v-if="objToDisplay === 'Board'">
+        <BoardView
+          :board="props.board"
+          :isHost="props.isHost"
+          :isBeingPlayed="props.isBeingPlayed"
+          @boardEntryClicked="boardEntryClicked"
+          @questionAnswered="questionAnswered"
+          @questionAnsweredRevert="questionAnsweredRevert"
+        />
+      </div>
+      <div v-else>
+        <BoardEntryView
+          :cIndex="props.cIndex"
+          :bEIndex="props.bEIndex"
+          :board="props.board"
+          :isHost="props.isHost"
+          :isQuestionRevealed="props.isQuestionRevealed"
+          :isAnswerRevealed="props.isAnswerRevealed"
+          :anyPlayerIsAnswering="props.anyPlayerIsAnswering"
+          :isBeingPlayed="props.isBeingPlayed"
+          @showQuestion="showQuestion"
+          @showAnswer="showAnswer"
+          @hideQuestion="hideQuestion"
+          @hideAnswer="hideAnswer"
+          @backToBoard="showBoard"
+          @specificQuestionLayerSelected="specificQuestionLayerSelected"
+          @playAudio="playAudio"
+          @stopAudio="stopAudio"
+          @playerBuzzered="playerBuzzered"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/views/GenericMultiButtonModal.vue

@@ -0,0 +1,64 @@
+<script setup>
+
+const props = defineProps({
+	id: String,
+	hasTitle: {
+		type: Boolean,
+		default: false,
+	},
+	title: {
+		type: String,
+		default: "Info",
+	},
+	modalText: {
+		type: String,
+		default: "Are you sure?",
+	},
+	buttonList: {
+		type: Array,
+		default(){ 
+			return [
+				{
+					text: "Ok",
+					emitsEvent: "b1Clicked",
+					bgColorClass: "btn-pink-accent-primary",
+				},
+				{
+					text: "Cancel",
+					emitsEvent: "b2Clicked",
+					bgColorClass: "btn-outline-danger",
+				},
+			];
+		},
+	},
+});
+
+const emit = defineEmits(["buttonClicked"]);
+
+</script>
+
+<template>
+  <div class="modal fade" :id="props.id" tabindex="-1" aria-labelledby="twoBtnModalTitle" aria-hidden="true">
+		<div class="modal-dialog modal-dialog-centered">
+    		<div class="modal-content">
+				<div v-if="props.hasTitle" class="modal-header">
+					<h1 class="modal-title fs-5" :id="'twoBtnModalTitle'+props.title">{{ props.title }}</h1>
+					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					{{ modalText }}
+				</div>
+				<div class="modal-footer">
+					<div class="d-flex" :class="[ { 'flex-column': props.buttonList.length > 2 } ]">
+						<template v-for="(button, buttonIndex) of props.buttonList" :key="button.text">
+							<button type="button" class="btn ms-3" :class="[ button.bgColorClass, { 'w-100': props.buttonList.length > 2 } ]" data-bs-dismiss="modal" @click="emit('buttonClicked', buttonIndex)">{{ button.text }}</button>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+</style>

src/webapp/components/views/HostInteractionView.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+	objToDisplay: String,
+	board: Object,
+	cIndex: Number,
+	bEIndex: Number,
+	acceptAnswers: {
+		type: Boolean,
+		default: false,
+	}
+});
+
+const emit = defineEmits( "lockQuestion", "revealPlayerAnswers" );
+
+let boardEntry = computed( () => {
+	if( props.objToDisplay === "BoardEntry" ){
+		return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
+	}
+	return undefined
+})
+
+function lockQuestion(){
+	emit("lockQuestion");
+}
+
+function revealPlayerAnswers(){
+	emit("revealPlayerAnswers");
+}
+
+
+</script>
+
+<template>
+	<div
+        v-if="boardEntry !== undefined"
+        class="d-flex flex-column justify-content-center border-top border-pink-accent-primary interaction-size"
+    >
+		<div class="row mx-2">
+			<div class="col-12 text-center text-truncate">
+				Answer: {{ boardEntry.answer.answerText }}
+			</div>
+		</div>
+		<div class="row mx-2 mt-2" v-show="['freeTextInteraction'].includes( boardEntry.answer.answerInteraction )">
+			<div class="col-xl-6 col-12">
+				<button class="btn btn-pink-accent-primary w-100 h-100" @click="lockQuestion">Lock Question</button>
+			</div>
+			<div class="col-xl-6 col-12">
+				<button class="btn btn-pink-accent-primary w-100 h-100" @click="revealPlayerAnswers" :disabled="props.acceptAnswers">Reveal All Answers</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.interaction-size{
+	height: 6rem;
+}
+.no-resize{
+	resize: none;
+}
+</style>

src/webapp/components/views/PlayerInteractionView.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+
+const props = defineProps({
+	objToDisplay: String,
+	board: Object,
+	cIndex: Number,
+	bEIndex: Number,
+	playerIsAnswering: Boolean,
+	acceptAnswers: {
+		type: Boolean,
+		default: false,
+	}
+});
+
+const emit = defineEmits(["buzzerPressed", "answerTextUpdated"]);
+
+let userText = ref("");
+
+
+let boardEntry = computed( () => {
+	if( props.objToDisplay === "BoardEntry" ){
+		return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
+	}
+	return undefined
+})
+
+function buzzeredTheBuzzBuzz(){
+	emit("buzzerPressed");
+}
+function answerTextUpdated(){
+	emit("answerTextUpdated", userText.value);
+}
+
+
+</script>
+
+<template>
+	<div v-if="boardEntry !== undefined" class="d-flex justify-content-center align-items-center border-top border-pink-accent-primary interaction-size">
+		<div
+			v-if="boardEntry.answer.answerInteraction === 'buzzerInteraction'"
+			class="buzzer d-flex justify-content-center align-items-center rounded-circle shadow m-2"
+			:class="[ { 'buzzer-answering': props.playerIsAnswering }, { 'bg-gray': !props.acceptAnswers && !props.playerIsAnswering } ]"
+			@click="buzzeredTheBuzzBuzz"
+		>
+			Buzzer
+		</div>
+		<div v-else class="d-flex justify-content-center align-items-center w-100 h-100 m-3">
+			<div class="w-100">
+				<label for="textarea-player-input" class="form-label">Answer:</label>
+				<textarea
+					v-model="userText"
+					type="text"
+					name="textarea-player-input"
+					class="form-control no-resize"
+					:class="[ { 'border-pink-accent-primary': props.acceptAnswers }, { 'border-0': !props.acceptAnswers }, ]"
+					rows="4"
+					@input="answerTextUpdated"
+					:disabled="!props.acceptAnswers"
+				></textarea>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.interaction-size{
+	height: 12rem;
+}
+.no-resize{
+	resize: none;
+}
+</style>

src/webapp/components/views/PlayersView.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { ref } from "vue";
+
+import PlayerListEntry from "@/components/blocks/PlayerListEntry.vue";
+
+const props = defineProps({
+  players: Object,
+  isHost: {
+    type: Boolean,
+    default: false,
+  },
+  questionPoints: Number,
+  answerInteraction: {
+    type: String,
+    default: "buzzerInteraction"
+  },
+  acceptAnswers: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const emit = defineEmits( "manualPointsAdjustment", "answerRuled", "revealPlayerAnswers" );
+
+let buttonDivHeight = ref("3rem");
+let navbarHeight = ref("4rem");
+let manualAdjustmentValue = ref( 100 );
+
+function manualPointsAdjustment( playerId, playerName, arePointsAdded ) {
+  let points = ( arePointsAdded ? manualAdjustmentValue.value : -1 * manualAdjustmentValue.value );
+  emit("manualPointsAdjustment", playerId, playerName, points );
+}
+
+function answerRuled( playerId, playerName, isAnswerCorrect ){
+  let points = ( isAnswerCorrect ? props.questionPoints : 0 );
+  let reopenQuestion;
+  if( ["buzzerInteraction"].includes( props.answerInteraction ) ){
+    reopenQuestion = !isAnswerCorrect;
+  } else {
+    reopenQuestion = false;
+  }
+  emit("answerRuled", playerId, playerName, points, reopenQuestion );
+}
+
+function revealPlayerAnswer( playerId ){
+  emit("revealPlayerAnswers", [playerId] );
+}
+
+</script>
+
+<template>
+  <div id="board-entry-edit-view-container">
+    <div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
+      <div class="my-3">
+        <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Players</h3>
+        <div v-if="props.isHost" class="row mb-3">
+					<div class="col">
+            <label for="manual-adjustment-value">Manual Adjustment Value</label>
+            <input v-model="manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
+					</div>
+				</div>
+        <template v-for="(player) in props.players" :key="player._id">
+          <PlayerListEntry 
+            :player="player"
+            :isHost="props.isHost"
+            :acceptAnswers="props.acceptAnswers"
+            @manualPointsAdjustment="( arePointsAdded ) => manualPointsAdjustment( player._id, player.name, arePointsAdded )"
+            @answerRuled="( isAnswerCorrect ) => answerRuled( player._id, player.name, isAnswerCorrect )"
+            @revealPlayerAnswer="revealPlayerAnswer"
+          />  
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/webapp/components/views/QuestionView.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useGameCreationStore } from "@/stores/GameCreationStore";
+
+const props = defineProps({
+  questions: Array,
+  board: Object,
+  cIndex: Number,
+  bEIndex: Number,
+  isHost: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+let emit = defineEmits(["specificQuestionLayerSelected", "playAudio", "stopAudio"])
+
+let selectedIndex = ref(0);
+const imageRef = ref([]);
+let route = useRoute();
+let gameCreationStore = useGameCreationStore();
+
+let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
+let hostname = window.location.hostname;
+if( window.location.hostname.includes("localhost" ) ){
+    hostname += ':3000';
+}
+
+const API_URL = `${protocol}${hostname}/api`;
+
+
+let getImageInGameCreationStore = computed( () => {
+  return gameCreationStore.images.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex && imageEntry.qIndex === selectedIndex.value );
+})
+
+function specificLayerSelected( index ){
+  selectedIndex.value = index;
+  nextTick( () => {
+    if( imageRef.value[0] ){
+      imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
+    }
+  });
+  emit("specificQuestionLayerSelected", index );
+}
+
+function playAudio(){
+  emit("playAudio", props.cIndex, props.bEIndex, selectedIndex.value );
+}
+
+
+function stopAudio(){
+  emit("stopAudio");
+}
+
+
+onMounted( () => {
+  if( imageRef.value[0] ){
+    imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
+  }
+})
+
+watch(
+  () => props.bEIndex,
+  ( _newVal, _oldVal ) => {
+    selectedIndex.value = 0;
+    nextTick( () => {
+      if( imageRef.value[0] ){
+        imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
+      }
+    });
+  }
+)
+
+</script>
+
+<template>
+  <template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
+    <div v-if="selectedIndex === questionIndex" class="d-flex flex-column justify-content-center align-items-center h-100 w-100">
+      <h1 class="text-center" :class="[{ 'white-space-show-nl': question.questionType === 'multilineQuestion'}]">
+        {{ question.questionText }}
+      </h1>
+      <template v-if="question.questionType === 'imageQuestion'">
+        <template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
+          <div class="h-75 w-100 text-center">
+            <img class="h-100" :src="getImageInGameCreationStore.url"  />
+          </div>
+        </template>
+        <template v-else-if="question.filename">
+          <div class="h-75 w-100 text-center">
+            <img ref="imageRef" class="h-100" src=""  />
+          </div>
+        </template>
+      </template>
+      <template v-else-if="question.questionType === 'audioQuestion'">
+        <div class="w-50 d-flex flex-column align-items-center justify-content-between">
+          <img class="w-100" src="../../assets/images/soundform.svg" alt="Audio waveform">
+          <div class="d-flex">
+            <button v-if="props.isHost" class="btn btn-pink-accent-primary me-3" @click="playAudio">Play</button>
+            <button v-if="props.isHost" class="btn btn-pink-accent-primary" @click="stopAudio">Stop</button>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-if="props.questions.length > 1 && props.isHost" class="d-flex justify-content-start align-items-center position-absolute bottom-0 start-0 ms-3 mb-3">
+      <template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
+        <div>
+          <button class="btn btn-sm m-1 py-1" :class="[{'btn-pink-accent-primary': selectedIndex === questionIndex }, {'btn-outline-pink-accent-primary': selectedIndex !== questionIndex }]" :disabled="selectedIndex === questionIndex" @click="specificLayerSelected( questionIndex )">
+            {{ questionIndex + 1 }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.white-space-show-nl{
+  white-space: pre-wrap;
+}
+</style>

src/webapp/composables/loginCheck.js

@@ -0,0 +1,20 @@
+// mouse.js
+import { watch } from 'vue'
+
+import { useUserStore } from '@/stores/UserStore';
+import { useRouter } from 'vue-router';
+
+export function useLoginCheck() {
+
+  const router = useRouter();
+  const userStore =  useUserStore();
+
+  watch(
+    () => userStore.loggedIn,
+    ( newVal ) => {
+      if( newVal === false ){
+        router.push( "/" );
+      }
+    }
+  );
+}

src/webapp/main.js

@@ -0,0 +1,62 @@
+import { createApp, markRaw } from "vue";
+import { createPinia  } from "pinia";
+
+import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faDragon, faRightToBracket, faUsers, faUserPlus, faSpinner, faPlusSquare, faBorderAll, faPen, faTrash, faAngleDown, faAngleUp,
+         faPlus, faMinus, faAngleRight, faSquare, faPlay, faCircleExclamation, faSquareCheck, faSquareMinus } from "@fortawesome/free-solid-svg-icons";
+import { faCircleUser, faSquarePlus } from "@fortawesome/free-regular-svg-icons";
+
+
+import App from "./App.vue";
+import router from "./router";
+
+// Import our custom CSS
+import "./assets/scss/styles.scss";
+
+// Import all of Bootstrap's JS
+import "bootstrap";
+
+library.add({
+  faDragon,
+  faSquarePlus,
+  faRightToBracket,
+  faCircleUser,
+  faUsers,
+  faUserPlus,
+  faSpinner,
+  faPlusSquare,
+  faBorderAll,
+  faPen,
+  faTrash,
+  faAngleDown,
+  faAngleUp,
+  faPlus,
+  faMinus,
+  faAngleRight,
+  faSquare,
+  faSquareCheck,
+  faSquareMinus,
+  faPlay,
+  faCircleExclamation,
+});
+
+
+const pinia = createPinia();
+
+pinia.use( ( { store } ) => {
+  store.router = markRaw(router);
+});
+
+const app = createApp(App);
+
+app.component('font-awesome-icon', FontAwesomeIcon);
+app.component('font-awesome-layers', FontAwesomeLayers);
+app.use(pinia);
+app.use(router);
+
+app.directive('focus', {
+  mounted: ( element ) => element.focus()
+})
+
+app.mount("#app");

src/webapp/models/Answer.js

@@ -0,0 +1,18 @@
+import { ANSWER_TYPES } from "../services/GameService";
+
+export default class Answer{
+  constructor( text, answerTypeOpt = "textAnswer", answerInteraction = "buzzerInteraction" ){
+    this.answerText = text;
+    this.answerType = answerTypeOpt;
+    this.answerInteraction = answerInteraction;
+  }
+
+  // get answerText(){
+  //   return this.answerText;
+  // }
+
+  // get answerType(){
+  //   return this.answerType;
+  // }
+
+}

src/webapp/models/Board.js

@@ -0,0 +1,8 @@
+export default class Board{
+  
+  constructor( id, name, categories ){
+    this.boardId = id;
+    this.boardName = name;
+    this.categories = categories;
+  }
+}

src/webapp/models/BoardEntry.js

@@ -0,0 +1,10 @@
+export default class BoardEntry{
+
+  constructor( questionArray, answer, points ){
+    this.questions = questionArray;
+    this.answer = answer;
+    this.points = points;
+    this.isAnswered = false;
+  }
+
+}

src/webapp/models/Category.js

@@ -0,0 +1,8 @@
+export default class Category{
+  constructor( name, description, entries ){
+    this.categoryName = name;
+    this.categoryDescription = description;
+    this.boardEntries = entries;
+  }
+
+}

src/webapp/models/Question.js

@@ -0,0 +1,21 @@
+import { QUESTION_TYPES } from "@/services/GameService";
+
+export default class Question{
+  constructor( text, questionTypeOpt = QUESTION_TYPES.textQuestion ){
+    this.questionText = text;
+    this.questionType = questionTypeOpt;
+  }
+
+  // get questionText(){
+  //   return this.questionText;
+  // }
+  
+  // set questionText( newQuestionText ){
+  //   this.questionText = newQuestionText;
+  // }
+
+  // get questionType(){
+  //   return this.questionType;
+  // }
+
+}

src/webapp/router/index.js

@@ -0,0 +1,137 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useUserStore } from "@/stores/UserStore";
+import { useGameStore } from "@/stores/GameStore";
+import { GAME_STATES } from "@/services/GameService";
+import Home from "@/components/pages/Home.vue";
+import Lobby from "@/components/pages/Lobby.vue";
+import Join from "@/components/pages/Join.vue";
+import Game from "@/components/pages/Game.vue";
+import Create from "@/components/pages/Create.vue";
+import Login from "@/components/pages/Login.vue";
+import Signup from "@/components/pages/Signup.vue";
+import About from "@/components/pages/About.vue";
+import Profile from "@/components/pages/Profile.vue";
+
+const TEST_WOUT_WEBSOCKET = false;
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: Home,
+      meta: { requiresAuth: false },
+    },
+    {
+      path: "/about",
+      name: "about",
+      component: About,
+      meta: { requiresAuth: false },
+    },
+    {
+      path: "/lobby/:gameId",
+      name: "gameLobby",
+      component: Lobby,
+      meta: { requiresAuth: false },
+      beforeEnter: async (to, from)=>{
+        const gameStore = useGameStore();
+        if( gameStore.websocketConnection instanceof WebSocket ){
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    {
+      path: "/join",
+      name: "joinGame",
+      component: Join,
+      meta: { requiresAuth: false },
+      beforeEnter: async (to, from)=>{
+        const gameStore = useGameStore();
+        if( gameStore.gameState === GAME_STATES.INIT ){
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    {
+      path: "/join/:gameId",
+      name: "joinExistingGame",
+      component: Join,
+      meta: { requiresAuth: false },
+    },
+    {
+      path: "/game/:gameId",
+      name: "gameWithGameId",
+      component: Game,
+      meta: { requiresAuth: false },
+      beforeEnter: async (to, from)=>{
+        console.debug("about to enter /game/:gameId");
+        if( TEST_WOUT_WEBSOCKET ){
+          return true;
+        }
+        const gameStore = useGameStore();
+        if( gameStore.websocketConnection instanceof WebSocket ){
+          return true;
+        } else {
+          return { name: "joinExistingGame", params: { gameId: to.params.gameId } };
+        }
+      }
+    },
+    {
+      path: "/create/:boardId",
+      name: "createBoardWithParams",
+      component: Create,
+      meta: { requiresAuth: true },
+      props: true,
+    },
+    {
+      path: "/create",
+      name: "createBoard",
+      component: Create,
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/login",
+      name: "login",
+      component: Login,
+      meta: { requiresAuth: false },
+    },
+    {
+      path: "/signup",
+      name: "signup",
+      component: Signup,
+      meta: { requiresAuth: false },
+    },
+    {
+      path: "/profile",
+      name: "profile",
+      component: Profile,
+      meta: { requiresAuth: true },
+    },
+  ],
+});
+
+router.beforeEach( async ( to, from ) => {
+  const canAccess = await canUserAccess(to);
+  if (!canAccess) return '/login';
+});
+
+async function canUserAccess( to ){
+  if( to.meta.requiresAuth && !["login", "signup"].includes( to.name ) ){
+    const userStore = useUserStore();
+    try{
+      await userStore.initialUserPromise;
+      return userStore.loggedIn;
+    } catch (err){
+      return userStore.loggedIn;
+    }
+  } else {
+    return true;
+  }
+}
+
+export default router;

src/webapp/services/GameService.js

@@ -0,0 +1,85 @@
+import axios from "axios";
+
+let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
+let hostname = window.location.hostname;
+if( window.location.hostname.includes("localhost" ) ){
+    hostname += ':3000';
+}
+
+const API_URL = `${protocol}${hostname}/api`;
+
+export default class GameService{
+
+    checkExistingGame( gameId ){
+        return axios.get(
+            API_URL + `/game/check/${gameId}`,
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        );
+    }
+
+    setupNewHostGame(){
+        return axios.post(
+            API_URL + "/game/host",
+            {},
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        );
+    }
+
+    setupJoinGame( code ){
+        return axios.get(
+            API_URL + "/game/join/setup/" + code,
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        );
+    }
+
+    getBoardToGame( gameId ){
+        return axios.get(
+            API_URL + `/game/${gameId}/board`,
+            {
+                withCredentials: true,
+            }
+        );
+    }
+    
+}
+
+export const GAME_STATES = Object.freeze({
+	none: "gameUndefined",
+  init: "initializing",
+  joining: "joining",
+  waiting: "waiting",
+  inProgress: "inProgress",
+  ended: "ended",
+});
+
+export const QUESTION_TYPES = Object.freeze({
+  textQuestion: "Simple question with text",
+  multilineQuestion: "Question with multiline text",
+  imageQuestion: "Question with text and image(s)",
+  audioQuestion: "Question with text and audio",
+})
+
+export const ANSWER_TYPES = Object.freeze({
+  textAnswer: "Answer with text",
+  imageAnswer: "Answer with text and image",
+})
+
+export const ANSWER_INTERACTION = Object.freeze({
+  buzzerInteraction: "Buzzer",
+  freeTextInteraction: "Free Text",
+})

src/webapp/services/UserService.js

@@ -0,0 +1,104 @@
+import axios from "axios";
+
+let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
+let hostname = window.location.hostname;
+if( window.location.hostname.includes("localhost" ) ){
+    hostname += ':3000';
+}
+
+const API_URL = `${protocol}${hostname}/api`;
+
+export default class UserService{
+
+    signupUser(username, password){
+        return axios.post(
+            API_URL + "/user/signup",
+            {
+                username: username,
+                password: password,
+            },
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        )
+    }
+
+    loginUser(username, password){
+        return axios.post(
+            API_URL + "/user/login",
+            {
+                username: username,
+                password: password,
+            },
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        )
+    }
+
+    getUserFromSession(){
+        return axios.get(
+            API_URL + "/user",
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        )
+    }
+
+    logoutUser(){
+        return axios.post(
+            API_URL + "/user/logout",
+            {},
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        )
+    }
+    
+    getUserBoards(){
+        return axios.get(
+            API_URL + "/user/boards",
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        )
+    }
+    
+    saveUserBoard( boardFormData ){
+        return axios.post(
+            API_URL + "/user/boards/save",
+            boardFormData,
+            {
+                withCredentials: true,
+            }
+        );
+    }
+    
+    getBoardFromUser( boardId ){
+        return axios.get(
+            API_URL + "/user/boards/" + boardId,
+            {   
+                withCredentials: true,
+                headers: {
+                    "Content-Type":"application/json",
+                }
+            }
+        );
+    }
+
+}

src/webapp/services/util.js

@@ -0,0 +1,31 @@
+import BoardEntry from "@/models/BoardEntry";
+import Category from "@/models/Category";
+import Board from "@/models/Board";
+
+export function boardResponseToBoardModel( boardResponse ){
+    let categories = [];
+    
+    for( let cResponseIndex in boardResponse.categories ){
+        let categoriesResponse = boardResponse.categories[cResponseIndex];
+        let boardEntriesTmp = [];
+        for( let bEResponseIndex in categoriesResponse.boardEntries ){
+            let boardEntriesResponse = categoriesResponse.boardEntries[bEResponseIndex];
+            boardEntriesTmp.push(
+                new BoardEntry( 
+                    boardEntriesResponse.questions,
+                    boardEntriesResponse.answer,
+                    boardEntriesResponse.points,
+                )
+            );
+        }
+        categories.push(
+            new Category(
+                categoriesResponse.categoryName,
+                categoriesResponse.categoryDescription,
+                boardEntriesTmp,
+            )
+        );
+    }
+
+    return new Board( boardResponse._id, boardResponse.name, categories );
+}

src/webapp/stores/GameCreationStore.js

@@ -0,0 +1,149 @@
+import { defineStore } from "pinia";
+
+import Question from "@/models/Question";
+import UserService from "@/services/UserService";
+import Answer from "@/models/Answer";
+import BoardEntry from "../models/BoardEntry";
+import Board from "@/models/Board";
+import Category from "@/models/Category";
+import { boardResponseToBoardModel } from "@/services/util";
+
+const uService = new UserService();
+
+
+export const useGameCreationStore = defineStore('gameCreation', {
+  state: ()=>{
+    return {
+      board: new Board( undefined, "New Board", []),
+      images: [],
+      audios: [],
+      answerImages: [],
+    }
+  },
+  actions: {
+    addNewCategory(){
+      let newCategory = new Category("Category " + ( this.board.categories.length + 1 ), "", [] );
+      this.board.categories.push( newCategory );
+    },
+    deleteCategoryOnIndex( index ){
+      this.board.splice( index, 1 );
+    },
+    addEmptyBoardEntryToCategoryOnIndex( cIndex ){
+      let question = new Question( "", "textQuestion" );
+      let answer = new Answer( "", "textAnswer", "buzzerInteraction");
+      let questions = []
+      questions.push( question );
+      this.board.categories[cIndex].boardEntries.push( new BoardEntry( questions, answer, 100, false ) );
+    },
+    addEmptyQuestionToBoardEntry( cIndex, boardEntryIndex, insertIndex ){
+      let question = new Question( "", "textQuestion" );
+      this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.splice( insertIndex, 0, question );
+    },
+    removeQuestionFromBoardEntry( cIndex, boardEntryIndex, removeIndex ){
+      if( this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.length > 1 ){
+        this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.splice( removeIndex, 1 );
+      }
+    },
+    addBoardEntryToCategoryOnIndex( boardEntry, cIndex ){
+      this.board.categories[cIndex].boardEntries.push( boardEntry );
+    },
+    setBoardEntryOnCategoryOnIndex( index, boardEntry, cIndex ){
+      if( index >= this.board.categories[cIndex].boardEntries.length || index < 0  ){
+        return false;
+      }
+      this.board.categories[cIndex].boardEntries[index] = boardEntry;
+    },
+    deleteBoardEntry( cIndex, boardEntryIndex ){
+      this.board.categories[cIndex].boardEntries.splice( boardEntryIndex, 1 );
+    },
+    addImageToQuestion( cIndex, bEIndex, questionIndex, file ){
+      let fileObj = {
+        cIndex: cIndex,
+        bEIndex: bEIndex,
+        qIndex: questionIndex,
+        data: file,
+        url: URL.createObjectURL( file ),
+      };
+      let imageIndex = this.images.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex && imageEntry.qIndex === questionIndex )
+      if( imageIndex === -1 ){
+        this.images.push( fileObj );
+      } else {
+        this.images.splice( imageIndex, 1, fileObj );
+      }
+    },
+    addImageToAnswer( cIndex, bEIndex, file ){
+      let fileObj = {
+        cIndex: cIndex,
+        bEIndex: bEIndex,
+        data: file,
+        url: URL.createObjectURL( file ),
+      };
+      let imageIndex = this.answerImages.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex );
+      if( imageIndex === -1 ){
+        this.answerImages.push( fileObj );
+      } else {
+        this.answerImages.splice( imageIndex, 1, fileObj );
+      }
+    },
+    addAudioToQuestion( cIndex, bEIndex, questionIndex, file ){
+      let fileObj = {
+        cIndex: cIndex,
+        bEIndex: bEIndex,
+        qIndex: questionIndex,
+        data: file,
+        url: URL.createObjectURL( file ),
+      };
+      let audioIndex = this.audios.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex && imageEntry.qIndex === questionIndex )
+      if( audioIndex === -1 ){
+
+        this.audios.push( fileObj );
+      } else {
+        this.audios.splice( audioIndex, 1, fileObj );
+      }
+    },
+    setBoardWithConversion( board ){
+      this.board = boardResponseToBoardModel( board );
+    },
+
+    saveBoard(){
+      return new Promise( ( resolve, reject ) => {
+        let saveBoard = JSON.parse( JSON.stringify( this.board ) );
+        let formData = new FormData();
+        formData.set("board", JSON.stringify( saveBoard ) );
+        for( let imageData of this.images ){
+          let formDataName = imageData.cIndex + ":" + imageData.bEIndex + ":" + imageData.qIndex;
+          formData.append( "images", imageData.data, formDataName );
+        }
+        for( let imageData of this.answerImages ){
+          let formDataName = imageData.cIndex + ":" + imageData.bEIndex + ":answer";
+          formData.append( "images", imageData.data, formDataName );
+        }
+        for( let audioData of this.audios ){
+          let formDataName = audioData.cIndex + ":" + audioData.bEIndex + ":" + audioData.qIndex;
+          formData.append( "audio", audioData.data, formDataName );
+        }
+        uService.saveUserBoard( formData )
+        .then( ( response ) => {
+          if( !response.data.success ){
+            throw new Error( response.data );
+          } else {
+            this.setBoardWithConversion( response.data.board );
+            this.images = [];
+            this.answerImages = [];
+            this.audios = [];
+            resolve();
+          }
+        })
+        .catch( ( error ) => {
+          reject( error );          
+        });
+
+      })
+    },
+
+    saveImagesOfBoard(){
+      return new Promise( ( resolve, reject ) => {
+      });
+    }
+  }
+})

src/webapp/stores/GameStore.js

@@ -0,0 +1,300 @@
+import { defineStore } from "pinia";
+import GameService from "@/services/GameService";
+import { useUserStore } from "@/stores/UserStore";
+import { GAME_STATES } from "@/services/GameService";
+import Board from "@/models/Board";
+import { boardResponseToBoardModel } from "@/services/util";
+
+const gService = new GameService();
+
+export const useGameStore = defineStore('game', {
+  state: ()=>{
+    return {
+      gameState: GAME_STATES.NONE,
+      gameCode: "",
+      playerName: "",
+      playerId: -1,
+      isHost: false,
+      websocketConnection: {},
+      players: [],
+      socketListeners: [],
+      gameService: gService,
+      //concrete Game Data
+      currentQuestion: {},
+      board: new Board( undefined, "New Board", []),
+      acceptAnswers: false,
+    }
+  },
+  actions: {
+    setBoardWithConversion( board ){
+      this.board = boardResponseToBoardModel( board );
+    },
+    setAnswersForPlayers( revealingAnswers ){
+      for( let reveal of revealingAnswers ){
+        let playerIndex = this.players.findIndex( playerEntry => playerEntry._id === reveal.playerId );
+        if( playerIndex !== -1 ){
+          this.players[playerIndex].answer = reveal.answer;
+        }
+      }
+    },
+    checkExistingGame( gameId ){
+      return new Promise( ( resolve, reject ) => {
+        this.gameService.checkExistingGame( gameId )
+        .then( ( res ) => {
+          if( res.data.success ){
+            let data = {
+              isHost: res.data.isHost,
+              gameState: res.data.gameState,
+            }
+            this.gameCode = res.data.gameCode;
+            resolve( data );
+          } else {
+            throw new Error("Request not successfull");
+          }
+        })
+        .catch( ( err ) => {
+          console.debug(err);
+          reject("An Error occured while joining this game! You will be forwarded to the main page");
+        })
+      });
+    },
+    setupNewHostGame(){
+      return new Promise( ( resolve, reject ) =>{
+        this.gameService.setupNewHostGame()
+        .then( res =>{
+          if( res.data.success ){
+            this.gameState = GAME_STATES.INIT;
+            this.gameCode = res.data.code;
+            this.isHost = true;
+            resolve();
+          } else {
+            reject( res.data.error );
+          }
+        })
+        .catch( ( _err ) =>{
+          reject( { error: "catch", message: "Something went wrong while starting the lobby" } );
+        });
+      });
+    },
+    hostNewGame(){
+      return new Promise( ( resolve, reject ) => {
+        this.addSocketListener("noUser", ( data ) => {
+          this.removeSocketListener("noUser");
+          this.removeSocketListener("gameCreated");
+          this.gameState = GAME_STATES.NONE;
+          reject( data.message );
+        });
+        this.addSocketListener("gameCreated", ( data ) => {
+          this.removeSocketListener("gameCreated");
+          this.removeSocketListener("noUser");
+          this.players = data.payload.players;
+          this.gameState = GAME_STATES.NONE;
+          resolve( data.payload.gameId );
+        });
+        
+        let sendObj = { event: "host", message: "Host a new Game" };
+        this.websocketConnection.send( JSON.stringify( sendObj ) );
+      })
+    },
+    prepareGameWithCode( enteredGameCode ){
+      return new Promise( ( resolve, reject ) =>{
+        let isGameCodeValid = this.validateGameCode( enteredGameCode );
+        if( isGameCodeValid === true ){
+          this.gameCode = enteredGameCode;
+          this.gameService.setupJoinGame( this.gameCode )
+          .then( res =>{
+            if( res.data.success ){
+              this.gameState = GAME_STATES.INIT;
+              resolve();
+            } else {
+              reject( res.data.error );
+            }
+          })
+          .catch( ( _err ) =>{
+            reject( "Something went wrong while joining" );
+          });
+        } else {
+          reject( isGameCodeValid );
+        }
+      });
+    },
+    joinGame( playerName ){
+      return new Promise( ( resolve, reject ) =>{
+        if( this.websocketConnection.readyState === 1 ){
+          
+          this.addSocketListener("joinSuccess", ( data ) => {
+            this.removeSocketListener("joinSuccess");
+            this.removeSocketListener("joinFail");
+            this.gameState = GAME_STATES.INIT;
+            this.playerId = data.payload.playerId;
+            resolve( data.payload.gameId );
+          });
+          this.addSocketListener("joinFail", ( data ) => {
+            this.removeSocketListener("joinSuccess");
+            this.removeSocketListener("joinFail");
+            this.gameState = GAME_STATES.NONE;
+            reject( data );
+          });
+
+          this.playerName = playerName;
+          let sendObj = {
+            event: "joinGame",
+            message: "Joining Game",
+            payload: {
+              gameCode: this.gameCode,
+              playerName: this.playerName,
+            }
+          }
+          this.websocketConnection.send( JSON.stringify( sendObj ) );
+        } else {
+          reject( "Comunication failed. Make sure you joined via the \"Join Game\" functionality" );
+        }
+      });
+    },
+    continueHosting(){
+      return new Promise( ( resolve, reject ) => {
+        this.addSocketListener("noUser", ( data ) => {
+          this.removeSocketListener("noUser");
+          this.removeSocketListener("hostRejoined");
+          this.gameState = GAME_STATES.NONE;
+          reject( data.message );
+        });
+        this.addSocketListener("hostRejoined", ( data ) => {
+          this.removeSocketListener("hostRejoined");
+          this.removeSocketListener("noUser");
+          this.players = data.payload.players;
+          this.isHost = true;
+          resolve( data.payload.gameId );
+        });
+        
+        let sendObj = { event: "continueHost", message: "Host a new Game" };
+        this.websocketConnection.send( JSON.stringify( sendObj ) );
+      })
+    },
+    getBoardToGame( gameId ){
+      return new Promise( ( resolve, reject ) => {
+
+        this.gameService.getBoardToGame( gameId )
+        .then( ( res ) => {
+          if( res.data.success ){
+            this.setBoardWithConversion( res.data.board );
+            resolve();
+          } else {
+            reject( res.data );
+          }
+        })
+        .catch( ( err ) => {
+          reject( err );
+        })
+      })
+    },
+    setupWebsocket(){
+      return new Promise( ( resolve, reject) => {
+        
+        this.setDefaultSocketListeners();
+
+        let protocol = ('https:' == document.location.protocol ? 'wss' : 'ws');
+        let hostname = window.location.hostname;
+        if( window.location.hostname.includes("localhost" ) ){
+            hostname += ':3000';
+        }
+        
+        this.websocketConnection = new WebSocket(`${protocol}://${hostname}/ws`);
+
+        let timeout = setTimeout( () => {
+          reject();
+        }, 5000);
+
+        this.websocketConnection.onopen = ( _event ) => {
+          clearTimeout(timeout);
+          resolve();
+        }
+
+        this.websocketConnection.onmessage = ( message ) => {
+          console.debug("Got Message!", message);
+          let dataRaw = message.data;
+          if( dataRaw === undefined || typeof dataRaw !== "string" ){
+            console.error("Data not parseable")
+            return;
+          }
+          let data = JSON.parse( dataRaw );
+          
+          this.socketListeners.forEach( x => {
+            if( data.event === x.event){
+              x.callback(data);
+              console.debug( x.event + " callback called");
+            }
+          });
+        };
+        this.websocketConnection.onerror = ( _event ) => {
+          console.error("Websocket Error");
+        };
+        this.websocketConnection.onclose = ( event ) => {
+          const userStore = useUserStore();
+          userStore.resetInitialUserDataPromise();
+          userStore.initialUserPromise
+          .then( ( userData ) => {
+            userStore.setUser( userData );
+          })
+          .catch( ( err ) => {
+            console.error( err );
+          });
+
+          this.resetGameState();
+
+          this.router.push( { name: "home" } );
+        }
+      });
+    },
+    resetGameState(){
+      this.gameState = GAME_STATES.NONE;
+      this.gameCode = "";
+      this.playerName = "";
+      this.playerId = -1;
+      this.isHost = false;
+      this.players = [];
+      this.board = new Board( undefined, "New Board", []);
+      this.acceptAnswers =  false;
+    },
+    closeWebSocket(){
+      this.websocketConnection.close();
+    },
+    validateGameCode( gameCode ){
+      if( gameCode.length !== 8 ){
+        return "Code is 8 characters long";
+      }
+      return true;
+    },
+    addSocketListener( eventName, callback ){
+      if( this.socketListeners.find( x => x.event === eventName) ){
+        return false;
+      }
+      this.socketListeners.push({
+        event: eventName,
+        callback: callback,
+      });
+      return true;
+    },
+    removeSocketListener( eventName ){
+      let deleteIndex = this.socketListeners.findIndex( x => x.event === eventName);
+      if( deleteIndex !== -1 ){
+        this.socketListeners.splice( deleteIndex, 1 );
+        return true;
+      } else {
+        return false;
+      }
+    },
+    sendEvent( eventName, payload ){
+      if( this.websocketConnection ){
+        this.websocketConnection.send( JSON.stringify( { event: eventName, payload: payload } ) );
+      }
+    },
+    setDefaultSocketListeners(){
+      this.addSocketListener("playersUpdated", ( data ) => {
+        if( data.payload !== undefined ){
+          this.players = data.payload.players;
+        }
+      });
+    }
+  },
+})

src/webapp/stores/UserStore.js

@@ -0,0 +1,64 @@
+import { defineStore } from "pinia";
+import UserService from "@/services/UserService";
+
+const uService = new UserService();
+
+export const useUserStore = defineStore('user', {
+  state: ()=>{
+    return {
+      loggedIn: false,
+      username: "",
+      admin: false,
+      initialUserPromise: new Promise( (resolve, reject ) => {
+        uService.getUserFromSession()
+        .then( res => {
+          if( res.data.success ){
+            resolve( res.data.user );
+          } else {
+            reject( false );
+          }
+        })
+        .catch( err => {
+          console.debug(err);
+          reject( err );
+        })
+      }),
+      userService: uService,
+    }
+  },
+  actions: {
+    login( username, password ) {
+      return this.userService.loginUser(username, password);
+    },
+    signup( username, password ) {
+      return this.userService.signupUser(username, password);
+    },
+    logout(){
+      if( this.loggedIn ){
+        return this.userService.logoutUser();
+      } else {
+        return Promise.reject("Not logged in");
+      }
+    },
+    setUser( user ){
+      this.loggedIn = true;
+      this.username = user.username;
+    },
+    resetInitialUserDataPromise(){
+      this.initialUserPromise = new Promise( (resolve, reject ) => {
+        this.userService.getUserFromSession()
+        .then( res => {
+          if( res.data.success ){
+            resolve( res.data.user );
+          } else {
+            reject( false );
+          }
+        })
+        .catch( err => {
+          console.debug(err);
+          reject( err );
+        });
+      });
+    }
+  },
+})