add message cloud
This commit is contained in:
parent
3c10c311d1
commit
dda3bc83d8
@ -10,7 +10,6 @@ import { UnauthorizedError } from './UnauthorizedError';
|
||||
import WelcomeGameBlock from './WelcomeGameBlock.vue';
|
||||
import HeaderText from './HeaderText.vue';
|
||||
import MessageCloud from './MessageCloud.vue';
|
||||
import HRLine from './HRLine.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@ -60,21 +59,17 @@ async function getTeam() {
|
||||
}
|
||||
}
|
||||
|
||||
function addAction() {
|
||||
async function addAction() {
|
||||
inputPlace.value = true
|
||||
const placeValue = place.value.trim()
|
||||
if (placeValue === "") {
|
||||
place.value = ""
|
||||
return
|
||||
}
|
||||
letsgo(placeValue)
|
||||
await apiLetsgo(login.value, password.value, placeValue)
|
||||
place.value = ""
|
||||
}
|
||||
|
||||
async function letsgo(place: string) {
|
||||
await apiLetsgo(login.value, password.value, place)
|
||||
}
|
||||
|
||||
const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
|
||||
await nextTick();
|
||||
if (scrollContainer.value) {
|
||||
@ -155,8 +150,9 @@ onMounted(() => {
|
||||
:disabled="gameState !== 'RUN'">
|
||||
</div>
|
||||
<div class="game-button-run-shadow"></div>
|
||||
<button class="game-button-run" type="submit"
|
||||
:disabled="gameState !== 'RUN'"><HeaderText>Поехали</HeaderText></button>
|
||||
<button class="game-button-run" type="submit" :disabled="gameState !== 'RUN'">
|
||||
<HeaderText>Поехали</HeaderText>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -173,24 +169,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="action in team.actions" :key="action.id">
|
||||
<MessageCloud :action="action">
|
||||
<HRLine></HRLine>
|
||||
<div class="message-content">
|
||||
<div v-if="action.image.length">
|
||||
<img v-bind:src="action.image" class="message-image" />
|
||||
</div>{{ action.text }}
|
||||
</div>
|
||||
<HRLine v-if="action.buttons?.length"></HRLine>
|
||||
<button v-for="door in action.buttons" :key="door.code" class="button-dialog"
|
||||
v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
|
||||
{{ door.name }}
|
||||
</button>
|
||||
|
||||
<HRLine v-if="action.applications.length"></HRLine>
|
||||
<div class="message-footer" v-for="application in action.applications" :key="application.name">
|
||||
{{ application.number }} Приложение: {{ application.name }}
|
||||
</div>
|
||||
</MessageCloud>
|
||||
<MessageCloud :action="action" :gameState="gameState" :login="login" :password="password"></MessageCloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -233,22 +212,6 @@ onMounted(() => {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-weight: 500;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-image {
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
font-weight: 400;
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
.messages-block {
|
||||
top: 95px;
|
||||
height: calc(100dvh - 100px - 76px);
|
||||
@ -388,25 +351,4 @@ onMounted(() => {
|
||||
.controller-metal-right {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.button-dialog {
|
||||
background-color: var(--main-color);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
|
||||
padding: 6px 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 15px;
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.button-dialog:hover {
|
||||
background-color: var(--main-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.button-dialog:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/* код */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<hr class="hr" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hr {
|
||||
margin: 7px 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import MessageCloudHeader from './MessageCloudHeader.vue';
|
||||
import type { Action } from './models';
|
||||
import { apiLetsgo } from './client';
|
||||
|
||||
interface Props {
|
||||
action: Action
|
||||
gameState: string
|
||||
login: string
|
||||
password: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
function clickCollapse() {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.action.isOpen = !props.action.isOpen
|
||||
}
|
||||
|
||||
async function letsgo(place: string) {
|
||||
await apiLetsgo(props.login, props.password, place)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-cloud">
|
||||
<MessageCloudHeader :action="props.action"></MessageCloudHeader>
|
||||
<div class="message-header">
|
||||
{{ props.action.place }}: {{ props.action.name }}
|
||||
<span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
|
||||
</div>
|
||||
<div v-show="props.action.isOpen">
|
||||
<slot></slot>
|
||||
<hr class="hr" />
|
||||
<div class="message-content">
|
||||
<div v-if="props.action.image.length">
|
||||
<img v-bind:src="props.action.image" class="message-image" />
|
||||
</div>{{ props.action.text }}
|
||||
</div>
|
||||
<hr class="hr" v-if="props.action.buttons?.length"/>
|
||||
<button v-for="door in action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
|
||||
:disabled="gameState !== 'RUN' || !door.show">
|
||||
{{ door.name }}
|
||||
</button>
|
||||
<hr class="hr" v-if="action.applications.length"/>
|
||||
<div class="message-footer" v-for="application in action.applications" :key="application.name">
|
||||
{{ application.number }} Приложение: {{ application.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hr {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.message-cloud {
|
||||
border: 1px solid #444444;
|
||||
border-radius: 15px;
|
||||
@ -26,4 +59,52 @@ const props = withDefaults(defineProps<Props>(), {})
|
||||
background-color: var(--main-back-item-color);
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-size: large;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
float: right;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-weight: 500;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-image {
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.button-dialog {
|
||||
background-color: var(--main-color);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
|
||||
padding: 6px 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 15px;
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.button-dialog:hover {
|
||||
background-color: var(--main-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.button-dialog:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
font-weight: 400;
|
||||
color: var(--second-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { Action } from './models';
|
||||
|
||||
interface Props {
|
||||
action: Action
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
function clickCollapse() {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.action.isOpen = !props.action.isOpen
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="message-header">
|
||||
{{ props.action.place }}: {{ props.action.name }}
|
||||
<span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message-header {
|
||||
font-size: large;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
float: right;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user