<template>
	<div id="websocket_entry" style="overflow-y: scroll">
		<h1>
			Secret Hitler Online
		</h1>
		<h3>Very Secret, Much Hitler, Wow Online!</h3>
		<p>
			This page is designed to allow triggering individual websocket events for the Websocket Server
		</p>
		<div
			v-for="event in websocket_events"
			:key="event.event"
			style="margin: 15px;"
		>
			<button
				@click.stop="handle_event(event.event, event.needs_data, event.data)"
				style="margin-bottom: 5px;"
			>
				Send {{ event.event }}
			</button>
			<div
				v-if="event.needs_data"
			>
				<div
					v-for="datapoint in event.data"
					:key="datapoint.name"
				>
					{{ datapoint.name }}
					<input v-if="datapoint.type == 'text'" type="text" v-model="datapoint.value">
					<input v-if="datapoint.type == 'boolean'" type="checkbox" v-model="datapoint.value">
				</div>
			</div>
			<hr>
		</div>
	</div>
</template>

<script>
export default {
	name: 'WebsocketTests',
	components: {},
	data() {return {
		websocket_events: [
			{
				event: `HostGame`,
				needs_data: true,
				data: [
					{ name: `username`, value: ``, type: `text`}
				],
				return_event: `GameInfo`,
			},
			{
				event: `JoinGame`,
				needs_data: true,
				data: [
					{ name: `username`, value: ``, type: `text` },
					{ name: `game_code`, value: ``, type: `text` }
				],
				return_event: null,
			},
			{
				event: `StartGame`,
				needs_data: false,
				data: [],
				return_event: null,
			},
			{
				event: `ChancellorNomination`,
				needs_data: true,
				data: [
					{ name: `target`, value: ``, type: `text` }
				],
				return_event: null,
			},
			{
				event: `Vote`,
				needs_data: true,
				data: [
					{ name: `yes_no`, value: ``, type: `boolean` }
				],
				return_event: null,
			},
			{
				event: `PresidentPolicies`,
				needs_data: true,
				data: [
					{ name: `policy1`, value: ``, type: `text` },
					{ name: `policy2`, value: ``, type: `text` }
				],
				return_event: null,
			},
			{
				event: `VetoRequest`,
				needs_data: false,
				data: [],
				return_event: null,
			},
			{
				event: `VetoConfirm`,
				needs_data: true,
				data: [
					{ name: `confirm`, value: ``, type: `boolean` }
				],
				return_event: null,
			},
			{
				event: `ChancellorPolicy`,
				needs_data: true,
				data: [
					{ name: `policy`, value: ``, type: `text` },
				],
				return_event: null,
			},
			{
				event: `ExecutePlayer`,
				needs_data: true,
				data: [
					{ name: `target`, value: ``, type: `text` },
				],
				return_event: null,
			},
			{
				event: `NextPresident`,
				needs_data: true,
				data: [
					{ name: `target`, value: ``, type: `text` },
				],
				return_event: null,
			},
			{
				event: `ExecutiveConfirmation`,
				needs_data: false,
				data: [],
				return_event: null,
			},
			{
				event: `InvestigateAffiliation`,
				needs_data: true,
				data: [
					{ name: `target`, value: ``, type: `text` },
				],
				return_event: null,
			},
		]
	}},
	methods: {
		handle_event(event, needs_data, data) {
			if (needs_data) {
				var request_data = {};
				for (var dp of data) {
					request_data[dp.name] = dp.value;
				};
				this.$socket.emit(event, request_data)
			} else {
				this.$socket.emit(event)
			}
		}
	},
}
</script>

<style scoped>
@import "../css/colours.css";

#websocket_entry {
	text-align: center;
	margin: 0 auto;
	height: 100vh;
	width: 100vw;
	color: var(--main-text-colour);
}

input[type="text"] {
	margin-bottom: 10px;
}
</style>