Removing splitter/console from default HTML

Monkey Targets Forums/HTML5/Removing splitter/console from default HTML

DruggedBunny

(Posted 2014) [#1]

Anyone know how to fix this? If I try to remove the splitter and console from an app, it suddenly displays nothing at all.

This, the default output, works as normal...

<div><canvas id="GameCanvas" width=640 height=480 tabindex=1></canvas></div>

<div id="Splitter" class=splitter></div>

<div><textarea id="GameConsole" readonly></textarea></div>

... but if I remove the splitter and console, leaving only the canvas, it fails, rendering only a blank page:

<div><canvas id="GameCanvas" width=640 height=480 tabindex=1></canvas></div>

This is literally the only change I'm making... I've tried going through and manually deleting all references to the splitter, but it still turns out blank! (I used to be able to remove the console, so I assumed it was just being worked around as Null when accessed but not present.)

Any ideas what needs to be done to have only the game canvas displaying? Even just removing the splitter and leaving the console in place renders nothing... put 'em back and it's fine again!

Desperado

(Posted 2014) [#2]

Here's an updated version of MonkeyGame.html that I use which removes both the splitter and console:

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body{
	height: 100%;
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #EEE;
	border: 0 none white;
	padding: 0;
	margin: 0;
}
canvas{
	border: 0;
	padding: 0;
    margin: auto;
    display: block;
	outline: none;
}
textarea{
    background-color: #DDD;
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
    width: 100%;
}
</style>
<script>

var CANVAS_RESIZE_MODE=2;	//0=locked, 1=stretch, 2=resize

var CANVAS_WIDTH=640;
var CANVAS_HEIGHT=480;

window.onload=function( e ){

	var canvas=document.getElementById( "GameCanvas" );
	
	var mouseDown=false;
	var startY=0;
	var canvasH=CANVAS_HEIGHT;
	var cmousemove=null;
	var cmouseup=null;
	var cmouseout=null;
	var fscreen=false;

	canvas.width=CANVAS_WIDTH;
	canvas.height=CANVAS_HEIGHT;

	function eatEvent( e ){
		if( e.stopPropagation ){
			e.stopPropagation();
			e.preventDefault();
		}else{
			e.cancelBubble=true;
			e.returnValue=false;
		}
	}
	
	function requestFullscreen(){
		var rfs=canvas.requestFullscreen || canvas.webkitRequestFullScreen || canvas.mozRequestFullScreen;
		if( rfs ) rfs.call( canvas );
	}
	
	function updateSize(){
	
		if( fscreen ){
			canvasH=window.innerHeight;
		}else if( canvasH<0 ){
			canvasH=0;
		}else if( canvasH>=window.innerHeight ){
			canvasH=window.innerHeight;
		}
		
		switch( CANVAS_RESIZE_MODE ){
		case 0:
			canvas.parentNode.style.height=canvasH+"px";
			break;
		case 1:
			canvas.style.height=canvasH+"px";
			break;
		case 2:
		
			var w = window.innerWidth;//document.body.clientWidth;
			var h = window.innerHeight;
			
			// restrict aspect ratio
			//var r = w / h
			//if (r < 0.56)
			//	h = w * 1.775;
			//else if (r > 1.775)
			//	w = h * 1.775
			
			canvasH = h;
			canvas.width=w;
			canvas.height=h;
			canvas.style.height=canvasH+"px";
		
			break;
		}

		//Note! Any resize code that modifies canvas.width/canvas.height/canvas.style.width/canvas.style.height should call this to update canvas...
		if( canvas.updateSize ) canvas.updateSize();
	}
	
	canvas.onfullscreenchange=function( e ){
		fscreen=(document.fullscreenElement==canvas);
		updateSize();
	}
	
	canvas.onwebkitfullscreenchange=function( e ){
		fscreen=(document.webkitFullscreenElement==canvas);
		updateSize();
	}
	
	canvas.onmozfullscreenchange=function( e ){
		fscreen=(document.mozFullscreenElement==canvas);
		updateSize();
	}
	
	window.onmousemove=function( e ){
		if( mouseDown ){
			var dy=e.clientY-startY;
			startY+=dy;
			canvasH+=dy;
			updateSize();
			eatEvent( e );
		}
	}
	
	window.onmouseup=function( e ){
		if( mouseDown ){
			canvas.onmousemove=cmousemove;
			canvas.onmouseup=cmouseup;
			canvas.onmouseout=cmouseout;
			mouseDown=false;
			eatEvent( e );
			
			if( canvasH>=window.innerHeight ) requestFullscreen();
		}
	}
	
	window.onresize=function( e ){
		updateSize();
	}
	
	updateSize();
	
	BBMonkeyGame.Main( canvas );
}
</script>
</head>

<body>

<div><canvas id="GameCanvas" width=640 height=480 tabindex=1></canvas></div>

<script language="javascript" src="main.js">Javascript not supported!</script>

</body>
</html>

It only works correctly with CANVAS_RESIZE_MODE set to 0 or 2.

Landon

(Posted 2014) [#3]

you could just set the css of the console to display:none;

DruggedBunny

(Posted 2014) [#4]

Thanks, guys, will have a play tonight!