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

icons

Browse Source
This commit is contained in:
ntr 2019-04-03 17:22:06 +11:00
parent 68ae9ba2cb
commit 31d8516652
21 changed files with 344 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/assets/icons/circle.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 198.13 199.94" style="enable-background:new 0 0 198.13 199.94;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.9352;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.9627;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.9358;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2.9347;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FFFFFF;stroke-width:2.9584;stroke-miterlimit:10;}
</style>
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
client/assets/icons/diamond.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.2498;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.0632;stroke-miterlimit:10;}
</style>
<g>
<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 "/>
<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 "/>
<polygon class="st0" points="42.26,102.72 101.23,42.88 160.19,102.72 101.23,162.55 "/>
<polygon class="st0" points="62.6,102.72 101.23,63.52 139.86,102.72 101.23,141.91 "/>
<polygon class="st0" points="82.94,102.72 101.23,84.16 119.52,102.72 101.23,121.27 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 999 B

24
client/assets/icons/hexagon.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.9352;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.9627;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.9358;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2.9347;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FFFFFF;stroke-width:2.9584;stroke-miterlimit:10;}
</style>
<g>
<polygon class="st3" points="54.42,198.47 1.47,145.01 1.47,54.93 54.42,1.47 143.64,1.47 196.6,54.93 196.6,145.01 143.64,198.47
"/>
<polygon class="st3" points="62.87,177.87 21.87,136.47 21.87,63.46 62.87,22.07 135.19,22.07 176.19,63.46 176.19,136.47
135.19,177.87 "/>
<polygon class="st3" points="71.32,157.26 42.28,127.94 42.28,71.99 71.32,42.67 126.74,42.67 155.78,71.99 155.78,127.94
126.74,157.26 "/>
<polygon class="st3" points="79.78,136.66 62.69,119.4 62.69,80.53 79.78,63.27 118.29,63.27 135.37,80.53 135.37,119.4
118.29,136.66 "/>
<polygon class="st3" points="88.23,116.06 83.1,110.87 83.1,89.06 88.23,83.88 109.83,83.88 114.97,89.06 114.97,110.87
109.83,116.06 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

19
client/assets/icons/pentagon.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.9352;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.9627;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.9358;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2.9347;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FFFFFF;stroke-width:2.9584;stroke-miterlimit:10;}
</style>
<g>
<polygon class="st4" points="106.11,1.82 1.74,76.95 41.61,198.52 170.61,198.52 210.47,76.95 "/>
<polygon class="st4" points="54.38,181.1 22.41,83.61 106.11,23.36 189.8,83.61 157.83,181.1 "/>
<polygon class="st4" points="67.15,163.68 43.08,90.26 106.11,44.89 169.13,90.26 145.06,163.68 "/>
<polygon class="st4" points="79.92,146.26 63.75,96.92 106.11,66.42 148.47,96.92 132.29,146.26 "/>
<polygon class="st4" points="92.7,128.84 84.41,103.57 106.11,87.96 127.8,103.57 119.52,128.84 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
client/assets/icons/square.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 199.33 199.99" style="enable-background:new 0 0 199.33 199.99;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.9352;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.9627;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.9358;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2.9347;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FFFFFF;stroke-width:2.9584;stroke-miterlimit:10;}
</style>
<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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

