update studios site

bin/studios.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# bless you chris and andy <3
+DIR=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+MNML_PATH=$(realpath "$DIR/../")
+
+CLIENT_PUBLIC_DIR="/var/lib/mnml/public/studios"
+
+TARGET=$1
+
+cd $MNML_PATH/studios
+rm -rf dist
+npm i
+npm run build
+
+# client updates
+echo "syncing studios"
+rsync -a --delete --delete-excluded "$MNML_PATH/studios/dist/" "$TARGET:$CLIENT_PUBLIC_DIR/"
+ssh -q "$TARGET" ls -lah "$CLIENT_PUBLIC_DIR"
+
+echo "restarting nginx service"
+ssh -q -t "$TARGET" sudo service nginx restart && sleep 1 && systemctl --no-pager status nginx

client/assets/styles/styles.less

@@ -9,13 +9,9 @@
 @import 'game.less';
 @import 'player.less';
 
-html body {
-    margin: 0;
-
-    background-color: black;
-    font-family: 'Jura';
-    color: whitesmoke;
-    font-size: 14pt;
+html {
+    box-sizing: border-box;
+    font-size: 62.5%;
 
     user-select: none;
     -moz-user-select: none;
@@ -27,6 +23,18 @@ html body {
     overflow-y: hidden;
 }
 
+body {
+    font-size: 1.8em;
+    line-height: 1.6;
+    font-weight: 400;
+
+    margin: 0;
+    padding: 0;
+    background-color: black;
+    font-family: 'Jura';
+    color: whitesmoke;
+}
+
 html {
     box-sizing: border-box;
     margin: 0;

etc/logrotate/logrotate.conf

@@ -0,0 +1 @@
+logrotate.conf

studios/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "plugins": [
+    ["transform-react-jsx", { "pragma":"preact.h" }]
+  ]
+}

studios/.gitignore

@@ -0,0 +1,5 @@
+package-lock.json
+node_modules/
+dist/
+.cache/
+assets/molecules

studios/assets/discord.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1"><style>.st0{fill:#7289DA;}</style><path class="st0" d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"/><path class="st0" d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"/></svg>

studios/assets/discord.white.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1"><style>.st0{fill:#FFFFFF;}</style><path class="st0" d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"/><path class="st0" d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"/></svg>

studios/assets/styles/colours.less

@@ -0,0 +1,212 @@
+@green: #1FF01F;
+@red: #a52a2a;
+// @blue: #3498db // cyan?
+@blue: #3050f8;
+@white: #f5f5f5; // whitesmoke
+@purple: #9355b5; // 6lack - that far cover
+@yellow: #ffa100;
+@silver: #2c2c2c;
+
+@black: black;
+@gray: #222;
+@gray-box: #222;
+@gray-exists: #444;
+@gray-hint: #666;
+@gray-hover: #888;
+@gray-focus: whitesmoke;
+
+svg {
+    stroke: none;
+    margin: 0 auto;
+    display: block;
+
+    &.red {
+        stroke: @red;
+    }
+
+    &.green {
+        stroke: @green;
+    }
+
+    &.blue {
+        stroke: @blue;
+    }
+}
+
+.green {
+    color: @green;
+    stroke: @green;
+}
+
+.red {
+    color: @red;
+    stroke: @red;
+}
+
+.red-fill {
+    fill: @red;
+}
+
+.blue {
+    color: @blue;
+    stroke: @blue;
+    stroke-linecap: round;
+}
+
+.gray {
+    color: #333;
+    stroke: #333;
+}
+
+.white {
+    color: @white;
+    stroke: @white;
+}
+
+.red-border {
+    border-color: @red;
+}
+.blue-border {
+    border-color: @blue;
+}
+.green-border {
+    border-color: @green;
+}
+
+.red-blue-border {
+    animation: rb 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+.red-green-border {
+    animation: rg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+.blue-green-border {
+    animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+
+.combo-border:not(.highlight) {
+    animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
+}
+
+@keyframes rg {
+    0% {
+        border-color: @red;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @green;
+    }
+}
+
+@keyframes rb {
+    0% {
+        border-color: @red;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @blue;
+    }
+}
+
+@keyframes bg {
+    0% {
+        border-color: @blue;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @green;
+    }
+}
+
+@keyframes border-co {
+    0% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @gray-hint;
+    }
+}
+
+@keyframes co {
+    from {
+        background: @black;
+    }
+    to {
+        background: @gray-exists;
+    }
+}
+
+@keyframes co-text {
+    from {
+        color: @black;
+    }
+    to {
+        color: @gray-exists;
+    }
+}
+
+button, button:hover, button:active {
+    &.blue {
+        border-color: @blue;
+    }
+    &.red {
+        border-color: @red;
+    }
+    &.green {
+        border-color: @green;
+    }
+
+    &.red-border {
+        border-color: @red;
+    }
+    &.blue-border {
+        border-color: @blue;
+    }
+    &.green-border {
+        border-color: @green;
+    }
+}
+
+@keyframes rgb {
+    0% {
+        color: @red;
+    }
+    25% {
+        color: @white;
+    }
+    50% {
+        color: @blue;
+    }
+    75% {
+        color: @white;
+    }
+    100% {
+        color: @green;
+    }
+}
+
+@keyframes rb-text {
+    0% {
+        color: @red;
+    }
+    50% {
+        color: @white;
+    }
+    100% {
+        color: @blue;
+    }
+}
+
+@keyframes target-ko {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.2;
+    }
+}

studios/assets/styles/normalize.css

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+main,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray color, background from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `main` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

studios/assets/styles/styles.less

@@ -0,0 +1,228 @@
+@import 'colours.less';
+
+html {
+    box-sizing: border-box;
+    font-size: 62.5%;
+}
+
+body {
+    font-size: 1.8em;
+    line-height: 1.6;
+    font-weight: 400;
+
+    margin: 0;
+    padding: 0;
+    background-color: black;
+    font-family: 'Jura';
+    color: whitesmoke;
+}
+
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+hr {
+    color: #222;
+    margin: 1.5em 0;
+    width: 100%;
+    border-top: 1px solid #222;
+}
+
+figure {
+    margin: 0;
+    text-align: center;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+dl {
+    margin: 1em 0;
+}
+
+button, input, a {
+    font-family: 'Jura';
+    color: whitesmoke;
+    height: auto;
+    border-width: 0.1em;
+    border-style: solid;
+    border-color: @gray-exists;
+    letter-spacing: 0.25em;
+    box-sizing: border-box;
+    font-size: 1em;
+    flex: 1;
+    border-radius: 0;
+    line-height: 2em;
+
+    padding-right: 0.1em;
+    padding-left: 0.1em;
+    padding-bottom: 0.1em;
+    padding-top: 0.1em;
+
+    /*the transitions */
+    transition-property: border-color, color, background;
+    transition-duration: 0.25s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+
+    &:hover {
+        color: whitesmoke;
+        border-color: @gray-hover;
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    // &:active {
+    //     filter: url("#noiseFilter");
+    // }
+}
+
+a {
+    font-weight: 600;
+    color: whitesmoke;
+    text-decoration: none;
+
+    &:hover {
+        color: whitesmoke;
+        border-color: @gray-hover;
+    }
+
+    &:focus {
+        /*colour necesary to bash skellington*/
+        color: @gray-focus;
+        border-color: @gray-focus;
+    }
+
+}
+
+svg {
+    fill: none;
+    stroke: whitesmoke;
+    stroke-width: 0.5em;
+    height: 1.5em;
+}
+
+button[disabled] {
+    color: #222;
+    border-color: #222;
+    animation: 0;
+}
+
+ul {
+    margin-bottom: 1em;
+    list-style: inside;
+}
+
+li {
+    margin-bottom: 0;
+}
+
+.logo {
+    height: 4em;
+    filter: url("#noiseFilter");
+    background-image: url("../../assets/mnml.studios.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.awards {
+    height: 100%;
+    background-image: url("../../assets/mnml.awards.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#clipboard {
+  width: 1px;
+  height: 1px;
+  padding: 0px;
+}
+
+#noise {
+    height: 0;
+}
+
+main {
+    padding: 0 20% 2em 20%;
+
+    .logo {
+        margin: 2em 0;
+    }
+
+    .list {
+        align-items: flex-start;
+        margin-bottom: 0;
+
+        a {
+            text-decoration: none;
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    body {
+        font-size: 1em;
+        padding: 0 0 2em 0;
+
+        main {
+            padding: 0 0.5em;
+        }
+    }
+}
+
+@media (max-width: 1500px) {
+    body {
+        font-size: 1.6em;
+    }
+
+    main {
+        .list {
+            grid-template-columns: 1fr;
+        }
+
+        .awards {
+            height: 10em;
+        }
+    }
+}
+
+.list {
+    margin-bottom: 2em;
+
+    figure {
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        font-size: 125%;
+        display: flex;
+        flex-flow: column;
+    }
+
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em;
+    flex-flow: row wrap;
+    align-items: flex-end;
+
+    button.ready:enabled, a.ready {
+        color: forestgreen;
+        border-color: forestgreen;
+
+        &:hover {
+            background: forestgreen;
+            color: black;
+            border-color: forestgreen;
+
+            a {
+                color: black;
+            }
+        }
+    }
+}

studios/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="application-name" content="mnml">
+        <meta name="description" content="MNML STD AU">
+        <meta name="author" content="ntr@mnml.gg">
+        <title>MNML Studios</title>
+        <!-- <link rel="manifest" href="manifest.webmanifest"> -->
+        <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
+        <link rel="stylesheet" href="assets/styles/normalize.css">
+        <!-- <link rel="stylesheet" href="assets/styles/skeleton.css"> -->
+        <link rel="icon" sizes="512x512" href="assets/icons/mnml.png">
+        <link rel="apple-touch-icon" href="assets/icons/mnml.png">
+    </head>
+    <body>
+        <noscript>
+            <p>js is required to run MNML.</p>
+            <p>this site has no ads. free to play forever.</p>
+        </noscript>
+    </body>
+    <!-- <script src="https://js.stripe.com/v3/"></script> -->
+    <script src="./index.js"></script>
+</html>

studios/index.js

@@ -0,0 +1,4 @@
+require('./assets/styles/styles.less');
+
+// kick it off
+require('./src/app');

studios/manifest.webmanifest

@@ -0,0 +1,22 @@
+{
+    "name": "MNML Studios AU",
+    "description": "",
+    "short_name": "MNML",
+    "icons": [
+        {
+            "src": "./assets/icons/mnml.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        {
+            "src": "./assets/icons/mnml.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/index.html",
+    "display": "standalone",
+    "orientation": "landscape",
+    "theme_color": "#000000",
+    "background_color": "#000000"
+}

studios/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "mnml-studios",
+  "version": "1.11.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "parcel watch index.html --out-dir /var/lib/mnml/public/current",
+    "build": "parcel build index.html --no-source-maps",
+    "lint": "eslint --fix --ext .jsx src/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "animejs": "^3.1.0",
+    "lodash": "^4.17.15",
+    "logrocket": "^1.0.3",
+    "parcel": "^1.12.4",
+    "preact": "^8.5.2",
+    "preact-compat": "^3.19.0",
+    "preact-context": "^1.1.4",
+    "preact-redux": "^2.1.0",
+    "query-string": "^6.8.3",
+    "react-stripe-elements": "^3.0.1",
+    "redux": "^4.0.4"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-react": "^7.16.0",
+    "jest": "^25.0.0",
+    "less": "^3.10.3"
+  },
+  "alias": {
+    "react": "preact-compat",
+    "react-dom": "preact-compat"
+  }
+}

studios/src/app.jsx

@@ -0,0 +1,12 @@
+const preact = require('preact');
+
+const LogRocket = require('logrocket');
+
+const { Provider, connect } = require('preact-redux');
+const { createStore, combineReducers } = require('redux');
+const { StripeProvider } = require('react-stripe-elements');
+
+const Studios = require('./components/studios');
+
+// eslint-disable-next-line
+preact.render(<Studios />, document.body);

studios/src/components/noise.jsx

@@ -0,0 +1,75 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+class Noise extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                version="1.1"
+                id="noise"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 400 400">
+                <filter id='noiseFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#noiseFilter feTurbulence', '#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    baseFrequency: 0.5,
+                    duration: () => anime.random(1000, 2000),
+                },
+            ],
+        }));
+
+        this.animations.push(anime({
+            targets: ['#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    scale: 2,
+                    duration: () => anime.random(2000, 5000),
+                },
+                {
+                    scale: 4,
+                    duration: () => anime.random(150, 250),
+                },
+                {
+                    scale: 2,
+                    duration: () => anime.random(100, 150),
+                },
+                {
+                    scale: 4,
+                    duration: () => anime.random(150, 250),
+                },
+            ],
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Noise;

studios/src/components/studios.jsx

@@ -0,0 +1,35 @@
+const preact = require('preact');
+
+const Noise = require('./noise');
+
+function Studios(args) {
+    return (
+        <main>
+            <Noise />
+            <div class="logo"/>
+            <hr />
+            <div class='list'>
+                <figure>
+                    <a href='mailto:humans@mnml.gg'>Email</a>
+                    <figcaption>humans@mnml.gg</figcaption>
+                </figure>
+                <figure>
+                    <a class='ready' href='https://mnml.gg'>MNML</a>
+                    <figcaption>Play MNML - Our flagship game</figcaption>
+                </figure>
+            </div>
+            <hr />
+            <div class="list">
+                <div class="intro">
+                    <p> <b>Minimal Studios</b> is Nathan Rashleigh & Himesh Kapadia.</p>
+                    <p> We are an independent software development duo based in Brisbane, Australia. </p>
+                    <p> We specialise in <b>fast, simple & maintainable</b> software.  </p>
+                    <p> Our debut game <b>MNML</b>, written in <b>Rust</b>, was featured in the PAX Rising area during <b>PAX AUS 2019</b>. </p>
+                </div>
+                <div class="awards"></div>
+            </div>
+        </main>
+    );
+}
+
+module.exports = Studios;