From 76182efef302bf47e48be45e0b48199d732ba943 Mon Sep 17 00:00:00 2001
From: EisiBaer <manuel.eisinger@protonmail.com>
Date: Sat, 5 Aug 2023 22:20:44 +0200
Subject: [PATCH] Added ability to change order of categories and board entries

---
 package-lock.json                             | 105 ++++++++++++------
 package.json                                  |  22 ++--
 src/server/routes/UserRouter.js               |  13 +--
 src/webapp/components/pages/Create.vue        |   7 +-
 src/webapp/components/pages/Game.vue          |   7 +-
 src/webapp/components/views/BoardEditView.vue |  35 +++---
 .../components/views/CategoryEditView.vue     |  52 +++++++--
 7 files changed, 154 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b225f1..90fd6b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,10 +30,11 @@
         "morgan": "^1.10.0",
         "multer": "^1.4.5-lts.1",
         "pinia": "^2.0.28",
+        "uuid": "^9.0.0",
         "vite": "^4.0.0",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6",
-        "vue3-draggable": "^2.0.9",
+        "vuedraggable": "^4.1.0",
         "ws": "^8.12.1"
       },
       "devDependencies": {
@@ -1335,6 +1336,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@smithy/middleware-retry/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@smithy/middleware-serde": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@smithy/middleware-serde/-/middleware-serde-1.0.1.tgz",
@@ -3565,11 +3575,11 @@
       }
     },
     "node_modules/mongodb": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-4.14.0.tgz",
-      "integrity": "sha512-coGKkWXIBczZPr284tYKFLg+KbGPPLlSbdgfKAb6QqCFt5bo5VFZ50O3FFzsw4rnkqjwT6D8Qcoo9nshYKM7Mg==",
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-4.16.0.tgz",
+      "integrity": "sha512-0EB113Fsucaq1wsY0dOhi1fmZOwFtLOtteQkiqOXGklvWMnSH3g2QS53f0KTP+/6qOkuoXE2JksubSZNmxeI+g==",
       "dependencies": {
-        "bson": "^4.7.0",
+        "bson": "^4.7.2",
         "mongodb-connection-string-url": "^2.5.4",
         "socks": "^2.7.1"
       },
@@ -3591,13 +3601,13 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.0.tgz",
-      "integrity": "sha512-0zrKDEnmNscYyAyN94smo2LlJ63gaezKHpHM+KQ+6EiAgAnah5Kt3hQSYzOTQX/63YNdT1oJXiLlB5LqTdcjUw==",
+      "version": "6.11.5",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.11.5.tgz",
+      "integrity": "sha512-ZarPe1rCHG4aVb78xLuok4BBIm0HMz/Y/CjxYXCk3Qz1mEhS7bPMy6ZhSX2/Dng//R7ei8719j6K87UVM/1b3g==",
       "dependencies": {
-        "bson": "^4.7.0",
+        "bson": "^4.7.2",
         "kareem": "2.5.1",
-        "mongodb": "4.14.0",
+        "mongodb": "4.16.0",
         "mpath": "0.9.0",
         "mquery": "4.0.3",
         "ms": "2.1.3",
@@ -4432,6 +4442,11 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4660,10 +4675,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "optional": true,
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -4773,12 +4787,15 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue3-draggable": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/vue3-draggable/-/vue3-draggable-2.0.9.tgz",
-      "integrity": "sha512-OpjCSzGpkXsraBJzYrMS5LKXHThb0r+V8zItUNOZF7gZgdH0Cg2IL3XT0x4IhJdMaLvzRZCXE6UQj/459npJIw==",
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
       "peerDependencies": {
-        "vue": "^3.0.0"
+        "vue": "^3.0.1"
       }
     },
     "node_modules/webidl-conversions": {
@@ -5823,6 +5840,14 @@
         "@smithy/util-retry": "^1.0.3",
         "tslib": "^2.5.0",
         "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "optional": true
+        }
       }
     },
     "@smithy/middleware-serde": {
@@ -7513,12 +7538,12 @@
       }
     },
     "mongodb": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-4.14.0.tgz",
