simon987/Much-Assembly-Required
1
0
Fork 0
mirror of https://github.com/simon987/Much-Assembly-Required.git synced 2025-04-18 18:26:42 +00:00
Code Issues Projects Releases Wiki Activity

Reorganised css files, some work on the home page design, console screen is now in a resizable panel

Browse Source
This commit is contained in:
simon 2018-04-29 11:17:54 -04:00
parent e025b6d2da
commit 315e33055e
22 changed files with 379 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Server/src/main/java/net/simon987/server/web/WebServer.java
View File

@ -2,6 +2,7 @@ package net.simon987.server.web;
import net.simon987.server.ServerConfiguration;
import net.simon987.server.logging.LogManager;
import net.simon987.server.websocket.FloppyUploadRoute;
import net.simon987.server.websocket.SocketServer;
import org.apache.velocity.app.VelocityEngine;
import spark.Spark;
@ -47,6 +48,7 @@ public class WebServer {
Spark.get("/logout", new LogoutRoute());
Spark.post("/change_password", new ChangePasswordRoute());
Spark.get("/server_info", new ServerInfoRoute());
Spark.post("/floppy_upload", new FloppyUploadRoute());
Spark.after((request, response) -> response.header("Content-Encoding", "gzip"));
}

37
Server/src/main/java/net/simon987/server/websocket/FloppyUploadRoute.java Normal file
View File

@ -0,0 +1,37 @@
package net.simon987.server.websocket;
import spark.Request;
import spark.Response;
import spark.Route;
import javax.servlet.MultipartConfigElement;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.InputStream;
public class FloppyUploadRoute implements Route {
@Override
public Object handle(Request request, Response response) {
try {
request.attribute("org.eclipse.jetty.multipartConfig",
new MultipartConfigElement("/tmp_floppy", 1474560L, -1L, 0));
try (InputStream is = request.raw().getPart("floppyData").getInputStream()) {
System.out.println(is.available());
// Use the input stream to create a file
} catch (IOException | ServletException e) {
e.printStackTrace();
}
} catch (IllegalStateException e) {
System.out.println(e.getMessage());
return "File exceeds maximum size";
}
return "mh";
}
}

15
Server/src/main/resources/config.properties
View File

@ -1,15 +1,16 @@
# File management
save_interval=5
save_interval=30
log_limit=2000000
log_count=10
#ssl
use_ssl=1
log_count=1
#SSL
use_ssl=0
keyStore_path=certificates/keystore.jks
keyStore_password=mar
keyStore_password=
#Server
mar_port=4567
mar_address=localhost
server_name=Official MAR server
#Database
mongo_dbname=mar_beta
#Biomass
@ -21,6 +22,7 @@ maxBiomassRespawnCount=6
biomassEnergyValue=4000
biomassRespawnTime=64
biomassRespawnThreshold=1
#World generation
wg_centerPointCountMin=5
wg_centerPointCountMax=15
@ -60,10 +62,11 @@ harvester_regen=5
harvester_biomass_drop_count=8
#Vaults
vault_door_open_time=4
electric_box_hp=250
min_electric_box_count=1
min_electric_box_respawn_count=1
max_electric_box_respawn_count=4
#ElectricBox
electric_box_hp=250
electric_box_respawnTime=256
electric_box_damage=5
electric_box_energy_given=70

6
Server/src/main/resources/static/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

127
Server/src/main/resources/static/css/console.css
View File

