<template>
	<div class="flex flex-col h-full items-center pt-10 gap-8">
		<div class="font-fat text-4xl md:text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
		<div class="font-bold text-2xl md:text-3xl">Players: {{ naturallyJoinEnumeration(game.state.players.map(p => p.name)) }}</div>
		<BigButton
			v-if="game.isOwnGame"
			class="bg-gradient-to-br from-gray-600 to-gray-800"
			:disabled="game.state.players.length < 2"
			@click="game.start()"
		>
			Start
		</BigButton>
	</div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import { useGame } from "../clientGame"
	import { naturallyJoinEnumeration } from "../../shared/util"
	import BigButton from "./BigButton.vue"

	const game = useGame()
</script>