<template>
	<div class="touch-counter" @click="touch()">
		<p v-if="context.msg" class="context">
			{{ context.msg }}
		</p>
		<p class="coutner">{{ counter }}</p>
	</div>
</template>

<script>
import connectWebsocket from '~/composables/connectWebsocket'

export default {
	props: {
		context: {
			type: Object,
			default: () => {},
		},
	},
	setup() {
		const { send, data } = connectWebsocket()

		return {
			data,
			send,
		}
	},
	data() {
		return {
			counter: 0,
		}
	},
	methods: {
		touch() {
			this.counter++
			this.send(
				JSON.stringify({
					type: 'ui_counter',
					id: this.$store.state.auth.id,
					value: this.counter,
				})
			)
		},
	},
}
</script>

<style>
</style>