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

whew

Browse Source
This commit is contained in:
ntr 2019-05-28 18:29:22 +10:00
parent e55705a841
commit f277a5714d
11 changed files with 163 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/assets/styles/instance.css
View File

@ -289,14 +289,8 @@
margin: 0 1em; margin: 0 1em;
} }
.equip-icon { .icons figure {
height: 2em; flex: 1;
stroke-width: 5px;
fill: none;
}
.construct-list .stat-icon {
width: 100%;
} }
.construct-list .stats .damage-label { .construct-list .stats .damage-label {
@ -424,6 +418,10 @@ button.equipping {
text-align: center; text-align: center;
} }
.thresholds svg {
stroke-width: 5px;
}
.thresholds hr { .thresholds hr {
margin: 1em 0; margin: 1em 0;
} }

13
client/src/components/game.component.jsx
View File

@ -1,7 +1,8 @@
const preact = require('preact'); const preact = require('preact');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils'); const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations'); // const { animationDivs } = require('../animations');
const GameConstruct = require('./game.construct'); const GameConstruct = require('./game.construct');
const shapes = require('./shapes');
function GamePanel(props) { function GamePanel(props) {
const { const {
@ -121,11 +122,11 @@ function GamePanel(props) {
const ko = construct.green_life.value === 0 ? 'ko' : ''; const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct); const classes = eventClasses(resolution, construct);
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => ( const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={s.stat}> <div key={j} alt={STATS[s].stat}>
{s.svg(`stat-icon ${s.colour}`)} {shapes[s]()}
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div> <div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
<div className="value" >{construct[s.stat].value}</div> <div className="value" >{construct[STATS[s].stat].value}</div>
</div> </div>
)); ));

11
client/src/components/game.construct.jsx
View File

@ -5,6 +5,7 @@ const range = require('lodash/range');
const actions = require('../actions'); const actions = require('../actions');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils'); const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations'); const { animationDivs } = require('../animations');
const shapes = require('./shapes');
const SkillBtn = require('./skill.btn'); const SkillBtn = require('./skill.btn');
@ -57,11 +58,11 @@ function GameConstruct(props) {
const skills = range(0, 3) const skills = range(0, 3)
.map(i => <SkillBtn key={i} construct={construct} i={i} />); .map(i => <SkillBtn key={i} construct={construct} i={i} />);
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => ( const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={s.stat}> <div key={j} alt={STATS[s].stat}>
{s.svg(`stat-icon ${s.colour}`)} {shapes[s]()}
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div> <div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
<div className="value" >{construct[s.stat].value}</div> <div className="value" >{construct[STATS[s].stat].value}</div>
</div> </div>
)); ));

6
client/src/components/info.component.jsx
View File

@ -1,9 +1,9 @@
const preact = require('preact'); const preact = require('preact');
const { Fragment } = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const { INFO } = require('./../constants'); const { INFO } = require('./../constants');
const { COLOUR_ICONS, convertItem } = require('../utils'); const { convertItem } = require('../utils');
const shapes = require('./shapes');
function InfoComponent(args) { function InfoComponent(args) {
const { const {
@ -65,7 +65,7 @@ function InfoComponent(args) {
return ( return (
<figure key={j} alt={c.colour} className={reqClass} > <figure key={j} alt={c.colour} className={reqClass} >
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} {shapes.square([c])}
</figure> </figure>
); );
}); });

20
client/src/components/instance.constructs.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const shapes = require('./shapes'); const shapes = require('./shapes');
const { STATS, instanceConstruct, convertColourCode } = require('../utils'); const { STATS, instanceConstruct } = require('../utils');
const actions = require('../actions'); const actions = require('../actions');
const addState = connect( const addState = connect(
@ -146,7 +146,7 @@ function Construct(props) {
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray'; const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
return ( return (
<figure key={i} className={equip} > <figure key={i} className={equip} >
{shapes.diamond(`stat-icon ${equip}`)} {shapes.diamond(equip)}
<figcaption>&nbsp;</figcaption> <figcaption>&nbsp;</figcaption>
</figure> </figure>
); );
@ -176,18 +176,20 @@ function Construct(props) {
onClick={specClick} onClick={specClick}
onDblClick={specDblClick} onDblClick={specDblClick}
onMouseOver={e => hoverInfo(e, s)} > onMouseOver={e => hoverInfo(e, s)} >
{shapes[specInfo.values.shape.toLowerCase()](convertColourCode(specInfo.values.colour))} {shapes[s]()}
<figcaption>{s}</figcaption> <figcaption>{s}</figcaption>
</figure> </figure>
); );
}); });
const stats = Object.values(STATS).map(s => ( const stats = Object.keys(STATS).map(s => {
<figure key={s.stat} alt={s.stat} className={s.stat}> const stat = STATS[s];
{s.svg(`stat-icon ${s.colour} stat`)} return <figure key={stat.stat} alt={stat.stat} className={stat.stat}>
<figcaption>{construct[s.stat].value}</figcaption> {shapes[s]()}
</figure> <figcaption>{construct[stat.stat].value}</figcaption>
)); </figure>;
});
const activeId = activeConstruct ? activeConstruct.id : false; const activeId = activeConstruct ? activeConstruct.id : false;
const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct'; const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';

