crtplate.html

﻿<html><head>
<title>PICO-8 Cartridge</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript">

	// Default shell for PICO-8 0.2.2 (includes @weeble's gamepad mod 1.0)
	// This file is available under a CC0 license https://creativecommons.org/share-your-work/public-domain/cc0/
	// (note: "this file" does not include any cartridge or cartridge artwork injected into a derivative html file when using the PICO-8 html exporter)

	// options

	// fullscreen, sound, close button at top when playing on touchscreen
	var p8_allow_mobile_menu = true;

	// p8_autoplay true to boot the cartridge automatically after page load when possible
	// if the browser can not create an audio context outside of a user gesture (e.g. on iOS), p8_autoplay has no effect
	var p8_autoplay = false;

	// When pico8_state is defined, PICO-8 will set .is_paused, .sound_volume and .frame_number each frame 
	// (used for determining button icons)
	var pico8_state = [];

	// When pico8_buttons is defined, PICO-8 reads each int as a bitfield holding that player's button states
	// 0x1 left, 0x2 right, 0x4 up, 0x8 right, 0x10 O, 0x20 X, 0x40 menu
	// (used by p8_update_gamepads)
	var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players

	// When pico8_mouse is defined, PICO-8 reads the 3 integers as X, Y and a bitfield for buttons: 0x1 LMB, 0x2 RMB
	var pico8_mouse = [];

	// used to display number of detected joysticks
	var pico8_gamepads = {};
	pico8_gamepads.count = 0;

	// When pico8_gpio is defined, reading and writing to gpio pins will read and write to these values
	var pico8_gpio = new Array(128);

	// When pico8_audio_context context is defined, the html shell (this file) is responsible for creating and managing it.
	// This makes satisfying browser requirements easier -- e.g. initialising audio from a short script in response to a user action.
	// Otherwise PICO-8 will try to create and use its own context.

	var pico8_audio_context;


	// menu button and controller graphics
	p8_gfx_dat={
			"p8b_pause1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAOUlEQVRIx2NgGPbg/8cX/0F46FtAM4vobgHVLRowC6hm0YBbQLFFoxaM4FQ0dHPy0C1Nh26NNugBAAnizNiMfvbGAAAAAElFTkSuQmCC",
"p8b_controls":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAQ0lEQVRIx2NgGAXEgP8fX/ynBaap4XBLhqcF1IyfYWQBrZLz0LEAlzqqxQFVLcAmT3MLqJqTaW7B4CqLaF4fjIIBBwBL/B2vqtPVIwAAAABJRU5ErkJggg==",
"p8b_full":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAN0lEQVRIx2NgGPLg/8cX/2mJ6WcBrUJm4CwgOSgGrQVEB8WoBaMWDGMLhm5OHnql6dCt0YY8AAA9oZm+9Z9xQAAAAABJRU5ErkJggg==",
"p8b_crt":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAItJREFUSIndlTESgCAMBMGxp+X/r6PlBbGS0XBoTEKBVwZm70gYCGF1RVSkWkgFS7njtYIW+mYWERglkQiyzuIVyjfGlOE+idkmSWHRPoLzpNq2dSewwMQGnlrLgGohfkluQ/bsPTSwCgWc3qJ1hjx6AdQzGAH5HFxbBP+D6c/106JF7cORJvkC/ZcONkpPhqwNuicAAAAASUVORK5CYII=",
"p8b_pause0":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVRIx2NgGHbg/8cX/7FhctWNWjBqwagFoxaMWjBqwagF5Fkw5AAAPaGZvsIUtXUAAAAASUVORK5CYII=",
"p8b_sound0":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAANklEQVRIx2NgGDHg/8cX/5Hx0LEA3cChYwEugwavBcRG4qgFoxYMZwuGfk4efqXp8KnRBj0AAMz7cLDnG4FeAAAAAElFTkSuQmCC",
"p8b_sound1":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVRIx2NgGDHg/8cX/5Hx0LEA3cChYwEugwhZQLQDqG4BsZFIKMhGLRi1YChbMPRz8vArTYdPjTboAQCSVgpXUWQAMAAAAABJRU5ErkJggg==",
"p8b_close":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAU0lEQVRIx2NkoDFgpJsF/z+++I8iwS9BkuW49A+cBcRaREgf/Swg1SJi1dHfAkIG4EyOOIJy4Cwg1iJCiWDUAvItGLqpaOjm5KFfmg79Gm3ItioAl+mAGVYIZUUAAAAASUVORK5CYII=",

"controls_left_panel":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAEI0lEQVR42u3dMU7DQBCG0Tjam9DTcP8jpEmfswS5iHBhAsLxev/hvQY6pGXyZRTQ+nQCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHqbHEEtl+vt7hS+fLy/mXHBQqxEi/6aI/AiFW9SnB2BWDkDBAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwONJ8tYvrXRAsImK19j0IFsPGSrQQLCJiNV+et7xAT7QQLIaN1dr3ooVgMWysRAvBIipWooVgERUr0UKwiIqVaCFYRMVKtBAsomIlWggWUbESLQSLqFiJFoJFVKxEC8EiKlaihWARFSvRQrDYJSSVfhaCBSBYAIIFCBbAHpoj4Bl/scOGBWDD4lX8iwE2LADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAECxAsAMECECxAsMh1ud7uTsHZVDcZyFo8Yt5sVJ6NyUAaSNEyIymaXwZepIKd4mwoQbAFC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQI4UHME2/10QZq7usyBObBhRQwpmBUb1nADuPbuaUD/p2ezMH+1admwhosVfBcxb2SCJVaIlmAhVoiWYIkVoiVagiVWiJZgiZVYIVqCJVaIlmgJllghWoIlViBagiVWiJZoCZZYIVqCJVYgWoIlViBaggUIlnc0sPELlmghVmIlWKKFWAmWaIFYCZZoIVYIlmghVoIlWiBWgiVaiJVgIVqIlWCJFoiVYIkWYiVYiBZiJViihViJ1XbNEWyL1mMQRYvfvIGJlQ1rmE0LzIoNyyBiDrBhAYIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUgWIBgDc+Nn1D/tdH8YupwgZy5qG4ykKIlVmZDsDjshSlazqQqH7p793Q2CBaAYAGCBSBYAIIFCBaAYAEIFiBYAIIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUgWIBgAQgWwENzBKxZPub9CJ7WjA0LsGFRV+9N5+jNDhsWgGABggUgWACCxW56fgjuA3cEiz9Z/nWwR0iWP8P/YCFYDBstsUKwiIiWWCFYRERLrBAsIqIlVggWEdESKwSLiGiJFYJFRLTECsEiIlpihWARES2xQrCIiJZYIVhEREusECwioiVWCBYx0RIrBIuoaIkVr+YhFHTZtMCGBQgWgGABCBYgWACCBSBYgGABCBaAYAGCBSBYAIIFCBbj2uOR8s6AEbhexgsWYri3SKhKczcXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMA2n+e0UMDzh3yTAAAAAElFTkSuQmCC",


"controls_right_panel":"data:image/png;base64,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",

	};


	// added 0.2.1: work-around for iOS/Safari running from an iFrame (e.g. from itch.io page):
	// touch events only register after adding dummy listeners on document.
 document.addEventListener('touchstart', function(){ }, {passive: false});
	document.addEventListener('touchmove', function(){ }, {passive: false});
	document.addEventListener('touchend', function(){ }, {passive: false});


	// --------------------------------------------------------------------------------------------------------------------------------
	// pico-8 0.2.2: allow dropping files
	var p8_dropped_cart = null;
	var p8_dropped_cart_name = "";
	function p8_drop_file(e)
	{
		// console.log("@@ dropping file...");
	
		e.stopPropagation();
		e.preventDefault();

		if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0])
		{
			// read from file
			reader = new FileReader();
			reader.onload = function (event)
			{
				p8_dropped_cart_name = 'untitled.p8';
				if (typeof e.dataTransfer.files[0].name !== 'undefined') p8_dropped_cart_name = e.dataTransfer.files[0].name;
				if (typeof e.dataTransfer.files[0].fileName !== 'undefined') p8_dropped_cart_name = e.dataTransfer.files[0].fileName;
				p8_dropped_cart = reader.result;
				// data:image/png;base64
				e.stopPropagation();
				e.preventDefault();
				codo_command = 9; // read directly from p8_dropped_cart with libb64 decoder
			};
			reader.readAsDataURL(e.dataTransfer.files[0]);
			
		}
		else
		{
			// read from url (or data url)
			txt = e.dataTransfer.getData('Text');
			if (txt){
				p8_dropped_cart_name = "untitled.p8.png";
				p8_dropped_cart = txt;
				codo_command = 9;
			}
		}
	}
	function nop(evt) {
		evt.stopPropagation();
		evt.preventDefault();
	}
	function dragover(evt) {
		evt.stopPropagation();
		evt.preventDefault();
		Module.pico8DragOver();
	}
	function dragstop(evt) {
		evt.stopPropagation();
		evt.preventDefault();
		Module.pico8DragStop();
	}

	// download (pico-8 0.2.4d web exports can save a .wav file)
	function download_browser_file(filename, contents)
	{
	  var element = document.createElement('a');
	  if (filename.substr(filename.length - 7) == ".p8.png")
	  	element.setAttribute('href', 'data:image/png;base64,' + encodeURIComponent(contents));
	  else if (filename.substr(filename.length - 4) == ".wav")
	  	element.setAttribute('href', 'data:audio/x-wav;base64,' + encodeURIComponent(contents));
	  else
	  	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(contents));
	  element.setAttribute('download', filename);
	  element.style.display = 'none';
	  document.body.appendChild(element);
	  element.click();
	  document.body.removeChild(element);
	}
	// --------------------------------------------------------------------------------------------------------------------------------


	var p8_buttons_hash = -1;
	function p8_update_button_icons()
	{
		// buttons only appear when running
		if (!p8_is_running)
		{
			requestAnimationFrame(p8_update_button_icons);
			return;
		}
		var is_fullscreen=(document.fullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.msFullscreenElement);
		
		// hash based on: pico8_state.sound_volume  pico8_state.is_paused bottom_margin left is_fullscreen p8_touch_detected
		var hash = 0;
		hash = pico8_state.sound_volume;
		if (pico8_state.is_paused) hash += 0x100;
		if (p8_touch_detected)     hash += 0x200;
		if (is_fullscreen)         hash += 0x400;

		if (p8_buttons_hash == hash)
		{
			requestAnimationFrame(p8_update_button_icons);
			return;
		}
		
		p8_buttons_hash = hash;
		// console.log("@@ updating button icons");

		els = document.getElementsByClassName('p8_menu_button');
		for (i = 0; i < els.length; i++)
		{
			el = els[i];
			index = el.id;			
			if (index == 'p8b_sound') index += (pico8_state.sound_volume == 0 ? "0" : "1"); // 1 if undefined
			if (index == 'p8b_pause') index += (pico8_state.is_paused > 0 ? "1" : "0");     // 0 if undefined

			new_str = '<img width=24 height=24 style="pointer-events:none" src="'+p8_gfx_dat[index]+'">';
			if (el.innerHTML != new_str)
				el.innerHTML = new_str;


			// hide all buttons for touch mode (can pause with menu buttons)
			
			var is_visible = p8_is_running;

			if ((!p8_touch_detected || !p8_allow_mobile_menu) && el.parentElement.id == "p8_menu_buttons_touch")
				is_visible = false;

			if (p8_touch_detected && el.parentElement.id == "p8_menu_buttons")
				is_visible = false;

			if (is_fullscreen) 
				is_visible = false;

			if (is_visible)
				el.style.display="";
			else
				el.style.display="none";
		}
		requestAnimationFrame(p8_update_button_icons);
	}


	function abs(x)
	{
		return x < 0 ? -x : x;
	}
	
	// step 0 down 1 drag 2 up (not used)
	function pico8_buttons_event(e, step)
	{
		if (!p8_is_running) return;
	
		pico8_buttons[0] = 0;

		if (step == 2 && typeof(pico8_mouse) !== 'undefined')
		{
			pico8_mouse[2] = 0;
		}
		
		var num = 0;
		if (e.touches) num = e.touches.length;

		if (num == 0 && typeof(pico8_mouse) !== 'undefined')
		{
			//  no active touches: release mouse button from anywhere on page. (maybe redundant? but just in case)
			pico8_mouse[2] = 0;
		}

		
		for (var i = 0; i < num; i++)
		{
			var touch = e.touches[i];
			var x = touch.clientX;
			var y = touch.clientY;
			var w = window.innerWidth;
			var h = window.innerHeight;

			var r = Math.min(w,h) / 12;
			if (r > 40) r = 40;

			// mouse (0.1.12d)

			let canvas = document.getElementById("canvas");
			if (p8_touch_detected)
			if (typeof(pico8_mouse) !== 'undefined')
			if (canvas)
			{
				var rect = canvas.getBoundingClientRect();
				//console.log(rect.top, rect.right, rect.bottom, rect.left, x, y);

				if (x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom)
				{
					pico8_mouse = [
						Math.floor((x - rect.left) * 128 / (rect.right - rect.left)),
						Math.floor((y - rect.top) * 128 / (rect.bottom - rect.top)),
						step < 2 ? 1 : 0
					];
					// return; // commented -- blocks overlapping buttons
				}else
				{
					pico8_mouse[2] = 0;
				}
			}


			// buttons
			
			b = 0;

			if (y < h - r*8)
			{
				// no controller buttons up here; includes canvas and menu buttons at top in touch mode
			}
			else
			{
				e.preventDefault();

				if ((y < h - r*6) && y > (h - r*8))
				{
					// menu button: half as high as X O button
					// stretch across right-hand half above X O buttons
					if (x > w - r*3) 
						b |= 0x40;
				}
				else if (x < w/2 && x < r*6)
				{
					// stick

					mask = 0xf; // dpad
					var cx = 0 + r*3;
					var cy = h - r*3;

					deadzone = r/3;
					var dx = x - cx;
					var dy = y - cy;

					if (abs(dx) > abs(dy) * 0.6) // horizontal 
					{
						if (dx < -deadzone) b |= 0x1;
						if (dx > deadzone) b |= 0x2;
					}
					if (abs(dy) > abs(dx) * 0.6) // vertical
					{
						if (dy < -deadzone) b |= 0x4;
						if (dy > deadzone) b |= 0x8;
					}
				}
				else if (x > w - r*6)
				{
					// button; diagonal split from bottom right corner
				
					mask = 0x30;
					
					// one or both of [X], [O]
					if ( (h-y) > (w-x) * 0.8) b |= 0x10;
					if ( (w-x) > (h-y) * 0.8) b |= 0x20;
				}
			}

			pico8_buttons[0] |= b;
		
		}
	}

	// p8_update_layout_hash is used to decide when to update layout (expensive especially when part of a heavy page)
	var p8_update_layout_hash = -1;
	var last_windowed_container_height = 512;
	var p8_layout_frames = 0;

	function p8_update_layout()
	{
		var canvas = document.getElementById("canvas");
		var p8_playarea = document.getElementById("p8_playarea");
		var p8_container = document.getElementById("p8_container");
		var p8_frame = document.getElementById("p8_frame");
		var csize = 512;
		var margin_top = 0;
		var margin_left = 0;

		// page didn't load yet? first call should be after p8_frame is created so that layout doesn't jump around.
		if (!canvas || !p8_playarea || !p8_container || !p8_frame)
		{
			p8_update_layout_hash = -1;
			requestAnimationFrame(p8_update_layout);
			return;
		}

		p8_layout_frames ++;

		// assumes frame doesn't have padding
		
		var is_fullscreen=(document.fullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.msFullscreenElement);
		var frame_width = p8_frame.offsetWidth;
		var frame_height = p8_frame.offsetHeight;

		if (is_fullscreen)
		{
			// same as window
			frame_width = window.innerWidth;
			frame_height = window.innerHeight;
		}
		else{
			// never larger than window  // (happens when address bar is down in portraight mode on phone)
			frame_width  = Math.min(frame_width, window.innerWidth);
			frame_height = Math.min(frame_height, window.innerHeight);
		}

		// as big as will fit in a frame..
		csize =  Math.min(frame_width,frame_height);

		// .. but never more than 2/3 of longest side for touch (e.g. leave space for controls on iPad)
		if (p8_touch_detected && p8_is_running)
		{
			var longest_side = Math.max(window.innerWidth,window.innerHeight);
			csize = Math.min(csize, longest_side * 2/3);
		}

		// pixel perfect: quantize to closest multiple of 128
		// only when large display (desktop)
		if (frame_width >= 512 && frame_height >= 512)
		{
			csize = (csize+1) & ~0x7f;
		}

		// csize should never be higher than parent frame
		// (otherwise stretched large when fullscreen and then return)
		if (!is_fullscreen && p8_frame) 
			csize = Math.min(csize, last_windowed_container_height); // p8_frame_0 parent
		

		if (is_fullscreen)
		{
			// always center horizontally
			margin_left = (frame_width - csize)/2;

			if (p8_touch_detected)
			{
				if (window.innerWidth < window.innerHeight)
				{
					// portrait: keep at y=40 (avoid rounded top corners / camera nub thing etc.)
					margin_top = Math.min(40, frame_height - csize);
				}
				else
				{
					// landscape: put a little above vertical center
					margin_top = (frame_height - csize)/4;
				}
			}
			else{
				// non-touch: center vertically
				margin_top = (frame_height - csize)/2;
			}
		}

		// skip if relevant state has not changed

		var update_hash = csize + margin_top * 1000.3 + margin_left * 0.001 + frame_width * 333.33 + frame_height * 772.15134;
		if (is_fullscreen) update_hash += 0.1237;

		// unexpected things can happen in the first few seconds, so just keep re-calculating layout. wasm version breaks layout otherwise.
		// also: bonus refresh at 5, 8 seconds just in case ._.
		if (p8_layout_frames < 180 || p8_layout_frames == 60*5 || p8_layout_frames == 60*8 )
			update_hash = p8_layout_frames;

		if (!is_fullscreen) // fullscreen: update every frame for safety. should be cheap!
		if (!p8_touch_detected) // mobile: update every frame because nothing can be trusted
		if (p8_update_layout_hash == update_hash)
		{
			//console.log("p8_update_layout(): skipping");
			requestAnimationFrame(p8_update_layout);
			return;
		}
		p8_update_layout_hash = update_hash;

		// record this for returning to original size after fullscreen pushes out container height (argh)
		if (!is_fullscreen && p8_frame)
			last_windowed_container_height = p8_frame.parentNode.parentNode.offsetHeight;
		

		// mobile in portrait mode: put screen at top (w / a little extra space for fullscreen button if needed)
		// (don't cart too about buttons overlapping screen)
		if (p8_touch_detected && p8_is_running && document.body.clientWidth < document.body.clientHeight)
			p8_playarea.style.marginTop = p8_allow_mobile_menu ? 32 : 8;
		else if (p8_touch_detected && p8_is_running) // landscape: slightly above vertical center (only relevant for iPad / highres devices)
			p8_playarea.style.marginTop = (document.body.clientHeight - csize) / 4;
		else
			p8_playarea.style.marginTop = "";

		canvas.style.width = csize;
		canvas.style.height = csize;

		// to do: this should just happen from css layout
		canvas.style.marginLeft = margin_left;
		canvas.style.marginTop = margin_top;

		p8_container.style.width = csize;
		p8_container.style.height = csize;

		// set menu buttons position to bottom right
		el = document.getElementById("p8_menu_buttons");
		el.style.marginTop = csize - el.offsetHeight;

		if (p8_touch_detected && p8_is_running)
		{
			// turn off pointer events to prevent double-tap zoom etc (works on Android)
			// don't want this for desktop because breaks mouse input & click-to-focus when using codo_textarea
			canvas.style.pointerEvents = "none";

			p8_container.style.marginTop = "0px";

			// buttons
			
			// same as touch event handling
			var w = window.innerWidth;
			var h = window.innerHeight;
			var r = Math.min(w,h) / 12;

			if (r > 40) r = 40;

			el = document.getElementById("controls_right_panel");
			el.style.left = w-r*6;
			el.style.top = h-r*7;
			el.style.width = r*6;
			el.style.height = r*7;
			if (el.getAttribute("src") != p8_gfx_dat["controls_right_panel"]) // optimisation: avoid reload? (browser should handle though)
				el.setAttribute("src", p8_gfx_dat["controls_right_panel"]);

			el = document.getElementById("controls_left_panel");
			el.style.left = 0;
			el.style.top = h-r*6;
			el.style.width = r*6;
			el.style.height = r*6;
			if (el.getAttribute("src") != p8_gfx_dat["controls_left_panel"]) // optimisation: avoid reload? (browser should handle though)
				el.setAttribute("src", p8_gfx_dat["controls_left_panel"]);
			
			// scroll to cart (commented; was a failed attempt to prevent scroll-on-drag on some browsers)
			// p8_frame.scrollIntoView(true);

			document.getElementById("touch_controls_gfx").style.display="table";
			document.getElementById("touch_controls_background").style.display="table";

		}
		else{
			document.getElementById("touch_controls_gfx").style.display="none";
			document.getElementById("touch_controls_background").style.display="none";
		}

		if (!p8_is_running)
		{
			p8_playarea.style.display="none";
			p8_container.style.display="flex";
			p8_container.style.marginTop="auto";

			el = document.getElementById("p8_start_button");
			if (el) el.style.display="flex";
		}
		requestAnimationFrame(p8_update_layout);
	}


	var p8_touch_detected = false;
	addEventListener("touchstart", function(event)
	{
		p8_touch_detected = true;

		// hide codo_textarea -- clipboard support on mobile is not feasible
		el = document.getElementById("codo_textarea");
		if (el && el.style.display != "none"){
			el.style.display="none";
		}

	},  {passive: true});

	function p8_create_audio_context()
	{
		if (pico8_audio_context) 
		{
			try {
				pico8_audio_context.resume();
			}
			catch(err) {
				console.log("** pico8_audio_context.resume() failed");
			}	
			return;
		}

		var webAudioAPI = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext;			
		if (webAudioAPI)
		{
			pico8_audio_context = new webAudioAPI;

			// wake up iOS
			if (pico8_audio_context)
			{
				try {
					var dummy_source_sfx = pico8_audio_context.createBufferSource();
					dummy_source_sfx.buffer = pico8_audio_context.createBuffer(1, 1, 22050); // dummy
					dummy_source_sfx.connect(pico8_audio_context.destination);
					dummy_source_sfx.start(1, 0.25); // gives InvalidStateError -- why? hasn't been played before 
					//dummy_source_sfx.noteOn(0); // deleteme
				}
				catch(err) {
					console.log("** dummy_source_sfx.start(1, 0.25) failed");
				}
			}
		}
	}

	function p8_close_cart()
	{
		// just reload page! used for touch buttons -- hard to roll back state 
		window.location.hash = ""; // triggers reload
	}

	var p8_is_running = false;
	var p8_script = null;
	var Module = null;
	function p8_run_cart()
	{
		if (p8_is_running) return;
		p8_is_running = true;

		// touch: hide everything except p8_frame_0
		if (p8_touch_detected)
		{
			el = document.getElementById("body_0");
			el2 = document.getElementById("p8_frame_0");
			if (el && el2)
			{
				el.style.display="none";
				el.parentNode.appendChild(el2);
			}
		}

		// create audio context and wake it up (for iOS -- needs happen inside touch event)		
		p8_create_audio_context();

		// show touch elements
		els = document.getElementsByClassName('p8_controller_area');
		for (i = 0; i < els.length; i++)
			els[i].style.display="";


		// install touch events. These also serve to block scrolling / pinching / zooming on phones when p8_is_running
			// moved event.preventDefault(); calls into pico8_buttons_event() (want to let top buttons pass through)
		addEventListener("touchstart", function(event){ pico8_buttons_event(event, 0); }, {passive: false});
		addEventListener("touchmove",  function(event){ pico8_buttons_event(event, 1); }, {passive: false});
		addEventListener("touchend",   function(event){ pico8_buttons_event(event, 2); }, {passive: false});


		// load and run script
		e = document.createElement("script");
		p8_script = e;
		e.onload = function(){
			
			// show canvas / menu buttons only after loading
			el = document.getElementById("p8_playarea");
			if (el) el.style.display="table";

			if (typeof(p8_update_layout_hash) !== 'undefined')
				p8_update_layout_hash = -77;
			if (typeof(p8_buttons_hash) !== 'undefined')
				p8_buttons_hash = -33;

			// crt effect
   var canvas = document.getElementById("canvas");
   p8_crt_effect_init(canvas);
		}
		e.type = "application/javascript";
		e.src = "initv10pal.js";
		e.id = "e_script";
		
		document.body.appendChild(e); // load and run

		// hide start button and show canvas / menu buttons. hide start button
		el = document.getElementById("p8_start_button");
		if (el) el.style.display="none";

		// add #playing for touchscreen devices (allows back button to close)
		// X button can also be used to trigger this 
		if (p8_touch_detected)
		{
			window.location.hash = "#playing";
			window.onhashchange = function()
			{
				if (window.location.hash.search("playing") < 0)
					window.location.reload();
			}
		}

		// install drag&drop listeners
		{
			let canvas = document.getElementById("canvas");
			if (canvas)
			{
				canvas.addEventListener('dragenter', dragover, false);
				canvas.addEventListener('dragover', dragover, false);
				canvas.addEventListener('dragleave', dragstop, false);
				canvas.addEventListener('drop', nop, false);
				canvas.addEventListener('drop', p8_drop_file, false);
			}
		}
	}

	
		// Gamepad code
	
	var P8_BUTTON_O = {action:'button', code: 0x10};
	var P8_BUTTON_X = {action:'button', code: 0x20};
	var P8_DPAD_LEFT = {action:'button', code: 0x1};
	var P8_DPAD_RIGHT = {action:'button', code: 0x2};
	var P8_DPAD_UP = {action:'button', code: 0x4};
	var P8_DPAD_DOWN = {action:'button', code: 0x8};
	var P8_MENU = {action:'menu'};
	var P8_NO_ACTION = {action:'none'};

	var P8_BUTTON_MAPPING = [
		// ref: https://w3c.github.io/gamepad/#remapping
		P8_BUTTON_O,          // Bottom face button
		P8_BUTTON_X,          // Right face button
		P8_BUTTON_X,          // Left face button
		P8_BUTTON_O,          // Top face button
		P8_NO_ACTION,         // Near left shoulder button (L1)
		P8_NO_ACTION,         // Near right shoulder button (R1)
		P8_NO_ACTION,         // Far left shoulder button (L2)
		P8_NO_ACTION,         // Far right shoulder button (R2)
		P8_MENU,              // Left auxiliary button (select)
		P8_MENU,              // Right auxiliary button (start)
		P8_NO_ACTION,         // Left stick button
		P8_NO_ACTION,         // Right stick button
		P8_DPAD_UP,           // Dpad up
		P8_DPAD_DOWN,         // Dpad down
		P8_DPAD_LEFT,         // Dpad left
		P8_DPAD_RIGHT,        // Dpad right
	];

	// Track which player is controller by each gamepad. Gamepad index i controls the
	// player with index pico8_gamepads_mapping[i]. Gamepads with null player are
	// currently unassigned - they get assigned to a player when a button is pressed.
	var pico8_gamepads_mapping = [];

	function p8_unassign_gamepad(gamepad_index) {
		if (pico8_gamepads_mapping[gamepad_index] == null) {
			return;
		}
		pico8_buttons[pico8_gamepads_mapping[gamepad_index]] = 0;
		pico8_gamepads_mapping[gamepad_index] = null;
	}


	function p8_first_player_without_gamepad(max_players) {
		var allocated_players = pico8_gamepads_mapping.filter(function(x) { return x != null; });
		var sorted_players = Array.from(allocated_players).sort();
		for (var desired = 0; desired < sorted_players.length && desired < max_players; ++desired) {
			if (desired != sorted_players[desired]) {
				return desired;
			}
		}
		if (sorted_players.length < max_players) {
			return sorted_players.length;
		}
		return null;
	}

	function p8_assign_gamepad_to_player(gamepad_index, player_index) {
		p8_unassign_gamepad(gamepad_index);
		pico8_gamepads_mapping[gamepad_index] = player_index;
	}


	function p8_convert_standard_gamepad_to_button_state(gamepad, axis_threshold, button_threshold) {
		// Given a gamepad object, return:
		// {
		//     button_state: the binary encoded Pico 8 button state
		//     menu_button: true if any menu-mapped button was pressed
		//     any_button: true if any button was pressed, including d-pad
		//         buttons and unmapped buttons
		// }
		if (!gamepad || !gamepad.axes || !gamepad.buttons) {
			return {
				button_state: 0,
				menu_button: false,
				any_button: false
			};
		}
		function button_state_from_axis(axis, low_state, high_state, default_state) {
			if (axis && axis < -axis_threshold) return low_state;
			if (axis && axis > axis_threshold) return high_state;
			return default_state;
		}
		var axes_actions = [
			button_state_from_axis(gamepad.axes[0], P8_DPAD_LEFT, P8_DPAD_RIGHT, P8_NO_ACTION),
			button_state_from_axis(gamepad.axes[1], P8_DPAD_UP, P8_DPAD_DOWN, P8_NO_ACTION),
		];

		var button_actions = gamepad.buttons.map(function (button, index) {
			var pressed = button.value > button_threshold || button.pressed;
			if (!pressed) return P8_NO_ACTION;
			return P8_BUTTON_MAPPING[index] || P8_NO_ACTION;
		});

		var all_actions = axes_actions.concat(button_actions);
		
		var menu_button = button_actions.some(function (action) { return action.action == 'menu'; });
		var button_state = (all_actions
			.filter(function (a) { return a.action == 'button'; })
			.map(function (a) { return a.code; })
			.reduce(function (result, code) { return result | code; }, 0)
		);
		var any_button = gamepad.buttons.some(function (button) {
			return button.value > button_threshold || button.pressed;
		});

		any_button |= button_state; //jww: include axes 0,1 as might be first intended action

		return {
			button_state,
			menu_button,
			any_button
		};
	}

	// jww: pico-8 0.2.1 version for unmapped gamepads, following p8_convert_standard_gamepad_to_button_state
	// axes 0,1 & buttons 0,1,2,3 are reasonably safe. don't try to read dpad.
	// menu buttons are unpredictable, but use 6..8 anyway (better to have a weird menu button than none)

	function p8_convert_unmapped_gamepad_to_button_state(gamepad, axis_threshold, button_threshold) {

		if (!gamepad || !gamepad.axes || !gamepad.buttons) {
			return {
				button_state: 0,
				menu_button: false,
				any_button: false
			};
		}

		var button_state = 0;

		if (gamepad.axes[0] && gamepad.axes[0] < -axis_threshold) button_state |= 0x1;
		if (gamepad.axes[0] && gamepad.axes[0] > axis_threshold)  button_state |= 0x2;
		if (gamepad.axes[1] && gamepad.axes[1] < -axis_threshold) button_state |= 0x4;
		if (gamepad.axes[1] && gamepad.axes[1] > axis_threshold)  button_state |= 0x8;

		// buttons: first 4 taken to be O/X, 6..8 taken to be menu button

		for (j = 0; j < gamepad.buttons.length; j++)
		if (gamepad.buttons[j].value > 0 || gamepad.buttons[j].pressed)
		{
			if (j < 4)
				button_state |= (0x10 << (((j+1)/2)&1)); // 0 1 1 0 -- A,X -> O,X on xbox360
			else if (j >= 6 && j <= 8)
				button_state |= 0x40;
		}

		var menu_button = button_state & 0x40;

		var any_button = gamepad.buttons.some(function (button) {
			return button.value > button_threshold || button.pressed;
		});

		any_button |= button_state; //jww: include axes 0,1 as might be first intended action
		
		return {
			button_state,
			menu_button,
			any_button
		};
	}

	
	// gamepad  https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
	// (sets bits in pico8_buttons[])
	function p8_update_gamepads() {
		var axis_threshold = 0.3;
		var button_threshold = 0.5; // Should be unnecessary, we should be able to trust .pressed
		var max_players = 8;
		var gps = navigator.getGamepads() || navigator.webkitGetGamepads();

		if (!gps) return;

		// In Chrome, gps is iterable but it's not an array.
		gps = Array.from(gps);

		pico8_gamepads.count = gps.length;
		while (gps.length > pico8_gamepads_mapping.length) {
		    pico8_gamepads_mapping.push(null);
		}

		var menu_button = false;
		var gamepad_states = gps.map(function (gp) {
			return (gp && gp.mapping == "standard") ?
				p8_convert_standard_gamepad_to_button_state(gp, axis_threshold, button_threshold) :
				p8_convert_unmapped_gamepad_to_button_state(gp, axis_threshold, button_threshold);
		});

		// Unassign disconnected gamepads.
		// gps.forEach(function (gp, i) { if (gp && !gp.connected) { p8_unassign_gamepad(i); }});
		gps.forEach(function (gp, i) { if (!gp || !gp.connected) { p8_unassign_gamepad(i); }}); // https://www.lexaloffle.com/bbs/?pid=87132#p


		// Assign unassigned gamepads when any button is pressed.
		gamepad_states.forEach(function (state, i) {
			if (state.any_button && pico8_gamepads_mapping[i] == null) {
				var first_free_player = p8_first_player_without_gamepad(max_players);
				p8_assign_gamepad_to_player(i, first_free_player);
			}
		});

		// Update pico8_buttons array.
		gamepad_states.forEach(function (gamepad_state, i) {
			if (pico8_gamepads_mapping[i] != null) {
				pico8_buttons[pico8_gamepads_mapping[i]] = gamepad_state.button_state;
			}
		});

		// Update menu button.
		// Pico 8 only recognises the menu button on the first player, so we
		// press it when any gamepad has pressed a button mapped to menu.
		if (gamepad_states.some(function (state) { return state.menu_button; })) {
			pico8_buttons[0] |= 0x40;
		}

		requestAnimationFrame(p8_update_gamepads);
	}
	requestAnimationFrame(p8_update_gamepads);

	// End of gamepad code


	// key blocker. prevent browser operations while playing cart so that PICO-8 can use those keys e.g. cursors to scroll, ctrl-r to reload
	document.addEventListener('keydown',
	function (event) {
		event = event || window.event;
		if (!p8_is_running) return;

		if (pico8_state.has_focus == 1)
			if ([32, 37, 38, 39, 40, 77, 82, 80, 9].indexOf(event.keyCode) > -1)       // block only cursors, M R P, tab
				if (event.preventDefault) event.preventDefault();

	},{passive: false});

	// when using codo_textarea to determine focus, need to explicitly hand focus back when clicking a p8_menu_button
	function p8_give_focus()
	{
		el = (typeof codo_textarea === 'undefined') ? document.getElementById("codo_textarea") : codo_textarea;
		if (el)
		{
			el.focus();
			el.select();
		}
	}

	function p8_request_fullscreen() {

		var is_fullscreen=(document.fullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.msFullscreenElement);

		if (is_fullscreen)
		{
			 if (document.exitFullscreen) {
		        document.exitFullscreen();
		    } else if (document.webkitExitFullscreen) {
		        document.webkitExitFullscreen();
		    } else if (document.mozCancelFullScreen) {
		        document.mozCancelFullScreen();
		    } else if (document.msExitFullscreen) {
		        document.msExitFullscreen();
		    }
			return;
		}
		
		var el = document.getElementById("p8_playarea");

		if ( el.requestFullscreen ) {
			el.requestFullscreen();
		} else if ( el.mozRequestFullScreen ) {
			el.mozRequestFullScreen();
		} else if ( el.webkitRequestFullScreen ) {
			el.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
		}
	}

 function p8_toggle_crt() {
  var canvas = document.getElementById("canvas");
  var crtcanvas = document.getElementById("crtcanvas");
  if (crtcanvas == null) {
   p8_crt_effect_init(canvas);
  }
  else {
   canvas.parentNode.removeChild(crtcanvas);
   canvas.style.opacity = 1;
  }
 }