@ -1,127 +0,0 @@
#console-wrapper {
height: 400px;
width: 100%;
position: relative;
line-height: 1.2;
display: inline-block;
margin: 1em 0 0 0;
z-index: 1;
}
.piece {
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.noclick {
pointer-events: none;
}
#consoleText {
font-family: fixedsys;
font-size: 24px;
white-space: pre-wrap;
-webkit-animation: crt-output 10ms infinite;
animation: crt-output 10ms infinite;
overflow-y: scroll;
position: absolute;
padding: 3rem 2rem;
pointer-events: auto;
text-align: left;
text-shadow: 0 0.2rem 1rem #0c7b46;
border-radius: 2rem;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
z-index: -1;
}
#consoleText::-webkit-scrollbar {
display: none;
}
@-webkit-keyframes crt-output {
0% {
opacity: 0.95;
}
50% {
opacity: 1;
}
}
@keyframes crt-output {
0% {
opacity: 0.95;
}
50% {
opacity: 1;
}
}
.scanlines {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6));
background-size: 100% 0.3rem;
border-radius: 2rem;
position: absolute;
}
.glow {
-webkit-animation: crt-glow 20s infinite;
animation: crt-glow 20s infinite;
background: radial-gradient(circle at 50% 50%, #1bd459 0%, rgba(27, 212, 89, 0.88) 58%, rgba(21, 235, 92, 0.57) 80%, rgba(19, 94, 29, 0.27) 93%, rgba(10, 23, 12, 0) 100%);
opacity: 0.15;
pointer-events: none;
position: relative;
}
@-webkit-keyframes crt-glow {
0% {
opacity: 0.1;
}
50% {
opacity: 0.2;
}
}
@keyframes crt-glow {
0% {
opacity: 0.1;
}
50% {
opacity: 0.2;
}
}
.ctr-selection::-moz-selection {
background-color: #14fdce;
color: #031e11;
}
.ctr-selection::selection {
background-color: #14fdce;
color: #031e11;
}
.ctr-selection-inverted::-moz-selection {
background-color: #031e11;
color: #14fdce;
}
.ctr-selection-inverted::selection {
background-color: #031e11;
color: #14fdce;
}
.ctr-text {
color: #14fdce;
background-color: #031e11;
}
.ctr-text-inverted {
color: #031e11;
background-color: #14fdce;
}

187
Server/src/main/resources/static/css/mar.css
View File

@ -1,9 +1,190 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/webfonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/webfonts/MaterialIcons-Regular.woff) format('woff'),
url(/webfonts/MaterialIcons-Regular.ttf) format('truetype');
}
.mi {
font-family: 'Material Icons', serif;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: bottom;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
/* Console */
.console-wrapper {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
}
.piece {
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.noclick {
pointer-events: none;
}
#consoleText {
font-family: fixedsys, monospace;
font-size: 24px;
white-space: pre;
overflow-y: scroll;
position: absolute;
padding: 0.5em 1em;
pointer-events: auto;
text-align: left;
text-shadow: 0 0.2rem 1rem #0c7b46;
z-index: -1;
left: 60px;
right: 0;
width: 100%;
height: 100%;
}
.scanlines {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6));
background-size: 100% 0.3rem;
position: absolute;
left: 60px;
}
.ctr-selection::-moz-selection {
background-color: #14fdce;
color: #031e11;
}
.ctr-selection::selection {
background-color: #14fdce;
color: #031e11;
}
.ctr-selection-inverted::-moz-selection {
background-color: #031e11;
color: #14fdce;
}
.ctr-selection-inverted::selection {
background-color: #031e11;
color: #14fdce;
}
.ctr-text {
color: #14fdce;
background-color: #1D1F21;
}
.ctr-text-inverted {
color: #031e11;
background-color: #14fdce;
}
.bottom-panel {
min-height: 18px;
height: 235px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.splitter-horizontal {
height: 18px;
background: url(/images/hsizegrip.png) center center no-repeat #714cdf;
cursor: row-resize;
border-bottom: solid 1px #151623;
}
.console-side-bar {
width: 60px;
padding: 8px 4px;
position: absolute;
bottom: 0;
left: 0;
background: #2d2d2d;
height: 100%;
pointer-events: auto;
box-shadow: rgb(0, 0, 0, 0.2) 3px 0 8px;
}
.bottom-panel {
min-height: 18px;
height: 235px;
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.splitter-horizontal {
height: 18px;
background: url(/images/hsizegrip.png) center center no-repeat #714cdf;
cursor: row-resize;
border-bottom: solid 1px #151623;
}
/* Misc */
.feature-image {
width: 100%;
height: 100%;
border-radius: 10px 10px 0 0;
}
/* Grow
* https://ianlunn.co.uk/store/licenses/personal/
*/
.hvr-grow {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.1);
}
.footer {
bottom: 0;
width: 100%;
@ -36,12 +217,16 @@
}
}
.dropdown-header {
color: #aaadc7;
}
.container {
margin-top: 1em;
}
#editor {
margin: 1em 0 1em 1em;
margin: 1em 0 1em 0;
height: 35em;
box-shadow: rgba(46, 94, 80, 0.45) 0 0 2ex;
}