25
client/assets/icons/squircle.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.9352;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.9627;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.9358;stroke-miterlimit:10;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2.9347;stroke-miterlimit:10;}
.st4{fill:none;stroke:#FFFFFF;stroke-width:2.9584;stroke-miterlimit:10;}
</style>
<g>
<g>
<path class="st1" d="M101.35,198.52h-0.9c-54.66,0-98.97-44.31-98.97-98.97V1.48h198.84v98.07
C200.32,154.21,156.01,198.52,101.35,198.52z"/>
<path class="st1" d="M22.12,99.65V21.93h157.56v77.71c0,43.31-35.11,78.42-78.42,78.42h-0.72
C57.23,178.07,22.12,142.96,22.12,99.65z"/>
<path class="st1" d="M100.64,157.62h0.53c31.96,0,57.88-25.91,57.88-57.88V42.38H42.76v57.36
C42.76,131.7,68.67,157.62,100.64,157.62z"/>
</g>
<path class="st1" d="M63.4,99.83v-37h75.01v37c0,20.62-16.71,37.33-37.33,37.33h-0.34C80.11,137.16,63.4,120.45,63.4,99.83z"/>
<path class="st1" d="M84.03,99.92V83.29h33.73v16.64c0,9.27-7.52,16.79-16.79,16.79h-0.15C91.55,116.71,84.03,109.2,84.03,99.92z"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
client/assets/icons/triangle.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 202.69 177.29" style="enable-background:new 0 0 202.69 177.29;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2.2498;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:2.0632;stroke-miterlimit:10;}
</style>
<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>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

47
client/cryps.css
View File