-      "integrity": "sha512-coGKkWXIBczZPr284tYKFLg+KbGPPLlSbdgfKAb6QqCFt5bo5VFZ50O3FFzsw4rnkqjwT6D8Qcoo9nshYKM7Mg==",
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-4.16.0.tgz",
+      "integrity": "sha512-0EB113Fsucaq1wsY0dOhi1fmZOwFtLOtteQkiqOXGklvWMnSH3g2QS53f0KTP+/6qOkuoXE2JksubSZNmxeI+g==",
       "requires": {
         "@aws-sdk/credential-providers": "^3.186.0",
-        "bson": "^4.7.0",
+        "bson": "^4.7.2",
         "mongodb-connection-string-url": "^2.5.4",
         "saslprep": "^1.0.3",
         "socks": "^2.7.1"
@@ -7534,13 +7559,13 @@
       }
     },
     "mongoose": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.10.0.tgz",
-      "integrity": "sha512-0zrKDEnmNscYyAyN94smo2LlJ63gaezKHpHM+KQ+6EiAgAnah5Kt3hQSYzOTQX/63YNdT1oJXiLlB5LqTdcjUw==",
+      "version": "6.11.5",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-6.11.5.tgz",
+      "integrity": "sha512-ZarPe1rCHG4aVb78xLuok4BBIm0HMz/Y/CjxYXCk3Qz1mEhS7bPMy6ZhSX2/Dng//R7ei8719j6K87UVM/1b3g==",
       "requires": {
-        "bson": "^4.7.0",
+        "bson": "^4.7.2",
         "kareem": "2.5.1",
-        "mongodb": "4.14.0",
+        "mongodb": "4.16.0",
         "mpath": "0.9.0",
         "mquery": "4.0.3",
         "ms": "2.1.3",
@@ -8096,6 +8121,11 @@
         "smart-buffer": "^4.2.0"
       }
     },
