<template> <div class="emotes"> <ul v-if="!muted"> <li v-for="emote in recent" :key="emote"> <div @click.stop.prevent="sendEmote(emote)" :class="['emote', emote]" /> </li> <li> <i @click.stop.prevent="open" class="fas fa-grin-beam"></i> </li> </ul> <vue-context class="context" ref="context"> <li v-for="emote in emotes" :key="emote"> <div @click="sendEmote(emote)" :class="['emote', emote]" /> </li> </vue-context> </div> </template> <style lang="scss" scoped> .emotes { ul { display: flex; flex-direction: row; justify-content: center; align-items: center; li { font-size: 24px; margin: 0 5px; i, div { cursor: pointer; } } } .context { background-color: $background-floating; background-clip: padding-box; border-radius: 0.25rem; display: flex; margin: 0; padding: 5px; width: 220px; z-index: 1500; position: fixed; list-style: none; box-sizing: border-box; max-height: calc(100% - 50px); color: $interactive-normal; flex-wrap: wrap; user-select: none; box-shadow: $elevation-high; > li { margin: 0; position: relative; align-content: center; padding: 5px; border-radius: 3px; .emote { width: 24px; height: 24px; } &:hover, &:focus { text-decoration: none; background-color: $background-modifier-hover; color: $interactive-hover; } &:focus { outline: 0; } } &:focus { outline: 0; } } } </style> <script lang="ts"> import { Vue, Ref, Component } from 'vue-property-decorator' import { get, set } from '../utils/localstorage' // @ts-ignore import { VueContext } from 'vue-context' @Component({ name: 'neko-emotes', components: { 'vue-context': VueContext, }, }) export default class extends Vue { @Ref('context') readonly context!: any recent: string[] = JSON.parse(get('emote_recent', '[]')) get emotes() { return [ 'anger', 'bomb', 'sleep', 'explode', 'sweat', 'poo', 'hundred', 'alert', 'punch', 'wave', 'okay', 'thumbs-up', 'clap', 'prey', 'celebrate', 'flame', 'goof', 'love', 'cool', 'smerk', 'worry', 'ouch', 'cry', 'surprised', 'quiet', 'rage', 'annoy', 'steamed', 'scared', 'terrified', 'sleepy', 'dead', 'happy', 'roll-eyes', 'thinking', 'clown', 'sick', 'rofl', 'drule', 'sniff', 'sus', 'party', 'odd', 'hot', 'cold', 'blush', 'sad', ].filter((v) => !this.recent.includes(v)) } get muted() { return this.$accessor.user.muted } open(event: MouseEvent) { this.context.open(event) } sendEmote(emote: string) { if (!this.recent.includes(emote)) { if (this.recent.length > 4) { this.recent.shift() } this.recent.push(emote) set('emote_recent', JSON.stringify(this.recent)) } this.$accessor.chat.sendEmote(emote) } } </script>