src/play.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A game made with the PuzzleScript game engine.">
<title>PuzzleScript Game</title>
<style>

body {
	background-color:black;
	font-family:"Courier New", Courier, monospace;
    touch-action: none;
}
#gameCanvas {
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  bottom: 0px;
  right:0px;
  border: 0px;
  background-color: black;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
} 

.homepagelink {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

h1 {
	color:lightblue;
	font-weight:normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height:2em;
    margin-top:0.5em;
    margin-bottom: 0.5em;
}
a {
	color:lightblue;
}
.title {	
	background-color:none;
	text-align:center;
	font-size:100%;
	float:center;
	color:gray;
	position:absolute;
	left:10%;
	right:10%;
	top:0%;
	height:3em;
}

.footer {	
	background-color:none;
	text-align:center;
	float:center;
	color:white;
	position:absolute;
	left:0%;
	right:0%;
	height:3em;
	bottom:0;
}
.gameContainer {
	background-color:none;
	position:absolute;
	left:0%;
	right:0%;
	top:3.5em;
	bottom:3em;
  touch-action: none;
}

      .mobile-menu {
          position: relative;
          top: 5em;
          left:0.7em;
          margin-left: auto;
          margin-right: auto;
          font-weight: bold;
          border-radius: 0.25em;
      }

      .mobile-menu.item-count-3 {
          width: 30em;
      }
      .mobile-menu.item-count-3 .button {
          width: 28.3333%;
          /* scale the height of the button relative to the width of .mobile-menu */
          padding: 7.5% 0%;
      }

      .mobile-menu.item-count-2 {
          width: 20em;
      }
      .mobile-menu.item-count-2 .button {
          width: 46%;
          /* scale the height of the button relative to the width of .mobile-menu */
          padding: 12.1765% 0%;
      }

      .mobile-menu.item-count-1 {
          width: 10em;
      }
      .mobile-menu.item-count-1 .button {
          width: 98%;
          /* scale the height of the button relative to the width of .mobile-menu */
          padding: 26.5% 0%;
      }

      .mobile-menu,
      .tab-icon,
      .mobile-menu .close {
          background: rgba(0,0,0,0.4);
          border: 2px solid rgba(255, 255, 255, 0.4);
          color: rgba(255, 255, 255, 1);
      }

      .mobile-menu .button {
          margin: 2%;
          border-radius: 0.25em;
          text-align: center;
          float: left;
      }
      .mobile-menu .clear {
          clear: both;
      }

      .tab-affordance,
      .close-affordance {
          width: 6em;
          height: 6em;
          position: absolute;
          z-index: 1000;
      }

      .tab-affordance {
          left: -2em;
          top: 5em;
      }

      .close-affordance {
          left: -4em;
          top: -1em;
      }

      .tab-icon,
      .mobile-menu .close {
          height: 48px;
          position: absolute;
          border-radius: 6px;
      }

      .tab-icon {
          left: 0;
          top: 70px;
          width: 18px;
          border-radius: 0 6px 6px 0;
          border-left: 0;
      }

      .mobile-menu .close {
          left: -18px;
          width: 18px;
          top: 0px;
          border-radius: 6px 0 0 6px;
          border-right: 0;
      }

      .tab-icon .slice,
      .mobile-menu .close .slice {
          margin: 4.5px 1px;
          width: 2px;
          height: 80%;
          background: rgba(255, 255, 255, 0.4);
      }

      .tab-icon .slice {
          float: right;
      }

      .tab-icon .slice:first-child {
           margin-right: 4.5px;
      }

      .mobile-menu .close .slice {
          float: left;
      }
      .mobile-menu .close .slice:first-child {
           margin-left: 4.5px;
      }

      @media screen and (max-width: 32em) {
          .mobile-menu {
              font-size: 0.8em;
              width: 90%;
          }
      }
      @media screen and (max-width: 24em) {
          .mobile-menu {
              font-size: 0.65em;
              width: 90%;
          }
      }

     .disable-select {
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -khtml-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }

a {
    display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="title"><h1 id="gametitle">PuzzleScript Game</h1></div>
<div class="gameContainer">
<canvas 
    id="gameCanvas" ></canvas>
</div> 
<div class="footer">
<span id="errormessage" style="color:red;"></span>
<a id="homepagelink" href="https://www.puzzlescript.net" target="_blank">www.puzzlescript.net</a> <span id="separator">|</span> <a id="hacklink" href="#">hack</a>
</div>

<!--___SCRIPTINSERT___-->
<script src="js/storagewrapper.js"></script>
<script src="js/bitvec.js"></script>
<script src="js/level.js"></script>
<script src="js/globalVariables.js"></script>
<script src="js/debug_off.js"></script>
<script src="js/font.js"></script>
<script src="js/rng.js"></script>
<script src="js/riffwave.js"></script>
<script src="js/sfxr.js"></script>
<script src="js/codemirror/stringstream.js"></script>
<script src="js/colors.js"></script>
<script src="js/graphics.js"></script>
<script src="js/engine.js"></script>
<script src="js/parser.js"></script>
<script src="js/github.js"></script>
<script src="js/compiler.js"></script>
<script src="js/inputoutput.js"></script>
<script src="js/mobile.js"></script>
<script src="js/github.js"></script>

<script>

function displayError(message) {
	var errorText = document.getElementById("errormessage");
	errorText.innerHTML="ERROR "+message+"<br>";

}
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// be careful about modifying this (cf  // https://github.com/increpare/PuzzleScript/issues/829 )
function strip_http(url) {
   url = url.replace(/^https?:\/\//,'');
   return url;
}

function getData(){ 
	var id = getParameterByName("p").replace(/[\\\/]/,"");
	if (id===null||id.length===0) {
		displayError("No ID specified in URL.")
		return;
	}
	github_load(id, function(code, e) {
		if (e!==null) {
			displayError(e);
			return;
		}
		compile(["restart"],code);

		if (state.metadata.homepage!==undefined) {
			var homepage=state.metadata.homepage;
			var homepageLink = document.getElementById("homepagelink");
            if (id==="2fe3172d2b9fe684977d184f1b6226d5"){
                // https://github.com/increpare/PuzzleScript/issues/829
                // Supporting vulnerability on legacy grounds to enable Pushing It:
                // https://www.puzzlescript.net/play.html?p=2fe3172d2b9fe684977d184f1b6226d5
			    homepageLink.innerHTML=strip_http(homepage);
            } else {
                //sanitize tags from title   
                homepageLink.textContent=strip_http(homepage);
            }
			
 			if (!homepage.match(/^https?:\/\//)) {
 				homepage = "https://" + homepage;
 			}
 			homepageLink.href = homepage;
		}
		if (state.metadata.title!==undefined) {
			var title=state.metadata.title;
			var gametitle = document.getElementById("gametitle");
            gametitle.textContent=title;
			window.document.title=title+" - PuzzleScript Game";
		}
                
		var hacklink = document.getElementById("hacklink");

		var url = "editor.html?hack="+id;
		url=qualifyURL(url);

		hacklink.href=url;
	});
}

getData();

</script>


<div style = "z-index: 2; background: transparent; position: absolute; top: 0.5em; right: 1em;">
  <img alt="mute" id="muteButton" width=32px height=32px onClick="muteAudio()" style="display:none"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xOdTWsmQAAAIGSURBVFhH3ZchcsJAGIURiApEBbIH6BEqOQASWYHoESoQFcwgOAaiEsEBKip6BERlBQJRwQEqtu/tvj+TLMnAJpntTL+ZP/De7p/9k102YUCcc0tEbpbx4MHIAMcKQ2LM4ktmOCYH9gXIawXzQasLYGKnAphryErC53VJLiPvhNgjtog54tZ3bgDt7QpgTkyD/42Y+aQa2CG5APYvMdGnFTBC3COeEG8IY4M4uxtsSCqAfQ1ZhSdZATangdNCvhCVImheVQC6FFdKZHtkeQ8fB8QOsUCM5N0hPhBkQ8+gEQ5BXLUb+swSsu0cZXjFE/kswu7ElB6hCAeJS/isCDXZOcaIKeKdHvhBPKiN00F4l+zu1BaQtKkop1Ic5BCx8g3OfSJu5Fthj9LnBfB7Ckqzc/Dq1oihtA34LP0SpHuV7r0AYyXN6SC7SO+ley9gFpQ7SHNNkFifpP9fAcZaOvsUNC3ChbQtwq30eQGg88+QwLKNjRuS/e6toLl0bQGNsF+MmuwcdRuR7Ya2EfEJ6Z8JFOEQRK6tuHg8U4TDBdClr4eRn3uDRjhcCfsasgpPsgLs8uP4iBiryUMzqQDC/iXiFxJbA1zttg4IX9EqgxM2JBdAmBPT4Pf/SmYwr4y8PC+lBnMNWUn4vLbJBvNBtz8m4E//mtkGlK0IjhWG1Jj8EnRWMPhg8AvjeqPLyfe3igAAAABJRU5ErkJggg==" />
  <img alt="unmute" id="unMuteButton" width=32px height=32px onClick="unMuteAudio()" style="display:none" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTnU1rJkAAABqElEQVRYR72XW3LDMAwDc7QerTdPRWjBoW1aedXZGUYUAIlqP9LpLbjf77+jvs3vfvgUvkDMmiPHzGxg9HTXEjNjsB6A0Nar+MxYg+UPFoH5ccLCauE+3Wmqvke+Pk5YWAl3sJuXGiSx3wfSOsMsrKRm4i6DJJAEktB+L1YW1oG4xyAJJIGUSOsMs7A2xB0GSSAJpA3Sz8xgYYnh/8R5g+ZKFG6Q9yAQ9dS3JEcEkkBqkb8K2X8EcYEkkE5RxkH6rkz7VT10uu3wwcbrcOipB+hEg62ZmlR9hbL1wEkJndgRMpVgif1+j3yH6LsSOtGALZAE0rUPwBJICfJ1D0A2ylamfDxXke8QfVfCGdak6pXpNkZBvkP0XeUl3hvkFiKfP8CwT5BPIfavD0iQBNJhEPJnDzCjr6Q31sMfI4P0/gPM6BP20ivTnSClxrZFvkP0WQ4YCQuImfzNYLfId4i+VqL0ExDfgNUi3yF6V6LkC3AsQW6R7xB9rZeHmzhrkFrkO0R/qHcZZ4Plv3sROARHv1mvImbG4GxixbucmDVHMjOauf8qY/jt9gdOODPsYZA1BAAAAABJRU5ErkJggg==" />
</div>

</body>
</html>