</script>

<STYLE TYPE="text/css">
.disable-select {
  user-select: none; /* supported by Chrome and Opera */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
}

<!--
.p8_menu_button{
	opacity:0.3;
	padding:4px;
	display:table;
	width:24px;
	height:24px;
	float:right;
}

@media screen and (min-width:512px) {
	.p8_menu_button{
		width:24px; margin-left:12px; margin-bottom:8px;
	}
}
.p8_menu_button:hover{
	opacity:1.0;
	cursor:pointer;
}

canvas{
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
	border: 0px;
	cursor: none;
}


.p8_start_button{
	cursor:pointer;
	background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAB+UlEQVR4Ae3dvW0CMQCA0RCloGKAKxEzUKVMQ5kxKJmEklHYgRkQs6Q46WThn7Mh4hJ4nxAyxjGGd5B2Nl90b5qudx8BAAACAEAAAAgAAAEAIAAABACAAAAQAAACAEAAAAgAAAEAIAAABACAAAAQAAACAEAAAOhfAOy2q9121Q/C+3A+Oa7ZJ5y/WtO6/3MC7Lar/eG8P5zjp8LJcE1ycW6ffj4e94PwYXn/l/gGxPO5cc4gvNJbzzC6/3MC5C7/wlW5P5zjz/dqn9ZPcHT/h/Xx+Ms//EHIvfNwWeuC3K9Q0/4PazZfdJMf4pWb4H+AAAAQAAACAEAAAAAQAAACAEAAAAgAAAEAIAAABACAAAAQAAACAEAAAAgAAE0AsFkv+1thPDyMx4V9hvnhvrA+vB89Q/IA5TPHyyrf+9WeDc0XXc3t++uzcB+uicf1+8R/VViTfLmaPXPrkwvq98+95fKt4Sco5N2sl8fTJTlfc2WN7n81P7zWI6s5//1nawA4ni7Dix1Pl+Ec4WRyHO9T3jx+6pav9n1Vnv/+s338ypUSHqU/Xzhu/Xrlnqp8t61XZXJ96/lvbjZfdBP9/1fjT5AAABAAAAIAQAAACAAAAQAgAAAEAIAAABAAAAIAQAAACAAAAQAgAAAEAIAAABAAAAIAQAAACMAf6AdFXRkyb6qnawAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=");
	-repeat center;
	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

.button_gfx{
	stroke-width:2;
	stroke: #ffffff;
	stroke-opacity:0.4;
	fill-opacity:0.2;
	fill:black;
}

.button_gfx_icon{
	stroke-width:3;
	stroke: #909090;
	stroke-opacity:0.7;
	fill:none;
}

-->
</STYLE>

</head>

<body style="padding:0px; margin:0px; background-color:#222; color:#ccc">
<div id="body_0"> <!-- hide this when playing in mobile (p8_touch_detected) so that elements don't affect layout -->


<!-- Add any content above the cart here -->


<div id="p8_frame_0" class="disable-select" style="max-width:800px; max-height:800px; margin:auto;"> <!-- double function: limit size, and display only this div for touch devices -->
<div id="p8_frame" style="display:flex; width:100%; max-width:95vw; height:100vw; max-height:95vh; margin:auto;">

	<div id="p8_menu_buttons_touch" style="position:absolute; width:100%; z-index:10; left:0px;">
		<div class="p8_menu_button" id="p8b_full"  style="float:left;margin-left:10px" onClick="p8_give_focus(); p8_request_fullscreen();"></div>
		<div class="p8_menu_button" id="p8b_sound" style="float:left;margin-left:10px" onClick="p8_give_focus(); p8_create_audio_context(); Module.pico8ToggleSound();"></div>
		<div class="p8_menu_button" id="p8b_close" style="float:right; margin-right:10px" onClick="p8_close_cart();"></div>
	</div>

	<div id="p8_container"
		style="margin:auto; display:table;"
		onclick="p8_create_audio_context(); p8_run_cart();">

		<div id="p8_start_button" class="p8_start_button" style="width:100%; height:100%; display:flex;">
			<img width=80 height=80 style="margin:auto;"
		src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAABpklEQVR42u3au23DQBCEYUXOXIGKcujQXUgFuA0XIKgW90Q9oEAg+Ljd27vd2RsCf058gEDqhofPj+OB6SMCAQlIQAIyAhKQgARkBAQDnM6XSRsB7/2e/tSA0//12fCAKsQX3ntDA4oRFwBRIc0AixE38BAhTQGLEAsBUSDNAXcRhYDRIZsAPlp99VECRoXsDpgN0g0wC6Q7IDpkGEBUyG6A0+vKBtkdMBukG2AWSHdAdMgwgKiQ4QDRIMMCokCGB4wOCQPYFVKw2cABNocUjl6wgE0gFashPKAZpHJ2TQNYBVmxW6cDFENWDv9pAUshCVgJScBKSAISkD9hPkT4GkNAMdzepyj8Kye852EBLe51CZHHWQK4JcThD1SlcHPEYY/0a+A0n6SkGZV6w6WZNb3g4Id1b7hwgGhwYQBR4dwB0eHcALPAdQfMBhcOEA0uDCAqnDsgOpwbYBa4poA/31+rZYFrBriFpwGMCtcEcA9PAhgdzhywBK8EEQXOFFCCtwaIBmcGKMWbI6LCmQBq8R6hw5kAMgISkIAEJCAjIAEJSEBGQI9ukV7lRn9nD+gAAAAASUVORK5CYII="/>
		</div>

		<div id="p8_playarea" style="display:none; margin:auto;
				-webkit-user-select:none; -moz-user-select: none; user-select: none; -webkit-touch-callout:none;
		">

			<div  id="touch_controls_background"
				  style=" pointer-events:none; display:none; background-color:#000;
						 position:fixed; top:0px; left:0px; border:0; width:100vw; height:100vh">
				&nbsp
			</div>

			<div style="display:flex; position:relative">
				<!-- pointer-events turned off for mobile in p8_update_layout because need for desktop mouse -->
				<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault();" >
				</canvas>
				<div class=p8_menu_buttons id="p8_menu_buttons" style="margin-left:10px;">
					<div class="p8_menu_button" style="position:absolute; bottom:160px" id="p8b_controls" onClick="p8_give_focus(); Module.pico8ToggleControlMenu();"></div>					
					<div class="p8_menu_button" style="position:absolute; bottom:125px" id="p8b_pause" onClick="p8_give_focus(); Module.pico8TogglePaused(); p8_update_layout_hash = -22;"></div>
					<div class="p8_menu_button" style="position:absolute; bottom:90px" id="p8b_sound" onClick="p8_give_focus(); p8_create_audio_context(); Module.pico8ToggleSound();"></div>
					<div class="p8_menu_button" style="position:absolute; bottom:55px" id="p8b_full" onClick="p8_give_focus(); p8_request_fullscreen();"></div>
					<div class="p8_menu_button" style="position:absolute; bottom:20px" id="p8b_crt" onClick="p8_give_focus(); p8_toggle_crt();"></div>
				</div>
			</div>


			<!-- display after first layout update -->
			<div  id="touch_controls_gfx"
				  style=" pointer-events:none; display:table; 
						 position:fixed; top:0px; left:0px; border:0; width:100vw; height:100vh">

					<img src="" id="controls_right_panel" style="position:absolute; opacity:0.5;">
					<img src="" id="controls_left_panel" style="position:absolute;  opacity:0.5;">
						
			
			</div> <!-- touch_controls_gfx -->

			<!-- used for clipboard access & keyboard input; displayed and used by PICO-8 only once needed. can be safely removed if clipboard / key presses not needed. -->
			<!-- (needs to be inside p8_playarea so that it still works under Chrome when fullscreened) -->
			<!-- 0.2.5: added "display:none"; pico8.js shows on demand to avoid mac osx accent character selector // https://www.lexaloffle.com/bbs/?tid=47743 -->

			<textarea id="codo_textarea" class="emscripten" style="display:none; position:absolute; left:-9999px; height:0px; overflow:hidden"></textarea>

		</div> <!--p8_playarea -->

	</div> <!-- p8_container -->

</div> <!-- p8_frame -->
</div> <!-- p8_frame_0 size limit -->

<script type="text/javascript">

	p8_update_layout();
	p8_update_button_icons();

	var canvas = document.getElementById("canvas");
	Module = {};
	Module.canvas = canvas;
	//Module.arguments = ["-displays_x","2","-displays_y","2","-mix_buffer_size","2048"];

	// from @ultrabrite's shell: test if an AudioContext can be created outside of an event callback.
	// If it can't be created, then require pressing the start button to run the cartridge

	if (p8_autoplay)
	{
		var temp_context = new AudioContext();
		temp_context.onstatechange = function ()
		{
			if (temp_context.state=='running')
			{
				p8_run_cart();
				temp_context.close();
			}
		};
	}

	// pointer lock request needs to be inside a canvas interaction event
	// pico8_state.request_pointer_lock is true when 0x5f2d bit 0 and bit 2 are set -- poke(0x5f2d,0x5) 
	// note on mouse acceleration for future: // https://github.com/w3c/pointerlock/pull/49
	canvas.addEventListener("click", function()
	{
		if (!p8_touch_detected)
			if (pico8_state.request_pointer_lock)
				canvas.requestPointerLock();
	});
	
</script>


<!-- Add content below the cart here -->


</div> <!-- body_0 -->
</body></html>

<!-- Based on PICO-8 CRT framework by ultrabrite (twitter: @SpaceTrucker2k0) -->
<!-- https://www.lexaloffle.com/bbs/?tid=33488 -->

<!-- Updated with CRT shader by Mattias Gustavsson (twitter: @Mattias_G) -->
<!-- https://github.com/mattiasgustavsson/crtview -->

<!-- common vertex shader -->
<script id="common-vertex-shader" type="x-shader/x-vertex">
	attribute vec4 pos;
	varying vec2 uv;
	void main() {
		gl_Position = vec4(pos.xy, 0, 1);
		uv = pos.zw;
	}
</script>

<script id="crt-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 uv;
	uniform vec2 resolution;
	uniform float time;
	uniform sampler2D backbuffer;
	uniform sampler2D blurbuffer;
	vec3 tsample(sampler2D samp, vec2 tc) {
		vec3 s=pow(abs(texture2D(samp,vec2(tc.x,1.0-tc.y)).rgb),vec3(2.2));
		return s*vec3(1.25);
	}
	vec3 filmic(vec3 lcol) {
		vec3 x=max(vec3(0),lcol-vec3(0.004));
		return (x*(6.2*x+0.5))/(x*(6.2*x+1.7)+0.06);
	}
	vec2 curve(vec2 uv) {
		uv=(uv-0.5)*2.0;
		uv*=vec2(1.049,1.042);
		uv-=vec2(-0.008,0.008);
		uv.x*=1.0+pow(abs(uv.y)/5.0,2.0);
		uv.y*=1.0+pow(abs(uv.x)/4.0,2.0);
		uv=uv*0.5+0.5;
		return uv;
	}
	highp float rand(vec2 co) {
		/* iPad needs highp to avoid artifacts */
		highp float a = 12.9898;
		highp float b = 78.233;
		highp float c = 43758.5453;
		highp float dt = dot(co.xy,vec2(a,b));
		highp float sn = mod(dt,3.14);
		return fract(sin(sn) * c);
	}
	void main() {
		/* curve */
		vec2 curved_uv=mix(curve(uv),uv,0.4);
		#if 0 /* dead code in original */
			float scale=0.04;
			vec2 scuv=curved_uv*(1.0-scale)+scale*0.5+vec2(0.003,-0.001);
		#else
			vec2 scuv=curved_uv;
		#endif

		/* main color, bleed */
		vec3 col;
		float x=sin(0.1*time+curved_uv.y*13.0)
				*sin(0.23*time+curved_uv.y*19.0)
				*sin(0.3+0.11*time+curved_uv.y*23.0)
				*0.0012;
		float o=sin(gl_FragCoord.y/1.5)/resolution.x;
		x+=o*0.25;
		x*=0.2;
		col.r=tsample(backbuffer,vec2(x+scuv.x+0.0009,scuv.y+0.0009)).x+0.02;
		col.g=tsample(backbuffer,vec2(x+scuv.x+0.0000,scuv.y-0.0011)).y+0.02;
		col.b=tsample(backbuffer,vec2(x+scuv.x-0.0015,scuv.y+0.0000)).z+0.02;

		float i=clamp(col.r*0.299+col.g*0.587+col.b*0.114,0.0,1.0);
		i=pow(1.0-pow(i,2.0),1.0);
		i=(1.0-i)*0.85+0.15;

		/* ghosting */
		float ghs=0.15;
		vec3 r=tsample(blurbuffer, 
			vec2(x-0.014*1.0, -0.027)*0.85
				+0.007*vec2(0.35*sin(1.0/7.0 + 15.0*curved_uv.y + 0.9*time), 0.35*sin(2.0/7.0 + 10.0*curved_uv.y + 1.37*time))
				+vec2(scuv.x+0.001,scuv.y+0.001)
			).xyz*vec3(0.5,0.25,0.25);
		vec3 g=tsample(blurbuffer, 
			vec2(x-0.019*1.0, -0.020)*0.85
				+0.007*vec2(0.35*cos(1.0/9.0 + 15.0*curved_uv.y + 0.5*time), 0.35*sin(2.0/9.0 + 10.0*curved_uv.y + 1.50*time))
				+vec2(scuv.x+0.000,scuv.y-0.002)
			).xyz*vec3(0.25,0.5,0.25);
		vec3 b=tsample(blurbuffer, 
			vec2(x-0.017*1.0, -0.003)*0.85
				+0.007*vec2(0.35*sin(2.0/3.0 + 15.0*curved_uv.y + 0.7*time), 0.35*cos(2.0/3.0 + 10.0*curved_uv.y + 1.63*time))
				+vec2(scuv.x-0.002,scuv.y+0.000)
			).xyz*vec3(0.25,0.25,0.5);

		vec3 ghost=vec3(0.0);
		ghost+=vec3(ghs*(1.0-0.299))*pow(clamp(vec3(3.0)*r,vec3(0.0),vec3(1.0)),vec3(2.0))*vec3(i);
		ghost+=vec3(ghs*(1.0-0.587))*pow(clamp(vec3(3.0)*g,vec3(0.0),vec3(1.0)),vec3(2.0))*vec3(i);
		ghost+=vec3(ghs*(1.0-0.114))*pow(clamp(vec3(3.0)*b,vec3(0.0),vec3(1.0)),vec3(2.0))*vec3(i);
		col+=ghost;

		/* level adjustment (curves) */
		col*=vec3(0.95,1.05,0.95);
		col=clamp(1.3*col+0.75*col*col+1.25*col*col*col*col*col,vec3(0.0),vec3(10.0));

		/* vignette */
		float vig=0.1+16.0*curved_uv.x*curved_uv.y*(1.0-curved_uv.x)*(1.0-curved_uv.y);
		#if 0 /* original */
			vig=1.3*pow(vig,0.5);
		#else /* less dark around edges; better for PICO-8 visibility */
			vig=1.5*pow(vig,0.25);
			vig=(vig>1.0) ? (1.0 + smoothstep(1.0,1.5,vig)*0.2) : vig;
		#endif
		col*=vig;

		/* scanlines */
		float scans=clamp(0.35+0.18*sin(6.0*time+curved_uv.y*resolution.y*1.5),0.0,1.0);
		float s=pow(scans,0.9);
		col*=s;

		/* vertical lines (shadow mask) */
		col*=1.0-0.23*clamp((mod(gl_FragCoord.xy.x,3.0))*0.5,0.0,1.0);
		
		/* tone map */
		col=filmic(col);

		/* noise */
		vec2 seed=curved_uv*resolution.xy;
		vec3 noise=pow(vec3(rand(seed+time),rand(seed+time*2.0),rand(seed+time*3.0)),vec3(1.5));
		col-=0.015*noise;

		/* flicker */
		col*=(1.0-0.004*(sin(50.0*time+curved_uv.y*2.0)*0.5+0.5));

		/* clamp */
		if (curved_uv.x < 0.0 || curved_uv.x > 1.0)
			col*= 0.0;
		if (curved_uv.y < 0.0 || curved_uv.y > 1.0)
			col*= 0.0;

		gl_FragColor = vec4(col, 1.0);
	}
</script>

<script id="blur-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 uv;
	uniform vec2 blur;
	uniform sampler2D texture;
	void main() {
		vec4 sum=texture2D(texture,uv)*0.2270270270;
		sum+=texture2D(texture,vec2(uv.x-4.0*blur.x,uv.y-4.0*blur.y))*0.0162162162;
		sum+=texture2D(texture,vec2(uv.x-3.0*blur.x,uv.y-3.0*blur.y))*0.0540540541;
		sum+=texture2D(texture,vec2(uv.x-2.0*blur.x,uv.y-2.0*blur.y))*0.1216216216;
		sum+=texture2D(texture,vec2(uv.x-1.0*blur.x,uv.y-1.0*blur.y))*0.1945945946;
		sum+=texture2D(texture,vec2(uv.x+1.0*blur.x,uv.y+1.0*blur.y))*0.1945945946;
		sum+=texture2D(texture,vec2(uv.x+2.0*blur.x,uv.y+2.0*blur.y))*0.1216216216;
		sum+=texture2D(texture,vec2(uv.x+3.0*blur.x,uv.y+3.0*blur.y))*0.0540540541;
		sum+=texture2D(texture,vec2(uv.x+4.0*blur.x,uv.y+4.0*blur.y))*0.0162162162;
		gl_FragColor=sum;
	}
</script>

<script id="accumulate-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 uv;
	uniform sampler2D tex0;
	uniform sampler2D tex1;
	uniform float modulate;
	void main() {
		vec4 a = texture2D(tex0, uv) * vec4(modulate);
		vec4 b = texture2D(tex1, uv);
		gl_FragColor = max(a, b * 0.96);
	}
</script>

<script id="blend-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 uv;
	uniform sampler2D tex0;
	uniform sampler2D tex1;
	uniform float modulate;
	void main() {
		vec4 a = texture2D(tex0, uv) * vec4(modulate);
		vec4 b = texture2D(tex1, uv);
		gl_FragColor = max(a, b * 0.32);
	}
</script>

<script id="copy-fragment-shader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec2 uv;
	uniform sampler2D tex0;
	void main() {
		gl_FragColor = texture2D(tex0, uv);
	}
</script>

<script type="text/javascript">
	function p8_crt_effect_init(canvas) {
		var crtcanvas = document.createElement('canvas');
		crtcanvas.id = "crtcanvas";
		crtcanvas.className = "crtcanvas";
		crtcanvas.style.position = "absolute";
		crtcanvas.style.top = 0;
		crtcanvas.style.left = 0;
		crtcanvas.width = canvas.clientWidth;
		crtcanvas.height = canvas.clientHeight;
		var gl = crtcanvas.getContext('webgl');
		if (!gl)
			return;

		var pico8_ctx = canvas.getContext('2d');

		canvas.parentNode.insertBefore(crtcanvas, canvas);
		/* keep canvas in DOM for event handling, but hide it via opacity */
		canvas.style.opacity = 0;

		function unbind() {
			for (var i = 0; i < arguments.length; ++i) {
				var arg = arguments[i];
				switch (arg) {
					case gl.FRAMEBUFFER:
						gl.bindFramebuffer(arg, null);
						break;
					case gl.TEXTURE_2D:
						gl.bindTexture(arg, null);
						break;
					case gl.ARRAY_BUFFER:
						gl.bindBuffer(arg, null);
						break;
					default:
						gl.activeTexture(arg);
						gl.bindTexture(gl.TEXTURE_2D, null);
				}
			}
		}

		function compileShader(source, type) {
			var shader = gl.createShader(type);
			gl.shaderSource(shader, source);
			gl.compileShader(shader);
			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
				var info = gl.getShaderInfoLog(shader);
				throw ("could not compile shader:" + info);
			}
			return shader;
		};

		var vs = compileShader(document.getElementById("common-vertex-shader").text, gl.VERTEX_SHADER);
		var fs_crt = compileShader(document.getElementById("crt-fragment-shader").text, gl.FRAGMENT_SHADER);
		var fs_blur = compileShader(document.getElementById("blur-fragment-shader").text, gl.FRAGMENT_SHADER);
		var fs_accumulate = compileShader(document.getElementById("accumulate-fragment-shader").text, gl.FRAGMENT_SHADER);
		var fs_blend = compileShader(document.getElementById("blend-fragment-shader").text, gl.FRAGMENT_SHADER);
		var fs_copy = compileShader(document.getElementById("copy-fragment-shader").text, gl.FRAGMENT_SHADER);

		function createProgram(vs, fs, name) {
			var program = gl.createProgram();
			gl.attachShader(program, vs);
			gl.attachShader(program, fs);
			gl.linkProgram(program);
			if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
				var info = gl.getProgramInfoLog(program);
				throw ("shader " + name + " failed to link:" + info);
			}
			return program;
		}

		var crt_program = createProgram(vs, fs_crt, "crt_program");
		const loc_crt_pos = gl.getAttribLocation(crt_program, "pos");
		const loc_crt_time = gl.getUniformLocation(crt_program, "time");
		const loc_crt_backbuffer = gl.getUniformLocation(crt_program, "backbuffer");
		const loc_crt_blurbuffer = gl.getUniformLocation(crt_program, "blurbuffer");
		const loc_crt_resolution = gl.getUniformLocation(crt_program, "resolution");

		var blur_program = createProgram(vs, fs_blur, "blur_program");
		const loc_blur_pos = gl.getAttribLocation(blur_program, "pos");
		const loc_blur_blur = gl.getUniformLocation(blur_program, "blur");
		const loc_blur_texture = gl.getUniformLocation(blur_program, "texture");

		var accumulate_program = createProgram(vs, fs_accumulate, "accumulate_program");
		const loc_accumulate_pos = gl.getAttribLocation(accumulate_program, "pos");
		const loc_accumulate_tex0 = gl.getUniformLocation(accumulate_program, "tex0");
		const loc_accumulate_tex1 = gl.getUniformLocation(accumulate_program, "tex1");
		const loc_accumulate_modulate = gl.getUniformLocation(accumulate_program, "modulate");

		var blend_program = createProgram(vs, fs_blend, "blend_program");
		const loc_blend_pos = gl.getAttribLocation(blend_program, "pos");
		const loc_blend_tex0 = gl.getUniformLocation(blend_program, "tex0");
		const loc_blend_tex1 = gl.getUniformLocation(blend_program, "tex1");
		const loc_blend_modulate = gl.getUniformLocation(blend_program, "modulate");

		var copy_program = createProgram(vs, fs_copy, "copy_program");
		const loc_copy_pos = gl.getAttribLocation(copy_program, "pos");
		const loc_copy_tex0 = gl.getUniformLocation(copy_program, "tex0");

		var posBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
			[-1, -1, 0, 0,
				1, -1, 1, 0,
				1,  1, 1, 1,
				-1,  1, 0, 1]), gl.STATIC_DRAW);
		unbind(gl.ARRAY_BUFFER);

		function bindVertexBuffer(loc_pos) {
			gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
			gl.vertexAttribPointer(loc_pos, 4, gl.FLOAT, false, 0, 0);
			gl.enableVertexAttribArray(loc_pos);
		}

		var tex_backbuffer = gl.createTexture();
		gl.activeTexture(gl.TEXTURE0);
		gl.bindTexture(gl.TEXTURE_2D, tex_backbuffer);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
		unbind(gl.TEXTURE_2D)

		var texfbos = [];
		for (var i = 0; i < 4; ++i) {
			var tex = gl.createTexture();
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D,  tex);
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
			unbind(gl.TEXTURE_2D)
			var fbo = gl.createFramebuffer();
			texfbos.push({tex: tex, fbo: fbo});
		}
		const blur_buf = texfbos[0];
		const blur_tmp = texfbos[1];
		const accum_buf = texfbos[2];
		const accum_cpy = texfbos[3];

		function drawBlurAxis(srctex, dstbuf, blurx, blury) {
			gl.bindFramebuffer(gl.FRAMEBUFFER, dstbuf);
			gl.useProgram(blur_program);
			bindVertexBuffer(loc_blur_pos);
			gl.uniform2f(loc_blur_blur, blurx, blury);
			gl.uniform1i(loc_blur_texture, 0);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, srctex);
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
			unbind(gl.TEXTURE_2D, gl.ARRAY_BUFFER, gl.FRAMEBUFFER);
		}

		function drawBlur(srctex, dstbuf, tmp, r, w, h) {
			drawBlurAxis(srctex, tmp.fbo, r/w, 0);
			drawBlurAxis(tmp.tex, dstbuf, 0, r/h);
		}

		function drawCopy(srctex, dstbuf) {
			gl.bindFramebuffer(gl.FRAMEBUFFER, dstbuf);
			gl.useProgram(copy_program);
			bindVertexBuffer(loc_copy_pos);
			gl.uniform1i(loc_copy_tex0, 0);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, srctex);
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
			unbind(gl.TEXTURE_2D, gl.ARRAY_BUFFER, gl.FRAMEBUFFER);
		}

		var lastdw = -1;
		var lastdh = -1;

		function draw(now) {
			var time = now * 0.001;

			/* hack fix for Safari: texImage2D fails to copy canvas to tex_backbuffer */
			pico8_ctx.resetTransform();
			pico8_ctx.clearRect(-1, -1, 1, 1);

			var p8scale = Math.ceil(Math.max(
				canvas.clientWidth / canvas.width,
				canvas.clientHeight / canvas.height));
			p8scale = Math.max(1, Math.min(4, p8scale));

			var dw = canvas.width * p8scale;
			var dh = canvas.height * p8scale;

			if (lastdw != dw || lastdh != dh) {
				for (var i = 0; i < texfbos.length; ++i) {
					var texture = texfbos[i].tex;
					var framebuffer = texfbos[i].fbo;
					gl.activeTexture(gl.TEXTURE0);
					gl.bindTexture(gl.TEXTURE_2D, texture);
					gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, dw, dh, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
					gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
					gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
					unbind(gl.TEXTURE_2D, gl.FRAMEBUFFER);
				}
			}

			/* blit pico8 screen to backbuffer; backbuffer = texImage2D(canvas) */
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, tex_backbuffer);
			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
			unbind(gl.TEXTURE_2D);

			gl.viewport(0, 0, dw, dh);

			/* blur previous accumulation buffer; blur_buf = blur(accum_cpy) */
			drawBlur(accum_cpy.tex, blur_buf.fbo, blur_tmp, 1.0, dw, dh);

			/* update accumulation buffer; accum_buf = accumulate(backbuffer, blur_buf) */
			gl.bindFramebuffer(gl.FRAMEBUFFER, accum_buf.fbo);
			gl.useProgram(accumulate_program);
			bindVertexBuffer(loc_accumulate_pos);
			gl.uniform1i(loc_accumulate_tex0, 0);
			gl.uniform1i(loc_accumulate_tex1, 1);
			gl.uniform1f(loc_accumulate_modulate, 1.0);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, tex_backbuffer);
			gl.activeTexture(gl.TEXTURE1);
			gl.bindTexture(gl.TEXTURE_2D, blur_buf.tex);
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
			unbind(gl.TEXTURE0, gl.TEXTURE1, gl.ARRAY_BUFFER, gl.FRAMEBUFFER);

			/* store copy of accumulation buffer; accum_cpy = copy(accum_buf) */
			drawCopy(accum_buf.tex, accum_cpy.fbo);

			/* blend accumulation and backbuffer; accum_buf = blend(backbuffer, accum_cpy) */
			gl.bindFramebuffer(gl.FRAMEBUFFER, accum_buf.fbo);
			gl.useProgram(blend_program);
			bindVertexBuffer(loc_blend_pos);
			gl.uniform1i(loc_blend_tex0, 0);
			gl.uniform1i(loc_blend_tex1, 1);
			gl.uniform1f(loc_blend_modulate, 1.0);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, tex_backbuffer);
			gl.activeTexture(gl.TEXTURE1);
			gl.bindTexture(gl.TEXTURE_2D, accum_cpy.tex);
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
			unbind(gl.TEXTURE0, gl.TEXTURE1, gl.ARRAY_BUFFER, gl.FRAMEBUFFER);

			/* add slight blur to backbuffer; accum_buf = blur(accum_buf) */
			drawBlur(accum_buf.tex, accum_buf.fbo, blur_tmp, 0.17, dw, dh);

			/* create fully blurred version of backbuffer; blur_buf = blur(accum_buf) */
			drawBlur(accum_buf.tex, blur_buf.fbo, blur_tmp, 1.0, dw, dh);

			/* ensure crt crtcanvas overlays canvas */
			crtcanvas.style.top = canvas.offsetTop;
			crtcanvas.style.left = canvas.offsetLeft;
			var cw = crtcanvas.width = canvas.clientWidth;
			var ch = crtcanvas.height = canvas.clientHeight;
			gl.viewport(0, 0, cw, ch);

			/* apply crt shader; crtcanvas = crt(accum_buf, blur_buf) */
			gl.bindFramebuffer(gl.FRAMEBUFFER, null);
			gl.useProgram(crt_program);
			bindVertexBuffer(loc_crt_pos);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, accum_buf.tex);
			gl.activeTexture(gl.TEXTURE1);
			gl.bindTexture(gl.TEXTURE_2D, blur_buf.tex);
			gl.uniform2f(loc_crt_resolution, cw, ch);
			gl.uniform1f(loc_crt_time, 1.5 * time);
			gl.uniform1i(loc_crt_backbuffer, 0);
			gl.uniform1i(loc_crt_blurbuffer, 1);
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
			unbind(gl.TEXTURE0, gl.TEXTURE1, gl.ARRAY_BUFFER, gl.FRAMEBUFFER);

			lastdw = dw;
			lastdh = dh;

			requestAnimationFrame(draw);
		}

		requestAnimationFrame(draw);
	}
</script>