4
client/src/components/instance.equip.jsx
View File

@ -108,7 +108,7 @@ function Equipment(props) {
if (specInfo && specInfo.spec) { if (specInfo && specInfo.spec) {
return ( return (
<figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} > <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> <figcaption>{item}</figcaption>
</figure> </figure>
); );
@ -120,7 +120,7 @@ function Equipment(props) {
if (specs.every(s => !s)) { if (specs.every(s => !s)) {
specs.push( specs.push(
<figure> <figure>
{shapes.diamond('stat-icon gray')} {shapes.diamond('gray')}
<figcaption>&nbsp;</figcaption> <figcaption>&nbsp;</figcaption>
</figure> </figure>
); );

39
client/src/components/shapes.jsx
View File

@ -18,4 +18,43 @@ module.exports = {
triangle, triangle,
saw, saw,
vboxColour, 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']),
}; };

52
client/src/components/svgs/circle.jsx
View File

@ -1,20 +1,38 @@
const preact = require('preact'); const preact = require('preact');
module.exports = function triangle(classes) { module.exports = function circle(colours) {
return ( if (colours.length === 1) {
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" return (
viewBox="0 0 198.13 199.94" style="enable-background:new 0 0 198.13 199.94;" className={classes} > <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" >
<g> <ellipse class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<ellipse class="st2" 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="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 <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"/>
S141.34,177.35,99.07,177.35z"/> <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="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 <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"/>
S129.81,156.23,99.07,156.23z"/> </svg>
<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"
/> return (
</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" >
</svg> <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>
);
}; };

15
client/src/components/svgs/square.jsx
View File

@ -1,9 +1,22 @@
const preact = require('preact'); const preact = require('preact');
module.exports = function square(colours) { 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" >
<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 ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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" >
<clipPath id="firstColour"> <clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" /> <rect x="0" y="0" width="100" height="200" />
</clipPath> </clipPath>

44
client/src/components/svgs/triangle.jsx
View File

@ -1,16 +1,38 @@
const preact = require('preact'); 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" >
<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 ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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" >
viewBox="0 0 202.69 177.29" style="enable-background:new 0 0 202.69 177.29;" className={classes}> <clipPath id="firstColour">
<g> <rect x="0" y="0" width="100" height="200" />
<polygon class="st1" points="1.77,176.25 100.7,2.08 200.9,176.25 "/> </clipPath>
<polygon class="st1" points="23.99,163.23 100.78,28.05 178.54,163.23 "/> <clipPath id="secondColour">
<polygon class="st1" points="46.21,150.21 100.85,54.03 156.18,150.21 "/> <rect x="100" y="0" width="100" height="200" />
<polygon class="st1" points="68.43,137.19 100.92,80 133.82,137.19 "/> </clipPath>
<polygon class="st1" points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
</g> <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> </svg>
); );
} };

34
client/src/utils.jsx
View File

@ -130,37 +130,37 @@ function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
const NULL_UUID = '00000000-0000-0000-0000-000000000000'; const NULL_UUID = '00000000-0000-0000-0000-000000000000';
const STATS = { const STATS = {
redPower: { RedPower: {
stat: 'red_power', stat: 'red_power',
colour: 'red', colour: 'red',
svg: shapes.circle, svg: shapes.circle,
}, },
greenPower: { GreenPower: {
stat: 'green_power', stat: 'green_power',
colour: 'green', colour: 'green',
svg: shapes.circle, svg: shapes.circle,
}, },
bluePower: { BluePower: {
stat: 'blue_power', stat: 'blue_power',
colour: 'blue', colour: 'blue',
svg: shapes.circle, svg: shapes.circle,
}, },
speed: { Speed: {
stat: 'speed', stat: 'speed',
colour: 'white', colour: 'white',
svg: shapes.triangle, svg: shapes.triangle,
}, },
redLife: { RedLife: {
stat: 'red_life', stat: 'red_life',
colour: 'red', colour: 'red',
svg: shapes.square, svg: shapes.square,
}, },
greenLife: { GreenLife: {
stat: 'green_life', stat: 'green_life',
colour: 'green', colour: 'green',
svg: shapes.square, svg: shapes.square,
}, },
blueLife: { BlueLife: {
stat: 'blue_life', stat: 'blue_life',
colour: 'blue', colour: 'blue',
svg: shapes.square, 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) { function resoConstructHealth(resolution, currentGame) {
if (!resolution) return false; if (!resolution) return false;
@ -454,18 +448,6 @@ function convertItem(v) {
// return; // 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 = { module.exports = {
animateConstruct, animateConstruct,
stringSort, stringSort,
@ -480,8 +462,6 @@ module.exports = {
getCombatSequence, getCombatSequence,
getCombatText, getCombatText,
resoConstructHealth, resoConstructHealth,
convertColourCode,
NULL_UUID, NULL_UUID,
STATS, STATS,
COLOUR_ICONS,
}; };