whew
This commit is contained in:
ntr
parent
e55705a841
commit
f277a5714d
@ -289,14 +289,8 @@
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.equip-icon {
|
||||
height: 2em;
|
||||
stroke-width: 5px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.construct-list .stat-icon {
|
||||
width: 100%;
|
||||
.icons figure {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.construct-list .stats .damage-label {
|
||||
@ -424,6 +418,10 @@ button.equipping {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thresholds svg {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.thresholds hr {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
const preact = require('preact');
|
||||
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
|
||||
const { animationDivs } = require('../animations');
|
||||
// const { animationDivs } = require('../animations');
|
||||
const GameConstruct = require('./game.construct');
|
||||
const shapes = require('./shapes');
|
||||
|
||||
function GamePanel(props) {
|
||||
const {
|
||||
@ -121,11 +122,11 @@ function GamePanel(props) {
|
||||
const ko = construct.green_life.value === 0 ? 'ko' : '';
|
||||
const classes = eventClasses(resolution, construct);
|
||||
|
||||
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
|
||||
<div key={j} alt={s.stat}>
|
||||
{s.svg(`stat-icon ${s.colour}`)}
|
||||
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
|
||||
<div className="value" >{construct[s.stat].value}</div>
|
||||
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
|
||||
<div key={j} alt={STATS[s].stat}>
|
||||
{shapes[s]()}
|
||||
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
|
||||
<div className="value" >{construct[STATS[s].stat].value}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ const range = require('lodash/range');
|
||||
const actions = require('../actions');
|
||||
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
|
||||
const { animationDivs } = require('../animations');
|
||||
const shapes = require('./shapes');
|
||||
|
||||
const SkillBtn = require('./skill.btn');
|
||||
|
||||
@ -57,11 +58,11 @@ function GameConstruct(props) {
|
||||
const skills = range(0, 3)
|
||||
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
|
||||
|
||||
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
|
||||
<div key={j} alt={s.stat}>
|
||||
{s.svg(`stat-icon ${s.colour}`)}
|
||||
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
|
||||
<div className="value" >{construct[s.stat].value}</div>
|
||||
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
|
||||
<div key={j} alt={STATS[s].stat}>
|
||||
{shapes[s]()}
|
||||
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
|
||||
<div className="value" >{construct[STATS[s].stat].value}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const preact = require('preact');
|
||||
const { Fragment } = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const { INFO } = require('./../constants');
|
||||
const { COLOUR_ICONS, convertItem } = require('../utils');
|
||||
const { convertItem } = require('../utils');
|
||||
const shapes = require('./shapes');
|
||||
|
||||
function InfoComponent(args) {
|
||||
const {
|
||||
@ -65,7 +65,7 @@ function InfoComponent(args) {
|
||||
|
||||
return (
|
||||
<figure key={j} alt={c.colour} className={reqClass} >
|
||||
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
||||
{shapes.square([c])}
|
||||
</figure>
|
||||
);
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { STATS, instanceConstruct, convertColourCode } = require('../utils');
|
||||
const { STATS, instanceConstruct } = require('../utils');
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
@ -146,7 +146,7 @@ function Construct(props) {
|
||||
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
|
||||
return (
|
||||
<figure key={i} className={equip} >
|
||||
{shapes.diamond(`stat-icon ${equip}`)}
|
||||
{shapes.diamond(equip)}
|
||||
<figcaption> </figcaption>
|
||||
</figure>
|
||||
);
|
||||
@ -176,18 +176,20 @@ function Construct(props) {
|
||||
onClick={specClick}
|
||||
onDblClick={specDblClick}
|
||||
onMouseOver={e => hoverInfo(e, s)} >
|
||||
{shapes[specInfo.values.shape.toLowerCase()](convertColourCode(specInfo.values.colour))}
|
||||
{shapes[s]()}
|
||||
<figcaption>{s}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
});
|
||||
|
||||
const stats = Object.values(STATS).map(s => (
|
||||
<figure key={s.stat} alt={s.stat} className={s.stat}>
|
||||
{s.svg(`stat-icon ${s.colour} stat`)}
|
||||
<figcaption>{construct[s.stat].value}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
const stats = Object.keys(STATS).map(s => {
|
||||
const stat = STATS[s];
|
||||
return <figure key={stat.stat} alt={stat.stat} className={stat.stat}>
|
||||
{shapes[s]()}
|
||||
<figcaption>{construct[stat.stat].value}</figcaption>
|
||||
</figure>;
|
||||
});
|
||||
|
||||
const activeId = activeConstruct ? activeConstruct.id : false;
|
||||
const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ function Equipment(props) {
|
||||
if (specInfo && specInfo.spec) {
|
||||
return (
|
||||
<figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
|
||||
{shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
|
||||
{shapes[item]()}
|
||||
<figcaption>{item}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
@ -120,7 +120,7 @@ function Equipment(props) {
|
||||
if (specs.every(s => !s)) {
|
||||
specs.push(
|
||||
<figure>
|
||||
{shapes.diamond('stat-icon gray')}
|
||||
{shapes.diamond('gray')}
|
||||
<figcaption> </figcaption>
|
||||
</figure>
|
||||
);
|
||||
|
||||
@ -18,4 +18,43 @@ module.exports = {
|
||||
triangle,
|
||||
saw,
|
||||
vboxColour,
|
||||
|
||||
// stats
|
||||
RedLife: () => square(['red']),
|
||||
GreenLife: () => square(['green']),
|
||||
BlueLife: () => square(['blue']),
|
||||
RedPower: () => circle(['red']),
|
||||
GreenPower: () => circle(['green']),
|
||||
BluePower: () => circle(['blue']),
|
||||
Speed: () => triangle(['white']),
|
||||
|
||||
// specs
|
||||
// Base
|
||||
Power: () => circle(['white']),
|
||||
Life: () => square(['white']),
|
||||
// Speed,
|
||||
|
||||
// Lifes Upgrades
|
||||
LifeGGI: () => square(['green']),
|
||||
LifeRRI: () => square(['red']),
|
||||
LifeBBI: () => square(['blue']),
|
||||
LifeRGI: () => square(['red', 'green']),
|
||||
LifeGBI: () => square(['green', 'blue']),
|
||||
LifeRBI: () => square(['red', 'blue']),
|
||||
|
||||
// Power Upgrades
|
||||
PowerGGI: () => circle(['green']),
|
||||
PowerRRI: () => circle(['red']),
|
||||
PowerBBI: () => circle(['blue']),
|
||||
PowerRGI: () => circle(['red', 'green']),
|
||||
PowerGBI: () => circle(['green', 'blue']),
|
||||
PowerRBI: () => circle(['red', 'blue']),
|
||||
|
||||
// Speed Upgrades
|
||||
SpeedGGI: () => triangle(['green']),
|
||||
SpeedRRI: () => triangle(['red']),
|
||||
SpeedBBI: () => triangle(['blue']),
|
||||
SpeedRGI: () => triangle(['red', 'green']),
|
||||
SpeedGBI: () => triangle(['green', 'blue']),
|
||||
SpeedRBI: () => triangle(['red', 'blue']),
|
||||
};
|
||||
|
||||
@ -1,20 +1,38 @@
|
||||
const preact = require('preact');
|
||||
|
||||
module.exports = function triangle(classes) {
|
||||
module.exports = function circle(colours) {
|
||||
if (colours.length === 1) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 198.13 199.94" style="enable-background:new 0 0 198.13 199.94;" className={classes} >
|
||||
<g>
|
||||
<ellipse class="st2" cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
|
||||
<path class="st2" d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38
|
||||
S141.34,177.35,99.07,177.35z"/>
|
||||
<path class="st2" d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26
|
||||
S129.81,156.23,99.07,156.23z"/>
|
||||
<path class="st2" d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15
|
||||
S118.27,135.11,99.07,135.11z"/>
|
||||
<path class="st2" d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"
|
||||
/>
|
||||
</g>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 198.13 199.94" >
|
||||
<ellipse class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
|
||||
<path class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
|
||||
<path class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
|
||||
<path class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
|
||||
<path class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 198.13 199.94" >
|
||||
<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>
|
||||
|
||||
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
|
||||
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
|
||||
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
|
||||
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
|
||||
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
|
||||
|
||||
<ellipse clip-path="url(#secondColour)" class={colours[1]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
|
||||
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
|
||||
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
|
||||
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
|
||||
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,22 @@
|
||||
const preact = require('preact');
|
||||
|
||||
module.exports = function square(colours) {
|
||||
if (colours.length === 1) {
|
||||
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;" >
|
||||
viewBox="0 0 199.33 199.99" >
|
||||
<rect x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
|
||||
<rect x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
|
||||
<rect x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
|
||||
<rect x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
|
||||
<rect x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
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" >
|
||||
<clipPath id="firstColour">
|
||||
<rect x="0" y="0" width="100" height="200" />
|
||||
</clipPath>
|
||||
|
||||
@ -1,16 +1,38 @@
|
||||
const preact = require('preact');
|
||||
|
||||
module.exports = function triangle(classes) {
|
||||
module.exports = function triangle(colours) {
|
||||
if (colours.length === 1) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 202.69 177.29" style="enable-background:new 0 0 202.69 177.29;" className={classes}>
|
||||
<g>
|
||||
<polygon class="st1" points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
||||
<polygon class="st1" points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
||||
<polygon class="st1" points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
||||
<polygon class="st1" points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
||||
<polygon class="st1" points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
||||
</g>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
|
||||
<polygon class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
||||
<polygon class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
||||
<polygon class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
||||
<polygon class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
||||
<polygon class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
|
||||
<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>
|
||||
|
||||
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
||||
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
||||
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
||||
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
||||
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
||||
|
||||
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
||||
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
||||
<polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
||||
<polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
||||
<polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -130,37 +130,37 @@ function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const STATS = {
|
||||
redPower: {
|
||||
RedPower: {
|
||||
stat: 'red_power',
|
||||
colour: 'red',
|
||||
svg: shapes.circle,
|
||||
},
|
||||
greenPower: {
|
||||
GreenPower: {
|
||||
stat: 'green_power',
|
||||
colour: 'green',
|
||||
svg: shapes.circle,
|
||||
},
|
||||
bluePower: {
|
||||
BluePower: {
|
||||
stat: 'blue_power',
|
||||
colour: 'blue',
|
||||
svg: shapes.circle,
|
||||
},
|
||||
speed: {
|
||||
Speed: {
|
||||
stat: 'speed',
|
||||
colour: 'white',
|
||||
svg: shapes.triangle,
|
||||
},
|
||||
redLife: {
|
||||
RedLife: {
|
||||
stat: 'red_life',
|
||||
colour: 'red',
|
||||
svg: shapes.square,
|
||||
},
|
||||
greenLife: {
|
||||
GreenLife: {
|
||||
stat: 'green_life',
|
||||
colour: 'green',
|
||||
svg: shapes.square,
|
||||
},
|
||||
blueLife: {
|
||||
BlueLife: {
|
||||
stat: 'blue_life',
|
||||
colour: 'blue',
|
||||
svg: shapes.square,
|
||||
@ -168,12 +168,6 @@ const STATS = {
|
||||
};
|
||||
|
||||
|
||||
const COLOUR_ICONS = {
|
||||
red: { colour: 'red', caption: 'red', svg: shapes.square },
|
||||
blue: { colour: 'blue', caption: 'blue', svg: shapes.square },
|
||||
green: { colour: 'green', caption: 'green', svg: shapes.square },
|
||||
};
|
||||
|
||||
function resoConstructHealth(resolution, currentGame) {
|
||||
if (!resolution) return false;
|
||||
|
||||
@ -454,18 +448,6 @@ 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,
|
||||
@ -480,8 +462,6 @@ module.exports = {
|
||||
getCombatSequence,
|
||||
getCombatText,
|
||||
resoConstructHealth,
|
||||
convertColourCode,
|
||||
NULL_UUID,
|
||||
STATS,
|
||||
COLOUR_ICONS,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user