✨ Play on emulator (powered by Project ABE)

obono · Aug 8, 2019 · 521304e · 521304e
1 parent 93abb59
commit 521304e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -52,6 +52,39 @@ div.item_actions {
 div.item_actions a img {
 	width: 16px;
 	height: 16px;
+	cursor: pointer;
+}
+
+div#emulator_base {
+	position: fixed;
+	background-color: #0009;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: none;
+	overflow: auto;
+}
+
+div#emulator_area {
+	position: absolute;
+	background-color: #999;
+	width: 272px;
+	height: 224px;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+	font-size: small;
+	text-align: center;
+}
+
+div#emulator_area iframe {
+	width: 256px;
+	height: 128px;
+	border: none;
+	margin: 8px;
 }
 
 input#text_url {

diff --git a/docs/img/act_em.gif b/docs/img/act_em.gif
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ja">
+<html lang="en">
 
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -19,8 +19,9 @@
 			<span class="item_title"></span>
 			<div class="item_info"></div>
 			<div class="item_actions">
-				<a class="item_link_binary"><img src="img/act_dl.gif" alt="download"></a>
-				<a class="item_link_arduboy"><img src="img/act_tr.gif" alt="transfer"></a>
+				<a class="item_link_play"><img src="img/act_em.gif" title="Play on emulator" alt="Play"></a>
+				<a class="item_link_binary"><img src="img/act_dl.gif" title="Download HEX file" alt="Download"></a>
+				<a class="item_link_arduboy"><img src="img/act_tr.gif" title="Transfer to the device" alt="Transfer"></a>
 			</div>
 		</div>
 	</template>
@@ -39,6 +40,13 @@ <h1 id="header">Arduboy&trade; Repository Viewer</h1>
 		<input id="text_url" type="text" placeholder="(Enter URL)">
 		<input id="button_get" type="submit" value="Get">
 	</p>
+	<div id="emulator_base">
+		<div id="emulator_area">
+			<br>[D-pad] arrows, [A] a/z, [B] s/x,<br>
+			Powered by <a href="https://felipemanga.github.io/ProjectABE/" target="_blank">Project ABE</a><br>
+			<input type="button" onClick="shutdownEmulator();" value="close">
+		</div>
+	</div>
 	<script>
 		setElements();
 		window.onresize = switchStyle;

diff --git a/docs/js/script.js b/docs/js/script.js
@@ -3,6 +3,8 @@ var elmDivResult;
 var elmInputUrl;
 var elmItemTemplate;
 var elmStyleList;
+var elmDivEmulatorBase;
+var elmDivEmulatorArea;
 
 function $(id) {
 	return document.getElementById(id);
@@ -14,6 +16,8 @@ function setElements() {
 	elmInputUrl = $("text_url");
 	elmItemTemplate = $("item_template");
 	elmStyleList = $("style_list");
+	elmDivEmulatorBase = $("emulator_base");
+	elmDivEmulatorArea = $("emulator_area");
 }
 
 function switchStyle(isForce = false) {
@@ -99,6 +103,7 @@ function appendItem(item) {
 		var elmItem = document.importNode(elmItemTemplate.content, true);
 		elmItem.querySelector(".item_image").src = imageUrl;
 		elmItem.querySelector(".item_title").innerHTML = title;
+		elmItem.querySelector(".item_link_play").onclick = function() { launchEmulator(binaryUrl); }
 		elmItem.querySelector(".item_link_binary").href = binaryUrl;
 		elmItem.querySelector(".item_link_arduboy").href = "arduboy:" + binaryUrl;
 		var elmItemInfo = elmItem.querySelector(".item_info");
@@ -123,3 +128,15 @@ function escapeHTML(html) {
 	elmTmp.appendChild(document.createTextNode(html));
 	return elmTmp.innerHTML;
 }
+
+function launchEmulator(url) {
+	elmEmulator = document.createElement("iframe");
+	elmEmulator.src = "https://felipemanga.github.io/ProjectABE/?url=" + url + "&skin=BareFit&color=FFFFFF";
+	elmDivEmulatorArea.insertBefore(elmEmulator, elmDivEmulatorArea.firstChild);
+	elmDivEmulatorBase.style.display = "block";
+}
+
+function shutdownEmulator() {
+	elmDivEmulatorArea.removeChild(elmDivEmulatorArea.firstChild);
+	elmDivEmulatorBase.style.display = "none";
+}