benwiley4000 · March 30, 2016 12:59
diff --git a/pico-8 webplayer responsive b/pico-8 webplayer responsive
 <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PICO-8 Cartridge</title>
        <meta name="description" content="">

 <STYLE TYPE="text/css">
 <!--

 .pico8_container {
 	display: -webkit-box;
 	display: -webkit-flex;
 	display: -ms-flexbox;
 	display: flex;
 	-webkit-box-orient: vertical;
 	-webkit-box-direction: normal;
 	-webkit-flex-direction: column;
 			-ms-flex-direction: column;
 					flex-direction: column;
 	-webkit-box-align: center;
 	-webkit-align-items: center;
 			-ms-flex-align: center;
 					align-items: center;
 }

 canvas#canvas {
 	margin-top: 10px;
 	width: 290px;
 	height: 270px;
 }

 .pico8_options {
 	display: -webkit-box;
 	display: -webkit-flex;
 	display: -ms-flexbox;
 	display: flex;
 	-webkit-box-pack: center;
 	-webkit-justify-content: center;
 			-ms-flex-pack: center;
 					justify-content: center;
  -webkit-flex-wrap:wrap;
      -ms-flex-wrap:wrap;
          flex-wrap:wrap
 }

 .pico8_el {
 	width:105px;
 		margin: 1px;
 	padding: 4px;
 	text-align: center;
 	color:#fff;
 	background-color:#777;
 	font-family : verdana;
 	font-size: 9pt;
 	cursor: pointer;
 	cursor: hand;
 }
 .pico8_el a{
 	text-decoration: none;
 	color:#fff;
 }

 .pico8_el:hover{
 	background-color:#aaa;
 }

 .pico8_el:link{
 	background-color:#aaa;
 }

 @media screen and (min-width: 580px) and (min-height: 600px) {
 	canvas#canvas {
 		margin-top: 20px;
 		width: 580px;
 		height: 540px;
 	}
 }

 @media screen and (min-width: 1160px) and (min-height: 1150px) {
 	canvas#canvas {
 		margin-top: 30px;
 		width: 1160px;
 		height: 1080px;
 	}
 }

 -->
 </STYLE>
    
 </head>

 <body bgcolor=#303030>

 	<div class=pico8_container>

 		<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

 		<script type="text/javascript">
 			var canvas = document.getElementById("canvas");
 			canvas.width = window.innerWidth;
 			canvas.height = window.innerHeight;

 			// show Emscripten environment where the canvas is
 			// arguments are passed to PICO-8
 			
 			var Module = {
 				arguments: ["-width","580","-height","540"],
 			};
 			Module.canvas = canvas;
 			
 			/*
 				// When pico8_buttons is defined, PICO-8 takes each int to be a live bitfield
 				// representing the state of each player's buttons
 				
 				var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players
 				pico8_buttons[0] = 2 | 16; // example: player 0, RIGHT and Z held down
 			*/
 		</script>

 		<script async type="text/javascript" src="[PATH_TO_YOUR_CARTRIDGE.js]"></script>
 		  
 		<script>
 			// key blocker. prevent cursor keys from scrolling page while playing cart.
 			
 			function onKeyDown_blocker(event) {
 				event = event || window.event;
 				var o = document.activeElement;
 				if (!o || o == document.body || o.tagName == "canvas")
 				{
 					if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1)
 					{
 						if (event.preventDefault) event.preventDefault();
 					}
 				}
 			}

 			document.addEventListener('keydown', onKeyDown_blocker, false);

 		</script>

 		<div class=pico8_options>

 			<div class=pico8_el onclick="Module.pico8Reset();">

 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=12 height=	12/>

 			Reset</div>

 			<div class=pico8_el onclick="Module.pico8TogglePaused();">

 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=12 height=12/>

 			Pause</div>
 			<div class=pico8_el onclick="Module.requestFullScreen(true, false);">
 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=12 height=12/>

 			Fullscreen</div>
 			<div class=pico8_el onclick="Module.pico8ToggleSound();">
 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4Ae2doQ4AIQxD4YLH8v9fh+ULhjpxxSwLg2uyapr1JRu1iV5Z+1BGl4+xNpX38SYo2uRvYiT5LwEmt+ocgXVLrhPEgBiw8Q5w7/kueSkK+D2tJO4E/I3GrwkqQCBabEj/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Toggle Sound" width=12 height=12/>
 			
 			Sound</div>
 			<div class=pico8_el ><a target="_new" href="http://www.lexaloffle.com/bbs/?cat=7&sub=2">
 			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAlElEQVR4Ae2dMQ5FQBCGh6jcwAkkateg3DiAa+iQUGqVKi95FQfAJRQOoHeBUf8JyQqKjZ1uMzuz2e/LTE3KhyF7kSlgLOykas23f6D+A9Yp84aAOYU15pcJnfji0Il2ID8HzC4y38ZrnfIBGxeRoR3c3EWrACdsV5BOsx7OSRnrOXh4F5HzA6bevwUn8wlz7eCDsQM99B3ks0s/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="More Carts" width=12 height=12/>

 			Carts</a></div>

 		</div>

 	</div>

 </body></html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>PICO-8 Cartridge</title>
	<meta name="description" content="">

	<STYLE TYPE="text/css">
	<!--

	.pico8_container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	}

	canvas#canvas {
	margin-top: 10px;
	width: 290px;
	height: 270px;
	}

	.pico8_options {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
	}

	.pico8_el {
	width:105px;
	margin: 1px;
	padding: 4px;
	text-align: center;
	color:#fff;
	background-color:#777;
	font-family : verdana;
	font-size: 9pt;
	cursor: pointer;
	cursor: hand;
	}
	.pico8_el a{
	text-decoration: none;
	color:#fff;
	}

	.pico8_el:hover{
	background-color:#aaa;
	}

	.pico8_el:link{
	background-color:#aaa;
	}

	@media screen and (min-width: 580px) and (min-height: 600px) {
	canvas#canvas {
	margin-top: 20px;
	width: 580px;
	height: 540px;
	}
	}

	@media screen and (min-width: 1160px) and (min-height: 1150px) {
	canvas#canvas {
	margin-top: 30px;
	width: 1160px;
	height: 1080px;
	}
	}

	-->
	</STYLE>

	</head>

	<body bgcolor=#303030>

	<div class=pico8_container>

	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

	<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// show Emscripten environment where the canvas is
	// arguments are passed to PICO-8

	var Module = {
	arguments: ["-width","580","-height","540"],
	};
	Module.canvas = canvas;

	/*
	// When pico8_buttons is defined, PICO-8 takes each int to be a live bitfield
	// representing the state of each player's buttons

	var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players
	pico8_buttons[0] = 2 \| 16; // example: player 0, RIGHT and Z held down
	*/
	</script>

	<script async type="text/javascript" src="[PATH_TO_YOUR_CARTRIDGE.js]"></script>

	<script>
	// key blocker. prevent cursor keys from scrolling page while playing cart.

	function onKeyDown_blocker(event) {
	event = event \|\| window.event;
	var o = document.activeElement;
	if (!o \|\| o == document.body \|\| o.tagName == "canvas")
	{
	if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1)
	{
	if (event.preventDefault) event.preventDefault();
	}
	}
	}

	document.addEventListener('keydown', onKeyDown_blocker, false);

	</script>

	<div class=pico8_options>

	<div class=pico8_el onclick="Module.pico8Reset();">

	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=12 height= 12/>

	Reset</div>

	<div class=pico8_el onclick="Module.pico8TogglePaused();">

	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=12 height=12/>

	Pause</div>
	<div class=pico8_el onclick="Module.requestFullScreen(true, false);">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=12 height=12/>

	Fullscreen</div>
	<div class=pico8_el onclick="Module.pico8ToggleSound();">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4Ae2doQ4AIQxD4YLH8v9fh+ULhjpxxSwLg2uyapr1JRu1iV5Z+1BGl4+xNpX38SYo2uRvYiT5LwEmt+ocgXVLrhPEgBiw8Q5w7/kueSkK+D2tJO4E/I3GrwkqQCBabEj/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Toggle Sound" width=12 height=12/>

	Sound</div>
	<div class=pico8_el ><a target="_new" href="http://www.lexaloffle.com/bbs/?cat=7&sub=2">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAlElEQVR4Ae2dMQ5FQBCGh6jcwAkkateg3DiAa+iQUGqVKi95FQfAJRQOoHeBUf8JyQqKjZ1uMzuz2e/LTE3KhyF7kSlgLOykas23f6D+A9Yp84aAOYU15pcJnfji0Il2ID8HzC4y38ZrnfIBGxeRoR3c3EWrACdsV5BOsx7OSRnrOXh4F5HzA6bevwUn8wlz7eCDsQM99B3ks0s/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="More Carts" width=12 height=12/>

	Carts</a></div>

	</div>

	</div>

	</body></html>