From b2e4570bfb77952747c7ab8bee243f350e8894bd Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 15 Oct 2019 16:05:58 +1000
Subject: [PATCH] coloured border experiment

---
 client/assets/styles/styles.less         | 18 ++++++++++++++++++
 client/src/components/vbox.component.jsx | 24 +++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index f89cecb0..51884646 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -139,6 +139,24 @@ button, input {
         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 {
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 067f8310..52d1d2e8 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -3,6 +3,7 @@ const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
 const { connect } = require('preact-redux');
+const { removeTier } = require('../utils');
 
 const shapes = require('./shapes');
 const actions = require('../actions');
@@ -282,8 +283,29 @@ function Vbox(args) {
             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 classes = `${highlighted ? 'highlight' : ''}`;
+        const classes = `${highlighted ? 'highlight' : colours(source)}`;
         if (shapes[v]) {
             return (
                 <button