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

coloured border experiment

Browse Source
This commit is contained in:
Mashy 2019-10-15 16:05:58 +10:00
parent 1c611c31e9
commit b2e4570bfb
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/assets/styles/styles.less
View File

@ -139,6 +139,24 @@ button, input {
color: @gray-focus; color: @gray-focus;
border-color: @gray-focus; border-color: @gray-focus;
} }
&.red-border {
font-z-color: @red;
}
&.blue-border {
border-color: @blue;
}
&.green-border {
border-color: @green;
}
&.red-blue-border {
border-image: linear-gradient(to right, @red 50%, @blue 50%) 5;
}
&.red-green-border {
border-image: linear-gradient(to right, @red 50%, @green 50%) 5;
}
&.blue-green-border {
border-image: linear-gradient(to right, @blue 50%, @green 50%) 5;
}
} }
a { a {

24
client/src/components/vbox.component.jsx
View File

@ -3,6 +3,7 @@ const range = require('lodash/range');
const countBy = require('lodash/countBy'); const countBy = require('lodash/countBy');
const without = require('lodash/without'); const without = require('lodash/without');
const { connect } = require('preact-redux'); const { connect } = require('preact-redux');
const { removeTier } = require('../utils');
const shapes = require('./shapes'); const shapes = require('./shapes');
const actions = require('../actions'); const actions = require('../actions');
@ -282,8 +283,29 @@ function Vbox(args) {
return combinerChange(combiner); return combinerChange(combiner);
} }
const source = itemInfo.combos.filter(c => c.item === removeTier(v));
const colours = itemSource => {
if (!itemSource || !itemSource.length) return '';
if (itemSource[0].components[0] === 'Blue') {
if (itemSource[0].components[1] === 'Red') return 'red-blue-border';
if (itemSource[0].components[1] === 'Green') return 'blue-green-border';
if (itemSource[0].components[1] === 'Blue') return 'blue-border';
}
if (itemSource[0].components[0] === 'Red') {
if (itemSource[0].components[1] === 'Red') return 'red-border';
if (itemSource[0].components[1] === 'Green') return 'red-green-border';
if (itemSource[0].components[1] === 'Blue') return 'red-blue-border';
}
if (itemSource[0].components[0] === 'Green') {
if (itemSource[0].components[1] === 'Red') return 'red-green-border';
if (itemSource[0].components[1] === 'Green') return 'green-border';
if (itemSource[0].components[1] === 'Blue') return 'blue-green-border';
}
return '';
};
const highlighted = combiner.indexOf(i) > -1; const highlighted = combiner.indexOf(i) > -1;
const classes = `${highlighted ? 'highlight' : ''}`; const classes = `${highlighted ? 'highlight' : colours(source)}`;
if (shapes[v]) { if (shapes[v]) {
return ( return (
<button <button