mirror of
https://github.com/simon987/Much-Assembly-Required-Frontend.git
synced 2025-04-19 02:36:41 +00:00
Merge ce93d1d68b1ef8842005998bc37d1ddaa377e6fd into 22c64110e98ba57eddde5287796977f1ed1684b2
This commit is contained in:
Danil Krivonos
GitHub
commit
450b89b708
35
game.php
35
game.php
@ -94,23 +94,6 @@ if (isset($user)) {
|
||||
#gameBtns {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#console {
|
||||
font-family: fixedsys, monospace;
|
||||
font-size: 24pt;
|
||||
line-height: 21px;
|
||||
resize: none;
|
||||
overflow-y: scroll;
|
||||
width: 680px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
#consoleContainer {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -274,11 +257,21 @@ if (isset($user)) {
|
||||
|
||||
|
||||
<!-- Console-->
|
||||
<div id="consoleContainer">
|
||||
<textarea id="console" readonly title="console"></textarea>
|
||||
|
||||
<a class="button" style="vertical-align: top"
|
||||
onclick="document.getElementById('console').innerHTML=''">Clear</a>
|
||||
<div id="console_ui">
|
||||
<div id="console_holder">
|
||||
<div id="console_scrollable">
|
||||
</div>
|
||||
</div>
|
||||
<div id="console_buttons">
|
||||
<button id="console_clear">CLR</button>
|
||||
<label class="checkbox_container">
|
||||
<input type="checkbox" checked id="console_autoscroll">
|
||||
<span>SCRL</span>
|
||||
</label>
|
||||
<button id="console_font_plus">+</button>
|
||||
<button id="console_font_minus">-</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php } ?>
|
||||
|
||||
91
mar/game.css
91
mar/game.css
@ -42,3 +42,94 @@
|
||||
background-position: 2px center;
|
||||
}
|
||||
|
||||
#console_ui {
|
||||
display: flex;
|
||||
background-color: gray;
|
||||
width: 90ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: content-box;
|
||||
height: 9.5em;
|
||||
|
||||
color: white;
|
||||
font-family: fixedsys, monospace;
|
||||
font-size: 1em;
|
||||
line-height: normal;
|
||||
border-top-width: 0.25em;
|
||||
border-bottom-width: 0.25em;
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
#console_holder {
|
||||
box-sizing: content-box;
|
||||
width: 81ch;
|
||||
height: 9em;
|
||||
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
border-bottom-width: 0.25em;
|
||||
border-top-width: 0.25em;
|
||||
border-left-width: 0.5ch;
|
||||
border-right-width: 0.5ch;
|
||||
}
|
||||
|
||||
#console_scrollable {
|
||||
box-sizing: content-box;
|
||||
|
||||
padding-left: 0.5ch;
|
||||
padding-right: 0.5ch;
|
||||
}
|
||||
|
||||
.console_line {
|
||||
box-sizing: content-box;
|
||||
|
||||
width: 80ch;
|
||||
height: 1em;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
|
||||
margin: 0;
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
|
||||
#console_buttons {
|
||||
width: 8ch;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#console_buttons button, #console_buttons .checkbox_container {
|
||||
font-weight: normal;
|
||||
background-color: #8C5050;
|
||||
border: none;
|
||||
border-radius: 0 0 0 0;
|
||||
color: white;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.checkbox_container input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox_container span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox_container input:checked ~ span {
|
||||
background-color: #508C50;
|
||||
}
|
||||
|
||||
@ -917,6 +917,116 @@ function floppyListener(message) {
|
||||
saveAs(blob, "floppy.bin");
|
||||
}
|
||||
|
||||
var terminal = {}
|
||||
terminal.autoscroll = true;
|
||||
terminal.scroll = 0;
|
||||
terminal.lines = 0;
|
||||
terminal.length = 80;
|
||||
terminal.height = 8;
|
||||
terminal.fontsize = 10; // In tenths of em
|
||||
|
||||
terminal.scroll_update = function() {
|
||||
var old = terminal.scroll;
|
||||
terminal.scroll = Math.max(Math.min(
|
||||
Math.max(terminal.scroll, 0),
|
||||
terminal.elem.childElementCount - terminal.height
|
||||
), 0);
|
||||
terminal.elem.style.marginTop = (terminal.scroll * -1.1) + "em";
|
||||
return terminal.scroll - old; // Actually it is always 0 on successful scroll. On edges it's +-1
|
||||
}
|
||||
|
||||
terminal.scroll_handler = function(wheel_event) {
|
||||
terminal.scroll += (Math.abs(wheel_event.deltaY) / wheel_event.deltaY);
|
||||
if (terminal.scroll_update() == 0) {
|
||||
wheel_event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
terminal.add_line = function(text) {
|
||||
var child = document.createElement("div");
|
||||
child.id = "line_" + (terminal.lines + 1);
|
||||
child.className = "console_line";
|
||||
if (text === undefined) {
|
||||
text = "";
|
||||
}
|
||||
child.textContent = text;
|
||||
|
||||
terminal.elem.appendChild(child);
|
||||
terminal.lines += 1;
|
||||
terminal.last_line = child;
|
||||
if (terminal.autoscroll && terminal.lines > terminal.height) {
|
||||
terminal.scroll += 1;
|
||||
terminal.scroll_update();
|
||||
}
|
||||
}
|
||||
|
||||
function split_by_length(array, length) {
|
||||
var new_array = [];
|
||||
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
// Adjust 80 to desired terminal width!
|
||||
// Because making it atuomatically follow the terminal.width is too
|
||||
// much work. Seriously, look at "variables in js regexp" in Google.
|
||||
var m = array[i].match(/.{1,80}/g);
|
||||
new_array = new_array.concat(m);
|
||||
}
|
||||
|
||||
delete(array);
|
||||
return new_array;
|
||||
}
|
||||
|
||||
terminal.add_text = function(text) {
|
||||
if (text.indexOf("\0") != -1) {
|
||||
text = text.substring(0, text.indexOf("\0"));
|
||||
}
|
||||
// Console just got cleaned or it's freshly started
|
||||
if (terminal.lines == 0) {
|
||||
terminal.add_line();
|
||||
}
|
||||
|
||||
var lines = text.split("\n");
|
||||
lines[0] = terminal.last_line.textContent + lines[0];
|
||||
lines = split_by_length(lines, 80);
|
||||
|
||||
terminal.last_line.textContent = lines[0];
|
||||
|
||||
// Handle further lines IF they exist
|
||||
if (lines.length > 1) {
|
||||
for (var i = 1; i < lines.length; i++) {
|
||||
terminal.add_line(lines[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
terminal.clear = function() {
|
||||
var new_elem = terminal.elem.cloneNode(false);
|
||||
terminal.holder.replaceChild(new_elem, terminal.elem);
|
||||
terminal.elem = new_elem;
|
||||
terminal.lines = 0;
|
||||
terminal.scroll = 0;
|
||||
terminal.scroll_update();
|
||||
}
|
||||
|
||||
window.addEventListener("load", function(){
|
||||
terminal.ui = document.getElementById("console_ui");
|
||||
terminal.holder = document.getElementById("console_holder");
|
||||
terminal.elem = document.getElementById("console_scrollable");
|
||||
terminal.lines = terminal.elem.childElementCount;
|
||||
terminal.holder.addEventListener("wheel", terminal.scroll_handler);
|
||||
|
||||
terminal.autoscroll_checkbox = document.getElementById("console_autoscroll");
|
||||
terminal.autoscroll_checkbox.addEventListener("change", function() {
|
||||
terminal.autoscroll = terminal.autoscroll_checkbox.checked;
|
||||
});
|
||||
|
||||
document.getElementById("console_clear").addEventListener("click", terminal.clear);
|
||||
document.getElementById("console_font_plus").addEventListener("click", function() {
|
||||
terminal.ui.style.fontSize = (++terminal.fontsize)/10 + "em";
|
||||
});
|
||||
document.getElementById("console_font_minus").addEventListener("click", function() {
|
||||
terminal.ui.style.fontSize = (--terminal.fontsize)/10 + "em";
|
||||
});
|
||||
});
|
||||
|
||||
function tickListener(message) {
|
||||
if (message.t === "tick") {
|
||||
@ -932,49 +1042,14 @@ function tickListener(message) {
|
||||
var myConsole = document.getElementById('console');
|
||||
|
||||
if (message.cm === 0) {
|
||||
//Clear command was sent
|
||||
myConsole.innerHTML = "";
|
||||
mar.lastLines = "";
|
||||
terminal.clear();
|
||||
}
|
||||
|
||||
//Update console
|
||||
if (message.c !== undefined) {
|
||||
var str = mar.lastLines;
|
||||
|
||||
for (var i = 0; i < message.c.length; i++) {
|
||||
|
||||
str += message.c[i];
|
||||
terminal.add_text(message.c[i]);
|
||||
}
|
||||
|
||||
//Limit lines to 40 chars
|
||||
myConsole.innerHTML = "";
|
||||
var tmpBuffer = "";
|
||||
var lines = str.split("\n");
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
|
||||
if (lines[i].length >= 40) {
|
||||
|
||||
//Split the line...
|
||||
var subLines = lines[i].match(/.{1,40}/g);
|
||||
|
||||
for (var j = 0; j < subLines.length; j++) {
|
||||
|
||||
//Don't put a newline at the end
|
||||
if (j !== subLines.length - 1) {
|
||||
tmpBuffer += "\n";
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
tmpBuffer += lines[i] + "\n";
|
||||
}
|
||||
}
|
||||
|
||||
myConsole.innerHTML = tmpBuffer;
|
||||
mar.lastLines = str;
|
||||
|
||||
//Autoscroll
|
||||
myConsole.scrollTop = myConsole.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user