<!--


	GAMES:
		[ ] Adventure
		[ ] Tag
		[ ] Bomberman


	TODO:
		[ ] Set some vars at the map level, with defaults in the base map
			[ ] Scale
			[ ] Player size
			[ ] Player speed
			[ ] "Scale to fill screen" or allow panning?
		[ ] Let map entities define additional internal markup for styling
		[ ] Dedicated Collision system that does "onNear" and "onCollide" between objects
			[ ] Or possibly a pseudo physics system where you pass an entity and desired coordinates then it
				[ ] checks the move against various validity rules
				[ ] does the move if possible
				[ ] updates entity positions as needed
				[ ] allows "pushing" of other "pushable" entities
					[ ] maybe base on weight so some things can/can't be pushed by certain things?
		[ ] Add player class for direction of movement and "currently moving" so that idle can respect the last direction
		[ ] Add shortcut for add/remove/toggle element class
		[ ] Main game class
		[ ] "Start" and "Finish" states
		[ ] Allow extention of endgame screen
		[ ] Names above players
		[ ] Shadows under players
		[ ] Gamepad controls?
		[ ] Touch controls?
			[X] Joystick movement
			[ ] Hide touch conttrols until first touch
			[ ] Buttons for actions
				[ ] Fix hardcoded-ness
				[X] Fix for holding
		[ ] Update key codes to use "event.code" which uses names like "C" or "SPACE" and sees left and right CTRL as different keys
		[-] Entity z-index is based on Y axis (untested)
			[ ] Bombs end up on top of player
		[ ] CSS based character design/animation?
		[ ] Can change "function() {}" to "() => {}" if needed
		[X] Add separate list of "moving" entities, possibly update list of grid squares they occupy (based on x, y, w, h)
		[X] Add "onCollide" events? (trigger pickups, explosion damage, etc)
			[ ] Does "onCollide" need run on both sides?
		[X] Make generic event applier that takes objects and events?
		[X] Support multiple entities per grid space?
		[X] Support dynamically adding methods/properties to a player (so Bomberman can add bomb powerups and controls etc)
			[X] Update Bomberman map to add bomb stats/powerups plus controls to each player dynamically
		[X] Smooth out player movement using CSS transition (possibly can do even better)
		[X] Add independant event manager


	ADVENTURE MAP:
		[ ] Interactive elements
			[ ] Doors (opened by controls elsewhere or by keys that can be picked up)
			[ ] Storage locations (chests, cabinets)


	BOMBERMAN:
		TODO:
			[ ] Add Death messages
				[ ] Mention the bomb/explosion's owner
				[ ] Track how many bombs between inital detination and kill?
				[ ] Track how many explosions between initial dentination and kill?
			[ ] Consider player acceleration?
			[ ] Add points/timer?
			[ ] Drop powerups on death?
			[ ] Enforce player bomb and powerup limits
			[ ] rock.onDestroy = chance of random item drop
			[ ] Change P1 bomb button to SPACE?
			[ ] Rock breaking animation (hash overlay?) (make rocks appear above explosions)
			[X] Consider symbols: 💣 🧨 💥 🔥 💢
		BUGS:
			[ ] Multiple bombs next to eachother can break multiple blocks in the same direction. Add destroy delay on rocks?
			[ ] Player gets has very little grace for "hiding round the corner"
			[ ] Placing bombs while running will place them in the block ahead
			[X] Original explosion doesn't cause damage (only the directional fire)

	BUGS:
		[ ] Player cannot fit through a gap exactly their height
		[X] Player inputs continue after death
		[X] Player spawn space isn't "emptied" after spawn

	IDEAS:
		[ ] Allow map entities to define their own CSS, then dynamically add it when the entity is added?
		[ ] Update placement so that x/y are the CENTRE of each tile/entity?
		[ ] Support collision size different to visual size? (to support 45 degree perspective instead of strictly top-down)
		[ ] Allow complex map entities with Type identifier and ID? Eg P1 for Player 1. D12 for Door 12.
			[ ] Allow multi-tile sizing of these by doing something like this?
					DDDDDDDD12DDDDDDD
				or
					D
					D
					D
					D12
					D
					D
					D
		[ ] Allow angled walls?
		[ ] New Collisioin Detection?
			[ ] Take entity shapes into account
				[ ] Support square, circle, diagonal half-tiles (either "#, o, /, \" or "■, ⬤, ◢, ◣, ◤, ◥") (https://www.utf8-chartable.de/unicode-utf8-table.pl?start=9600&number=128)
			[ ] Detect collisions
				[ ] When an entity is placed/moved then record which grid positions it occupies.
						This should limit the amount of entities we need to collision detect against.
						Potentially a list like `entitiesByGrid[y][x]
				[ ] Find angle and distance between entity centres
				[ ] Get "distance to edge at X angle" from each entity
				[ ] Means calculating collision at an angle, not each axis independantly


//	        ◢◤
//        ◢◤
//      ◢◤
//    ◢◤
//  ◢◤

-->
<!doctype html>
<html class="no-js" lang="">

<head>
	<meta charset="utf-8">
	<title>Debug</title>
	<meta name="description" content="">
	<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<meta name="theme-color" content="#fafafa">
	<style type="text/css">
		:root {
			--scale: 20px; /* overriden by JS on load */
			--hue-timing: 10s;
			--rock-emoji: "🪨";
		}
		body {
			background: #ccc;
			font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
			overflow: hidden;
			padding: 0;
		}
		* {
			box-sizing: border-box;
		}
		@keyframes shake {
			  0% { transform: rotate(2deg)    scale(1.04); }
			 20% { transform: rotate(-2deg)   scale(1.04); }
			 40% { transform: rotate(0deg)    scale(1.03); }
			 60% { transform: rotate(1.5deg)  scale(1.02); }
			 80% { transform: rotate(-1.2deg) scale(1.01); }
			100% { transform: rotate(0deg); }
		}
		@keyframes hue-rotate {
			from { filter: hue-rotate(0deg); }
			  to { filter: hue-rotate(359deg); }
		}
		#mapwrap {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			/*
			opacity: 0.2;
			*/
		}
		.shake {
			transform-origin: center center;
  			animation: shake 0.3s;
		}
		#map {
			min-height: 100%;
			position: relative;
			min-width: 100%;
		}

		/*
			P L A Y E R
		*/
		.player {
			background: #f00;
			border-radius: 40%;
			display: block;
			position: absolute;
			/* transform: translate(-12.5%, -10%); */
			/* transition: left 100ms linear, top 100ms linear; */
			z-index: 999 !important;
		}
		.player-2 {
			background: #00f;
		}
		.player.exploding {
			animation: Player_Explodes 1s linear;
			animation-fill-mode: forwards;
			position: relative;
		}
		.player.ghost {
			opacity: 0.75;
		}

		/*
			W A L L
		*/
		.wall {
			align-items: center;
			background: #333;
			box-shadow: 0.5px 0.5px 0 0 #333;
			display: flex;
			font-size: 0;
			height: var(--scale);
			justify-content: center;
			overflow: hidden;
			position: absolute;
			width: var(--scale);
			color: #888;
		}

		/*
			R O C K
		*/
		.rock {
			background: #999;
			box-shadow: 0.5px 0.5px 0 0 #999;
			height: var(--scale);
			position: absolute;
			transition: all 250ms ease-in;
			width: var(--scale);
		}
		.use-icons:not(.rock-0) .rock {
			background: none;
			box-shadow: none;
		}
		.rock.exploding {
			/*
			animation: Entity_Explodes 250ms linear;
			animation-fill-mode: forwards;
			*/
			opacity: 0;
			position: relative;
		}
		.rock.exploding:before {
			align-items: center;
			display: flex;
			justify-content: center;
			line-height: var(--scale);
			overflow: hidden;
			height: 100%;
			width: 100%;
		}
		.use-icons:not(.rock-0) .rock:before {
			content: var(--rock-emoji);
			font-size: calc(var(--scale) * 0.85);
			/* transform: scale(var(--inner-scale)); */
		}
		body {
			--current-rock-emoji-index: 1;
			--rock-emoji-count: 11;
		}


		/* Disabled for now
		.rock.hue-timing-1:before {
			animation: hue-rotate infinite 10s linear;
			animation-duration: 0.5s;
		}
		.rock.hue-timing-2:before {
			animation: hue-rotate infinite 10s linear;
			animation-duration: 2s;
		}
		.rock.hue-timing-3:before {
			animation-duration: 8s;
		}
		.rock.hue-timing-4:before {
			animation: none;
		}
		*/


		/*
		.rock.exploding:before {
			animation: Entity_Explodes_Inner 250ms ease-in;
			animation-fill-mode: forwards;
			color: #ccc;
			content: "*";
			font-size: 0;
			line-height: 1;
			overflow: hidden;
			z-index: 99999;
		}
		.use-icons .rock.exploding:before {
			content: "💥";
			font-size: calc(var(--scale) * 0.85);
		}
		*/

		/*
			P O W E R U P
		*/
		.powerup {
			align-items: center;
			animation: Powerup_Idle 750ms ease-in;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			background: #fff;
			border: 2px solid transparent;
			border-radius: 50%;
			box-shadow: 0 2px 5px black;
			display: flex;
			font-weight: bold;
			height: var(--scale);
			justify-content: center;
			opacity: 0.8;
			position: absolute;
			transform: scale(0.6);
			width: var(--scale);
		}
		.powerup:before {
			align-items: center;
			content: attr(data-powerup-letter);
			display: flex;
			height: 100%;
			justify-content: center;
			font-size: 2rem;
			width: 100%;
		}
		.use-icons .powerup:before {
			content: attr(data-powerup-icon);
		}
		.powerup[class*="-down"] {
			border: 2px solid red;
		}

		/*
			B O M B
		*/
		.bomb {
			background: #000;
			border-radius: 50%;
			height: var(--scale);
			line-height: 1;
			position: absolute;
			transform: scale(0.6);
			width: var(--scale);
		}
		.use-icons .bomb {
			background: transparent;
		}
		.use-icons .bomb:before {
			content: "💣";
			display: flex;
			font-size: calc(var(--scale) * 0.75);
			line-height: 1;
			position: absolute;
		}
		.bomb.armed {
			animation: Bomb_Fuse 2s linear; /* Duration is overridden at placement time */
		}

		/*
			E X P L O S I O N
		*/
		.explosion {
			/* background: #ffa500; */
			background: #f007;
			height: var(--scale);
			position: absolute;
			width: var(--scale);
			transition: opacity 200ms;
		}
		.explosion.player-2 {
			background: #00f7;
		}
		.explosion.direction-left,
		.explosion.direction-right {

			transform: scaleY(0.8);
		}
		.explosion.direction-left.final {
			border-radius: 35% 0 0 35%;
			transform: translateX(5%) scaleX(0.9) scaleY(0.8) ;
		}
		.explosion.direction-right.final {
			border-radius: 0 35% 35% 0;
			transform: translateX(-5%) scaleX(0.9) scaleY(0.8) ;
		}
		.explosion.direction-up,
		.explosion.direction-down {
			transform: scaleX(0.8);
		}

		.explosion.direction-up.final {
			border-radius: 35% 35% 0 0;
			transform: translateY(5%) scaleY(0.9) scaleX(0.8);
		}
		.explosion.direction-down.final {
			border-radius: 0 0 35% 35%;
			transform: translateY(-5%) scaleY(0.9) scaleX(0.8);
		}
		.explosion.dissipate {
			opacity: 0;
		}

		.use-icons .explosion {
			background: transparent;
		}
		.use-icons .explosion.player-2:before {
			filter: hue-rotate(180deg);
		}
		.use-icons .explosion:before {
			content: "💥";
			display: flex;
			font-size: calc(0.8 * var(--scale));
			line-height: 1;
			position: absolute;
		}
		.use-icons .explosion[class*=direction]:before {
			content: "🔥";
		}
		.use-icons .explosion.direction-up {
			transform: translateX(5%) scaleX(0.9) scaleY(1.25);
		}
		.use-icons .explosion.direction-down {
			transform: translateX(5%) scaleX(0.9) scaleY(1.25) rotate(180deg);
		}
		.use-icons .explosion.direction-left {
			transform: translateY(5%) scaleX(1.25) scaleY(0.9) rotate(270deg);
		}
		.use-icons .explosion.direction-right {
			transform: translateY(5%) scaleX(1.25) scaleY(0.9) rotate(90deg);
		}
		.use-icons .explosion.direction-up.final {
			border-radius: unset;
			transform: translateY(5%) scaleY(1) scaleX(0.9);
		}
		.use-icons .explosion.direction-down.final {
			border-radius: unset;
			transform: translateY(-5%) scaleY(1) scaleX(0.9) rotate(180deg);
		}
		.use-icons .explosion.direction-left.final {
			border-radius: unset;
			transform: translateX(5%) scaleX(1) scaleY(0.9) rotate(270deg);
		}
		.use-icons .explosion.direction-right.final {
			border-radius: unset;
			transform: translateX(-5%) scaleX(1) scaleY(0.9) rotate(90deg);
		}

		.show-when-using-touch {
			display: none;
		}
		.using-touch .show-when-using-touch {
			display: block;
		}

		@keyframes Bomb_Fuse {
			from { }
			to {
				transform: scale(0.9);
			}
		}

		@keyframes Powerup_Idle {
			from {
				transform: scale(0.6);
				/* transform: scale(0.6) rotate3D(0, 1, 0, -30deg); */
			}
			to {
				transform: scale(0.6) translateY(-10%);
				/* transform: scale(0.6) rotate3D(0, 1, 0, 30deg); */
			}
		}

		@keyframes Player_Explodes {
			0% {
				opacity: 0;
			}
			1% {
				opacity: 1;
			}
			100% {
				background: yellow;
				opacity: 0;
				transform: scale(1.5);
			}
		}

		@keyframes Entity_Explodes {
			0% {
				opacity: 0;
			}
			1% {
				opacity: 1;
			}
			100% {
				border-radius: 50%;
				opacity: 0;
				transform: scale(0.9);
			}
		}
		@keyframes Entity_Explodes_Inner {
			from {
				opacity: 1;
				transform-origin: 50% 50%;
				transform: scale(0);
			}
			to {
				opacity: 0;
				transform-origin: 50% 50%;
				transform: scale(2);
			}
		}
		.tile-coords .wall {
			color: #888;
			overflow: visible;
			font-size: 8px;
		}
		#debug {
			position: absolute;
			top: 1rem;
			right: 1rem;
			z-index: 9999;
		}

		.player-stats {
			color: white;
			font-family: sans-serif;
			font-weight: bold;
			left: var(--scale);
			line-height: var(--scale);
			position: absolute;
			top: 0;
			z-index: 999999;
		}
		#player-stats-2 {
			text-align: right;
		}

		/* .using-touch .show-when-using-touch {
			opacity: 0;
			pointer-events: none;
		} */
		.use-icons.rock-1 { --rock-emoji: "❤️"; }
		.use-icons.rock-2 { --rock-emoji: "🪨"; }
		.use-icons.rock-3 { --rock-emoji: "💎"; }
		.use-icons.rock-4 { --rock-emoji: "💩"; }
		.use-icons.rock-5 { --rock-emoji: "✨"; }
		.use-icons.rock-6 { --rock-emoji: "🧱"; }
		.use-icons.rock-7 { --rock-emoji: "🌳"; }
		.use-icons.rock-8 { --rock-emoji: "⛰️"; }
		.use-icons.rock-9 { --rock-emoji: "💨"; }
		.use-icons.rock-10 { --rock-emoji: "🕳️": }
		.use-icons.rock-11 { --rock-emoji: "💣"; }
		.use-icons.rock-12 { --rock-emoji: "🦠"; }
		.use-icons.rock-13 { --rock-emoji: "🚫"; }

		#menu code {
			background: #eee;
			border: 1px solid #333;
			box-shadow: 1px 1px 0px;
			display: inline-block;
			font-size: 1rem;
			font-weight: 700;
			min-width: 1.4rem;
			padding: 0 0.2rem;
			text-align: center;
		}
		.controls-list code {
			width: 5rem;
		}
		.columns {
			display: flex;
			gap: 3rem;
		}
		ul {
			padding: 0 0 0 1rem;
		}
		li.heading {
			font-style: italic;
			font-weight: bold;
			list-style: none;
			margin-top: 1rem;
			opacity: 0.7;
		}

		h2 {
			margin: 0;
		}
		h3 {
			background: #ccc;
			margin-top: 3rem;
			padding: 0.5rem;
		}
		h4 {
			margin-top: 0;
		}

		.tabset .panels {
			display: flex;
			flex-direction: column;
		}
		.tabset .panels > *:not(.current) {
			margin: 0;
			max-height: 0;
			opacity: 0;
			overflow-y: hidden;
			padding: 0;
			pointer-events: none;
			transition: all 200ms;
		}
		.tabset .tabs .current {
			font-weight: bold;
		}
		.tabset .tabs {
			list-style: none;
			margin: 2rem 0;
			padding: 0;
		}
		.tabset .tabs [data-tab] {
			background: #999;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			font-size: 1.1rem;
			padding: 0.75rem 1rem;
			transition: all 200ms;
		}
		.tabset .tabs [data-tab]:hover,
		.tabset .tabs [data-tab]:active,
		.tabset .tabs [data-tab].current {
			background-color: #333;
			padding: 1rem 1rem;
		}
		.tabset .tabs [data-tab].current {
			font-weight: bold;
		}


		dialog[open] {
			display: flex;
		}
		dialog {
			--stroke: 1rem;
			align-items: center;
			background: #ccc;
			border-width: 0;
			box-shadow: 0 0 5rem 1rem;
			flex-direction: column;
			justify-content: center;
			margin-top: 8rem;
			overflow: hidden;
			padding: var(--stroke);
			position: relative;
			z-index: 90;
		}
		dialog > .inner {
			box-sizing: border-box;
			max-height: calc(100vh - 13rem);
			overflow-y: auto;
			padding: 2rem 3rem;
		}
		dialog:before {
			animation: spin 10s linear infinite;
			background: conic-gradient(#00ccff, #d400d4, #0f0, #f00, #00ccff);
			background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
			content: "";
			height: 300%;
			position: absolute;
			width: 200%;
			z-index: -2;
		}
		dialog:after {
			background-color: #ccc;
			content: "";
			height: calc(100% - (2 * var(--stroke)));
			position: absolute;
			width: calc(100% - (2 * var(--stroke)));
			z-index: -1;
		}

/*
		.tabset .tabs [data-tab].current span {
			--stroke: 5px;
			align-items: center;
			background: none;
			display: flex;
			height: 100%;
			justify-content: center;
			overflow: hidden;
			position: relative;
			width: 100%;
			z-index: 90;
		}
		.tabset .tabs [data-tab].current span:before {
			animation: spin 5s linear infinite;
			background: linear-gradient(#00ccff, #d400d4, #0f0, #f00);
			content: "";
			height: 300%;
			position: absolute;
			width: 200%;
			z-index: -2;
		}
		.tabset .tabs [data-tab].current span:after {
			background-color: #333;
			content: "";
			height: calc(100% - 8px);
			position: absolute;
			width: calc(100% - 8px);
			z-index: -1;
		} */
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
		fieldset + fieldset {
			margin-top: 2rem;
		}
		.version-info {
			float: right;
			font-size: 1rem;
			font-style: italic;
			font-weight: 400;
			opacity: 0.75;
		}
	</style>
	<script src="joy.min.js"></script>
</head>

<body class="use-icons">
	<div id="#wrap">
		<!--
			Splash/Menu
			Lobby
			Game
				Map
				OSD
				Minigames
					A
					B
					C
		-->
		<!--
		<section id="splash"></section>
		<section id="lobby"></section>
		<section id="map"></section>
		-->
		<section id="mapwrap"><div id="map">
			<div class="player-stats" id="player-stats-1">Player 1</div>
			<div class="player-stats" id="player-stats-2">Player 2</div>
		</div></section>
	</div>
	<dialog id="menu">
		<div class="inner">
			<h1>💣 Help and Info 💥<span class="version-info">v30 (30 April 2025)</span></h1>
			<div class="tabset">
				<ul class="tabs">
					<li data-tab="controls">Controls</li>
					<li data-tab="options">Options</li>
					<li data-tab="changelog">Changelog</li>
					<li data-tab="ideas">Ideas</li>
				</ul>
				<div class="panels">
					<div data-tab="controls">
						<div class="columns">
							<div>
								<h4>Common Controls</h4>
								<ul>
									<li><code>I</code> Toggle icons</li>
									<li><code>E</code> Change rock emoji</li>
									<li><code>U</code> Toggle auto-scaling (requires refresh)</li>
									<li><code>[hidden]</code> Enable cheats</li>
								</ul>
							</div>
							<div>
								<h4>Player 1 Controls</h4>
								<ul>
									<li><code>W/A/S/D</code> Move</li>
									<li><code>Space</code> Place bomb</li>
									<li class="heading">With cheats enabled</li>
									<li><code>V/B/N</code> Speed/Bomb/Fire up</li>
									<li><code>G/H/J</code> Speed/Bomb/Fire down</li>
									<!--
									<li><code>V/G</code> Speed up/down</li>
									<li><code>B/H</code> Bomb up/down</li>
									<li><code>N/J</code> Flame up/down</li>
									-->
								</ul>
							</div>
							<div>
								<h4>Player 2 Controls</h4>
								<ul>
									<li><code>Arrows</code> Move</li>
									<li><code>Numpad 0</code> Place bomb</li>
									<li class="heading">With cheats enabled</li>
									<li><code>4/5/6</code> Speed/Bomb/Fire up</li>
									<li><code>7/8/9</code> Speed/Bomb/Fire down</li>
									<!--
									<li><code>4/7</code> Speed up/down</li>
									<li><code>5/8</code> Bomb up/down</li>
									<li><code>6/9</code> Flame up/down</li>
									-->
								</ul>
							</div>
						</div>
					</div>
					<div data-tab="changelog">
						<h4>2022-06-29</h4>
						<ul>
							<li><strong>Fixed:</strong><ul>
								<li>Fixed shadows under emoji rocks</li>
							</ul></li>
							<li><strong>Added:</strong><ul>
								<li>Version switcher and date display</li>
							</ul></li>
						</ul>
						<h4>2022-06-26</h4>
						<ul>
							<li><strong>Fixed:</strong><ul>
								<li>Fixed small gap between walls and rocks</li>
							</ul></li>
							<li><strong>Added:</strong><ul>
								<li>This menu and changelog</li>
								<li>Emoji mode toggle (press <code>I</code>)</li>
								<li>Auto-scaling toggle (press <code>U</code> and reload) to stop the map auto-resizing as big as it can</li>
								<li>Old grey rocks to the emoji list (when you press <code>E</code>)</li>
							</ul></li>
							<li><strong>Changed:</strong><ul>
								<li>Changed explosions to be player colours</li>
								<li>Removed "skidding" for performance</li>
							</ul></li>
						</ul>
					</div>
					<div data-tab="options">
						<p><em>These options aren't connected here, but the hotkeys work for most of them</em></p>
						<fieldset>
							<legend>Emojis Enabled (<code>I</code>)</legend>
							<strong>Yes</strong> | No
						</fieldset>
						<fieldset>
							<legend>Rock Emoji (<code>E</code>)</legend>
							❤️ 🪨 💎 💩 ✨ 🧱 🌳 ⛰️ 💨 🕳️ 💣 🦠 🚫
						</fieldset>
						<fieldset>
							<legend>Friendly Fire</legend>
							<strong>Yes</strong> | No
						</fieldset>
						<fieldset>
							<legend>Auto Resize (<code>U</code>)</legend>
							<strong>On</strong> | Off
						</fieldset>
					</div>
					<div data-tab="ideas">
						<p><em>Ideas for things to add (but don't exist yet, and might not ever)</em></p>
						<ul>
							<li>Proper start screen</li>
							<li>Allow setting "number of lives"</li>
							<li>Add paintball mode where bombs paint the ground</li>
							<li>Powerup: makes you invinsible for a while</li>
							<li>Powerup: makes your explosions pickup powerups for you</li>
							<li>Powerup: gives you a huge speed boost for a while</li>
							<li>Customisable player colour or emoji</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</dialog>
	<div id="debug">
		<div id="coords"></div>
	</div>

	<div id="joystick" class="show-when-using-touch" style="opacity:0.5;width:150px;height:150px;margin:20px;position:fixed;bottom:0;left:0;z-index:99999;"></div>
	<div id="buttons" class="show-when-using-touch" style="opacity:0.5;width:auto;height:auto;margin:50px 20px;position:fixed;bottom:0;right:0;z-index:99999;">
		<span id="current-player-lay-bomb" style="display:inline-block;padding:0.25rem;border-radius:50%;background:#080;font-size:3rem;">💣</span>
	</div>

	<script>
		var gameRunning = true;
		var elMapWrap = document.getElementById("mapwrap"); // unused
		var elMap = document.getElementById("map");
		var elDebugCoords = document.getElementById("coords");
		var menuDialog = document.getElementById("menu");
		var scale = 50; // moved to map config
		var loopSpeed = 33; // 25
		var ticksPerSecond = 1000 / loopSpeed;
		var autopan = true;
		var autoResize = true;
		var cheats = false;
		var friendlyFire = true;
		var rainbowFire = false;
		let rockEmojiCount = 13;

		let touchMode = false;
		let joystick = false;
		let currentPlayer = false;

		doToEach = (context, callback) => {
			if (typeof context !== 'object') {
				context = [document, context];
			}
			context[0].querySelectorAll(context[1]).forEach(callback);
		};

		doToEach([document, ".tabset"], (tabset) => {
			let currentTab = false;
			doToEach([tabset, ".tabs li"], (tab) => {
				currentTab = currentTab || tab;
				tab.addEventListener("click", (event) => {
					let activeTab = tab.dataset.tab;
					doToEach([tab.parentNode.parentNode, "[data-tab]"], (element) => {
						element.classList.toggle("current", element.dataset.tab == activeTab);
					})
				});
			});
			currentTab.click();
		});

		menuDialog.addEventListener("cancel", (event) => {
			event.preventDefault();
		});

		class Game {
			static random(min, max) {
  				return Math.floor(Math.random() * (max - min + 1) + min)
			};
			static randomFrom(/* args */) {
  				return arguments[this.random(0,arguments.length - 1)];
			};
			static weightedChance(chance, outOf) {
				return Math.ceil(Math.random() * outOf) <= chance;
			};
			static cloneData(data) {
				let tmp = [];
				for (let k in data) {
					tmp[k] = data[k];
				}
				return tmp;
			};
			static shuffleArray(array){
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					const temp = array[i];
					array[i] = array[j];
					array[j] = temp;
				}
				return array;
			}
			static getClassFunctions(toCheck) {
				const props = [];
				let obj = toCheck;
				do {
					props.push(...Object.getOwnPropertyNames(obj));
				} while (obj = Object.getPrototypeOf(obj));

				return props.sort().filter((e, i, arr) => {
					if (e!=arr[i+1] && typeof toCheck[e] == 'function') return true;
				});
			}
		}

		class UI {
			constructor() {
				this.panThreshold = 0.40;
			}
			panViewport(player) {
				if (!autopan) { return; }

				// Move/pan right
				if (scale * gameMap.maxTilesX > window.innerWidth) {
					let mapOffsetX = parseInt(elMap.style.left || 0);
					let viewWidth = window.innerWidth;

					if ((tmp = (viewWidth - viewWidth * this.panThreshold) - (mapOffsetX + player.x + player.width)) < 0) {
						elMap.style.left = Math.max(mapOffsetX + tmp, viewWidth - (scale * gameMap.maxTilesX)) + "px";
					} else
					// Left
					if ((tmp = (mapOffsetX + player.x) - (viewWidth * this.panThreshold)) < 0) {
						elMap.style.left = Math.min(mapOffsetX - tmp, 0) + "px";
					}
				}

				if (scale * gameMap.maxTilesY > window.innerHeight) {
					let mapOffsetY = parseInt(elMap.style.top || 0);
					let viewHeight = window.innerHeight;

					// Down
					if ((tmp = (viewHeight - viewHeight * this.panThreshold) - (mapOffsetY + player.y + player.height)) < 0) {
						elMap.style.top = Math.max(mapOffsetY + tmp, viewHeight - (scale * gameMap.maxTilesY)) + "px";
					} else
					// Up
					if ((tmp = (mapOffsetY + player.y) - (viewHeight * this.panThreshold)) < 0) {
						elMap.style.top = Math.min(mapOffsetY - tmp, 0) + "px";
					}
				}
			}
		}
		ui = new UI;

		class EventManager {
			static listenersByType = [];
			static listenersByEvent = [];

			static byType(type) {
				return this.listenersByType[type] || [];
			}

			static addEntity(entity) {
				// Add to types list
				this.listenersByType[entity.type] = this.listenersByType[entity.type] || [];
				this.listenersByType[entity.type].push(entity);

				// Add to event lists
				Game.getClassFunctions(entity).forEach((v) => {
					if (typeof entity[v] == "function" && v.match(/^on/)) {
						this.listenersByEvent[v] = this.listenersByEvent[v] || [];
						this.listenersByEvent[v].push(entity);
					}
				});
			}

			static removeEntity(entity) {
				this.triggerEventOnEntity(entity, "onBeforeRemoveData");
				// Remove from ByTypes list
				let k = this.listenersByType[entity.type][this.listenersByType[entity.type].indexOf(entity)];
				if (k >= 0) {
					this.listenersByType[entity.type][k] = false;
				}
				// Remove from ByEvent list
				for (k1 in this.listenersByEvent) {
					k2 = this.listenersByEvent[k1].indexOf(entity);
					if (k2 >= 0) {
						this.listenersByEvent[k1][k2] = false;
					}
				}
				this.triggerEventOnEntity(entity, "onAfterRemoveData");
			}

			static triggerEvent(eventName, event) {
				event = event || false; // Could be undefined
				this.listenersByEvent[eventName] = this.listenersByEvent[eventName] || [];
				this.listenersByEvent[eventName].forEach((v) => {
					if (typeof v[eventName] !== "function") { return; }
					v[eventName](event);
				});
			}
			static triggerEventOnEntity(entity, eventName, event) {
				if (typeof entity[eventName] == "function") {
					entity[eventName](event);
				}
			}

			static byType(type) {
				return this.listenersByType[type] || [];
			}
		}

		Map = function(mapConfig) {
			this.mapConfig = mapConfig;
			this.grid;
			this.entityGrid = {}; // static elements
			this.movableEntities = [];
			this.maxTilesX = 0;
			this.maxTilesY = 0;
			this.width = 0;
			this.height = 0;

			document.documentElement.style.setProperty('--scale', scale + "px");

			EventManager.addEntity(mapConfig);
			EventManager.addEntity(this);

			this.coordsMapToPixel = function(coordsMap) {
				return [
					Math.floor(coordsMap[0] * scale),
					Math.floor(coordsMap[1] * scale),
				];
			}

			this.addEntityToMap = function(entity, coordsMap) {
				let [mapX, mapY] = coordsMap;
				entity.map = this;

				if (entity.canMove) {
					entity.updateInternalGridCoords();
					this.movableEntities.push(entity);
				} else {
					// if (typeof this.entityGrid[mapY] == "undefined") { this.entityGrid[mapY] = []; }
					// if (typeof this.entityGrid[mapY][mapX] == "undefined") { this.entityGrid[mapY][mapX] = []; }
					this.entityGrid[mapY] = this.entityGrid[mapY] || [];
					this.entityGrid[mapY][mapX] = this.entityGrid[mapY][mapX] || [];
					this.entityGrid[mapY][mapX].push(entity);
				}

				tmp = entity.getElement();
				if (!tmp) {
					console.log("ERROR: Could not add entity to map:", entity, coordsMap);
					return;
				}

				if (entity.autoZ) {
					tmp.style.zIndex = mapY;
				}

				EventManager.triggerEventOnEntity(entity, "onBeforeAddToMap");
				EventManager.triggerEvent("onBeforeAddToMap_"+entity.type, entity);
				EventManager.addEntity(entity);
				elMap.appendChild(tmp);
				EventManager.triggerEventOnEntity(entity, "onAfterAddToMap");
			}

			this.removeEntityFromMap = function(entity, justFromGrids) {
				EventManager.triggerEventOnEntity(entity, "onBeforeRemoveFromMap");
				if ((!(justFromGrids || false)) && entity.getElement() && entity.getElement().parentNode) {
					entity.getElement().parentNode.removeChild(entity.getElement());
				}
				let tmpIndex;
				for (k1 in this.entityGrid) {
					for (k2 in this.entityGrid[k1]) {
						tmpIndex = this.entityGrid[k1][k2].indexOf(entity);
						if (tmpIndex < 0) { continue; }
						this.entityGrid[k1][k2].splice(tmpIndex, 1);
					}
				}
				EventManager.triggerEventOnEntity(entity, "onAfterRemoveFromMap");
			}

			this.init = function() {
				//this.mapConfig.beforeGridLoad(this);
				EventManager.triggerEvent("onBeforeGridLoad", this);
				let data = this.mapConfig.initialGrid.split(/[\r\n]+/);
				this.maxTilesY = Math.max(this.maxTilesY, data.length);
				for (k1 in data) {
					// Finish splitting the map into the 2d array
					data[k1] = data[k1].split("");
					this.maxTilesX = Math.max(this.maxTilesX, data[k1].length);
				}
				this.grid = data;
				this.width = this.maxTilesX * scale;
				this.height = this.maxTilesY * scale;

				// Load global settings
				document.body.classList.toggle("use-icons", getCookie("use-icons", true, "bool"));

				EventManager.triggerEvent("onAfterGridLoad", this);

				//this.mapConfig.onBeforeProcessTiles(this);
				EventManager.triggerEvent("onBeforeProcessTiles", this);
				var entityDefinitions = this.mapConfig.getEntityDefinitions();
				for (k1 in this.grid) {
					// Load/draw the elements
					for (k2 in this.grid[k1]) {
						let tmpChar = this.grid[k1][k2];
						let tmp = false;

						if (typeof entityDefinitions[tmpChar] == "undefined") {
							continue;
						}

						tmp = new entityDefinitions[tmpChar]([k2 * scale, k1 * scale]);
						this.addEntityToMap(tmp, [k2, k1]);
					}
				}

				//this.mapConfig.afterProcessTiles(this);
				EventManager.triggerEvent("onAfterProcessTiles", this);
			}

			this.getEntitiesAt = function(coordsMap) {
				let [mapX, mapY] = coordsMap;
				let tmpMyEntities = [];

				if (typeof this.entityGrid[mapY] !== "object") { this.entityGrid[mapY] = []; }
				if (typeof this.entityGrid[mapY][mapX] !== "object") { this.entityGrid[mapY][mapX] = []; }

				for (tmpEntity of this.entityGrid[mapY][mapX]) {
					tmpMyEntities.push(tmpEntity);
				}
				for (tmpEntity of this.movableEntities) {
					if (tmpEntity.isOnMapCoords(coordsMap)) {
						tmpMyEntities.push(tmpEntity);
					}
				}
				return tmpMyEntities;
			}

			this.canMoveThrough = function(coordsMap) {
				let v;
				for (v of this.getEntitiesAt(coordsMap)) {
					if (v && !v.canMoveThrough) {
						return false;
					}
				}
				return true;
			}

			this.getTileAt = function(coordsMap) {
				let [mapX, mapY] = coordsMap;
				if (
					typeof this.grid[mapY] == "undefined" ||
					typeof this.grid[mapY][mapX] == "undefined"
				) { return false; }

				tmp = this.grid[mapY][mapX];
				if (tmp == " ") { return false; }
				return tmp;
			}

			this.getRayLength = function(x, y, direction, max) {
				/*
				// Note: Has some issues with LEFT/UP
				direction = direction.toUpperCase();
				length = 0;
				directionOperator = -1;
				scaleMax = Math.ceil(max / scale);

				scaleAxis = {};
				axisToTest = "x";

				mapScaleModifier = 0;

				length = 0;

				// Gap to edge of current tile
				switch (direction) {
					case "UP":
						axisToTest = "y";
						length = scale - Math.floor(y % scale);
						mapScaleModifier = scale * -1;
						break;

					case "DOWN":
						axisToTest = "y";
						directionOperator = 1;
						length = scale - Math.ceil(y % scale);
						break;

					case "LEFT":
						length = scale - Math.floor(x % scale);
						mapScaleModifier = scale * -1;
						break;

					case "RIGHT":
						directionOperator = 1;
						length = scale - Math.ceil(x % scale);
						break;

					default:
						break;
				}

				scaleAxis.x = Math.ceil(x / scale);
				scaleAxis.y = Math.ceil(y / scale);

				while (length < max) {
					if (!this.canMoveThrough(scaleAxis.x, scaleAxis.y)) {
						scaleAxis[axisToTest] -= (1 * directionOperator);
						length -= scale;
						break;
					}

					scaleAxis[axisToTest] += (1 * directionOperator);
					length += scale;
				}
				//length = Math.floor((scale * scaleAxis.x) - x);
				return Math.min(length + mapScaleModifier, max);
				*/
			}


			//todo: Update to allow forcing (eg when updating from the server)
			//      to allow skipping of speed limits and just make sure it
			//      doesn't end up in a wall.
			this.updateEntityPosition = function(entity, axisX, axisY, decelerating) {
				let pixelMovementSpeed = 5;
				let tmpX = entity.x;
				let tmpY = entity.y;
				let targetX = 0;
				let targetY = 0;

				let speed = entity.speed * pixelMovementSpeed;

/*
				decelerating = decelerating || false;

				// Ease the entity up to speed
				entity.acceleration = entity.acceleration || 0.3;

				// Actively moving
				if (axisX || axisY) {
					entity.lastMovement = [axisX, axisY];
					// Get up to speed
					if (entity.acceleration < 1) {
						entity.acceleration = Math.min(1, entity.acceleration * 1.3);
					}
				} else
				// Decelerating
				if (entity.acceleration > 0) {
					entity.acceleration = Math.max(0, entity.acceleration / 1.3);
					if (entity.acceleration <= 0.3) {
						entity.acceleration = 0;
						return;
					}
					axisX = entity.lastMovement[0];
					axisY = entity.lastMovement[1];
				}

				speed = speed * entity.acceleration;
*/


				let isMovingX = !(axisX == 0);
				let tryingToMoveX = isMovingX;
				let isMovingY = !(axisY == 0);
				let tryingToMoveY = isMovingY;
				if (isMovingX && isMovingY) {
					speed = Math.round(speed * 0.75);
				}
				targetX = tmpX + (axisX * speed);
				targetY = tmpY + (axisY * speed);


				let tmpCoordToCheck = false;
				let tmpCollideCnt = 0;

				let nudgeAxis = false;
				let nudgeDiff = 0;
				let nudgeSize = 999;

				let ghost = cheats && entity.hasKeyDown("GHOST");

				while (isMovingX || isMovingY) {

/*
					if (tmpX < targetX) {
						tmpX += Math.min(gameMap.getRayLength(entity.x + entity.width, entity.y, "RIGHT", speed));
						isMovingX = false;
					} else
					if (tmpX > targetX) {
						tmpX -= Math.min(gameMap.getRayLength(entity.x, entity.y, "LEFT", speed));
						isMovingX = false;
					}
					if (tmpY < targetY) {
						tmpY += Math.min(gameMap.getRayLength(entity.x, entity.y + entity.height, "DOWN", speed));
						isMovingY = false;
					} else
					if (tmpY > targetY) {
						tmpY -= Math.min(gameMap.getRayLength(entity.x, entity.y, "UP", speed));
						isMovingY = false;
					}
*/


					/* DETECTION (P = entity, # = wall)

					  PPP
					  PPP
					  PPP
					  PPP####
					  PPP####
						 ####
						 ####

					Moving right, find entity coords for
						Y coord for top
						Y coord for bottom
						X coord for right

					add speed to X coord
					scale all coords for map
					loop through X axis between top and bottom Y
						record current collision top and collision bottom

					*/

					/*
					IDEAS: COLLISION DETECTION
					-------------------
					Treat entity like a circle
					Support different tile shapes (#, \, /) and have collision functions for each one
					Loop two dest directions outward from center
					Each collided shape returns
						distance to collision
						angle of collision? or just axis of nudge?
					Get shortest distance to contact for each dest direction
					Move min(shortest distance to contact or speed) in each dest direction
					Nudges
						ignore nudges for opposite direction of any input

					Consider angle? Already covered by nudge direction?
					*/


					// HORIZONTAL
					scaledYtop = Math.floor(tmpY / scale);
					scaledYbottom = Math.floor((tmpY + entity.height) / scale);

					collided = false;
					canNudge = false;
					// RIGHT
					if (tmpX < targetX) {
						currentDistanceCheck = Math.min(speed, scale);
						isMovingX = true;
						collisions = []; // indexed by height/scale
						collided = false;
						maxDistToCheck = speed + scale;

						scaledXright = Math.floor((tmpX + entity.width) / scale) + 1;

						while (isMovingX && !collided && currentDistanceCheck <= maxDistToCheck) {

							tmpCollisionCheckY = scaledYtop;
							while (tmpCollisionCheckY <= scaledYbottom) {
								collisions[tmpCollisionCheckY] = !this.canMoveThrough([scaledXright, tmpCollisionCheckY]);
								if (collisions[tmpCollisionCheckY]) {
									collided = !ghost && true;
								}
								tmpCollisionCheckY++;
							}

							if (!collided) {
								currentDistanceCheck += scale;
								scaledXright++;
							} else {
								isMovingX = false;
							}
						}

						if (collided) {
							tmp = Math.floor(scaledXright * scale) - entity.width;
							canNudge = (tmp < (tmpX + speed));
							tmpX = Math.min(tmpX + speed, tmp) - 1;
						} else {
							tmpX += speed;
						}
						isMovingX = false;
					} else

					// LEFT
					if (tmpX > targetX) {
						currentDistanceCheck = Math.min(speed, scale);
						isMovingX = true;
						collisions = []; // indexed by height/scale
						maxDistToCheck = speed + scale + scale;

						scaledXleft = Math.floor(tmpX / scale) - 1;

						while (isMovingX && !collided && currentDistanceCheck <= maxDistToCheck) {

							tmpCollisionCheckY = scaledYtop;
							while (tmpCollisionCheckY <= scaledYbottom) {
								collisions[tmpCollisionCheckY] = !this.canMoveThrough([scaledXleft, tmpCollisionCheckY]);
								if (collisions[tmpCollisionCheckY]) {
									collided = !ghost && true;
								}
								tmpCollisionCheckY++;
							}

							if (!collided) {
								currentDistanceCheck += scale;
								scaledXleft--;
							} else {
								isMovingX = false;
							}
						}

						if (collided) {
							tmp = (scaledXleft * scale) + scale;
							canNudge = (tmp > tmpX - speed);
							tmpX = Math.max(tmpX - speed, tmp) + 1;

						} else {
							tmpX -= speed;
						}
						isMovingX = false;
					}

					if (collided && canNudge) {
						// Nudging
						scaledCollideFromTop = 0;
						scaledCollideFromBottom = tmpCollisionCheckY;
						for (i in collisions) {
							if (collisions[i]) {
								scaledCollideFromTop = Math.max(scaledCollideFromTop, i);
								scaledCollideFromBottom = Math.min(scaledCollideFromBottom, i);
							}
						}
						scaledCollideFromBottom--;

						needToGoDown = (scaledCollideFromTop * scale) - tmpY + scale;
						needToGoUp = tmpY + entity.height - (scaledCollideFromBottom * scale) - scale;

						if (needToGoDown <= entity.nudgeY) {
							tmpNudge = Math.min(speed, needToGoDown);
							if (!nudgeAxis || tmpNudge < nudgeSize) {
								nudgeAxis = "y";
								nudgeSize = tmpNudge;
								nudgeDiff = tmpNudge;
							}
						} else
						if (needToGoUp <= entity.nudgeX) {
							tmpNudge = Math.min(speed, needToGoUp) + 1;
							if (!nudgeAxis || tmpNudge < nudgeSize) {
								nudgeAxis = "y";
								nudgeSize = tmpNudge;
								nudgeDiff = tmpNudge * -1;
							}
						}
					}


					// VERTICAL
					scaledXleft = Math.floor(tmpX / scale);
					scaledXright = Math.floor((tmpX + entity.width) / scale);

					collided = false;
					canNudge = false;

					// DOWN
					if (tmpY < targetY) {
						currentDistanceCheck = Math.min(speed, scale);
						isMovingY = true;
						collisions = []; // indexed by height/scale
						maxDistToCheck = speed + scale;

						scaledYbottom = Math.floor((tmpY + entity.height) / scale) + 1;

						while (isMovingY && !collided && currentDistanceCheck <= maxDistToCheck) {

							tmpCollisionCheckX = scaledXleft;
							while (tmpCollisionCheckX <= scaledXright) {
								collisions[tmpCollisionCheckX] = !this.canMoveThrough([tmpCollisionCheckX, scaledYbottom]);
								if (collisions[tmpCollisionCheckX]) {
									collided = !ghost && true;
								}
								tmpCollisionCheckX++;
							}

							if (!collided) {
								currentDistanceCheck += scale;
								scaledYbottom++;
							} else {
								isMovingY = false;
							}
						}

						if (collided) {
							tmp = Math.floor(scaledYbottom * scale) - entity.height;
							canNudge = (tmp < tmpY + speed);
							tmpY = Math.min(tmpY + speed, tmp) - 1;
						} else {
							tmpY += speed;
						}
						isMovingY = false;
					} else


					// UP (GOLD STANDARD)
					if (tmpY > targetY) {
						currentDistanceCheck = Math.min(speed, scale);
						isMovingY = true;
						collisions = []; // indexed by height/scale
						maxDistToCheck = speed + scale + scale;

						scaledYtop = Math.floor(tmpY / scale) - 1;

						while (isMovingY && !collided && currentDistanceCheck <= maxDistToCheck) {

							tmpCollisionCheckX = scaledXleft;
							while (tmpCollisionCheckX <= scaledXright) {
								collisions[tmpCollisionCheckX] = !this.canMoveThrough([tmpCollisionCheckX, scaledYtop]);
								if (collisions[tmpCollisionCheckX]) {
									collided = !ghost && true;
								}
								tmpCollisionCheckX++;
							}

							if (!collided) {
								currentDistanceCheck += scale;
								scaledYtop--;
							} else {
								isMovingY = false;
							}
						}

						if (collided) {
							tmp = (scaledYtop * scale) + scale;
							canNudge = (tmp > tmpY - speed);
							tmpY = Math.max(tmpY - speed, tmp) + 1;
						} else {
							tmpY -= speed;
						}
						isMovingY = false;
					}

					if (collided && canNudge) {
						// Nudging
						scaledCollideFromLeft = 0;
						scaledCollideFromRight = tmpCollisionCheckX;
						for (i in collisions) {
							if (collisions[i]) {
								scaledCollideFromLeft = Math.max(scaledCollideFromLeft, i);
								scaledCollideFromRight = Math.min(scaledCollideFromRight, i);
							}
						}
						scaledCollideFromRight--;

						needToGoRight = (scaledCollideFromLeft * scale) - tmpX + scale;
						needToGoLeft = tmpX + entity.width - (scaledCollideFromRight * scale) - scale;

						if (needToGoRight <= entity.nudgeX) {
							tmpNudge = Math.min(speed, needToGoRight);
							if (!nudgeAxis || tmpNudge < nudgeSize) {
								nudgeAxis = "x";
								nudgeSize = tmpNudge;
								nudgeDiff = tmpNudge;
							}
						} else
						if (needToGoLeft <= entity.nudgeX) {
							tmpNudge = Math.min(speed, needToGoLeft) + 1;
							if (!nudgeAxis || tmpNudge < nudgeSize) {
								nudgeAxis = "x";
								nudgeSize = tmpNudge;
								nudgeDiff = tmpNudge * -1;
							}
						}
					}

				}
				if (!tryingToMoveX && nudgeAxis == "x") {
					tmpX += nudgeDiff;
				}
				if (!tryingToMoveY && nudgeAxis == "y") {
					tmpY += nudgeDiff;
				}
				entity.moveTo([tmpX, tmpY]);

				/*
				tmpEntityOn = [];
				scaledX = Math.floor(entity.x / scale);
				scaledXto = Math.floor((entity.x + entity.width) / scale);
				scaledY = Math.floor(entity.y / scale);
				scaledYto = Math.floor((entity.y + entity.height) / scale);
				for (scaledX; scaledX <= scaledXto; scaledX++) {
					for (scaledY; scaledY <= scaledYto; scaledY++) {
						tmp = this.getTileAt([scaledX, scaledY]);
						if (tmp) {
							tmpEntityOn.push(tmp);
						}
					}
				}
				*/

				//console.log(tmpEntityOn);
				//todo: check what entity is standing on

				//todo: check what is near the entity
			}

			this.init();
		}

		/*
			todo: create player object
				- store last known position
				- store position last known timestamp
				- when updating, animate to new position (potentially using time difference as speed?)
		*/


		/*
		MARKUP IDEAS

		Map contains:
			Map grid data
			Map entity definitions (in addition to those inherited from the parent class)

			Functions for onLoad, etc (so Bomberman could randomly add rocks)

		Should be able to handle:
			Interactive areas / event triggers
			Objects that could be obtained
			Floor tiles that modify behaviour
		Would not handle:
			<unsure>


		Mark locations that will have ONE specific thing with "@<something>" or "<something>@" (for alignment to walls)
			eg:
				@P1 (for Player 1)
				@D1 (door 1)
				@K1 (key 1)

		Mark locations with content randomised from group with "%<group>" etc.
			eg:
				%V (for random Vet puzzle)
				%M (random multichoice puzzle)


		Underneath will be a data structure that lists the specific details for each item or group of items
		as well as their events etc.
			Notes:
				Possibly "effect radius" too? If so, update map data at load time.
				But if objects can move, then might have to be dynamic.

			Data:
				Enabled: bool
				Infinite: bool
				Cooldown: (ms)
				Effect: function()
				Effects: (filter to let it not effect certain players/objects)
				Automatic: bool (triggers automatically or requires player to press a "use" key)
				Repeat: bool (continiously trigger while player is on it? or only after leaving/returning?)

*/


		class BaseMapEntity {
			static type = "base";
			type = "base";
			x;
			y;
			width;
			height;
			elementName = "div"; // If we set the element properties as a sub object then it's harder to override specific values
			elementClass = "";
			gridCoords = [];
			occupiesMapCoords = [];
			canMove = false;
			canMoveThrough = false;
			htmlElement;
			map;
			autoZ = true;

			constructor(coordsPixels) {
				let [x, y] = coordsPixels;
				this.x = x;
				this.y = y;
				this.width = scale;
				this.height = scale;
			}

			getElement() {
				if (!this.htmlElement) {
					this.htmlElement = document.createElement(this.elementName);
					// Add the classes
					this.elementClass.trim().split(" ").forEach(tmpClass => {
						if (tmpClass.length == 0) { return; }
						this.htmlElement.classList.add(tmpClass);
					});
					this.htmlElement.style.left = this.x + "px";
					this.htmlElement.style.top = this.y + "px";
				}
				return this.htmlElement;
			}

			// Gets map coords closest to entity CENTRE
			getClosestMapCoords() {
				return [
					Math.floor((this.x + (this.width / 2)) / scale),
					Math.floor((this.y + (this.height / 2)) / scale),
				];
			}
			getClosestPixelCoords() {
				return [
					Math.floor((this.x + (this.width / 2)) / scale) * scale,
					Math.floor((this.y + (this.height / 2)) / scale) * scale,
				];
			}

			destroy() {
				//this.htmlElement.parentNode.removeChild(this.htmlElement);
				EventManager.triggerEventOnEntity(this, "onBeforeDestroy");
				this.map.removeEntityFromMap(this);
				EventManager.removeEntity(this);
				delete this;
			}

			updateInternalGridCoords() { // and do collisions too
				let tmpCoordsList = [];
				let tmpX;
				let tmpY;
				let maxScaleX = Math.floor((this.x + this.width) / scale);
				let maxScaleY = Math.floor((this.y + this.height) / scale);

				for (tmpX = Math.floor(this.x / scale); tmpX <= maxScaleX; tmpX++) {
					tmpCoordsList[tmpX] = tmpCoordsList[tmpX] || [];
					for (tmpY = Math.floor(this.y / scale); tmpY <= maxScaleY; tmpY++) {
						tmpCoordsList[tmpX][tmpY] = true;
						for (let v of this.map.getEntitiesAt([tmpX, tmpY])) {
							//todo: check if this crashes when two movable entities pass over eachother
							EventManager.triggerEventOnEntity(this, "onCollide", v);
							EventManager.triggerEventOnEntity(v, "onCollide", this);
						}
					}
				}
				if (this.autoZ) {
					this.getElement().style.zIndex = maxScaleY;
				}
				this.occupiesMapCoords = tmpCoordsList;
			}

			isOnMapCoords(coordsMap) {
				// Neither of these work... indexOf() and includes() don't work when values are arrays
				//return (this.occupiesMapCoords.indexOf(coordsMap) > -1);
				//return (this.occupiesMapCoords.includes(coordsMap));
				let [mapX, mapY] = coordsMap;

				if (typeof this.occupiesMapCoords[mapX] == "undefined") { return false; }
				return (typeof this.occupiesMapCoords[mapX][mapY] !== "undefined");
			}

			onCollide(otherEntity) {
				EventManager.triggerEventOnEntity(this, "onCollide_"+otherEntity.type, otherEntity);
			}
		}

		class MapEntityWall extends BaseMapEntity {
			static type = "wall";
			type = "wall";
			elementClass = "wall";
		}

		class MapEntityRock extends BaseMapEntity {
			static type = "rock";
			type = "rock";
			elementClass = "rock";
			canBeDamaged = true;
			canStopExplosion = true;
			isAlive = true;
			onTick = false;

/*
			constructor(coordsPixels) {
				super(coordsPixels);
				return;
			}
*/

/*
			onBeforeAddToMap() {
				let el = this.getElement();
				if (Game.weightedChance(1, 2)) {
					el.style.transform = "rotateY(180deg)";
				}
				// brightness: 0.3 - 1.5
				// saturate: 0-10
				// hue-rotate: 0-360 deg
				el.style.filter = "hue-rotate("+Game.random(0, 360)+"deg) brightness("+(Game.random(1.5, 2)/2)+") saturate("+Game.random(0, 6)+")";
				if (Game.weightedChance(1, 20)) {
					el.classList.add("hue-timing-1");
				} else
				if (Game.weightedChance(1, 20)) {
					el.classList.add("hue-timing-2");
				}
				// el.style.setProperty("--inner-scale", Game.random(5, 10)/10);
			}
			*/

			onCollide_explosion(otherEntity) {
				if (this.isAlive) {
					this.isAlive = false;
					this.getElement().classList.add("exploding");

					// Prevent bombs from a row blasting through multiple rocks at once
					// Chain reaction delay is 50
					/*
					setTimeout(() => {
						this.isAlive = false;
					}, 100);
					*/

					setTimeout(() => {
						// Random chance of dropping a powerup
						if (Game.weightedChance(1, 2)) {
							// Only fireups for now
							let newPowerup = PowerupManager.getRandomPowerup(this.getClosestPixelCoords());
							this.map.addEntityToMap(newPowerup, this.getClosestMapCoords());
						}
						this.destroy();
					}, 450);
				}
			}


			//todo: add "on" events for when damaged
			// then potentially trigger an item drop
		}

		class MapEntityPlayer extends BaseMapEntity {
			static type = "player";
			type = "player";
			elementClass = "player";
			isAlive = true;
			canMove = true;
			canMoveThrough = true;
			canBeDamaged = true;
			tickCount = 0;
			timeSpawned = new Date().getTime();
			acceleration = 0;

			// Override size because a glitch means a movable player MUST be 2px smaller than the smallest gap you want them to pass through
			width = 40;
			height = 40;

			speed = 1;

			nudgeBy = 0.5;
			nudgeX = this.width * this.nudgeBy;
			nudgeY = this.height * this.nudgeBy;
			//standingOn = {};
			near = {};

			listenKeys = {
				KeyW: "UP",    // W
				KeyA: "LEFT",  // A
				KeyS: "DOWN",  // S
				KeyD: "RIGHT", // D
			}
			keysDown = {};

			hasKeyDown(key) {
				return this.keysDown[key] || false;
			}

			getSecondsAlive() {
				return Math.round((new Date().getTime() - this.timeSpawned) / 1000);
			}

			onTick() {
				let axisX = 0;
				let axisY = 0;

				if (!this.isAlive) {
					return false;
				}

				if (touchMode && this == currentPlayer) {
					switch (joystick.GetDir()) {
						case "C":
							break;
						case "N":
						case "S":
							axisY = Math.round(joystick.GetY() / -25) / 4; //(100 -> -100 inverted)
							axisX = 0;
							break;
						case "W":
						case "E":
							axisY = 0;
							axisX = Math.round(joystick.GetX() / 25) / 4;
							break;
						case "NE":
						case "SE":
						case "SW":
						case "NW":
							axisY = Math.round(joystick.GetY() / -25) / 4; //(100 -> -100 inverted)
							axisX = Math.round(joystick.GetX() / 25) / 4;
							break;

						default:
							break;
					}
				}

				// Movement
				if (this.hasKeyDown("UP")) { axisY = -1; }
				if (this.hasKeyDown("DOWN")) { axisY = 1; }
				if (this.hasKeyDown("LEFT")) { axisX = -1; }
				if (this.hasKeyDown("RIGHT")) { axisX = 1; }

				if (axisX || axisY || this.acceleration > 0) {
					gameMap.updateEntityPosition(this, axisX, axisY);
				}

				this.getElement().classList.toggle("ghost", cheats && this.hasKeyDown("GHOST"));


				if (this.tickCount)


				if (this.tickCount > ticksPerSecond) {
					let stats = [];
					stats.push(`Alive: ${this.getSecondsAlive()}s (longest: ${this.longestAlive}s)`);
					stats.push(`Bombs: ${this.bombCountMax}`);
					stats.push(`Speed: ${Math.round(this.speed*10)/10}`);
					stats.push(`Fire: ${this.bombPowerups.fire}`);
					stats.push(`Kills: ${this.killCount}`);
					stats.push(`Deaths: ${this.deathCount}`);
					stats.push(`Bombs Used: ${this.bombCountThisLife} (${this.bombCountTotal} total)`);
					this.statsPanel.innerHTML = stats.join(" &nbsp; ");
					this.tickCount = 0;
				}

				this.tickCount++;
			}

			onKeydown(event) {
				this.keysDown[(this.listenKeys[event.code] || 0)] = true;
			}
			onKeyup(event) {
				this.keysDown[(this.listenKeys[event.code] || 0)] = false;
			}

			getElement() {
				super.getElement();
				this.htmlElement.style.height = this.height + "px";
				this.htmlElement.style.width = this.width + "px";
				return this.htmlElement;
			}

			moveTo(coordsPixels) {
				let [x, y] = coordsPixels;
				let oldX = this.x;
				let oldY = this.y;
				this.x = x;
				this.y = y;
				this.htmlElement.style.left = x + "px";
				this.htmlElement.style.top = y + "px";
				this.updateInternalGridCoords();
				ui.panViewport(this);
			}
			onBeforeAddToMap() {
				this.initialX = this.x;
				this.initialY = this.y;
				this.initialSpeed = this.speed;
				this.statsPanel = document.getElementById("player-stats-"+this.playerNumber);
			}

			onAfterAddToMap() {
				this.map.removeEntityFromMap(this, true);
				let [mapX, mapY] = this.getClosestMapCoords();
				if (this.playerNumber == 2) {
					this.statsPanel.style.setProperty("top", "calc("+(this.map.maxTilesY-1)+" * var(--scale))");
					this.statsPanel.style.setProperty("width", "calc("+(this.map.maxTilesX-2)+" * var(--scale))");
				}
			}
		}

		class MapEntityBombermanPlayer extends MapEntityPlayer {
			// Add game-specific player attributes
			powerupList = [];
			bombCountMax = 1;
			bombCount = 0;
			bombPowerups = {
				fire: 1,
			};
			bombCountTotal = 0;
			bombCountThisLife = 0;
			deathCount = 0;
			killCount = 0;
			longestAlive = 0;

			die(entity) {
				console.log("[Player "+this.playerNumber+"] DIED");
				this.deathCount++;
				this.longestAlive = Math.max(this.longestAlive, this.getSecondsAlive());
				elMapWrap.classList.add("shake");
				setTimeout(() => {
					elMapWrap.classList.remove("shake");
				}, 300);

				if (this.powerupList.length) {
					// Scatter the loot
					var k1, k2, positions = [];
					for (k1 in this.map.grid) {
						for (k2 in this.map.grid[k1]) {
							// Randomly fill the empty spaces with rocks (2/3 chance)
							if (this.map.grid[k1][k2] == " ") {
								positions.push([k2, k1]);
							}
						}
					}

					// Shuffle the locations and powerups so we can randomise placement
					positions = Game.shuffleArray(positions);
					this.powerupList = Game.shuffleArray(this.powerupList);

					while (this.powerupList.length && positions.length) {
						let coordsM = positions.pop();
						let coordsP = this.map.coordsMapToPixel(coordsM);
						let powerup = this.powerupList.pop();
						var tmp = new powerup(coordsP);
						tmp.prevOwner = this.playerNumber;
						this.map.addEntityToMap(tmp, coordsM);
					}
				}

				this.speed = this.initialSpeed;
				this.powerupList = [];
				this.bombCountMax = 1;
				this.bombCount = 0;
				this.bombPowerups = {
					fire: 1,
				};
				this.bombCountThisLife = 0;
				setTimeout(() => {

					this.moveTo([this.initialX, this.initialY]);
					this.getElement().classList.remove("exploding");
					this.timeSpawned = new Date().getTime();
					this.isAlive = true;
				}, 4000);
			}


			onCollide_explosion(otherEntity) {
				if (!this.isAlive) { return false; }

				// Friendly fire
				if (!friendlyFire && otherEntity.owner.playerNumber == this.playerNumber) { return false; }

				if (otherEntity.owner.playerNumber != this.playerNumber) {
					otherEntity.owner.killCount++;
				}


				// if (otherEntity && otherEntity.type == "explosion" && this.isAlive) {
					this.isAlive = false;
					this.keysDown = [];
					this.getElement().classList.add("exploding");

					setTimeout(() => {
						this.die();
					}, 100);
					return;

					setTimeout(() => {
						this.destroy();
					}, 1000);
					//alert("Player "+this.playerNumber+" has died");
					//this.destroy();
				// }
			}

			// And the function to place bombs
			attemptToPlaceBomb() {
				if (!this.isAlive || this.bombCount >= this.bombCountMax) { return; }
				// Check if tile under player is empty)
				let coordsMap = this.getClosestMapCoords();
				let tmpTargetEntity;
				for (tmpTargetEntity of this.map.getEntitiesAt(coordsMap)) {
					// If there's anything here that can't be moved through (a wall) then we can't lay a bomb
					if (tmpTargetEntity && !tmpTargetEntity.canMoveThrough) { return; }
				}

				//todo: raise the current bomb count for player
				this.bombCount++;
				this.bombCountTotal++;
				this.bombCountThisLife++;
				let newBomb = new MapEntityBomb(this.getClosestPixelCoords(), Game.cloneData(this.bombPowerups));
				newBomb.owner = this;
				this.map.addEntityToMap(newBomb, coordsMap);
				// Lay a bomb
			}

			applyPowerup(powerup) {
				if (!cheats) { return; }
				let tmp = new powerup([-99, -99]);
				this.map.addEntityToMap(tmp, [-1,-1]);
				tmp.onCollide_player(this);
				console.log("[Player "+this.playerNumber+"] Cheated powerup: "+tmp.elementClass.split(" ")[1]);
			}
			toggleCheats() {
				cheats = !cheats;
				if (cheats) {
					console.log("[Player "+this.playerNumber+"] Toggled CHEATS ON");
					document.title = (" `*".split("")[this.playerNumber])+"Debug";
					return;
				}
				console.log("[Player "+this.playerNumber+"] Toggled CHEATS OFF");
				document.title = "Debug";
			}
			changeRockEmoji() {
				let currentIndex = parseInt(document.body.dataset.emojiIndex || 0);
				document.body.classList.remove("rock-"+currentIndex);
				currentIndex = (currentIndex >= rockEmojiCount) ? 0 : currentIndex + 1;
				document.body.classList.add("rock-"+currentIndex);
				document.body.dataset.emojiIndex = currentIndex;
				setCookie("rock-emoji", currentIndex);
			}
			toggleIcons() {
				document.body.classList.toggle("use-icons");
				setCookie("use-icons", document.body.classList.contains("use-icons") ? "true" : "false");
			}
			toggleResize() {
				autoResize = !autoResize;
				setCookie("auto-resize", autoResize ? "true" : "false");
			}
			toggleMenu() {
				if (!menuDialog.open) {
					menuDialog.showModal();
				} else {
					menuDialog.close();
				}
			}

			onKeypress(event) {
				if (this.powerupKeyMap[event.code] || 0) {
					this.applyPowerup(this.powerupKeyMap[event.code]);
					return;
				}
				if (this.otherKeys[event.code] || 0) {
					this[this.otherKeys[event.code]]();
					return;
				}
			}
		}

		class MapEntityPlayer1 extends MapEntityBombermanPlayer {
			elementClass = "player player-1";
			playerNumber = 1;
			/*
			listenKeys = {
				87: "UP",    // W
				65: "LEFT",  // A
				83: "DOWN",  // S
				68: "RIGHT", // D
				32: "BOMB",  // SPACE. 67:C
			}
			*/
			listenKeys = {
				KeyW: "UP",    // W
				KeyA: "LEFT",  // A
				KeyS: "DOWN",  // S
				KeyD: "RIGHT", // D
				Space: "BOMB",  // SPACE. 67:C
				ShiftLeft: "GHOST",
			}
			powerupKeyMap = {
				KeyV: MapEntityPowerupSpeedUp,   // V
				KeyG: MapEntityPowerupSpeedDown, // G
				KeyB: MapEntityPowerupBombUp,    // B
				KeyH: MapEntityPowerupBombDown,  // H
				KeyN: MapEntityPowerupFireUp,    // N
				KeyJ: MapEntityPowerupFireDown,  // J
			};
			otherKeys = {
				Backquote: "toggleCheats",
				KeyE: "changeRockEmoji",
				KeyI: "toggleIcons",
				KeyU: "toggleResize",
				Escape: "toggleMenu",
			}
			onCollide_explosion(otherEntity) {
				super.onCollide_explosion(otherEntity);
			}
		}

		class MapEntityPlayer2 extends MapEntityBombermanPlayer {
			elementClass = "player player-2";
			playerNumber = 2;
			/*
			listenKeys = {
				38: "UP",    // Up arrow
				37: "LEFT",  // Left arrow
				40: "DOWN",  // Down arrow
				39: "RIGHT", // Right arrow
				96: "BOMB",  // Numpad 0
			}
			*/
			listenKeys = {
				ArrowUp: "UP",    // Up arrow
				ArrowLeft: "LEFT",  // Left arrow
				ArrowDown: "DOWN",  // Down arrow
				ArrowRight: "RIGHT", // Right arrow
				Numpad0: "BOMB",  // Numpad 0
				ShiftRight: "GHOST",
			}
			powerupKeyMap = {
				Numpad4: MapEntityPowerupSpeedUp,   // V
				Numpad7: MapEntityPowerupSpeedDown, // G
				Numpad5: MapEntityPowerupBombUp,    // B
				Numpad8: MapEntityPowerupBombDown,  // H
				Numpad6: MapEntityPowerupFireUp,    // N
				Numpad9: MapEntityPowerupFireDown,  // J
			};
			otherKeys = {
				NumpadMultiply: "toggleCheats",
			}
		}

		/*
			⏫/💨/⏩️ Speed up
			💣     Bomb up
			🔥     Fire
			💩     Poop

			Down: red border? or upside down? or half opacity? or icon then 🔼 or 🔻/🔽 beside it?
		*/
		class MapEntityPowerup extends BaseMapEntity {
			static type = "powerup";
			type = "powerup";
			elementClass = "powerup";
			canBeDamaged = true;
			canMoveThrough = true;
			dataLetter = "";
			dataIcon = "";
			prevOwner = false;
			static odds = 5;

			onAfterAddToMap() {
				this.getElement().setAttribute("data-powerup-letter", this.dataLetter);
				this.getElement().setAttribute("data-powerup-icon", this.dataIcon);
			}

			onCollide_explosion(otherEntity) {
				this.destroy();
			}

			checkRecoveredOrStolen(newPlayer) {
				if (!this.prevOwner) { return; }
				if (this.prevOwner == newPlayer.playerNumber) {
					console.log("[Player "+newPlayer.playerNumber+"] Recovered a powerup!");
					return;
				}
				console.log("[Player "+newPlayer.playerNumber+"] \"Salvaged\" a powerup from Player "+this.prevOwner+"!");
			}
		}
		class MapEntityPowerupFireUp extends MapEntityPowerup {
			elementClass = "powerup fire-up";
			dataLetter = "F";
			dataIcon = "🔥";

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.bombPowerups.fire++;
				console.log("[Player "+player.playerNumber+"] New fire: "+player.bombPowerups.fire);
				player.powerupList.push(MapEntityPowerupFireUp);
				this.destroy();


				// TODO: Consider making powerups remember their history and get more powerful the more they change owners
				return;
				player.powerupList.push(this);
				this.map.removeEntityFromMap(this, true); // ??
				// Then when re-adding after death, just re-add, not recreate


			}
		}
		class MapEntityPowerupFireDown extends MapEntityPowerup {
			elementClass = "powerup fire-down";
			dataLetter = "F";
			dataIcon = "🔥";
			static odds = 1;

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.powerupList.push(MapEntityPowerupFireDown);
				player.bombPowerups.fire = Math.max(player.bombPowerups.fire-1, 1);
				console.log("[Player "+player.playerNumber+"] New fire: "+player.bombPowerups.fire);
				this.destroy();
			}
		}

		class MapEntityPowerupBombUp extends MapEntityPowerup {
			elementClass = "powerup bomb-up";
			dataLetter = "B";
			dataIcon = "💣";

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.powerupList.push(MapEntityPowerupBombUp);
				player.bombCountMax++;
				console.log("[Player "+player.playerNumber+"] New bombCountMax: "+player.bombCountMax);
				this.destroy();
			}
		}
		class MapEntityPowerupBombDown extends MapEntityPowerup {
			elementClass = "powerup bomb-down";
			dataLetter = "B";
			dataIcon = "💣";
			static odds = 1;

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.powerupList.push(MapEntityPowerupBombDown);
				player.bombCountMax = Math.max(player.bombCountMax-1, 1);
				console.log("[Player "+player.playerNumber+"] New bombCountMax: "+player.bombCountMax);
				this.destroy();
			}
		}

		class MapEntityPowerupSpeedUp extends MapEntityPowerup {
			elementClass = "powerup speed-up";
			dataLetter = "S";
			dataIcon = "⏩️";

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.powerupList.push(MapEntityPowerupSpeedUp);
				player.speed = player.speed + 0.1;
				console.log("[Player "+player.playerNumber+"] New speed: "+player.speed);
				this.destroy();
			}
		}
		class MapEntityPowerupSpeedDown extends MapEntityPowerup {
			elementClass = "powerup speed-down";
			dataLetter = "S";
			dataIcon = "⏩️";
			static odds = 1;

			onCollide_player(player) {
				this.checkRecoveredOrStolen(player);
				player.powerupList.push(MapEntityPowerupSpeedDown);
				// Don't go below half initial speed
				player.speed = Math.max(player.speed-0.1, (player.initialSpeed / 4 * 3));
				console.log("[Player "+player.playerNumber+"] New speed: "+player.speed);
				this.destroy();
			}
		}


		class MapEntityBomb extends BaseMapEntity {
			static type = "bomb";
			type = "bomb";
			owner = false;
			elementClass = "bomb";
			canBeDamaged = true;
			canStopExplosion = true;
			powerups = {};
			fuse = false;
			fuseTime = 2500;

			constructor(coordsMap, powerups) {
				super(coordsMap);
				this.powerups = powerups;
			}

			onAfterAddToMap() {
				this.arm();
			}

			onBeforeDestroy() {
				this.owner.bombCount = Math.max(this.owner.bombCount-1, 0);
				// this.owner.bombCount = Math.min(this.owner.bombCount+1, this.owner.bombCountMax);
			}

			onCollide_explosion(otherEntity) {
				clearTimeout(this.fuse);
				this.owner = otherEntity.owner;
				this.fuse = setTimeout(() => {
					this.explode();
				}, 50); // explode delay when hit by another explosion
			}

			arm() {
				this.htmlElement.classList.add("armed");
				this.htmlElement.style.animationDuration = this.fuseTime+"ms";

				this.fuse = setTimeout(() => {
					this.explode();
				}, this.fuseTime);
			}

			explode() {
				clearTimeout(this.fuse);
				let coordsMap = this.getClosestMapCoords();
				let [mapX, mapY] = coordsMap;
				let tmpTargetEntity = false;

				let tmpEntitiesAtCoords = this.map.getEntitiesAt(coordsMap);
				let newExplosion = new MapEntityExplosion(this.getClosestPixelCoords(), false, false, this);
				this.map.addEntityToMap(newExplosion, coordsMap);
				for (tmpTargetEntity of tmpEntitiesAtCoords) {
					EventManager.triggerEventOnEntity(tmpTargetEntity, "onCollide", newExplosion);
				}

				let tmpFire;
				let tmpDoExplosion;
				let tmpIsLastExplosion;
				let tmpCoordsMap = [];

				let playerHueMultiplier = (this.owner.playerNumber == 1) ? 1 : -1;

				//todo: Simplify this into a loop?

				// Up
				tmpFire = 1;
				tmpDoExplosion = true;
				tmpIsLastExplosion = false;
				do {
					tmpCoordsMap = [mapX, mapY - tmpFire];
					tmpEntitiesAtCoords = this.map.getEntitiesAt(tmpCoordsMap);
					for (tmpTargetEntity of tmpEntitiesAtCoords) {
						if (tmpTargetEntity.canStopExplosion) {
							if (!tmpTargetEntity.canBeDamaged) {
								tmpDoExplosion = false;
							}
							tmpIsLastExplosion = true;
						}
					}
					if (tmpDoExplosion) {
						if (tmpFire == this.powerups.fire) {
							tmpIsLastExplosion = true;
						}
						newExplosion = new MapEntityExplosion([mapX * scale, (mapY - tmpFire) * scale], "up", tmpIsLastExplosion, this);
						this.map.addEntityToMap(newExplosion, tmpCoordsMap);
						if (rainbowFire) {
							newExplosion.getElement().style.setProperty("filter", "hue-rotate("+((tmpFire-1)*10*playerHueMultiplier)+"deg)");
						}
						for (tmpTargetEntity of tmpEntitiesAtCoords) {
							EventManager.triggerEventOnEntity(tmpTargetEntity, "onCollide", newExplosion);
						}
					}
					tmpFire++;
				}
				while (!tmpIsLastExplosion && tmpFire <= this.powerups.fire);


				// Down
				tmpFire = 1;
				tmpDoExplosion = true;
				tmpIsLastExplosion = false;
				do {
					tmpCoordsMap = [mapX, mapY + tmpFire];
					tmpEntitiesAtCoords = this.map.getEntitiesAt(tmpCoordsMap);
					for (tmpTargetEntity of tmpEntitiesAtCoords) {
						if (tmpTargetEntity.canStopExplosion) {
							if (!tmpTargetEntity.canBeDamaged) {
								tmpDoExplosion = false;
							}
							tmpIsLastExplosion = true;
						}
					}
					if (tmpDoExplosion) {
						if (tmpFire == this.powerups.fire) {
							tmpIsLastExplosion = true;
						}
						newExplosion = new MapEntityExplosion([mapX * scale, (mapY + tmpFire) * scale], "down", tmpIsLastExplosion, this);
						this.map.addEntityToMap(newExplosion, tmpCoordsMap);
						if (rainbowFire) {
							newExplosion.getElement().style.setProperty("filter", "hue-rotate("+((tmpFire-1)*10*playerHueMultiplier)+"deg)");
						}
						for (tmpTargetEntity of tmpEntitiesAtCoords) {
							EventManager.triggerEventOnEntity(tmpTargetEntity, "onCollide", newExplosion);
						}
					}
					tmpFire++;
				}
				while (!tmpIsLastExplosion && tmpFire <= this.powerups.fire);


				// Left
				tmpFire = 1;
				tmpDoExplosion = true;
				tmpIsLastExplosion = false;
				do {
					tmpCoordsMap = [mapX - tmpFire, mapY];
					tmpEntitiesAtCoords = this.map.getEntitiesAt(tmpCoordsMap);
					for (tmpTargetEntity of tmpEntitiesAtCoords) {
						if (tmpTargetEntity.canStopExplosion) {
							if (!tmpTargetEntity.canBeDamaged) {
								tmpDoExplosion = false;
							}
							tmpIsLastExplosion = true;
						}
					}
					if (tmpDoExplosion) {
						if (tmpFire == this.powerups.fire) {
							tmpIsLastExplosion = true;
						}
						newExplosion = new MapEntityExplosion([(mapX - tmpFire) * scale, mapY * scale], "left", tmpIsLastExplosion, this);
						this.map.addEntityToMap(newExplosion, tmpCoordsMap);
						if (rainbowFire) {
							newExplosion.getElement().style.setProperty("filter", "hue-rotate("+((tmpFire-1)*10*playerHueMultiplier)+"deg)");
						}
						for (tmpTargetEntity of tmpEntitiesAtCoords) {
							EventManager.triggerEventOnEntity(tmpTargetEntity, "onCollide", newExplosion);
						}
					}
					tmpFire++;
				}
				while (!tmpIsLastExplosion && tmpFire <= this.powerups.fire);

				// Right
				tmpFire = 1;
				tmpDoExplosion = true;
				tmpIsLastExplosion = false;
				do {
					tmpCoordsMap = [mapX + tmpFire, mapY];
					tmpEntitiesAtCoords = this.map.getEntitiesAt(tmpCoordsMap);
					for (tmpTargetEntity of tmpEntitiesAtCoords) {
						if (tmpTargetEntity.canStopExplosion) {
							if (!tmpTargetEntity.canBeDamaged) {
								tmpDoExplosion = false;
							}
							tmpIsLastExplosion = true;
						}
					}
					if (tmpDoExplosion) {
						if (tmpFire == this.powerups.fire) {
							tmpIsLastExplosion = true;
						}
						newExplosion = new MapEntityExplosion([(mapX + tmpFire) * scale, mapY * scale], "right", tmpIsLastExplosion, this);
						this.map.addEntityToMap(newExplosion, tmpCoordsMap);
						if (rainbowFire) {
							newExplosion.getElement().style.setProperty("filter", "hue-rotate("+((tmpFire-1)*10*playerHueMultiplier)+"deg)");
						}
						for (tmpTargetEntity of tmpEntitiesAtCoords) {
							EventManager.triggerEventOnEntity(tmpTargetEntity, "onCollide", newExplosion);
						}
					}
					tmpFire++;
				}
				while (!tmpIsLastExplosion && tmpFire <= this.powerups.fire);

				//todo: increase available bomb count for player
				this.destroy();
			}
		}

		class MapEntityExplosion extends BaseMapEntity {
			static type = "explosion";
			type = "explosion";
			elementClass = "explosion";
			canMoveThrough = true;
			owner = false;
			powerups = false;
			//options = {}; // axis(x/y), final(true/false)

			constructor(coordsMap, direction, final, bomb) {
				super(coordsMap);
				if (typeof bomb == "object") {
					this.owner = bomb.owner;
					this.powerups = bomb.powerups;
				}
				//this.options = options;
				this.height = (direction == "left" || direction == "right") ? scale * 0.8 : scale;
				this.width = scale;
				// this.getElement();
				let classList = this.getElement().classList;
				classList.add("player-"+this.owner.playerNumber);
				console.log(classList);
				if (typeof direction == "string") { classList.add("direction-"+direction); }
				if (final || false) { classList.add("final"); }
				this.htmlElement.width = scale + "px";
				this.htmlElement.width = scale + "px";
			}

			onAfterAddToMap() {
				setTimeout(() => {
					this.dissipate();
				}, 250);
			}

			dissipate() {
				this.htmlElement.classList.add("dissipate");
				setTimeout(() => {
					this.destroy();
				}, 200);
			}
		}

		class PowerupManager {
			static powerupsList = [
				MapEntityPowerupBombUp,
				MapEntityPowerupBombDown,
				MapEntityPowerupFireUp,
				MapEntityPowerupFireDown,
				MapEntityPowerupSpeedUp,
				MapEntityPowerupSpeedDown,
			];
			static powerupsListByOdds = [];

			static init() {
				let i = 1;
				for (let tmpPowerup of this.powerupsList) {
					for (i=1; i<=tmpPowerup.odds; i++) {
						this.powerupsListByOdds.push(tmpPowerup);
					}
				}
			}

			static getRandomPowerup(coordsPixel) {
				return new this.powerupsListByOdds[Math.floor(Math.random() * this.powerupsListByOdds.length)](coordsPixel);
			}
		}

		class BaseMapConfig {
			initialGrid = "";
			grid = [];
			scale = 20;

			constructor() { }

			entityDefinitions = {
				"#": MapEntityWall,
				"1": MapEntityPlayer1,
				"2": MapEntityPlayer2,
			}

			onBeforeGridLoad() { }
			onAfterGridLoad() { }
			onBeforeProcessTiles() { }
			onAfterProcessTiles() { }

			onTick() { }

			getEntityDefinitions() {
				return this.entityDefinitions;
			}
		}

		var mapRaw = "";

		// Louis Eve
		class MapNames extends BaseMapConfig {
			initialGrid =
`######################################################################
#                                                                    #
#                                                                    #
#       @P3                                                          #
#                                                                    #
#                                                                    #
#                                              P4@                   #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#            ##       ###      ##   ##    ######      ####           #
#            ##      ## ##     ##   ##      ##       ##              #
#            ##      ## ##     ##   ##      ##      ##               #
#            ##     ##   ##    ##   ##      ##       ##              #
#            ##     ##   ##    ##   ##      ##        ##             #
#            ##     ##   ##    ##   ##      ##         ##            #
#            ##      ## ##     ##   ##      ##          ##           #
#            ##      ## ##     ##   ##      ##         ##            #
#            ####     ###       #####     ######    ####             #
#                           --                                       #
#                           --                                       #
#                           --                                       #
#       2                   --                               1       #
#                           --                                       #
#                                                                    #
#                   ######     ##   ##     ######                    #
#                   ##         ##   ##     ##                        #
#                   ##         ##   ##     ##                        #
#                   ##         ##   ##     ##                        #
#                   #####      ##   ##     #####                     #
#                   ##         ##   ##     ##                        #
#                   ##          ## ##      ##                        #
#                   ##          ## ##      ##                        #
#                   ######       ###       ######                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
#                                                                    #
######################################################################`;
		}

		// Bomberman
		class MapBomberman extends BaseMapConfig {
			initialGrid =
`#####################
#1                  #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                   #
# # # # # # # # # # #
#                  2#
#####################`;

			scale = 50;

			getEntityDefinitions() {
				var defs = super.getEntityDefinitions();
				defs["R"] = MapEntityRock;
				return defs;
			}

			onBeforeAddToMap_player(entity) {
			}

			// Add wall properties
			onBeforeAddToMap_wall(entity) {
				entity.canBeDamaged = false;
				entity.canStopExplosion = true;
			}

			onTick() {
				let players = EventManager.byType("player");
				let i = 0;
				for (i in players) {
					// Destructification
					if (players[i].keysDown["BOMB"] || 0) {
						players[i].attemptToPlaceBomb();
					}
					//todo: restock bombs
					// restock one bomb as each bomb from this player is destroyed
				}
			}

			// Fill the map with random rocks
			onBeforeProcessTiles(mapManager) {
				PowerupManager.init();
				var k1, k2;
				for (k1 in mapManager.grid) {
					for (k2 in mapManager.grid[k1]) {
						// Randomly fill the empty spaces with rocks (2/3 chance)
						if (mapManager.grid[k1][k2] == " " && Game.weightedChance(5, 6)) {
							// Check if next to a player, then don't turn to rock
							// Yes it's expensive and messy
							k1 = parseInt(k1);
							k2 = parseInt(k2);

							if (
								parseInt(mapManager.getTileAt([k2 - 1, k1 - 0])) ||
								parseInt(mapManager.getTileAt([k2 - 0, k1 - 1])) ||
								parseInt(mapManager.getTileAt([k2 + 1, k1 - 0])) ||
								parseInt(mapManager.getTileAt([k2 + 0, k1 + 1]))
							) { continue; }
							mapManager.grid[k1][k2] = "R";
						}
					}
				}

				// Pick a random emoji for the rocks
				document.body.dataset.emojiIndex = getCookie("rock-emoji", 0, "int");
				// document.body.dataset.emojiIndex = Game.random(1, rockEmojiCount);
				document.body.classList.add("rock-"+document.body.dataset.emojiIndex);
			}

			// Fill the map with random rocks
			onAfterProcessTiles(mapManager) {
				autoResize = getCookie("auto-resize", true, "bool");
				if (autoResize) {
					window.addEventListener("resize", event => {
						elMap.style.transformOrigin = "top left";
						let scale = Math.min(
							(window.innerWidth / mapManager.width),
							(window.innerHeight / mapManager.height),
							// (window.innerWidth / elMap.scrollWidth),
							// (window.innerHeight / elMap.scrollHeight),
						);
						elMap.style.transform = "scale("+scale+")";
					});
					window.dispatchEvent(new Event("resize"));
				}
				autopan = false;
			}
		}

		switch (document.location.hash.replace("#", "")) {
			case "b":
				gameMap = new Map(new MapBomberman);
				break;

			case "k":
				gameMap = new Map(new MapNames);
				break;

			default:
				gameMap = new Map(new MapBomberman);
				break;
		}

		// Forward events to the game
		document.addEventListener("keydown", event => {
			EventManager.triggerEvent("onKeydown", event);
		});
		document.addEventListener("keyup", event => {
			EventManager.triggerEvent("onKeyup", event);
		});
		document.addEventListener("keyup", event => {
			EventManager.triggerEvent("onKeypress", event);
		});
		document.addEventListener("touchstart", event => {
			if (touchMode) { return; }
			touchMode = true;

			currentPlayer = gameMap.movableEntities[0]; //todo: fix later to be properly dynamic

			document.body.classList.add("using-touch");

			joystick = new JoyStick("joystick", {
				"title": "joystick"
			});
		});

		let tmpButton = document.getElementById("current-player-lay-bomb");
		tmpButton.addEventListener("touchstart", event => { currentPlayer.keysDown["BOMB"] = true; });
		tmpButton.addEventListener("mousedown", event => { currentPlayer.keysDown["BOMB"] = true; });
		tmpButton.addEventListener("touchend", event => { currentPlayer.keysDown["BOMB"] = false; });
		tmpButton.addEventListener("mouseup", event => { currentPlayer.keysDown["BOMB"] = false; });

		//debug
		/*
		document.addEventListener("keypress", event => {
			switch (event.key) {
				case "c": // C
					document.body.classList.toggle("coords");
					break;

				case "t": // T
					document.body.classList.toggle("tile-coords");
					break;

				default:
					break;
			}
		});
		*/


		function setCookie(name, value, days) {
			var expires = "";
			if (days) {
				var date = new Date();
				date.setTime(date.getTime() + (days*24*60*60*1000));
				expires = "; expires=" + date.toUTCString();
			}
			document.cookie = name + "=" + (value || "")  + expires + "; path=/";
		}
		function getCookie(name, fallback, type) {
			var nameEQ = name + "=";
			var ca = document.cookie.split(";");
			for (var i=0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0)==" ") c = c.substring(1,c.length);
				if (c.indexOf(nameEQ) == 0) {
					let val = c.substring(nameEQ.length,c.length);
					if (type == "bool") {
						console.log(val == "true" || val == "1");
						return (val == "true" || val == "1");
					}
					if (type == "int") {
						return parseInt(val);
					}
					return val;
				}
			}
			return fallback;
		}
		function eraseCookie(name) {
			document.cookie = name +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
		}

		// Mail game loop
		var GameLoop = function() {
			EventManager.triggerEvent("onTick");
			setTimeout(GameLoop, loopSpeed);
		}
		setTimeout(GameLoop, loopSpeed);
	</script>
