Added ability to change order of categories and board entries
This commit is contained in:
EisiBaer
parent
be8aab0986
commit
76182efef3
|
|
@ -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",
|
||||
|
|
|
|||
16
package.json
16
package.json
|
|
@ -2,7 +2,12 @@
|
|||
"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"
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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( ( ) =>{
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue