HorizonCode/TheWebPlaysGB
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

inital commit

Browse Source
This commit is contained in:
HorizonCode
2022-08-11 14:16:02 +02:00
commit 06855542a1
4 changed files with 197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
html/gb.html Normal file
View File

@@ -0,0 +1,112 @@
<style>
.button {
cursor: pointer;
}
</style>
<body>
<ul id='messages'></ul>
</body>
<body style="background-color: #121212">
<div>
<img id="image" src="http://localhost:3000/image" width="700" style="display: block; margin: auto;" />
<br>
<div style="position: absolute; left: 50%; transform: translate(-50%, 0);">
<a id="UP" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/up.png" width="35" />
</a>
<br>
<a id="LEFT" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/left.png" width="35" />
</a>
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<a id="RIGHT" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/right.png" width="35" />
</a>
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<a id="B" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/B.png" width="35" />
</a>
<a id="A" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/A.png" width="35" />
</a>
<br>
<a id="DOWN" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/down.png" width="35" />
</a>
<br>
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
<a id="SELECT" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/select.png" height="35" />
</a>
<a id="START" class="button">
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/start.png" height="35" />
</a>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
<script>
$(document).ready(function() {
function updateImage() {
toDataURL('http://localhost:3000/image', function(dataUrl) {
$('#image').attr('src', dataUrl);
updateImage();
});
}
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
updateImage();
const controls = ["UP", "DOWN", "LEFT", "RIGHT", "A", "B", "SELECT", "START"];
const keyboard_key = {
"UP": "ArrowUp",
"DOWN": "ArrowDown",
"LEFT": "ArrowLeft",
"RIGHT": "ArrowRight",
"A": "Enter",
"B": "Return",
"SELECT": "KeyS",
"START": "KeyP"
};
$("body").keypress(function(key) {
console.log("key pressed: " + key);
});
for (const key in controls) {
const control = controls[key];
$("#" + control).click(() => {
console.log("click " + control);
var settings = {
"url": "http://localhost:3000/control?button=" + control,
"method": "GET",
"timeout": 0,
};
$.ajax(settings).done(function(response) {});
})
}
});
</script>