
<script>
	import "public/game/pong.js"
</script>


<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
	<div id="preload_font">.</div>

	<div id="div_game_options">
			<fieldset>
				<legend>game options</legend>
				<div>
					<input type="checkbox" id="multi_balls" name="multi_balls">
					<label for="multi_balls">multiples balls</label>
				</div>
				<div>
					<input type="checkbox" id="moving_walls" name="moving_walls">
					<label for="moving_walls">moving walls</label>
				</div>
				<div>
					<label>sound :</label>
					<input type="radio" id="sound_on" name="sound_selector" checked>
					<label for="sound_on">on</label>
					<input type="radio" id="sound_off" name="sound_selector">
					<label for="sound_off">off</label>
				</div>
				<div>
					<button id="play_pong_button">PLAY</button>
				</div>
			</fieldset>
	</div>

	<div id="canvas_container">
		<!-- <p> =) </p> -->
	</div>

	<script src="public/game/pong.js" type="module" defer></script>
</body>

<style>

@font-face {
	font-family: "Bit5x3";
	src: url("/fonts/Bit5x3.woff2") format("woff2"),local("Bit5x3"), url("/fonts/Bit5x3.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
#preload_font {
	font-family: "Bit5x3";
	opacity:0;
	height:0;
	width:0;
	display:inline-block;
}
body {
	margin: 0;
	background-color: #222425;
}
#canvas_container {
	text-align: center;
	/* border: dashed rgb(245, 245, 245) 5px; */
	/* max-height: 80vh; */
	/* overflow: hidden; */
}
#div_game_options {
	text-align: center;
	font-family: "Bit5x3";
	color: rgb(245, 245, 245);
	font-size: x-large;
}
#div_game_options fieldset {
	max-width: 50vw;
	width: auto;
	margin: 0 auto;
}
#div_game_options fieldset div {
	padding: 10px;
}
#play_pong_button {
	font-family: "Bit5x3";
	color: rgb(245, 245, 245);
	background-color: #333333;
	font-size: x-large;
	padding: 10px;
}
canvas {
	background-color: #333333;
	max-width: 75vw;
	/* max-height: 100vh; */
	width: 80%;
}

</style>
