LInE
/
Ifractions-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Educational game for teaching fractions" />
	<meta name="keywords" content="ifractions, fraction, game" />
	<link rel="shortcut icon" href="assets/img/scene/flag.png">
	<title> iFractions </title>
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<style>
		#iFractions-canvas {
			padding: 0 auto 0 auto;
			margin-left: auto;
			margin-right: auto;
			display: block;
		}

		#textbox {
			position: absolute;
			margin-left: auto;
			margin-right: auto;
			top: 300px;
			left: 0;
			right: 0;
			text-align: center;
			visibility: hidden;
		}
		input[type=text] {
			background-color: #fff;
			padding: 15px 40px;
			box-sizing: border-box;
			border: 3px solid #ccc;
			font-size: 44px;
			font-family: Arial;
			color: #000;
			text-align: center;
		}
		input:focus {
			outline: 3px solid #85accc;
		}
	</style>

</head>

<body>

	<div class="container">

		<div class="clearfix"></div>

		<div class="panel panel-primary">
		<div class="panel-heading">iFractions game :: by LInE</div>
			<div class="panel-body">
				<canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
				<div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
					<input type="text" id="textbox-content" value="" size="13" maxlength="36">
				</div>
			</div>
		</div>

		<div id="display-fps"><!-- Display fps in debugmode --></div>

	</div>

	<!-- Load all js files -->
	<script src="js/preMenu.js"></script>
	<script src="js/menu.js"></script>
	<script src="js/map.js"></script>
	<script src="js/circleOne.js"></script>
	<script src="js/squareOne.js"></script>
	<script src="js/squareTwo.js"></script>
	<script src="js/gameMechanics.js"></script>
	<script src="js/globals.js"></script>
	<script>
		
		const displayFps = document.getElementById("display-fps");

		const canvas = document.getElementById("iFractions-canvas");
		canvas.width = defaultWidth; 
		canvas.height = defaultHeight;

		const context = canvas.getContext("2d");
		
		info.start();

		// CREATING GAME STATES
        game.state.add('boot', bootState);
        game.state.add('lang', langState);
        game.state.add('loadLang', loadLangState);
        game.state.add('name', nameState);

		game.state.add('menu', menuState);
        game.state.add('customMenu', customMenuState);

        game.state.add('map', mapState);
        game.state.add('end', endState);

        game.state.add('squareOne', squareOne);
        game.state.add('circleOne', circleOne);
        game.state.add('squareTwo', squareTwo);

		// CALLING FIRST GAME STATE
		game.state.start('boot');
	
	</script>

</body>

</html>