diff --git a/client/assets/icons/726.png b/client/assets/icons/726.png new file mode 100644 index 00000000..b60e6e75 Binary files /dev/null and b/client/assets/icons/726.png differ diff --git a/client/cryps.css b/client/cryps.css index e56769fd..275d7883 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -10,7 +10,11 @@ html, body, .cryps { font-family: 'Jura'; color: whitesmoke; font-size: 16pt; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; /* this is the sweet nectar to keep it full page*/ height: 99%; @@ -395,33 +399,50 @@ header { min-width: 300px; } +/* + INFO +*/ .thresholds { display: flex; flex-direction: row; justify-content: left; } -.info-stats { +.info-cryp .skills { + display: flex; +} + +.info-cryp .skills .cryp-skill-btn { + border: 1px solid whitesmoke; +} + +.info-cryp .stats, .info-cryp .specs { display: flex; flex-flow: row wrap; justify-content: space-around; } -.info-stats .speed { +.info-cryp .stats .speed { flex: 1 0 100%; } -.info-stats figure { +.info-cryp .stats figure { flex: 0 0 30%; border: 0; margin: 1em 0; text-align: center; } -.info-stats .stat-icon { +.info-cryp .stats .stat-icon { height: 2.5em; } +.info-cryp .specs figure { + border: 0; + margin: 1em 0; + text-align: center; +} + /* CRYP BOX */ .cryp-box { @@ -456,7 +477,7 @@ header { flex-flow: column; } -.stats { +.cryp-box .stats { flex: 0 0 20%; width: 100%; display: flex; @@ -492,7 +513,7 @@ header { border-right-width: 0px; } -.cryp-skill-btn:first-child { +.cryp-list .skills .cryp-skill-btn:first-child { border-top-width: 0; } @@ -581,6 +602,10 @@ header { order: 99; } + header { + font-size: 0.5em; + } + .header-username { display: none; } @@ -636,8 +661,17 @@ header { flex: 1; } + .info-cryp { + text-align: center; + } + .cryp-box { - margin: 0.5em; + margin: 0; + border-left-width: 0px; + } + + .cryp-box:first-child { + border-left-width: 1px; } .spawn-btn button { @@ -685,7 +719,7 @@ header { height: 1em; } - .stats figcaption { + .cryp-list .stats figcaption { display: none; } diff --git a/client/index.html b/client/index.html index d396dc79..8f80d512 100644 --- a/client/index.html +++ b/client/index.html @@ -8,7 +8,7 @@ - + @@ -17,5 +17,14 @@ + \ No newline at end of file diff --git a/client/manifest.json b/client/manifest.json deleted file mode 100644 index 6b9e672e..00000000 --- a/client/manifest.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "short_name": "cryps.gg", - "name": "cryps.gg - mnml pvp atbs", - "start_url": "/index.html", - "display": "fullscreen", - "orientation": "portrait" -} \ No newline at end of file diff --git a/client/manifest.webmanifest b/client/manifest.webmanifest new file mode 100644 index 00000000..669d4991 --- /dev/null +++ b/client/manifest.webmanifest @@ -0,0 +1,22 @@ +{ + "name": "cryps.gg - mnml pvp atbs", + "description": "cryps.gg - mnml pvp atbs", + "short_name": "cryps.gg", + "icons": [ + { + "src": "./assets/icons/726.png", + "sizes": "32x32", + "type": "image/png" + }, + { + "src": "./assets/icons/726.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "/index.html", + "display": "fullscreen", + "orientation": "portrait", + "theme_color": "#000000", + "background_color": "#000000" +} \ No newline at end of file diff --git a/client/service.worker.js b/client/service.worker.js new file mode 100644 index 00000000..75575f15 --- /dev/null +++ b/client/service.worker.js @@ -0,0 +1,13 @@ +self.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request) + .then(function(response) { + // Cache hit - return response + if (response) { + return response; + } + return fetch(event.request); + } + ) + ); +}); \ No newline at end of file diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 4f81f449..e76347c9 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -1,104 +1,143 @@ const preact = require('preact'); -const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants'); -const { COLOUR_ICONS, STATS } = require('../utils'); +const range = require('lodash/range'); + +const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants'); +const { COLOUR_ICONS, STATS, SPECS } = require('../utils'); function Info(args) { const { + activeCryp, info, sendUnequip, instance, } = args; - if (!info.length) return (
 
); - let red = 0; let blue = 0; let green = 0; - instance.cryps.forEach(cryp => { - red += cryp.colours.red; - blue += cryp.colours.blue; - green += cryp.colours.green; - }); - const teamColours = { red, blue, green }; - const [type, value] = info; - if (type === 'item') { - let itemDetails; - if (SKILLS[value]) { - itemDetails = SKILLS[value]; - } else if (SPECS[value]) { - itemDetails = SPECS[value]; - } else if (COLOURS[value]) { - itemDetails = COLOURS[value]; - } - return ( -
- {value} - {itemDetails.description} -
- ); - } - if (type === 'skill') { - return ( -
-
-
{value.skill}
-
{SKILLS[value.skill].description}
-
-
- ); - } + ); + } - function thresholds(t, spec) { - return ( - SPECS[spec].colours.map((c, i) => ( -
- {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} -
{Math.min(teamColours[c], t)} / {t}
-
- )) - ); - } - - - if (type === 'spec') { - const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => { - const threshold = thresholds(t, value.spec); + function thresholds(t, spec) { return ( -
- {threshold} + SPEC_CONSTANT[spec].colours.map((c, i) => ( +
+ {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} +
{Math.min(teamColours[c], t)} / {t}
+
+ )) + ); + } + + if (type === 'spec') { + const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => { + const threshold = thresholds(t, value.spec); + return ( +
+ {threshold} +
+ ); + }) : null; + return ( +
+
+
{value.spec}
+
{SPEC_CONSTANT[value.spec].description}
+ {breaks} +
+
); - }) : null; - return ( -
-
-
{value.spec}
-
{SPECS[value.spec].description}
- {breaks} -
- -
- ); + } } - if (type === 'cryp') { - const cryp = value; + function infoCrypElement(cryp) { + // onClick={() => setInfo('skill', { skill: s, cryp })} + const skills = range(0, 4).map(i => { + const s = cryp.skills[i] + ? cryp.skills[i].skill + : ( ); + return ; + }); + const stats = Object.values(STATS).map((s, j) => (
{s.svg(`stat-icon ${s.colour}`)}
{cryp[s.stat].value}
)); + + const specs = cryp.specs.map((s, i) => ( +
+ {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)} +
{SPECS[s].caption}
+
+ )); + + return ( -
+
{cryp.name}
-
+
{stats}
+
+ {specs} +
+
+ {skills} +
); } + + const infoCryp = activeCryp + ? infoCrypElement(activeCryp) + : null; + + const otherInfo = info.length + ? infoVar(info) + : null; + + return ( +
+ {infoCryp} + {otherInfo} +
+ ); } module.exports = Info; diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx index 469061ff..1b098e82 100644 --- a/client/src/components/info.container.jsx +++ b/client/src/components/info.container.jsx @@ -6,12 +6,23 @@ const Info = require('./info.component'); const addState = connect( function receiveState(state) { - const { info, ws, instance } = state; + const { + activeCryp, + info, + ws, + instance, + } = state; + function sendUnequip(crypId, item) { return ws.sendVboxUnequip(instance.instance, crypId, item); } - return { info, sendUnequip, instance }; + return { + activeCryp, + info, + sendUnequip, + instance, + }; } /* function receiveDispatch(dispatch) { diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 17a567d3..e87d715c 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -7,15 +7,30 @@ const VboxContainer = require('./vbox.container'); const InfoContainer = require('./info.container'); const molecule = require('./molecule'); -const shapes = require('./shapes'); -const { STATS, SPECS } = require('../utils'); +const { SPECS } = require('../utils'); + +function Cryp(props) { + const { + cryp, + sendVboxApply, + setInfo, + activeVar, + setActiveCryp, + } = props; -function Cryp(cryp, sendVboxApply, setInfo, activeVar) { const skills = range(0, 4).map(i => { - const s = cryp.skills[i] - ? cryp.skills[i].skill + const skill = cryp.skills[i]; + const s = skill + ? skill.skill : ( ); - return ; + + function skillClick() { + if (!skill) return false; + setInfo('skill', { skill, cryp }); + return setActiveCryp(cryp); + } + + return ; }); // needed for ondrop to fire @@ -36,17 +51,22 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) { e.preventDefault(); if (activeVar !== null) return sendVboxApply(cryp.id, activeVar); - document.getElementsByClassName('instance-info')[0].scrollIntoView(); - - return setInfo('cryp', cryp); + return setActiveCryp(cryp); } - const specs = cryp.specs.map((s, i) => ( -
setInfo('spec', { spec: s, cryp })}> - {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)} -
{SPECS[s].caption}
-
- )); + const specs = cryp.specs.map((s, i) => { + function specClick() { + setActiveCryp(cryp); + setInfo('spec', { spec: s, cryp }); + } + return ( +
+ {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)} +
{SPECS[s].caption}
+
+ ); + }); + const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green; const colours = mapValues(cryp.colours, c => { if (cTotal === 0) return 245; @@ -84,19 +104,27 @@ function InstanceComponent(args) { // account, instance, quit, + // clearInfo, sendInstanceReady, sendVboxApply, setInfo, activeVar, setActiveVar, + setActiveCryp, } = args; if (!instance) return
...
; - const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar)); + const cryps = instance.cryps.map((c, i) => Cryp({ + cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp, + })); + + function onClick(e) { + setActiveVar(null); + } return ( -
setActiveVar(null)} > +