84 lines
No EOL
3 KiB
Vue
84 lines
No EOL
3 KiB
Vue
<template>
|
|
<div class="bg-dark-600 rounded-lg flex overflow-hidden">
|
|
<div class="flex-grow flex items-center justify-center gap-2 px-3 py-4">
|
|
<template v-if="item.interaction.type === 'use'">
|
|
<HandPointingIcon class="text-4xl mb-6"/>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<ObjectPicture :object-id="item.interaction.objectId"/>
|
|
<div class="text-sm text-gray-200 text-center">
|
|
{{ game.allObjectsById.get(item.interaction.objectId)!.label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else v-for="(objectId, index) in item.interaction.objectIds" :key="objectId">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<ObjectPicture :object-id="objectId"/>
|
|
<div class="text-sm text-gray-200 text-center">
|
|
{{ game.allObjectsById.get(objectId)!.label }}
|
|
</div>
|
|
</div>
|
|
<PlusIcon v-if="index < item.interaction.objectIds.size - 1" class="text-3xl mb-6"/>
|
|
</template>
|
|
</div>
|
|
<div class="flex flex-col justify-between items-center bg-gray-800 w-17">
|
|
<div class="flex flex-col justify-center items-center pt-3 pb-2">
|
|
<div class="text-2xl">{{ item.votes }}</div>
|
|
<div class="text-sm text-center">
|
|
Vote{{item.votes === 1 ? "" : "s" }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
v-if="mode === 'audience'"
|
|
class="align-end py-2 w-full"
|
|
:class="game.currentInteractionId === item.id ? 'bg-blue-500' : 'bg-gray-700'"
|
|
@click="toggleVote()"
|
|
>
|
|
+1
|
|
</button>
|
|
<button
|
|
v-if="mode === 'director' && (item.interaction.type !== 'combine' || findMatchingCombinationInteraction(game.currentRoom.combinations, item.interaction.objectIds))"
|
|
class="align-end py-1 w-full bg-green-800"
|
|
@click="game.activateInteractionQueueItem(item.id)"
|
|
>
|
|
<CheckIcon class="relative top-2px"/>
|
|
</button>
|
|
<button
|
|
v-if="mode === 'director'"
|
|
class="align-end py-1 w-full bg-red-900"
|
|
@click="game.removeInteractionQueueItem(item.id)"
|
|
>
|
|
<TrashIcon class="relative top-2px"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import PlusIcon from "virtual:icons/ph/plus-bold"
|
|
import TrashIcon from "virtual:icons/ph/trash-bold"
|
|
import CheckIcon from "virtual:icons/ph/check-bold"
|
|
import HandPointingIcon from "virtual:icons/ph/hand-pointing-duotone"
|
|
import type { InteractionQueueItem } from "../../shared/script/types"
|
|
import ObjectPicture from "./ObjectPicture.vue"
|
|
import { useGame } from "../game"
|
|
import { findMatchingCombinationInteraction } from "../../shared/util"
|
|
|
|
const props = defineProps<{
|
|
item: InteractionQueueItem
|
|
mode: "audience" | "director"
|
|
}>()
|
|
|
|
const game = useGame()
|
|
|
|
function toggleVote() {
|
|
if (game.currentInteractionId === props.item.id) {
|
|
game.revokeCurrentInteractionVote()
|
|
} else {
|
|
game.voteForInteraction(props.item.interaction)
|
|
}
|
|
}
|
|
</script> |