@ -86,6 +86,37 @@ button.hidden {
opacity: 0; opacity: 0;
} }
svg {
fill: none;
stroke: whitesmoke;
stroke-width: 0;
}
/*
COLOURS
*/
.green {
color: #1FF01F;
stroke: #1FF01F;
}
.red {
color: #a52a2a;
stroke: #a52a2a;
}
.blue {
color: #3498db;
stroke: #3498db;
}
.yellow {
color: #FFD123;
stroke: #FFD123;
}
/* /*
LOGIN LOGIN
*/ */
@ -133,8 +164,9 @@ header {
.header-status svg { .header-status svg {
margin-left: 1em; margin-left: 1em;
height: 1em; height: 1.5em;
background-color: black; background-color: black;
stroke: whitesmoke;
} }
.ping-path { .ping-path {
@ -389,19 +421,13 @@ header {
flex: 1 1 0; flex: 1 1 0;
border: 0; border: 0;
align-items: center; align-items: center;
padding: 0.25em 0; padding: 0.5em 0 0 0;
} }
.cryp-box .stats figcaption { .cryp-box .stats figcaption {
font-size: 75%; font-size: 75%;
} }
.cryp-box .stats svg {
height: 1.5em;
stroke-width: 2px;
}
.cryp-box .skills { .cryp-box .skills {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -423,6 +449,11 @@ header {
border-top-width: 0; border-top-width: 0;
} }
.stat-icon {
height: 2em;
stroke-width: 5px;
fill: none;
}
/* GAME */ /* GAME */
.game-back-btn { .game-back-btn {

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

@ -2,7 +2,6 @@ const preact = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const molecule = require('./molecule'); const molecule = require('./molecule');
const saw = require('./saw.component');
// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
@ -89,7 +88,6 @@ function GamePanel(props) {
{ stat: 'blue_shield', colour: '#3498db' }, { stat: 'blue_shield', colour: '#3498db' },
].map((s, i) => ( ].map((s, i) => (
<figure key={i} alt={s.stat}> <figure key={i} alt={s.stat}>
{saw(s.colour)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption> <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
</figure> </figure>
)); ));
@ -135,7 +133,6 @@ function GamePanel(props) {
{ stat: 'blue_shield', colour: '#3498db' }, { stat: 'blue_shield', colour: '#3498db' },
].map((s, j) => ( ].map((s, j) => (
<figure key={j} alt={s.stat}> <figure key={j} alt={s.stat}>
{saw(s.colour)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption> <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
</figure> </figure>
)); ));

4
client/src/components/header.component.jsx
View File

@ -1,14 +1,14 @@
// eslint-disable-next-line // eslint-disable-next-line
const preact = require('preact'); const preact = require('preact');
const saw = require('./saw.component'); const { saw } = require('./shapes');
function renderHeader(args) { function renderHeader(args) {
const { account } = args; const { account } = args;
const accountStatus = account ? const accountStatus = account ?
(<div className="header-status"> (<div className="header-status">
<h3 className="header-username">{account.name}</h3> <h3 className="header-username">{account.name}</h3>
{saw('whitesmoke')} {saw('stat-icon')}
</div>) </div>)
: ''; : '';

16
client/src/components/instance.component.jsx
View File

@ -5,7 +5,9 @@ const range = require('lodash/range');
const VboxContainer = require('./vbox.container'); const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container'); const InfoContainer = require('./info.container');
const molecule = require('./molecule'); const molecule = require('./molecule');
const saw = require('./saw.component');
const shapes = require('./shapes');
const { STATS } = require('../utils');
function Cryp(cryp, sendVboxApply, setInfo) { function Cryp(cryp, sendVboxApply, setInfo) {
const skills = range(0, 4).map(i => { const skills = range(0, 4).map(i => {
@ -28,17 +30,9 @@ function Cryp(cryp, sendVboxApply, setInfo) {
return sendVboxApply(cryp.id, item); return sendVboxApply(cryp.id, item);
} }
const stats = [ const stats = STATS.map((s, i) => (
{ stat: 'hp', colour: '#1FF01F' },
{ stat: 'green_damage', colour: '#1FF01F' },
{ stat: 'red_shield', colour: '#a52a2a' },
{ stat: 'red_damage', colour: '#a52a2a' },
{ stat: 'blue_shield', colour: '#3498db' },
{ stat: 'blue_damage', colour: '#3498db' },
{ stat: 'speed', colour: '#FFD123' },
].map((s, i) => (
<figure key={i} alt={s.stat}> <figure key={i} alt={s.stat}>
{saw(s.colour)} {s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption> <figcaption>{cryp[s.stat].value}</figcaption>
</figure> </figure>
)); ));

19
client/src/components/shapes.jsx Normal file
View File

@ -0,0 +1,19 @@
const circle = require('./svgs/circle');
const diamond = require('./svgs/diamond');
const hexagon = require('./svgs/hexagon');
const pentagon = require('./svgs/pentagon');
const saw = require('./svgs/saw');
const square = require('./svgs/square');
const squircle = require('./svgs/squircle');
const triangle = require('./svgs/triangle');
module.exports = {
circle,
diamond,
hexagon,
pentagon,
square,
squircle,
triangle,
saw,
};

20
client/src/components/svgs/circle.jsx Normal file
View File

@ -0,0 +1,20 @@
const preact = require('preact');
module.exports = function triangle(classes) {
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>
);
};

16
client/src/components/svgs/diamond.jsx Normal file
View File

@ -0,0 +1,16 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" className={classes} >
<g>
<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 "/>
<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 "/>
<polygon class="st0" points="42.26,102.72 101.23,42.88 160.19,102.72 101.23,162.55 "/>
<polygon class="st0" points="62.6,102.72 101.23,63.52 139.86,102.72 101.23,141.91 "/>
<polygon class="st0" points="82.94,102.72 101.23,84.16 119.52,102.72 101.23,121.27 "/>
</g>
</svg>
);
};

21
client/src/components/svgs/hexagon.jsx Normal file
View File

@ -0,0 +1,21 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" className={classes} >
<g>
<polygon class="st3" points="54.42,198.47 1.47,145.01 1.47,54.93 54.42,1.47 143.64,1.47 196.6,54.93 196.6,145.01 143.64,198.47
"/>
<polygon class="st3" points="62.87,177.87 21.87,136.47 21.87,63.46 62.87,22.07 135.19,22.07 176.19,63.46 176.19,136.47
135.19,177.87 "/>
<polygon class="st3" points="71.32,157.26 42.28,127.94 42.28,71.99 71.32,42.67 126.74,42.67 155.78,71.99 155.78,127.94
126.74,157.26 "/>
<polygon class="st3" points="79.78,136.66 62.69,119.4 62.69,80.53 79.78,63.27 118.29,63.27 135.37,80.53 135.37,119.4
118.29,136.66 "/>
<polygon class="st3" points="88.23,116.06 83.1,110.87 83.1,89.06 88.23,83.88 109.83,83.88 114.97,89.06 114.97,110.87
109.83,116.06 "/>
</g>
</svg>
);
};

16
client/src/components/svgs/pentagon.jsx Normal file
View File

@ -0,0 +1,16 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" className={classes} >
<g>
<polygon class="st4" points="106.11,1.82 1.74,76.95 41.61,198.52 170.61,198.52 210.47,76.95 "/>
<polygon class="st4" points="54.38,181.1 22.41,83.61 106.11,23.36 189.8,83.61 157.83,181.1 "/>
<polygon class="st4" points="67.15,163.68 43.08,90.26 106.11,44.89 169.13,90.26 145.06,163.68 "/>
<polygon class="st4" points="79.92,146.26 63.75,96.92 106.11,66.42 148.47,96.92 132.29,146.26 "/>
<polygon class="st4" points="92.7,128.84 84.41,103.57 106.11,87.96 127.8,103.57 119.52,128.84 "/>
</g>
</svg>
);
}

2
client/src/components/saw.component.jsx → client/src/components/svgs/saw.jsx
View File

@ -7,4 +7,4 @@ module.exports = function saw(colour) {
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/> <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
</svg> </svg>
); );
} };

14
client/src/components/svgs/square.jsx Normal file
View File

@ -0,0 +1,14 @@
const preact = require('preact');
module.exports = function triangle(classes) {
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"/>
</svg>
);
}

22
client/src/components/svgs/squircle.jsx Normal file
View File

@ -0,0 +1,22 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" className={classes} >
<g>
<g>
<path class="st1" d="M101.35,198.52h-0.9c-54.66,0-98.97-44.31-98.97-98.97V1.48h198.84v98.07
C200.32,154.21,156.01,198.52,101.35,198.52z"/>
<path class="st1" d="M22.12,99.65V21.93h157.56v77.71c0,43.31-35.11,78.42-78.42,78.42h-0.72
C57.23,178.07,22.12,142.96,22.12,99.65z"/>
<path class="st1" d="M100.64,157.62h0.53c31.96,0,57.88-25.91,57.88-57.88V42.38H42.76v57.36
C42.76,131.7,68.67,157.62,100.64,157.62z"/>
</g>
<path class="st1" d="M63.4,99.83v-37h75.01v37c0,20.62-16.71,37.33-37.33,37.33h-0.34C80.11,137.16,63.4,120.45,63.4,99.83z"/>
<path class="st1" d="M84.03,99.92V83.29h33.73v16.64c0,9.27-7.52,16.79-16.79,16.79h-0.15C91.55,116.71,84.03,109.2,84.03,99.92z"
/>
</g>
</svg>
);
}

