ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic cryp box colour

Browse Source
This commit is contained in:
Mashy 2019-04-08 14:02:22 +10:00
parent c34ad7edd0
commit b8789f831c
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/instance.component.jsx
View File

@ -1,6 +1,7 @@
const preact = require('preact'); const preact = require('preact');
// const key = require('keymaster'); // const key = require('keymaster');
const range = require('lodash/range'); const range = require('lodash/range');
const mapValues = require('loadsh/mapValues');
const VboxContainer = require('./vbox.container'); const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container'); const InfoContainer = require('./info.container');
@ -46,6 +47,13 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
<figcaption>{SPECS[s].caption}</figcaption> <figcaption>{SPECS[s].caption}</figcaption>
</figure> </figure>
)); ));
const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
const colours = mapValues(cryp.colours, c => {
if (cTotal === 0) return 245;
return Math.floor(c / cTotal * 255);
});
const alpha = cTotal === 0 ? 1 : 0.75;
const border = { border: `1px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return ( return (
<div <div
@ -53,6 +61,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
className="cryp-box" className="cryp-box"
onDragOver={onDragOver} onDragOver={onDragOver}
onDrop={onDrop} onDrop={onDrop}
style={border}
> >
<div className="cryp-box-top"> <div className="cryp-box-top">
<figure className="img" onClick={onClick}> <figure className="img" onClick={onClick}>