diff --git a/html-client/cryps.css b/html-client/cryps.css index f899c9a0..544ffc06 100644 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -11,33 +11,52 @@ button, input { height: auto; color: whitesmoke; border-width: 2px; + border-color: whitesmoke; + border-radius: 0; } -@keyframes glowing { - 0% { box-shadow: 0 0 0px whitesmoke; } - 20% { box-shadow: 0 0 20px whitesmoke; } - 60% { box-shadow: 0 0 20px whitesmoke; } - 100% { box-shadow: 0 0 0px whitesmoke; } -} - +/*colour necesary to bash skellington*/ button:hover { color: whitesmoke; - animation: glowing 2000ms infinite; + animation: whiteglow 2000ms infinite; border-color: whitesmoke; } +@keyframes whiteglow { + 0% { + box-shadow: 0 0 0px whitesmoke; + } + 20% { + box-shadow: 0 0 20px whitesmoke; + } + 60% { + box-shadow: 0 0 20px whitesmoke; + } + 100% { + box-shadow: 0 0 0px whitesmoke; + } +} + @keyframes greenglow { 0% { box-shadow: 0 0 -20px forestgreen; } 100% { - box-shadow: 0 0 -20px forestgreen; box-shadow: 0 0 30px forestgreen; color: forestgreen; border-color: forestgreen; } } +@keyframes whiteblackglow { + 0% { + box-shadow: 0 0 0px black; + } + 100% { + box-shadow: 0 0 -30px black; + } +} + .green-btn:hover { animation: greenglow 2s ease 0s 1 normal forwards; animation-iteration-count: 1; @@ -53,10 +72,22 @@ button:hover { .instance-ui-btn { font-size: 100%; - min-width: 20%; + min-width: 100%; padding: 0; } +.vbox-btn { + margin: 0; + padding: 0.5em; + background-color: whitesmoke; + color: black; +} + +.vbox-btn:hover { + color: black; + animation: whiteblackglow 2s ease 0s 1 normal forwards; +} + .header { margin-bottom: 2em; } @@ -86,9 +117,20 @@ button:hover { display: inline; } +.header-status { + text-align: right; +} + +.vbox-table { + table-layout: fixed; + width: 100%; +} + .vbox-table td { border: 1px solid whitesmoke; padding: 0.5em; + text-align: center; + height: 40px; } .vbox-table th:first-child, td:first-child { @@ -116,4 +158,8 @@ button:hover { 100% { stroke-dashoffset: 0; } +} + +.spacer { + min-width: 100%; } \ No newline at end of file diff --git a/html-client/lib/fizzy-noise.js b/html-client/lib/fizzy-noise.js deleted file mode 100644 index 20b6510f..00000000 --- a/html-client/lib/fizzy-noise.js +++ /dev/null @@ -1,189 +0,0 @@ -// http://mrl.nyu.edu/~perlin/noise/ - -const ImprovedNoise = function () { - const p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, - 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, - 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, - 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, - 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, - 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, - 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, - 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, - 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, - 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180]; - - for (let i = 0; i < 256; i++) { - p[256 + i] = p[i]; - } - - function fade(t) { - return t * t * t * (t * (t * 6 - 15) + 10); - } - - function lerp(t, a, b) { - return a + t * (b - a); - } - - function grad(hash, x, y, z) { - const h = hash & 15; - const u = h < 8 ? x : y; const - v = h < 4 ? y : h == 12 || h == 14 ? x : z; - return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v); - } - - return { - - noise(x, y, z) { - const floorX = Math.floor(x); const floorY = Math.floor(y); const - floorZ = Math.floor(z); - - const X = floorX & 255; const Y = floorY & 255; const - Z = floorZ & 255; - - x -= floorX; - y -= floorY; - z -= floorZ; - - const xMinus1 = x - 1; const yMinus1 = y - 1; const - zMinus1 = z - 1; - - const u = fade(x); const v = fade(y); const - w = fade(z); - - const A = p[X] + Y; const AA = p[A] + Z; const AB = p[A + 1] + Z; const B = p[X + 1] + Y; const BA = p[B] + Z; const - BB = p[B + 1] + Z; - - return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), - grad(p[BA], xMinus1, y, z)), - lerp(u, grad(p[AB], x, yMinus1, z), - grad(p[BB], xMinus1, yMinus1, z))), - lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1), - grad(p[BA + 1], xMinus1, y, z - 1)), - lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1), - grad(p[BB + 1], xMinus1, yMinus1, zMinus1)))); - }, - }; -}; - -const currentRandom = Math.random; - -// Pseudo-random generator -function Marsaglia(i1, i2) { - // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c - let z = i1 || 362436069; let - w = i2 || 521288629; - const nextInt = function () { - z = (36969 * (z & 65535) + (z >>> 16)) & 0xFFFFFFFF; - w = (18000 * (w & 65535) + (w >>> 16)) & 0xFFFFFFFF; - return (((z & 0xFFFF) << 16) | (w & 0xFFFF)) & 0xFFFFFFFF; - }; - - this.nextDouble = function () { - const i = nextInt() / 4294967296; - return i < 0 ? 1 + i : i; - }; - this.nextInt = nextInt; -} -Marsaglia.createRandomized = function () { - const now = new Date(); - return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF); -}; - -// Noise functions and helpers -function PerlinNoise(seed) { - const rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized(); - let i; let - j; - // http://www.noisemachine.com/talk1/17b.html - // http://mrl.nyu.edu/~perlin/noise/ - // generate permutation - const p = new Array(512); - for (i = 0; i < 256; ++i) { p[i] = i; } - for (i = 0; i < 256; ++i) { const t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; } - // copy to avoid taking mod in p[0]; - for (i = 0; i < 256; ++i) { p[i + 256] = p[i]; } - - function grad3d(i, x, y, z) { - const h = i & 15; // convert into 12 gradient directions - const u = h < 8 ? x : y; - - - const v = h < 4 ? y : h === 12 || h === 14 ? x : z; - return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v); - } - - function grad2d(i, x, y) { - const v = (i & 1) === 0 ? x : y; - return (i & 2) === 0 ? -v : v; - } - - function grad1d(i, x) { - return (i & 1) === 0 ? -x : x; - } - - function lerp(t, a, b) { return a + t * (b - a); } - - this.noise3d = function (x, y, z) { - const X = Math.floor(x) & 255; const Y = Math.floor(y) & 255; const - Z = Math.floor(z) & 255; - x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z); - const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const - fz = (3 - 2 * z) * z * z; - const p0 = p[X] + Y; const p00 = p[p0] + Z; const p01 = p[p0 + 1] + Z; const p1 = p[X + 1] + Y; const p10 = p[p1] + Z; const - p11 = p[p1 + 1] + Z; - return lerp(fz, - lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x - 1, y, z)), - lerp(fx, grad3d(p[p01], x, y - 1, z), grad3d(p[p11], x - 1, y - 1, z))), - lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z - 1), grad3d(p[p10 + 1], x - 1, y, z - 1)), - lerp(fx, grad3d(p[p01 + 1], x, y - 1, z - 1), grad3d(p[p11 + 1], x - 1, y - 1, z - 1)))); - }; - - this.noise2d = function (x, y) { - const X = Math.floor(x) & 255; const - Y = Math.floor(y) & 255; - x -= Math.floor(x); y -= Math.floor(y); - const fx = (3 - 2 * x) * x * x; const - fy = (3 - 2 * y) * y * y; - const p0 = p[X] + Y; const - p1 = p[X + 1] + Y; - return lerp(fy, - lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x - 1, y)), - lerp(fx, grad2d(p[p0 + 1], x, y - 1), grad2d(p[p1 + 1], x - 1, y - 1))); - }; - - this.noise1d = function (x) { - const X = Math.floor(x) & 255; - x -= Math.floor(x); - const fx = (3 - 2 * x) * x * x; - return lerp(fx, grad1d(p[X], x), grad1d(p[X + 1], x - 1)); - }; -} - -// these are lifted from Processing.js -// processing defaults -const noiseProfile = { - generator: undefined, octaves: 4, fallout: 0.5, seed: undefined, -}; - -module.exports = function noise(x, y, z) { - if (noiseProfile.generator === undefined) { - // caching - noiseProfile.generator = new PerlinNoise(noiseProfile.seed); - } - const generator = noiseProfile.generator; - let effect = 1; let k = 1; let - sum = 0; - for (let i = 0; i < noiseProfile.octaves; ++i) { - effect *= noiseProfile.fallout; - switch (arguments.length) { - case 1: - sum += effect * (1 + generator.noise1d(k * x)) / 2; break; - case 2: - sum += effect * (1 + generator.noise2d(k * x, k * y)) / 2; break; - case 3: - sum += effect * (1 + generator.noise3d(k * x, k * y, k * z)) / 2; break; - } - k *= 2; - } - return sum; -}; diff --git a/html-client/lib/fizzy-text.js b/html-client/lib/fizzy-text.js deleted file mode 100644 index bee34d8e..00000000 --- a/html-client/lib/fizzy-text.js +++ /dev/null @@ -1,220 +0,0 @@ -const noise = require('./fizzy-noise'); - -function fizzyText(message) { - const that = this; - - // These are the variables that we manipulate with gui-dat. - // Notice they're all defined with "this". That makes them public. - // Otherwise, gui-dat can't see them. - - this.growthSpeed = 0.8; // how fast do particles change size? - this.minSize = 1; - this.maxSize = 4; // how big can they get? - this.noiseStrength = 10; // how turbulent is the flow? - this.speed = 0.4; // how fast do particles move? - this.displayOutline = false; // should we draw the message as a stroke? - this.framesRendered = 0; - - // ////////////////////////////////////////////////////////////// - - const _this = this; - - const width = 550; - const height = 200; - const textAscent = 101; - const textOffsetLeft = 80; - const noiseScale = 300; - const frameTime = 30; - - const colors = ['#000000', '#1A1A1A', '#163C50', '#205A79', '#2A78A2']; - - // This is the context we use to get a bitmap of text using - // the getImageData function. - const r = document.createElement('canvas'); - const s = r.getContext('2d'); - - // This is the context we actually use to draw. - const c = document.createElement('canvas'); - const g = c.getContext('2d'); - - r.setAttribute('width', width); - c.setAttribute('width', width); - r.setAttribute('height', height); - c.setAttribute('height', height); - - // Add our demo to the HTML - document.getElementById('fizzytext').appendChild(c); - - // Stores bitmap image - let pixels = []; - - // Stores a list of particles - const particles = []; - - // Set g.font to the same font as the bitmap canvas, incase we - // want to draw some outlines. - s.font = g.font = '800 82px monospace, monospace'; - - // Instantiate some particles - for (let i = 0; i < 1000; i++) { - particles.push(new Particle(Math.random() * width, Math.random() * height)); - } - - // This function creates a bitmap of pixels based on your message - // It's called every time we change the message property. - const createBitmap = function (msg) { - s.fillStyle = '#fff'; - s.fillRect(0, 0, width, height); - - s.fillStyle = '#222'; - s.fillText(msg, textOffsetLeft, textAscent); - - // Pull reference - const imageData = s.getImageData(0, 0, width, height); - pixels = imageData.data; - }; - - // Called once per frame, updates the animation. - const render = function () { - that.framesRendered++; - - g.clearRect(0, 0, width, height); - - if (_this.displayOutline) { - g.globalCompositeOperation = 'source-over'; - g.strokeStyle = '#000'; - g.lineWidth = 0.5; - g.strokeText(message, textOffsetLeft, textAscent); - } - - g.globalCompositeOperation = 'darker'; - - for (let i = 0; i < particles.length; i++) { - g.fillStyle = colors[i % colors.length]; - particles[i].render(); - } - }; - - // Returns x, y coordinates for a given index in the pixel array. - const getPosition = function (i) { - return { - x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4, - y: Math.floor(i / (width * 4)), - }; - }; - - // Returns a color for a given pixel in the pixel array. - const getColor = function (x, y) { - const base = (Math.floor(y) * width + Math.floor(x)) * 4; - const c = { - r: pixels[base + 0], - g: pixels[base + 1], - b: pixels[base + 2], - a: pixels[base + 3], - }; - - return `rgb(${c.r},${c.g},${c.b})`; - }; - - this.message = message; - createBitmap(message); - - var loop = function () { - requestAnimationFrame(loop); - render(); - }; - - // This calls the render function every 30 milliseconds. - loop(); - - // This class is responsible for drawing and moving those little - // colored dots. - function Particle(x, y, c) { - // Position - this.x = x; - this.y = y; - - // Size of particle - this.r = 1; - - // This velocity is used by the explode function. - this.vx = 0; - this.vy = 0; - - this.constrain = function constrainFn(v, o1, o2) { - if (v < o1) v = o1; - else if (v > o2) v = o2; - return v; - }; - - // Called every frame - this.render = function renderFrame() { - // What color is the pixel we're sitting on top of? - const c = getColor(this.x, this.y); - - // Where should we move? - const angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength; - // var angle = -Math.PI/2; - - // Are we within the boundaries of the image? - const onScreen = this.x > 0 && this.x < width && this.y > 0 && this.y < height; - - const isBlack = c !== 'rgb(255,255,255)' && onScreen; - - // If we're on top of a black pixel, grow. - // If not, shrink. - if (isBlack) { - this.r += _this.growthSpeed; - } else { - this.r -= _this.growthSpeed; - } - - // This velocity is used by the explode function. - this.vx *= 0.5; - this.vy *= 0.5; - - // Change our position based on the flow field and our - // explode velocity. - this.x += Math.cos(angle) * _this.speed + this.vx; - this.y += -Math.sin(angle) * _this.speed + this.vy; - - if (this.r > _this.maxSize) { - this.r = _this.maxSize; - } else if (this.r < 0) { - this.r = 0; - this.x = Math.random() * width; - this.y = Math.random() * height; - return false; - } - - // this.r = 3; - // debugger - // console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize)); - // this.r = this.constrain(this.r, _this.minSize, _this.maxSize); - - // If we're tiny, keep moving around until we find a black - // pixel. - if (this.r <= 0) { - this.x = Math.random() * width; - this.y = Math.random() * height; - return false; // Don't draw! - } - - // If we're off the screen, go over to other side - if (this.x < 0) this.x = width; - if (this.x > width) this.x = 0; - if (this.y < 0) this.y = height; - if (this.y > height) this.y = 0; - - // Draw the circle. - g.beginPath(); - // g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); - g.rect(this.x, this.y, this.r, this.r); - g.fill(); - - return true; - }; - } -} - -module.exports = fizzyText; diff --git a/html-client/src/actions.jsx b/html-client/src/actions.jsx index 1d5e0450..51c86e41 100644 --- a/html-client/src/actions.jsx +++ b/html-client/src/actions.jsx @@ -13,8 +13,8 @@ export const setInstance = value => ({ type: SET_INSTANCE, value }); export const SET_GAME = 'SET_GAME'; export const setGame = value => ({ type: SET_GAME, value }); -export const SET_ACTIVE_ITEM = 'SET_ACTIVE_ITEM'; -export const setActiveItem = value => ({ type: SET_ACTIVE_ITEM, value }); +export const SET_COMBINER = 'SET_COMBINER'; +export const setCombiner = value => ({ type: SET_COMBINER, value }); export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING'; export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value }); diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx index 9d9af54d..6dd18808 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -1,53 +1,22 @@ const preact = require('preact'); -const key = require('keymaster'); +// const key = require('keymaster'); -function convertVar(v) { - return v || ''; -} +const VboxContainer = require('./vbox.container'); -function Vbox(vbox) { - if (!vbox) return false; - - const free = []; - for (let i = 0 ; i < vbox.free[0].length; i++) { - free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]); - } - - const rows = free.map((row, i) => ( -