singleplayer.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>WebCraft</title>

		<!-- Character encoding -->
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<link href="style/world.css" rel="stylesheet" type="text/css">
		<link href="style/gui.css" rel="stylesheet" type="text/css">
		<!-- Stylesheet -->
        <style type="text/css" ></style>

		<!-- Modules -->
		<script src="js/glMatrix-1.2.min.js" type="text/javascript"></script>
		<script src="js/blocks.js" type="text/javascript"></script>
        <script src="js/numpy_loader.js" type="text/javascript"></script>
		<script src="js/helpers.js" type="text/javascript"></script>
		<script src="js/generator.js"></script>
		<script src="js/world.js" type="text/javascript"></script>
		<script src="js/render.js" type="text/javascript"></script>
		<script src="js/physics.js" type="text/javascript"></script>
		<script src="js/player.js" type="text/javascript"></script>
		<script src="js/mobs/Zombie.js" type="text/javascript"></script>
		<script src="js/blocks/blockActions.js" type="text/javascript"></script>
		<style>
			
			@font-face {
	font-family: minecraftia;
	src: url( 'style/minecraftia.ttf' );
}
		</style>
	</head>

	<body oncontextmenu="return false">
		<!-- Render surface -->
		<canvas id="renderSurface"></canvas>
        
                <!-- GUI Overlay -->
		<div id="gui-overlay">
			<div id="gui-container">
  				<div id="gui-content">

  				</div>
			</div>
			<div id="gui-overlayer">
				<div id="gui-slot-container">

				</div>
			</div>
		</div>
				<!-- hotbar -->
		<center><table id="hotbar" style="margin-top:50%">
			<tr></tr>
		</table></center>
        
		<!-- Material selection -->
		<table id="materialSelector" align="center" style="visibility: hidden">
		</table>
        
		<!-- Chatbox 
		<div id="chatbox">
			<span id="chatbox_text"></span>
		</div>
		<input id="chatbox_entry" type="text" maxlength="100"
		       spellcheck="false" onkeypress="onChatEnter(this,event)" />
---->


        <!-- Crosshair -->
        <div id="crosshair" style="visibility:visible">
          <img id="crosshair_img" src="resource_packs/default/textures/gui/crosshair.png" alt=""/>
        </div>
        <input type="file" id="schematic" style="display:none" onchange="onSchematicUploaded(this)"/>

        <!-- Instructions 
        <div id="instructions">
          <table>
            <tr><td>w </td> <td>- Forward</td></tr>
            <tr><td>s </td> <td>- Backward</td></tr>
            <tr><td>a </td> <td>- Left</td></tr>
            <tr><td>d </td> <td>- Right</td></tr>
            <tr><td>space </td> <td>- Up</td></tr>
            <tr><td>q </td> <td>- Down</td></tr>
            <tr><td>e </td> <td>- Inventory</td></tr>
            <tr><td>t </td> <td>- Chat</td></tr>
            <tr><td>esc </td> <td>- Cursor</td></tr>
            <tr>Try refreshing the page if the world is black.</tr>
          </table>
        </div>
---->
		<!-- Initialisation code -->
		<script type="text/javascript">
            var page = {};
            page.chatbox = document.getElementById( "chatbox" );
			page.chatboxText = document.getElementById( "chatbox_text" );
			page.chatboxEntry= document.getElementById(
                "chatbox_entry" );
            page.inventory = document.getElementById("materialSelector");
            page.canvas = document.getElementById("renderSurface");
            page.crosshair = document.getElementById("crosshair");
            page.player_actions = document.getElementById("player_actions");

            document.width = page.canvas.width;
            document.height = page.canvas.height;
			// Create a new flat world
			var world = new World( 20,20, 100, 100, 3, 0.1 );
		    //world.createRandomWorld(1);
		    //world.createFlatWorld( 1 );
		    world.createWorld(); 
            //world.createFromString(localStorage.getItem("world1"));
//            world.createSchematic("data/schematic.npy", true, null);

			// Set up renderer
			var render = new Renderer( "renderSurface" );
			render.setWorld( world, 32 );
		    render.setPerspective( 90, 0.01, 200 );

			// Create physics simulator
			var physics = new Physics();
			physics.setWorld( world );

			// Create new local player
			var player = new Player();
			player.setWorld( world );
			player.loadHotBar();
			player.setGamemode(0);
			player.setInputCanvas( "renderSurface" );
  		    player.setMaterialSelector( "materialSelector" );

        world.players["bob"] = {
            socket: null,
            nick: "bob",
            lastBlockCheck: +new Date(),
            blocks: 0,
            x: world.spawnPoint.x,
            y: world.spawnPoint.y,
            z: world.spawnPoint.z,
            pitch: 0,
            yaw: 0
        }; 
        
        setInterval(function () {
        	world.players["bob"].z = player.pos.z + 1;
        	//world.players["yeet"].moving = true;
        	//world.players["yeet"].aniframe = 1 + meep;
        }, 1);
		    // Handle open chat on 't' event
		    player.on( "openChat", function() {
				page.chatboxEntry.focus();
			} );

            player.on("openInventory", function() {
                page.inventory.style.visibility = "visible";
                page.crosshair.style.visibility = "hidden";
                page.inventory.focus();
                document.exitPointerLock();
            });

            player.on("closeInventory", function() {
                page.inventory.style.visibility = "hidden";
                page.crosshair.style.visibility = "visible";
                page.inventory.blur();
                page.canvas.requestPointerLock();
            });

            player.on("playerActions", function(actions) {
                var str = actions.length > 120?
                    "... " + actions.substr(actions.length - 120): actions;
                page.player_actions.innerHTML = "Actions: " + str;
            });

			// Respond to chat message entry
   		    function onChatEnter( chatInput, keyEvent ) {
				if ( keyEvent.key != "Enter")
			        return;

				var msg = chatInput.value.trim();
				chatInput.blur();
				page.chatbox.style.height = null;
				if ( msg.length == 0) return;

			    page.chatboxText.innerHTML += "&lt;<span style=\"color: #0a0\">Steve</span>&gt" + msg + "<br />";
				chatInput.value = "";
			}

            function onSchematicLoad() {
//                page.file_input_label.innerHTML = "";
            }

            function onSchematicUploaded(fileInput) {
                var file = fileInput.files[0];
                console.log(fileInput.value);
//                page.file_input_label.innerHTML = "";
                world.createSchematic(file, false,
                                      // callback to update rendering
                                      function () { render.setWorld(world, 32); });
                fileInput.value = '';
            }
            setTimeout(function(){  
                
                //localStorage.setItem("world1", world.toNetworkString());
                console.log("yup"); }, 7000);
            
            var render_interval = 0.033; // (seconds)
			// Render loop
			setInterval( function()
			{
				var time = new Date().getTime() / 1000.0;

				// Simulate physics
				//physics.simulate();

				// Update local player
				player.update();

				// Build a chunk
				render.buildChunks( 1 );

				// Draw world
				render.setCamera( player.getEyePos().toArray(), player.angles );
				render.draw();

				while ( new Date().getTime() / 1000 - time < render_interval );
			}, 1 );

			  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
		</script>
	</body>
</html>