+    "sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8271,10 +8301,9 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "optional": true
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "vary": {
       "version": "1.1.2",
@@ -8327,11 +8356,13 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
-    "vue3-draggable": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/vue3-draggable/-/vue3-draggable-2.0.9.tgz",
-      "integrity": "sha512-OpjCSzGpkXsraBJzYrMS5LKXHThb0r+V8zItUNOZF7gZgdH0Cg2IL3XT0x4IhJdMaLvzRZCXE6UQj/459npJIw==",
-      "requires": {}
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      }
     },
     "webidl-conversions": {
       "version": "7.0.0",
diff --git a/package.json b/package.json
index 34843c4..546732d 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,23 @@
   "name": "jeobeardy",
   "version": "1.0.0",
   "description": "Jeobeardy (/dʒebeərdi/) is similiar to but not quite like Jeopardy. It is a quiz game where you can create your own boards with categories and then make your friends compete in a fun and interactive way",
-  "keywords": ["jeobeardy", "quiz", "jeopardy", "game"],
+  "keywords": [
+    "jeobeardy",
+    "quiz",
+    "jeopardy",
+    "game"
+  ],
   "bugs": {
     "url": "https://github.com/EisiBaer/Jeobeardy/issues",
     "email": "jeobeardy@proton.me"
   },
   "license": "GPL-3.0-or-later",
   "author": {
-    "name" : "Manuel Eisinger"
+    "name": "Manuel Eisinger"
   },
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/EisiBaer/Jeobeardy"
+    "type": "git",
+    "url": "https://github.com/EisiBaer/Jeobeardy"
   },
   "private": true,
   "scripts": {
@@ -29,6 +34,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@popperjs/core": "^2.11.6",
+    "@vitejs/plugin-vue": "^4.0.0",
     "axios": "^1.3.3",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.20.1",
@@ -44,12 +50,12 @@
     "morgan": "^1.10.0",
     "multer": "^1.4.5-lts.1",
     "pinia": "^2.0.28",
+    "uuid": "^9.0.0",
+    "vite": "^4.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue3-draggable": "^2.0.9",
-    "ws": "^8.12.1",
-    "vite": "^4.0.0",
-    "@vitejs/plugin-vue": "^4.0.0"
+    "vuedraggable": "^4.1.0",
+    "ws": "^8.12.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
diff --git a/src/server/routes/UserRouter.js b/src/server/routes/UserRouter.js
index 738a220..020f615 100644
--- a/src/server/routes/UserRouter.js
+++ b/src/server/routes/UserRouter.js
@@ -1,10 +1,11 @@
 const express = require("express");
 const router = express.Router();
+const multer = require('multer');
+const fs = require("node:fs/promises");
+const { v4: uuidv4 } = require("uuid");
 
 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({
@@ -23,13 +24,7 @@ const storage = multer.diskStorage({
             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;
+        let filename = uuidv4() + fileExtension;
 
         fs.access( "public/uploads/" + filename, fs.constants.F_OK )
         .then( ( ) =>{
diff --git a/src/webapp/components/pages/Create.vue b/src/webapp/components/pages/Create.vue
index 69e457f..da80774 100644
--- a/src/webapp/components/pages/Create.vue
+++ b/src/webapp/components/pages/Create.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, nextTick } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Modal } from "bootstrap";
 
@@ -250,6 +250,7 @@ if( route.params.boardId !== undefined ){
               :isAnswerRevealed="showingAnswer"
               :showingBottomView="showingBottomView"
               :isHost="true"
+              :isBeingPlayed="false"
               @showBoard="boardSelected"
               @showQuestion="showQuestion"
               @showAnswer="showAnswer"
@@ -300,8 +301,8 @@ if( route.params.boardId !== undefined ){
           </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">
+          <div class="d-flex flex-column w-100 h-100">
+            <div class="overflow-auto flex-grow-1">
               <component :is="getEditComponent" v-bind="getPropsForSelectedObjectEditView" @questionIndexChanged="specificQuestionLayerSelected"/>
             </div>
             <div id="save-cancel-button-div" class="w-100 border-top border-pink-accent-primary">
diff --git a/src/webapp/components/pages/Game.vue b/src/webapp/components/pages/Game.vue
index a941c4b..bec4508 100644
--- a/src/webapp/components/pages/Game.vue
+++ b/src/webapp/components/pages/Game.vue
@@ -64,11 +64,6 @@ const anyPlayerIsAnswering = computed( () => {
   return gameStore.players.findIndex( playerEntry => playerEntry.isAnswering ) !== -1;
 });
 
-const isBeingPlayed = computed( () => {
-  return route.path.includes("game");
-});
-
-
 function boardSelected(){
   selectedObject.value = gameStore.board;
   categoryIndex.value = -1;
@@ -433,7 +428,7 @@ onBeforeRouteLeave((to, from) => {
               :isHost="gameStore.isHost"
               :isPlayerChoosing="gameStore.isPlayerChoosing"
               :anyPlayerIsAnswering="anyPlayerIsAnswering"
-              :isBeingPlayed="isBeingPlayed"
+              :isBeingPlayed="true"
               :chosenEntry="gameStore.chosenEntry"
               @showBoard="showBoard"
               @showQuestion="showQuestion"
diff --git a/src/webapp/components/views/BoardEditView.vue b/src/webapp/components/views/BoardEditView.vue
index 7035808..d9d7cc2 100644
--- a/src/webapp/components/views/BoardEditView.vue
+++ b/src/webapp/components/views/BoardEditView.vue
@@ -1,16 +1,11 @@
 <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("");
 
@@ -23,7 +18,20 @@ function addCategoryButtonClicked(_event){
     state.board.categories.push( category );
   })
   newCategoryName.value = "";
-  // gameCreationStore.board.categories.push( category );
+}
+function moveUpButtonClicked( pressedIndex ){
+  gameCreationStore.$patch((state)=>{
+    let tmpCat = state.board.categories[pressedIndex];
+    state.board.categories[pressedIndex] = state.board.categories[pressedIndex - 1];
+    state.board.categories[pressedIndex - 1] = tmpCat;
+  })
+}
+function moveDownButtonClicked( pressedIndex ){
+  gameCreationStore.$patch((state)=>{
+    let tmpCat = state.board.categories[pressedIndex];
+    state.board.categories[pressedIndex] = state.board.categories[pressedIndex + 1];
+    state.board.categories[pressedIndex + 1] = tmpCat;
+  })
 }
 function deleteCategoryButtonClicked( cIndex ){
   gameCreationStore.$patch((state)=>{
@@ -31,16 +39,11 @@ function deleteCategoryButtonClicked( cIndex ){
   })
 }
 
-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="d-flex flex-column px-3">
       <div class="my-3">
         <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Board</h3>
         <div>
@@ -53,7 +56,13 @@ onMounted( () => {
           <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="moveUpButtonClicked(categoryListIndex)" :disabled="categoryListIndex === 0">
+                  <font-awesome-icon icon="fa-solid fa-angle-up" />
+                </button>
+                <button tabindex="-1" class="btn btn-pink-accent-primary" @click="moveDownButtonClicked(categoryListIndex)" :disabled="categoryListIndex === gameCreationStore.board.categories.length-1">
+                  <font-awesome-icon icon="fa-solid fa-angle-down" />
+                </button>
+                <span class="form-control border-pink-accent-primary text-truncate">{{ category.categoryName }}</span>
                 <button tabindex="-1" class="btn btn-pink-accent-primary" @click="deleteCategoryButtonClicked(categoryListIndex)">
                   <font-awesome-icon icon="fa-solid fa-trash" />
                 </button>
diff --git a/src/webapp/components/views/CategoryEditView.vue b/src/webapp/components/views/CategoryEditView.vue
index 01e7ce3..c427abe 100644
--- a/src/webapp/components/views/CategoryEditView.vue
+++ b/src/webapp/components/views/CategoryEditView.vue
@@ -1,29 +1,39 @@
 <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");
 
+function moveUpButtonClicked( pressedIndex ){
+  gameCreationStore.$patch((state)=>{
+    let tmpCat = state.board.categories[props.categoryIndex].boardEntries[pressedIndex];
+    state.board.categories[props.categoryIndex].boardEntries[pressedIndex] = state.board.categories[props.categoryIndex].boardEntries[pressedIndex - 1];
+    state.board.categories[props.categoryIndex].boardEntries[pressedIndex - 1] = tmpCat;
+  })
+}
 
-onMounted( () => {
-  buttonDivHeight.value = document.getElementById("save-cancel-button-div").offsetHeight;
-  navbarHeight.value = document.getElementById("board-entry-edit-view-container").offsetHeight;
-});
+function moveDownButtonClicked( pressedIndex ){
+  gameCreationStore.$patch((state)=>{
+    let tmpCat = state.board.categories[props.categoryIndex].boardEntries[pressedIndex];
+    state.board.categories[props.categoryIndex].boardEntries[pressedIndex] = state.board.categories[props.categoryIndex].boardEntries[pressedIndex + 1];
+    state.board.categories[props.categoryIndex].boardEntries[pressedIndex + 1] = tmpCat;
+  })
+}
+
+function deleteBoardEntryButtonClicked( pressedIndex ){
+  gameCreationStore.$patch((state)=>{
+    state.board.categories[props.categoryIndex].boardEntries.splice( pressedIndex, 1 );
+  })
+}
 
 </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="d-flex flex-column px-3">
       <div class="my-3 pb-3">
         <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Category</h3>
         <div>
@@ -34,6 +44,26 @@ onMounted( () => {
           <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>
+          <label class="form-label fs-4 mt-3">Questions</label>
+          <div v-if="gameCreationStore.board.categories.length === 0">No questions yet</div>
+          <template v-else>
+            <div v-for="( boardEntry, boardEntryIndex ) in gameCreationStore.board.categories[props.categoryIndex].boardEntries" :key="boardEntryIndex">
+              <div class="input-group mb-1">
+                <button tabindex="-1" class="btn btn-pink-accent-primary" @click="moveUpButtonClicked(boardEntryIndex)" :disabled="boardEntryIndex === 0">
+                  <font-awesome-icon icon="fa-solid fa-angle-up" />
+                </button>
+                <button tabindex="-1" class="btn btn-pink-accent-primary" @click="moveDownButtonClicked(boardEntryIndex)" :disabled="boardEntryIndex === gameCreationStore.board.categories[props.categoryIndex].boardEntries.length-1">
+                  <font-awesome-icon icon="fa-solid fa-angle-down" />
+                </button>
+                <span class="form-control border-pink-accent-primary text-truncate">{{ boardEntry.answer.answerText + " (" + boardEntry.points + " points)" }}</span>
+                <button tabindex="-1" class="btn btn-pink-accent-primary" @click="deleteBoardEntryButtonClicked(boardEntryIndex)">
+                  <font-awesome-icon icon="fa-solid fa-trash" />
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>