github/kubeinvaders
1
0
Fork 0
mirror of https://github.com/lucky-sideburn/kubeinvaders.git synced 2026-08-23 21:46:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added zoom in out

Browse Source
This commit is contained in:
Eugenio Marzo
2021-10-02 16:30:48 +02:00
parent e2b9e0b826
commit abe9a2d33f
3 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html5/css/dashboard.css
-1
View File
@@ -7,7 +7,6 @@ body {
padding-top: 50px;
}
/*
* Global add-ons
*/
html5/index.html
+31 -2
View File
@@ -98,7 +98,7 @@
</div>
</div>
<div class="container" style="width: 50%;">
<div class="container" id="gameContainer" style="width: 50%; height: 50%;">
<div class="starter-template">
<div class="container" style="margin-bottom: 2%;">
<div class="row" style="margin-top: 2%;">
@@ -118,12 +118,24 @@
<div class="row">
<canvas id="myCanvas" width="720" height="480"></canvas>
</div>
<div class="row">
<div class="col text-center">
</div>
<div class="col text-center">
<input type="button" style="margin-top: 2%" class="btn btn-dark" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
<input type="button" style="margin-top: 2%" class="btn btn-dark" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
</div>
<div class="col text-center">
</div>
</div>
</div>
<div id="alert_placeholder" style="margin-top: 3%;"></div>
</div>
<div id="footer" style="margin-top: 5%;">
<div class="container text-center">
<p class="text-muted credit" style="color:#fff">kubeinvaders_version: v1.9</p>
<p class="text-muted credit" style="color:#fff">kubeinvaders_version: develop</p>
</div>
</div>
@@ -139,6 +151,23 @@
randomFactor = $("#randomFactorInput").val();
$("#currentRandomFactor").text(randomFactor);
}
function zoomIn() {
document.getElementById("gameContainer").style.width = "100%"
document.getElementById("gameContainer").style.height = "100%";
document.getElementById("zoomInGameScreenInput").disabled = true;
document.getElementById("zoomOutGameScreenInput").disabled = false;
}
function zoomOut() {
var gameContainerWidth = document.getElementById("gameContainer").style.width;
var gameContainerHeight = document.getElementById("gameContainer").style.height;
document.getElementById("gameContainer").style.width = "50%"
document.getElementById("gameContainer").style.height = "50%"
document.getElementById("zoomInGameScreenInput").disabled = false;
document.getElementById("zoomOutGameScreenInput").disabled = true;
}
function controlAutoPilot() {
if (autoPilot) {
autoPilot = false;
html5/kubeinvaders.js
+11 -9
View File
@@ -77,6 +77,8 @@ var help = false;
var chaos_nodes = true;
var chaos_pods = true;
var alert_div = '<div id="alert_placeholder" style="margin-top: 2%; background-color:#000000; color: #0cf52b" class="alert" role="alert">';
function IsJsonString(str) {
try {
JSON.parse(str);
@@ -181,7 +183,7 @@ function startChaosNode(node_name) {
oReq.onload = function () {
//console.log(JSON.parse(this.responseText))
};;
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Start Chaos Job on ' + node_name + '</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Start Chaos Job on ' + node_name + '</div>');
oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/kube/chaos/nodes?nodename=" + node_name + "&namespace=" + namespace);
oReq.send();
}
@@ -191,7 +193,7 @@ function deletePods(pod_name) {
oReq.onload = function () {
//console.log(JSON.parse(this.responseText))
};;
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Kill ' + pod_name + '</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Kill ' + pod_name + '</div>');
oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/kube/pods?action=delete&pod_name=" + pod_name + "&namespace=" + namespace);
oReq.send();
}
@@ -269,13 +271,13 @@ function keyDownHandler(e) {
else if(e.keyCode == 83) {
if (shuffle) {
shuffle = false;
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Disable shuffle</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Disable shuffle</div>');
//console.log("Deactivate shuffle");
}
else {
shuffle = true
//console.log("Activate shuffle");
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Enable shuffle</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Enable shuffle</div>');
}
}
else if(e.keyCode == 32) {
@@ -291,7 +293,7 @@ function keyDownHandler(e) {
namespaces_index = 0;
}
namespace = namespaces[namespaces_index];
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" style="margin-top: 3%;" role="alert">Latest action: Change target namespace to ' + namespace + '</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Change target namespace to ' + namespace + '</div>');
aliens = [];
pods = [];
}
@@ -306,22 +308,22 @@ function keyDownHandler(e) {
else if(e.keyCode == 67) {
if (chaos_nodes) {
chaos_nodes = false;
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Hide nodes</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Hide nodes</div>');
}
else {
chaos_nodes = true
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Show nodes</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Show nodes</div>');
}
}
else if(e.keyCode == 80) {
if (chaos_pods) {
chaos_pods = false;
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Hide pods</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Hide pods</div>');
}
else {
chaos_pods = true
$('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Show pods</div>');
$('#alert_placeholder').replaceWith(alert_div + 'Latest action: Show pods</div>');
}
}
}