Added ability to change order of categories and board entries
This commit is contained in:
EisiBaer committed
1 parent
be8aab0986
commit
76182efef3
7 files changed
+154
-87
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user