From 170a5a06ab84adea0a3d64ace692182ab98d78e6 Mon Sep 17 00:00:00 2001 From: ntr Date: Thu, 28 Mar 2019 16:57:48 +1100 Subject: [PATCH] :weassey --- html-client/cryps.css | 66 +++++- html-client/lib/fizzy-noise.js | 189 --------------- html-client/lib/fizzy-text.js | 220 ------------------ html-client/src/actions.jsx | 4 +- .../src/components/instance.component.jsx | 55 +---- .../src/components/instance.container.jsx | 7 +- .../src/components/login.component.jsx | 2 +- html-client/src/components/vbox.component.jsx | 86 +++++++ html-client/src/components/vbox.container.jsx | 48 ++++ html-client/src/events.jsx | 4 +- html-client/src/main.jsx | 4 +- html-client/src/reducers.jsx | 11 + 12 files changed, 223 insertions(+), 473 deletions(-) delete mode 100644 html-client/lib/fizzy-noise.js delete mode 100644 html-client/lib/fizzy-text.js create mode 100644 html-client/src/components/vbox.component.jsx create mode 100644 html-client/src/components/vbox.container.jsx 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) => ( - - {convertVar(row[0])} - {convertVar(row[1])} - {convertVar(row[2])} - - )); - - return ( -
- vBox - - - {rows} - -
- {JSON.stringify(vbox)} -
- ); -} - -function InstanceComponent(props) { +function InstanceComponent(args) { const { + // account, instance, - account, - sendInstanceReady, quit, - } = props; + sendInstanceReady, + } = args; if (!instance) return
...
; return (
-
+
+

next game against: mmmmmashy

+
+
- {Vbox(instance.vbox)} -
+ +
{JSON.stringify(instance.cryps)}
-
- ready btn -
); diff --git a/html-client/src/components/instance.container.jsx b/html-client/src/components/instance.container.jsx index 559f2258..0e8f5395 100644 --- a/html-client/src/components/instance.container.jsx +++ b/html-client/src/components/instance.container.jsx @@ -6,19 +6,20 @@ const Instance = require('./instance.component'); const addState = connect( function receiveState(state) { - const { ws, instance, account } = state; + const { ws, instance, account, combiner } = state; function sendInstanceReady() { - return ws.sendInstanceReady(instance.id); + return ws.sendInstanceReady(instance.instance); } return { instance, account, sendInstanceReady }; }, - function receiveDispatch(dispatch, { instance }) { + function receiveDispatch(dispatch, { instance, combiner }) { function quit() { dispatch(actions.setInstance(null)); } + return { quit }; } diff --git a/html-client/src/components/login.component.jsx b/html-client/src/components/login.component.jsx index 132d5f79..8d31e7af 100755 --- a/html-client/src/components/login.component.jsx +++ b/html-client/src/components/login.component.jsx @@ -3,7 +3,7 @@ const preact = require('preact'); function renderLogin({ account, submitLogin, submitRegister }) { if (account) return ( -
+
diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx new file mode 100644 index 00000000..9f7431e4 --- /dev/null +++ b/html-client/src/components/vbox.component.jsx @@ -0,0 +1,86 @@ +const preact = require('preact'); +// const key = require('keymaster'); + +function convertVar(v) { + return v || ''; +} + +function Vbox(args) { + const { + instance, + combiner, + sendVboxDiscard, + sendVboxReclaim, + sendVboxCombine, + } = args; + + const { vbox } = instance; + if (!instance.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 freeRows = free.map((row, i) => ( +
+ {convertVar(row[0])} + {convertVar(row[1])} + {convertVar(row[2])} +
+ )); + + const boundRows = [ +
+ {convertVar(vbox.bound[0])} + {convertVar(vbox.bound[1])} + {convertVar(vbox.bound[2])} +
, +
+ {convertVar(vbox.bound[3])} + {convertVar(vbox.bound[4])} + {convertVar(vbox.bound[5])} +
, +
+ {convertVar(vbox.bound[6])} + {convertVar(vbox.bound[7])} + {convertVar(vbox.bound[8])} +
, + ]; + + return ( +
+ vBox + + + + {freeRows} + +
+ INVENTORY + + + + {boundRows} + +
+ iCombinator + + {JSON.stringify(vbox)} +
+ ); +} + +module.exports = Vbox; \ No newline at end of file diff --git a/html-client/src/components/vbox.container.jsx b/html-client/src/components/vbox.container.jsx new file mode 100644 index 00000000..b6fa28b1 --- /dev/null +++ b/html-client/src/components/vbox.container.jsx @@ -0,0 +1,48 @@ +const { connect } = require('preact-redux'); + +const actions = require('../actions'); + +const Vbox = require('./vbox.component'); + +const addState = connect( + function receiveState(state) { + const { ws, instance, combiner } = state; + + function sendVboxDiscard() { + return ws.sendVboxDiscard(instance.instance); + } + + function sendVboxCombine() { + return console.log('combine', combiner); + return ws.sendVboxDiscard(instance.instance); + } + + function sendVboxReclaim(v) { + return console.log('reclaim', v); + return ws.sendVboxDiscard(instance.instance); + } + + return { + instance, + combiner, + sendVboxDiscard, + sendVboxReclaim, + sendVboxCombine, + }; + }, + + function receiveDispatch(dispatch, { combiner }) { + function addToCombiner(v) { + combiner.push(v); + if (combiner.length > 3) { + dispatch(actions.setCombiner([v])); + } + dispatch(actions.setCombiner(combiner)); + } + + return { addToCombiner }; + } + +); + +module.exports = addState(Vbox); diff --git a/html-client/src/events.jsx b/html-client/src/events.jsx index c424d2a6..3eae6e4d 100644 --- a/html-client/src/events.jsx +++ b/html-client/src/events.jsx @@ -43,8 +43,8 @@ function registerEvents(store) { return store.dispatch(actions.setInstances(v)); } - function setPlayer(player) { - console.log('EVENT ->', 'player', player); + function setPlayer(v) { + return store.dispatch(actions.setInstance(v)); } function setZone(zone) { diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx index 1e808ad4..026fcc79 100755 --- a/html-client/src/main.jsx +++ b/html-client/src/main.jsx @@ -7,7 +7,6 @@ const { createStore, combineReducers } = require('redux'); const reducers = require('./reducers'); const actions = require('./actions'); // const setupKeys = require('./keyboard'); -// const fizzyText = require('../lib/fizzy-text'); const createSocket = require('./socket'); const registerEvents = require('./events'); @@ -18,6 +17,7 @@ const Body = require('./components/body.component'); const store = createStore( combineReducers({ account: reducers.accountReducer, + combiner: reducers.combinerReducer, game: reducers.gameReducer, cryps: reducers.crypsReducer, instances: reducers.instancesReducer, @@ -56,6 +56,4 @@ document.fonts.load('10pt "Jura"').then(() => { // eslint-disable-next-line preact.render(
, document.body); - - // fizzyText('cryps.gg'); }); diff --git a/html-client/src/reducers.jsx b/html-client/src/reducers.jsx index 64831aa5..2da78ba3 100644 --- a/html-client/src/reducers.jsx +++ b/html-client/src/reducers.jsx @@ -40,6 +40,16 @@ function instanceReducer(state = defaultInstance, action) { } } +const defaultCombiner = []; +function combinerReducer(state = defaultCombiner, action) { + switch (action.type) { + case actions.SET_COMBINER: + return action.value; + default: + return state; + } +} + const defaultGame = null; function gameReducer(state = defaultGame, action) { switch (action.type) { @@ -62,6 +72,7 @@ function wsReducer(state = defaultWs, action) { module.exports = { accountReducer, + combinerReducer, crypsReducer, gameReducer, instancesReducer,