</body>

</html>

<!--
	PLAYER ANIMATION IDEAS (for a ghost)

	img {
		transition: 250ms filter;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	.idle {
		animation-name: pulse, bob;
		animation-duration: 0.5s, 1.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: linear, ease-in-out;
	}
	.moving {
		filter: brightness(1.3);
	}
	@keyframes pulse {
		from {
			filter: brightness(0.8);
		}

		to {
			filter: brightness(1.2);
		}
	}
	@keyframes bob {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-5px);
		}
	}
</style>
-->

<div style="position:absolute;z-index:99999;color:#fff;line-height:var(--scale);font-size:calc(var(--scale)/2);opacity:0.3;font-family:sans-serif"><select style="font-size:1.2rem" onchange="javascript:document.location=this.value">
<option selected value="./">30</option>
<option value="./?v=29">29</option>
<option value="./?v=28">28</option>
<option value="./?v=27">27</option>
<option value="./?v=26">26</option>
<option value="./?v=25">25</option>
<option value="./?v=24">24</option>
<option value="./?v=23">23</option>
<option value="./?v=22">22</option>
<option value="./?v=21">21</option>
<option value="./?v=20">20</option>
<option value="./?v=19">19</option>
<option value="./?v=18">18</option>
<option value="./?v=17">17</option>
<option value="./?v=16">16</option>
<option value="./?v=15">15</option>
<option value="./?v=14">14</option>
<option value="./?v=13">13</option>
<option value="./?v=12">12</option>
<option value="./?v=11">11</option>
<option value="./?v=10">10</option>
<option value="./?v=9">9</option>
<option value="./?v=8">8</option>
<option value="./?v=7">7</option>
<option value="./?v=6">6</option>
<option value="./?v=5">5</option>
<option value="./?v=4">4</option>
<option value="./?v=3">3</option>
<option value="./?v=2">2</option>
<option value="./?v=1">1</option>
<option value="./?v=0">0</option></select>
<div style="transform:rotate(90deg);transform-origin:0 100%;">30 April 2025</div></div>