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

Server/src/main/java/net/simon987/server/web/WebServer.java

@@ -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"));
     }

Server/src/main/java/net/simon987/server/websocket/FloppyUploadRoute.java

@@ -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";
+    }
+}

Server/src/main/resources/config.properties

@@ -1,15 +1,16 @@
 # File management
-save_interval=5
+save_interval=30
 log_limit=2000000
-log_count=10
+log_count=1
-#ssl
+#SSL
-use_ssl=1
+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
@@ -36,8 +38,8 @@ stack_bottom=65536
 memory_size=65536
 user_timeout=100
 #User creation
-new_user_worldX = 32767
+new_user_worldX=32767
-new_user_worldY = 32767
+new_user_worldY=32767
 new_user_dimension=w-
 # Default user code
 new_user_code=; Welcome to Much Assembly required!\n\
@@ -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

Server/src/main/resources/static/css/console.css

@@ -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;
-}

Server/src/main/resources/static/css/mar.css

@@ -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;
 }

Server/src/main/resources/static/css/material-icons.css

@@ -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';
-}

Server/src/main/resources/static/js/editor.js

@@ -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);

Server/src/main/resources/static/js/jquery-resizable.min.js

@@ -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)})})});

Server/src/main/resources/static/js/mar.js

@@ -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-outline-info");
-            self.scrollButton.classList.add("btn-info");
+            self.scrollButton.classList.remove("btn-info");
         }
         else {
             self.autoScroll = true;
-            self.scrollButton.classList.remove("btn-info");
+            self.scrollButton.classList.add("btn-info");
-            self.scrollButton.classList.add("btn-outline-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) {
+    PlainTextConsole.prototype.setMode = function (mode) {
-        console.log(e);
+        this.mode = mode;
-        if (self.mode < self.modes.length - 1) {
-            self.mode++;
-        }
-        else {
-            self.mode = 0;
-        }
     };
     PlainTextConsole.prototype.handleConsoleBufferUpdate = function (consoleBuffer, mode) {
         if (mode == ConsoleMode.CLEAR) {

Server/src/main/resources/templates/account.vm

@@ -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>

Server/src/main/resources/templates/footer.vm

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

Server/src/main/resources/templates/head.vm

@@ -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">
 

Server/src/main/resources/templates/header.vm

@@ -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">

Server/src/main/resources/templates/home.vm

@@ -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>
+            <h1 class="display-4">Much Assembly Required<span class="vim-caret">&nbsp;</span></h1>
-            <p class="lead">Program the 8086-like microprocessor of a robot in a grid-based multiplayer world.</p>
+            <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">

Server/src/main/resources/templates/leaderboard.vm

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
-    #set ($title = "Leaderboard")
+    #set ($title = "Leaderboard - M.A.R")
-    #set ($cur_page = "leaderboarc")
+    #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>

Server/src/main/resources/templates/play.vm

@@ -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>

Server/src/main/typescript/Console.ts

@@ -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-outline-info");
-            self.scrollButton.classList.add("btn-info");
+            self.scrollButton.classList.remove("btn-info");
 
         } else {
             self.autoScroll = true;
-            self.scrollButton.classList.remove("btn-info");
+            self.scrollButton.classList.add("btn-info");
-            self.scrollButton.classList.add("btn-outline-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;
     }
 
-    /**
+    public setMode(mode: number) {
-     * Update dial image and change console mode
+        this.mode = mode;
-     */
-    private static widthDialSelect(self: PlainTextConsole, e): void {
-        console.log(e);
-
-        if (self.mode < self.modes.length - 1) {
-            self.mode++;
-        } else {
-            self.mode = 0;
-        }
     }
 
     /**

Server/src/main/typescript/GameClient.ts

@@ -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 {