16
client/src/components/svgs/triangle.jsx Normal file
View File

@ -0,0 +1,16 @@
const preact = require('preact');
module.exports = function triangle(classes) {
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>
);
}

13
client/src/utils.jsx
View File

@ -1,5 +1,7 @@
const get = require('lodash/get'); const get = require('lodash/get');
const shapes = require('./components/shapes');
const stringSort = (k, desc) => { const stringSort = (k, desc) => {
if (desc) { if (desc) {
return (a, b) => { return (a, b) => {
@ -52,10 +54,21 @@ function requestAvatar(name) {
const NULL_UUID = '00000000-0000-0000-0000-000000000000'; const NULL_UUID = '00000000-0000-0000-0000-000000000000';
const STATS = [
{ stat: 'hp', colour: 'green', svg: shapes.square },
{ stat: 'green_damage', colour: 'green', svg: shapes.diamond },
{ stat: 'red_shield', colour: 'red', svg: shapes.hexagon },
{ stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
{ stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
{ stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
{ stat: 'speed', colour: 'yellow', svg: shapes.triangle },
];
module.exports = { module.exports = {
stringSort, stringSort,
numSort, numSort,
genAvatar, genAvatar,
requestAvatar, requestAvatar,
NULL_UUID, NULL_UUID,
STATS,
}; };