Commit d21eb091 authored by ZeMKI's avatar ZeMKI
Browse files

Update q-sort.vue

* solved bug that made the re-sort of the card buggy.
* now the card that is not sorted anymore is opaque again.
parent 1b4270a5
......@@ -9,7 +9,7 @@
@mouseleave="hoverfalse(index)"
@mouseover="hovertrue(index)"
>
<div :class="t.arrayofQsortPosition ? 'block opacity-50' : 'block'">
<div :class="t.arrayofQsortPosition !== {} && t.arrayofQsortPosition ? 'block opacity-50' : 'block'">
<img :src="t.image_path"
alt="token"
style="width: 50px;height: 50px;z-index:100;">
......@@ -42,7 +42,7 @@
'bg-gray-900 text-white border border-solid border-white qsortlg:w-'+sizes[qsortSizeIndex]+' qsortmd:w-16 qsortsm:w-12 qsortlg:h-'+sizes[qsortSizeIndex]+' qsortmd:h-16 qsortsm:h-12 select-none inline-block align-middle justify-center' "
@click="assignTokenToCell(key,index,(column[index-1] === '---blank---'))"
>
<img v-if="arrayOfQsort[key][index]" :src="arrayOfQsort[key][index].image_path">
<img v-if="arrayOfQsort[key][index]" :src="arrayOfQsort[key][index].image_path" class="w-full h-full">
</div>
......@@ -76,6 +76,11 @@ export default {
arrayOfQsort: []
}
},
watch: {
'qsortSizeIndex': function (newVal, oldVal) {
this.setCellSize();
}
},
computed: {
'basicWidth': function () {
return this.sizes[this.qsortSizeIndex];
......@@ -140,7 +145,8 @@ export default {
{
setCellSize: function () {
let windowSize = window.innerWidth;
let widthMultiplier = this.sizes[this.qsortSizeIndex];
let self = this;
let widthMultiplier = self.sizes[this.qsortSizeIndex];
let top = 6;
let mediaQuerySM = windowSize > 639 && windowSize < 768;
let mediaQueryMD = windowSize >= 768 && windowSize < 1366;
......@@ -172,16 +178,24 @@ export default {
assignTokenToCell: function (key, n, skip) {
if (!_.isEmpty(this.selectedToken) && !skip) {
// @todo if I put the token in a position that is occupied by another token remove the position from the token array and assign that to the new moved token
let tokenToChange = _.find(this.tokens, (o) => o.id === this.selectedToken.id);
let tokenToChange = _.find(this.tokens, (t) => t.id === this.selectedToken.id);
if(!_.isEmpty(this.arrayOfQsort[key][n])){
console.log("not empty");
let tokenOccupyingSpace = _.find(this.tokens, (t) => t.id === this.arrayOfQsort[key][n].id);
console.log(tokenOccupyingSpace)
delete tokenOccupyingSpace.arrayofQsortPosition;
}
this.arrayOfQsort[key][n] = this.selectedToken;
if (!_.isEmpty(tokenToChange.arrayofQsortPosition)) {
let tokenAlreadySorted = !_.isEmpty(tokenToChange.arrayofQsortPosition)
if (tokenAlreadySorted) {
this.arrayOfQsort[tokenToChange.arrayofQsortPosition[0]][tokenToChange.arrayofQsortPosition[1]] = {};
}
tokenToChange.arrayofQsortPosition = [key, n];
this.$store.commit('updateselectedtoken', {});
this.$forceUpdate()
tokenToChange.position = [key, Math.abs(n - (this.arrayOfQsort[key].length - 1))]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment