jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved tabletop characters to left side of the screen

Browse Source
This commit is contained in:
Thaum Rystra
2024-04-12 17:05:20 +02:00
parent 4793b34a55
commit 08640f2bf2
27 changed files with 496 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/imports/client/ui/components/HexagonProgress.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div
class="hexagon-progress"
:style="fillStyle"
>
<div class="hexagon-content">
<slot />
</div>
</div>
</template>
<script>
export default {
props: {
percent: {
type: Number,
required: true
}
},
computed: {
fillStyle() {
return {
'--p': `${this.percent}%`
};
}
}
};
</script>
<style>
.hexagon-progress {
position: relative;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);
background: conic-gradient(red var(--p),#0000 0);
background-color: #5e1010; /* adjust the color as needed */
}
.hexagon-content {
position: absolute;
inset: 4px;
background-color: #252525;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);
}
</style>

5
app/imports/client/ui/pages/Tabletops.vue
View File

@@ -58,7 +58,10 @@ export default {
addTabletop(){
this.addTabletopLoading = true;
insertTabletop.call(error => {
if (error) snackbar(error.message);
if (error) {
console.error(error)
snackbar({ text: error.reason || error.message || error.toString() });
}
this.addTabletopLoading = false;
});
}

2
app/imports/client/ui/tabletop/CharacterSheetDialog.vue
View File

@@ -59,7 +59,7 @@
<script lang="js">
import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
import CharacterSheet from '/imports/client/ui/creature/character/CharacterSheet.vue';
import Creatures from '/imports/api/creature/creatures/Creatures.js';
import Creatures from '/imports/api/creature/creatures/Creatures';
export default {
components: {

41
app/imports/client/ui/tabletop/TabletopComponent.vue
View File

@@ -68,6 +68,36 @@
</v-btn>
</div>
</v-row>
<div class="d-flex flex-column align-start ml-2">
<div class="d-flex flex-column">
<tabletop-creature-list-item
v-for="creature in creatures"
:key="creature._id"
:model="creature"
:title="creature.name"
:active="activeCreatureId === creature._id"
:targeted="targets.includes(creature._id)"
:show-target-btn="targets.includes(creature._id) || moreTargets"
v-on="(!activeActionId || (targets.includes(creature._id) || moreTargets)) ? {
click: () => {
if (activeActionId) {
if (targets.includes(creature._id)) {
untarget(creature._id)
} else {
if (moreTargets) targets.push(creature._id);
}
} else {
activeCreatureId = creature._id;
targets = [];
activeActionId = undefined;
}
}
} : {}"
@target="targets.push(creature._id)"
@untarget="untarget(creature._id)"
/>
</div>
</div>
</v-container>
<v-footer
inset
@@ -96,13 +126,14 @@
import addCreaturesToTabletop from '/imports/api/tabletop/methods/addCreaturesToTabletop';
import TabletopCreatureCard from '/imports/client/ui/tabletop/TabletopCreatureCard.vue';
import TabletopMap from '/imports/client/ui/tabletop/TabletopMap.vue';
import Creatures from '/imports/api/creature/creatures/Creatures.js';
import Creatures from '/imports/api/creature/creatures/Creatures';
import MiniCharacterSheet from '/imports/client/ui/creature/character/MiniCharacterSheet.vue';
import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions.js';
import ActionCard from '/imports/client/ui/tabletop/TabletopActionCard.vue';
import SelectedCreatureBar from '/imports/client/ui/tabletop/selectedCreatureBar/SelectedCreatureBar.vue';
import TabletopCreatureListItem from '/imports/client/ui/tabletop/TabletopCreatureListItem.vue';
const getProperties = function (creatureId, selector = {}) {
return CreatureProperties.find({
@@ -129,6 +160,7 @@ export default {
ActionCard,
MiniCharacterSheet,
SelectedCreatureBar,
TabletopCreatureListItem,
},
props: {
model: {
@@ -159,7 +191,7 @@ export default {
},
},
creatures(){
return Creatures.find({ tabletop: this.model._id });
return Creatures.find({ tabletopId: this.model._id });
},
actions(){
return getProperties(this.activeCreatureId, { type: 'action', actionType: { $ne: 'event'} });
@@ -196,7 +228,10 @@ export default {
tabletopId: this.model._id,
creatureIds: charIds,
}, error => {
if (error) snackbar(error.message);
if (error) {
console.error(error)
snackbar({ text: error.message || error.toString() });
}
});
},
});

48
app/imports/client/ui/tabletop/TabletopCreatureListItem.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div
class="d-flex align-center"
>
<hexagon-progress
:percent="66"
style="z-index: 1; width: 60px; height: 60px; margin-right: -16px"
>
<hexagon-progress
:percent="30"
style="width: 100%; height: 100%"
>
<v-img
contain
src="/images/paragons/kira.png"
/>
</hexagon-progress>
</hexagon-progress>
<v-card
class="flex-grow-1"
style="margin: 16px 16px 16px 0px;"
>
<div style="margin: 8px 8px 8px 24px;">
{{ title }}
</div>
</v-card>
</div>
</template>
<script lang="js">
import HexagonProgress from '/imports/client/ui/components/HexagonProgress.vue';
export default {
components: {
HexagonProgress,
},
props: {
title: {
type: String,
default: 'Title'
},
}
};
</script>
<style scoped>
</style>

2
app/imports/client/ui/tabletop/selectedCreatureBar/SelectedCreatureBar.vue
View File

@@ -135,7 +135,7 @@
</template>
<script lang="js">
import Creatures from '/imports/api/creature/creatures/Creatures.js';
import Creatures from '/imports/api/creature/creatures/Creatures';
import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
import TabletopActionCard from '/imports/client/ui/tabletop/TabletopActionCard.vue';
import CreatureBarIcon from '/imports/client/ui/tabletop/selectedCreatureBar/CreatureBarIcon.vue';