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

wip

Browse Source
This commit is contained in:
ntr
2019-05-28 17:46:35 +10:00
parent a2b1e2d3ff
commit e55705a841
6 changed files with 36 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/styles.css
+1 -1
View File
@@ -475,7 +475,7 @@ figure.gray {
stroke-color: #333;
}
.stat-icon {
.stats svg, .specs svg {
height: 2em;
stroke-width: 5px;
fill: none;
client/src/components/instance.constructs.jsx
+2 -16
View File
@@ -3,7 +3,7 @@ const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');
const { STATS, instanceConstruct } = require('../utils');
const { STATS, instanceConstruct, convertColourCode } = require('../utils');
const actions = require('../actions');
const addState = connect(
@@ -176,7 +176,7 @@ function Construct(props) {
onClick={specClick}
onDblClick={specDblClick}
onMouseOver={e => hoverInfo(e, s)} >
{shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
{shapes[specInfo.values.shape.toLowerCase()](convertColourCode(specInfo.values.colour))}
<figcaption>{s}</figcaption>
</figure>
);
@@ -191,20 +191,6 @@ function Construct(props) {
const activeId = activeConstruct ? activeConstruct.id : false;
const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';
// const cTotal = construct.colours.red + construct.colours.blue + construct.colours.green;
// const colours = mapValues(construct.colours, c => {
// if (cTotal === 0) return 245;
// return Math.floor(c / cTotal * 255);
// });
// const alpha = cTotal === 0 ? 1 : 0.75;
// const thickness = total => {
// if (total < 3) return 1;
// if (total < 6) return 2;
// if (total < 9) return 3;
// return 4;
// };
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div key={construct.id} className={constructClass} onClick={onClick} >
{instanceConstruct(construct.name, construct.id)}
client/src/components/svgs/square.jsx
+20 -7
View File
@@ -1,14 +1,27 @@
const preact = require('preact');
module.exports = function triangle(classes) {
module.exports = function square(colours) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" style="enable-background:new 0 0 199.33 199.99;" className={classes} >
<rect x="1.47" y="1.47" class="st0" width="196.39" height="197.05"/>
<rect x="21.63" y="22.22" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="156.07" height="155.55"/>
<rect x="42.12" y="42.64" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="115.09" height="114.71"/>
<rect x="62.61" y="63.06" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="74.11" height="73.86"/>
<rect x="83.1" y="83.48" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6578 0.3322)" class="st0" width="33.13" height="33.02"/>
viewBox="0 0 199.33 199.99" style="enable-background:new 0 0 199.33 199.99;" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
<clipPath id="secondColour">
<rect x="100" y="0" width="100" height="200" />
</clipPath>
<rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
<rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
<rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
<rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
<rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
<rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
</svg>
);
}
client/src/utils.jsx
+13
View File
@@ -454,6 +454,18 @@ function convertItem(v) {
// return;
}
function convertColourCode(cc) {
if (cc === 'RR') return ['red', 'red'];
if (cc === 'GG') return ['green', 'green'];
if (cc === 'BB') return ['blue', 'blue'];
if (cc === 'RG') return ['red', 'green'];
if (cc === 'RB') return ['red', 'blue'];
if (cc === 'GB') return ['green', 'blue'];
if (cc === 'W') return ['white', 'white'];
return ['gray', 'gray'];
}
module.exports = {
animateConstruct,
stringSort,
@@ -468,6 +480,7 @@ module.exports = {
getCombatSequence,
getCombatText,
resoConstructHealth,
convertColourCode,
NULL_UUID,
STATS,
COLOUR_ICONS,