36
Server/src/main/resources/static/css/material-icons.css
View File

@ -1,36 +0,0 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/webfonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/webfonts/MaterialIcons-Regular.woff) format('woff'),
url(/webfonts/MaterialIcons-Regular.ttf) format('truetype');
}
.mi {
font-family: 'Material Icons', serif;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: bottom;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

BIN
Server/src/main/resources/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Server/src/main/resources/static/images/hsizegrip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 B

BIN
Server/src/main/resources/static/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

58
Server/src/main/resources/static/js/editor.js
View File

@ -403,12 +403,9 @@ function tabWorldClick() {
document.getElementById("tab-world-sm").classList.add("active");
document.getElementById("tab-editor").classList.remove("active");
document.getElementById("tab-editor-sm").classList.remove("active");
document.getElementById("tab-console").classList.remove("active");
document.getElementById("tab-console-sm").classList.remove("active");
document.getElementById("world-tab").setAttribute("style", "");
document.getElementById("editor-tab").setAttribute("style", "display: none");
document.getElementById("console-tab").setAttribute("style", "display: none");
}
function tabEditorClick() {
@ -416,25 +413,9 @@ function tabEditorClick() {
document.getElementById("tab-world-sm").classList.remove("active");
document.getElementById("tab-editor").classList.add("active");
document.getElementById("tab-editor-sm").classList.add("active");
document.getElementById("tab-console").classList.remove("active");
document.getElementById("tab-console-sm").classList.remove("active");
document.getElementById("world-tab").setAttribute("style", "display: none");
document.getElementById("editor-tab").setAttribute("style", "");
document.getElementById("console-tab").setAttribute("style", "display: none");
}
function tabConsoleClick() {
document.getElementById("tab-world").classList.remove("active");
document.getElementById("tab-world-sm").classList.remove("active");
document.getElementById("tab-editor").classList.remove("active");
document.getElementById("tab-editor-sm").classList.remove("active");
document.getElementById("tab-console").classList.add("active");
document.getElementById("tab-console-sm").classList.add("active");
document.getElementById("world-tab").setAttribute("style", "display: none");
document.getElementById("editor-tab").setAttribute("style", "display: none");
document.getElementById("console-tab").setAttribute("style", "");
}
//-----
@ -463,7 +444,7 @@ var editorThemeOptions = {
"theme/tomorrow_night_blue", "theme/tomorrow_night_bright", "theme/tomorrow_night_eighties",
"theme/tomorrow_night", "theme/twilight", "theme/vibrant_ink", "theme/xcode"
],
defaultTheme: "theme/tomorrow_night_eighties"
defaultTheme: "theme/tomorrow_night"
};
//Get the stored default theme
@ -520,6 +501,43 @@ editorThemeOptions.available.forEach(function (theme) {
//Manually call handler once
editorOnThemeChange();
//------ Floppy upload form code ------------------
document.getElementById("floppyIn").onchange = function () {
//document.getElementById("floppyUp").innerHTML = "<i class=\"fa fa-cog fa-spin fa-fw\" aria-hidden=\"true\"></i>";
var formData = new FormData(document.getElementById("floppyForm"));
formData.append("floppyData", document.getElementById("floppyIn").files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/floppy_upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
if (xhr.responseText === "ok") {
//Upload ok, notify the game server
mar.client.notifyFloppyUp();
alert("Uploaded floppy disk to the drive!")
} else {
alert(xhr.responseText)
}
} else {
alert("Couldn't upload floppy code (" + xhr.status + ")");
}
document.getElementById("floppyUp").innerHTML = "<i class=\"fa fa-long-arrow-up\" aria-hidden=\"true\"></i> <i class=\"fa fa-floppy-o\" aria-hidden=\"true\"></i>";
};
xhr.onerror = function (ev) {
ev.preventDefault();
alert("Couldn't upload floppy code: File is too large");
};
xhr.send(formData);
};
editor.getSession().setMode("ace/mode/mar");
editor.setFontSize(16);
editor.setDisplayIndentGuides(false);

1
Server/src/main/resources/static/js/jquery-resizable.min.js vendored Normal file
View File

@ -0,0 +1 @@
!function(e,t){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e(require("jquery")):e(jQuery)}(function(e,t){e.fn.resizable||(e.fn.resizable=function(t){var n={handleSelector:null,resizeWidth:!0,resizeHeight:!0,resizeWidthFrom:"right",resizeHeightFrom:"bottom",onDragStart:null,onDragEnd:null,onDrag:null,touchActionNone:!0,instanceId:null};return"object"==typeof t&&(n=e.extend(n,t)),this.each(function(){function o(e){e.stopPropagation(),e.preventDefault()}function i(t){t.preventDefault&&t.preventDefault(),d=c(t),d.width=parseInt(f.width(),10),d.height=parseInt(f.height(),10),h=f.css("transition"),f.css("transition","none"),u.onDragStart&&u.onDragStart(t,f,u)===!1||(e(document).on("mousemove."+u.instanceId,r),e(document).on("mouseup."+u.instanceId,a),(window.Touch||navigator.maxTouchPoints)&&(e(document).on("touchmove."+u.instanceId,r),e(document).on("touchend."+u.instanceId,a)),e(document).on("selectstart."+u.instanceId,o))}function r(e){var t,n,o=c(e);t="left"===u.resizeWidthFrom?d.width-o.x+d.x:d.width+o.x-d.x,n="top"===u.resizeHeightFrom?d.height-o.y+d.y:d.height+o.y-d.y,u.onDrag&&u.onDrag(e,f,t,n,u)===!1||(u.resizeHeight&&f.height(n),u.resizeWidth&&f.width(t))}function a(t){return t.stopPropagation(),t.preventDefault(),e(document).off("mousemove."+u.instanceId),e(document).off("mouseup."+u.instanceId),(window.Touch||navigator.maxTouchPoints)&&(e(document).off("touchmove."+u.instanceId),e(document).off("touchend."+u.instanceId)),e(document).off("selectstart."+u.instanceId,o),f.css("transition",h),u.onDragEnd&&u.onDragEnd(t,f,u),!1}function c(e){var t={x:0,y:0,width:0,height:0};if("number"==typeof e.clientX)t.x=e.clientX,t.y=e.clientY;else{if(!e.originalEvent.touches)return null;t.x=e.originalEvent.touches[0].clientX,t.y=e.originalEvent.touches[0].clientY}return t}function s(e,t){return e&&">"===e.trim()[0]?(e=e.trim().replace(/^>\s*/,""),t.find(e)):e?t.parent().find(e):t}var u=e.extend({},n);u.instanceId||(u.instanceId="rsz_"+(new Date).getTime());var d,h,l,f=e(this);if("destroy"===t){if(u=f.data("resizable"),!u)return;return l=s(u.handleSelector,f),l.off("mousedown."+u.instanceId+" touchstart."+u.instanceId),u.touchActionNone&&l.css("touch-action",""),void f.removeClass("resizable")}f.data("resizable",u),l=s(u.handleSelector,f),u.touchActionNone&&l.css("touch-action","none"),f.addClass("resizable"),l.on("mousedown."+u.instanceId+" touchstart."+u.instanceId,i)})})});

32
Server/src/main/resources/static/js/mar.js
View File

@ -632,7 +632,7 @@ var GameClient = (function () {
function GameClient() {
this.listeners = [];
this.getServerInfo();
this.consoleScreen = new PlainTextConsole(defaultText, "consoleText", "colorButton", "scrollButton", "resetButton", "widthDial");
this.consoleScreen = new PlainTextConsole(defaultText, "consoleText", "colorButton", "scrollButton", "resetButton");
}
GameClient.prototype.requestUserInfo = function () {
if (DEBUG) {
@ -1743,9 +1743,9 @@ var defaultText = " _______ __ __\n" +
"|___|___|| __|___._|____||__|__||__||____|_____|__| | __|\n" +
" |__| |__|\n" +
"\n" +
"Version 1.4A, 1985-05-17\n" +
"Version 1.5A, 1985-05-17\n" +
"Initialising Universal Communication Port connection...Done\n" +
"Current date is 2790-03-11\n" +
"Current date is 2790-04-28\n" +
"Cubot Status: Much Assembly Required";
var ConsoleMode;
(function (ConsoleMode) {
@ -1760,16 +1760,15 @@ var PlainTextConsoleMode = (function () {
return PlainTextConsoleMode;
}());
var PlainTextConsole = (function () {
function PlainTextConsole(text, id, colorId, scrollId, resetID, dialId) {
function PlainTextConsole(text, id, colorId, scrollId, resetID) {
this.colorToggled = false;
this.autoScroll = true;
this.autoScroll = false;
this.modes = [];
this.lastLineLength = 0;
this.txtDiv = document.getElementById(id);
this.colorButton = document.getElementById(colorId);
this.scrollButton = document.getElementById(scrollId);
this.resetButton = document.getElementById(resetID);
this.widthDial = document.getElementById(dialId);
var self = this;
this.colorButton.onclick = function () {
self.toggleColor(self);
@ -1780,9 +1779,6 @@ var PlainTextConsole = (function () {
this.resetButton.onclick = function () {
self.reset(self);
};
this.widthDial.onselect = function (e) {
PlainTextConsole.widthDialSelect(self, e);
};
this.txtDiv.innerHTML = text;
this.consoleText = text;
this.modes.push(new PlainTextConsoleMode(16, "./images/knob-170.png"));
@ -1815,13 +1811,13 @@ var PlainTextConsole = (function () {
PlainTextConsole.prototype.toggleScrolling = function (self) {
if (self.autoScroll) {
self.autoScroll = false;
self.scrollButton.classList.remove("btn-outline-info");
self.scrollButton.classList.add("btn-info");
self.scrollButton.classList.add("btn-outline-info");
self.scrollButton.classList.remove("btn-info");
}
else {
self.autoScroll = true;
self.scrollButton.classList.remove("btn-info");
self.scrollButton.classList.add("btn-outline-info");
self.scrollButton.classList.add("btn-info");
self.scrollButton.classList.remove("btn-outline-info");
self.txtDiv.scrollTop = self.txtDiv.scrollHeight;
}
};
@ -1830,14 +1826,8 @@ var PlainTextConsole = (function () {
self.consoleText = "";
self.lastLineLength = 0;
};
PlainTextConsole.widthDialSelect = function (self, e) {
console.log(e);
if (self.mode < self.modes.length - 1) {
self.mode++;
}
else {
self.mode = 0;
}
PlainTextConsole.prototype.setMode = function (mode) {
this.mode = mode;
};
PlainTextConsole.prototype.handleConsoleBufferUpdate = function (consoleBuffer, mode) {
if (mode == ConsoleMode.CLEAR) {

2
Server/src/main/resources/templates/account.vm
View File

@ -1,6 +1,6 @@
<!doctype html>
<html lang="en">
#set ($title = "Login")
#set ($title = "Account - M.A.R")
#set ($cur_page = "account")
#parse("head.vm")
<body>

1
Server/src/main/resources/templates/footer.vm
View File

@ -5,3 +5,4 @@
<script src="js/popper.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-resizable.min.js"></script>

2
Server/src/main/resources/templates/head.vm
View File

@ -1,10 +1,8 @@
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="css/bootstrap4-neon-glow.min.css">
<link rel="stylesheet" href="css/material-icons.css">
<link rel="stylesheet" href="css/mar.css">
<link rel="stylesheet" href="css/console.css">

4
Server/src/main/resources/templates/header.vm
View File

@ -1,6 +1,6 @@
<nav class="navbar navbar-expand-lg bg-primary navbar-light">
<a class="navbar-brand text-mono" href="/">M.A.R.</a>
<a class="navbar-brand text-mono hvr-grow" href="/" title="Home"><img src="/images/tmp.png"></img></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
@ -14,7 +14,7 @@
<a class="nav-link #if ($cur_page == 'play')active#end" href="/play"><i class="mi">code</i> Play</a>
</li>
<li class="nav-item">
<a class="nav-link #if ($cur_page == 'leaderboarc')active#end" href="/leaderboard"><i class="mi">assessment</i>
<a class="nav-link #if ($cur_page == 'leaderboard')active#end" href="/leaderboard"><i class="mi">assessment</i>
Leaderboard</a>
</li>
<li class="nav-item">

7
Server/src/main/resources/templates/home.vm
View File

@ -1,6 +1,6 @@
<!doctype html>
<html lang="en">
#set ($title = "Home - Much Assembly Required")
#set ($title = "Home - M.A.R")
#parse("head.vm")
<body>
@ -10,8 +10,9 @@
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Much Assembly Required</h1>
<p class="lead">Program the 8086-like microprocessor of a robot in a grid-based multiplayer world.</p>
<h1 class="display-4">Much Assembly Required<span class="vim-caret">&nbsp;</span></h1>
<p class="lead text-mono text-success">Program the 8086-like microprocessor of a robot in a grid-based
multiplayer world.</p>
<hr class="my-4">
<div class="card-columns">

5
Server/src/main/resources/templates/leaderboard.vm
View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
#set ($title = "Leaderboard")
#set ($cur_page = "leaderboarc")
#set ($title = "Leaderboard - M.A.R")
#set ($cur_page = "leaderboard")
#parse("head.vm")
<body>
@ -23,6 +23,7 @@
<td>Test1</td>
<td>Test2</td>
</tr>
Account - M.A.R
<tr>
<td>Test1</td>
<td>Test2</td>

127
Server/src/main/resources/templates/play.vm
View File

@ -23,12 +23,6 @@
<a id="tab-editor-sm" class="nav-link small-screen" href="#" onclick="tabEditorClick()"><i
class="mi">code</i></a>
</li>
<li class="nav-item">
<a id="tab-console" class="nav-link regular-screen" href="#" onclick="tabConsoleClick()"><i
class="mi">computer</i> Console</a>
<a id="tab-console-sm" class="nav-link small-screen" href="#" onclick="tabConsoleClick()"><i
class="mi">computer</i></a>
</li>
<li class="nav-item">
<a class="nav-link regular-screen" target="_blank"
href="https://github.com/simon987/Much-Assembly-Required/wiki"><i class="mi">launch</i>
@ -75,7 +69,8 @@
class="mi">replay</i></button>
</div>
<div class="col-sm-2">
<button class="btn btn-shadow btn-info text-mono regular-screen" href="#"><i class="mi">file_upload</i>
<button id="floppyUp" onclick="document.getElementById('floppyIn').click();"
class="btn btn-shadow btn-info text-mono regular-screen" href="#"><i class="mi">file_upload</i>
Floppy
</button>
<button class="btn btn-shadow btn-info text-mono small-screen" href="#"><i class="mi">file_upload</i>
@ -91,67 +86,83 @@
</div>
</div>
<form id="floppyForm" style="display: none;" enctype='multipart/form-data'>
<input id="floppyIn" type="file" name="floppyIn"/>
</form>
<div id="editor"></div>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="js/editor.js"></script>
</div>
## CONSOLE
<div id="console-tab" style="display: none">
<div class="row">
<div class="col-sm-4">
<div class="dropdown">
<button id="widthDial" class="btn btn-secondary btn-shadow dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true">Line width
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">16</a>
<a href="#" class="dropdown-item">24</a>
<a href="#" class="dropdown-item">40</a>
<a href="#" class="dropdown-item">56</a>
<a href="#" class="dropdown-item">64</a>
</div>
</div>
</div>
<div class="col-sm-3">
<button id="colorButton" class="btn btn-outline-info text-mono btn-shadow regular-screen">
Invert colors
</button>
<button onclick="$('#colorButton').click()"
class="btn btn-outline-info text-mono btn-shadow small-screen"><i class="mi">invert_colors_off</i>
</button>
</div>
<div class="col-sm-3">
<button id="scrollButton" class="btn btn-outline-info text-mono btn-shadow regular-screen">Auto
scrolling
</button>
<button onclick="$('#scrollButton').click()"
class="btn btn-outline-info text-mono btn-shadow small-screen"><i
class="mi">swap_vert</i></button>
</div>
<div class="col-sm-2">
<button id="resetButton" class="btn btn-danger text-mono btn-shadow regular-screen">Clear
</button>
<button onclick="$('#resetButton').click()"
class="btn btn-danger text-mono btn-shadow small-screen"><i class="mi">replay</i>
</button>
</div>
</div>
<div id="console-wrapper" class="noisy">
<div id="consoleText" class="piece output noclick ctr-selection ctr-text">test123</div>
<div class="piece scanlines noclick"></div>
<div class="piece glow noclick"></div>
</div>
</div>
</div>
</div>
</div>
#parse("footer.vm")
##Console
<style>
</style>
<div class="bottom-panel">
<div class="splitter-horizontal"></div>
<div class="console-wrapper">
<div class="console-side-bar">
<p>
<button id="colorButton" class="btn btn-outline-info"
data-container="body" data-toggle="popover" data-trigger="hover"
data-placement="right" data-content="Invert colors"><i class="mi">invert_colors_off</i></button>
</p>
<p>
<button id="scrollButton" class="btn btn-outline-info"
data-container="body" data-toggle="popover" data-trigger="hover"
data-placement="right" data-content="Toggle auto scroll"><i class="mi">swap_vert</i></button>
</p>
<p>
<div class="btn-group dropright">
<button type="button" class="btn btn-shadow btn-info" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="mi">short_text</i>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Line width</h6>
<button class="dropdown-item" onclick="mar.client.consoleScreen.setMode(0)">16 chars</button>
<button class="dropdown-item" onclick="mar.client.consoleScreen.setMode(1)">24 chars</button>
<button class="dropdown-item" onclick="mar.client.consoleScreen.setMode(2)">40 chars</button>
<button class="dropdown-item" onclick="mar.client.consoleScreen.setMode(3)">56 chars</button>
<button class="dropdown-item" onclick="mar.client.consoleScreen.setMode(4)">64 chars</button>
</div>
</div>
</p>
<p>
<button id="resetButton" class="btn btn-danger btn-shadow" style="margin-left: 0"
data-container="body" data-toggle="popover" data-trigger="hover"
data-placement="right" data-content="Clear console"><i class="mi">delete_sweep</i></button>
</p>
</div>
<div class="noisy">
<div id="consoleText" class="piece output noclick ctr-selection ctr-text">Hello World</div>
<div class="piece scanlines noclick"></div>
<div class="piece glow noclick"></div>
</div>
</div>
</div>
<script>
$(".bottom-panel").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false,
resizeHeightFrom: "top"
});
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="js/phaser.js"></script>
<script src="js/phaser-plugin-isometric.js"></script>
<script src="js/mar.js"></script>

37
Server/src/main/typescript/Console.ts
View File

@ -6,9 +6,9 @@ let defaultText =
"|___|___|| __|___._|____||__|__||__||____|_____|__| | __|\n" +
" |__| |__|\n" +
"\n" +
"Version 1.4A, 1985-05-17\n" +
"Version 1.5A, 1985-05-17\n" +
"Initialising Universal Communication Port connection...Done\n" +
"Current date is 2790-03-11\n" +
"Current date is 2790-04-28\n" +
"Cubot Status: Much Assembly Required";
enum ConsoleMode {
@ -45,10 +45,9 @@ class PlainTextConsole implements ConsoleScreen {
private colorButton: HTMLButtonElement;
private scrollButton: HTMLButtonElement;
private resetButton: HTMLButtonElement;
private widthDial: HTMLSelectElement;
private colorToggled: boolean = false;
public autoScroll: boolean = true;
public autoScroll: boolean = false;
private modes: PlainTextConsoleMode[] = [];
private mode: number;
@ -64,12 +63,11 @@ class PlainTextConsole implements ConsoleScreen {
*/
private lastLineLength: number = 0;
constructor(text: string, id: string, colorId: string, scrollId: string, resetID: string, dialId: string) {
constructor(text: string, id: string, colorId: string, scrollId: string, resetID: string) {
this.txtDiv = document.getElementById(id);
this.colorButton = document.getElementById(colorId) as HTMLButtonElement;
this.scrollButton = document.getElementById(scrollId) as HTMLButtonElement;
this.resetButton = document.getElementById(resetID) as HTMLButtonElement;
this.widthDial = document.getElementById(dialId) as HTMLSelectElement;
let self = this;
this.colorButton.onclick = function () {
@ -81,21 +79,17 @@ class PlainTextConsole implements ConsoleScreen {
this.resetButton.onclick = function () {
self.reset(self);
};
this.widthDial.onselect = function (e) {
PlainTextConsole.widthDialSelect(self, e);
};
this.txtDiv.innerHTML = text;
this.consoleText = text;
//Line width modes. Might break if shorter than
//Line width modes. Might break if shorter than CubotComPort::MESSAGE_LENGTH
this.modes.push(new PlainTextConsoleMode(16, "./images/knob-170.png"));
this.modes.push(new PlainTextConsoleMode(24, "./images/knob-123.png"));
this.modes.push(new PlainTextConsoleMode(40, "./images/knob-90.png"));
this.modes.push(new PlainTextConsoleMode(56, "./images/knob-65.png"));
this.modes.push(new PlainTextConsoleMode(64, "./images/knob-10.png"));
this.mode = 3; //Mode 56
}
/**
@ -133,13 +127,13 @@ class PlainTextConsole implements ConsoleScreen {
if (self.autoScroll) {
self.autoScroll = false;
self.scrollButton.classList.remove("btn-outline-info");
self.scrollButton.classList.add("btn-info");
self.scrollButton.classList.add("btn-outline-info");
self.scrollButton.classList.remove("btn-info");
} else {
self.autoScroll = true;
self.scrollButton.classList.remove("btn-info");
self.scrollButton.classList.add("btn-outline-info");
self.scrollButton.classList.add("btn-info");
self.scrollButton.classList.remove("btn-outline-info");
//Scroll to bottom
self.txtDiv.scrollTop = self.txtDiv.scrollHeight;
@ -157,17 +151,8 @@ class PlainTextConsole implements ConsoleScreen {
self.lastLineLength = 0;
}
/**
* Update dial image and change console mode
*/
private static widthDialSelect(self: PlainTextConsole, e): void {
console.log(e);
if (self.mode < self.modes.length - 1) {
self.mode++;
} else {
self.mode = 0;
}
public setMode(mode: number) {
this.mode = mode;
}
/**

2
Server/src/main/typescript/GameClient.ts
View File

@ -279,7 +279,7 @@ class GameClient {
constructor() {
this.getServerInfo();
this.consoleScreen = new PlainTextConsole(defaultText, "consoleText", "colorButton", "scrollButton", "resetButton", "widthDial");
this.consoleScreen = new PlainTextConsole(defaultText, "consoleText", "colorButton", "scrollButton", "resetButton");
}
public requestUserInfo(): void {