LInE
/
Ifractions-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<!--
LInE - Free Education, Private Data.
www.usp.br/line
-->

<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, private data" />
  <link rel="shortcut icon" href="assets/img/scene/flag.png">
  <title> iFractions by LInE-IME-USP</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/customMenu.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");

    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>