
<script lang="ts">
	import { onMount, onDestroy } from "svelte";
	import { MatchOptions } from "../pages/game/client/pongSpectator";

	export let match: {
		gameServerIdOfTheMatch: string,
		gameOptions: MatchOptions,
		playerOneUsername: string,
		playerTwoUsername: string
	};

	let matchOptionsString = "";

	onMount( async() => {
		if (match.gameOptions === MatchOptions.noOption) {
			matchOptionsString = "standard";
		}
		else {
			if (match.gameOptions & MatchOptions.multiBalls) {
				matchOptionsString += "multi balls";
			}
			if (match.gameOptions & MatchOptions.movingWalls) {
				if (matchOptionsString) { matchOptionsString += ", "; }
				matchOptionsString += "moving walls";
			}
		}
	})

</script>
<!--  -->

<li>
	<button on:click>
		"{match.playerOneUsername}" VS "{match.playerTwoUsername}"
		<br/> [{matchOptionsString}]
	</button>
</li>


<!--  -->
<style>
</style>
