147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<script setup>
|
|
import IconButton from '@/views/partials/game/IconButton.vue';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import MessageComponent from './MessageComponent.vue';
|
|
import { GetChatRef, GetClient, SendMessage } from '../../services/Dragonroll';
|
|
|
|
const textInput = ref(null);
|
|
const chat = GetChatRef();
|
|
const messageContainer = ref(null);
|
|
|
|
function Send(message){
|
|
SendMessage({
|
|
content: {
|
|
text: message
|
|
},
|
|
author: GetClient()._id
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
textInput.value.addEventListener('input', (event) => {
|
|
// textInput.value.style.height = "1px";
|
|
textInput.value.style.height = (textInput.value.scrollHeight)+"px";
|
|
})
|
|
textInput.value.addEventListener("keypress", (event) => {
|
|
if(event.shiftKey) return;
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
|
|
Send(textInput.value.value);
|
|
textInput.value.value = "";
|
|
|
|
|
|
textInput.value.style.height = "1px";
|
|
textInput.value.style.height = (textInput.value.scrollHeight)+"px";
|
|
}
|
|
})
|
|
});
|
|
|
|
watch(chat, () => {
|
|
if(chat.value.length > 0) if(chat.value[chat.value.length - 1].author == GetClient()._id){
|
|
setTimeout(() => {
|
|
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
|
|
console.log(messageContainer.value.scrollHeight)
|
|
}, 0);
|
|
}
|
|
}, {deep: true})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="chat-container">
|
|
<div class="message-container" ref="messageContainer">
|
|
<MessageComponent v-for="message in chat" :key="message._id" :message="message"></MessageComponent>
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<textarea ref="textInput" class="chat-input"></textarea>
|
|
<div class="chat-input-actions">
|
|
<div class="chat-input-actions-left">
|
|
|
|
</div>
|
|
<div class="chat-input-actions-right">
|
|
<IconButton icon="icons/iconoir/regular/send.svg"></IconButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.chat-container {
|
|
display: flex;
|
|
height: 720px;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
|
|
h2 {
|
|
font-family: MrEavesRemake;
|
|
margin-left: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.message-container {
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
overflow-y: auto;
|
|
max-height: 580px;
|
|
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.chat-input-container {
|
|
position: sticky;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.chat-input {
|
|
background-color: var(--color-background-softer);
|
|
border: none;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
color: var(--color-text);
|
|
transition: 300ms background-color;
|
|
width: calc(100% - 20px);
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
min-height: 30px;
|
|
height: 41px;
|
|
max-height: 100px;
|
|
resize: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: var(--color-background-softest);
|
|
}
|
|
}
|
|
|
|
.chat-input-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 8px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.chat-input-actions-left {
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
.chat-input-actions-right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
</style>
|