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

Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

Browse Source
This commit is contained in:
Mashy 2019-04-08 14:19:05 +10:00
commit 5aa9a1fa68
13 changed files with 276 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/assets/icons/726.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

50
client/cryps.css
View File

@ -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;
}

11
client/index.html
View File

@ -8,7 +8,7 @@
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name="description" content="cryps.gg - mnml pvp atbs">
<meta name="author" content="ntr@smokestack.io">
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="assets/normalize.css">
@ -17,5 +17,14 @@
</head>
<body>
</body>
<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service.worker.js');
});
}
</script>
<script src="./index.js"></script>
</html>

7
client/manifest.json
View File

@ -1,7 +0,0 @@
{
"short_name": "cryps.gg",
"name": "cryps.gg - mnml pvp atbs",
"start_url": "/index.html",
"display": "fullscreen",
"orientation": "portrait"
}

22
client/manifest.webmanifest Normal file
View File

@ -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"
}

13
client/service.worker.js Normal file
View File

@ -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);
}
)
);
});

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

@ -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 (<div className="instance-info">&nbsp;</div>);
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 (
<div className="instance-info">
{value} - {itemDetails.description}
</div>
);
}
if (type === 'skill') {
return (
<div className="instance-info">
<div>
<div> {value.skill} </div>
<div> {SKILLS[value.skill].description} </div>
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
function infoVar([type, value]) {
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 };
if (type === 'item') {
let itemDetails;
if (SKILLS[value]) {
itemDetails = SKILLS[value];
} else if (SPEC_CONSTANT[value]) {
itemDetails = SPEC_CONSTANT[value];
} else if (COLOURS[value]) {
itemDetails = COLOURS[value];
}
return (
<div className="info-var">
{value} - {itemDetails.description}
</div>
);
}
if (type === 'skill') {
return (
<div className="info-skill">
<div> {value.skill.skill} </div>
<div> {SKILLS[value.skill.skill].description} </div>
<button onClick={() => sendUnequip(value.cryp.id, value.skill.skill)}>
unequip
</button>
</div>
</div>
);
}
);
}
function thresholds(t, spec) {
return (
SPECS[spec].colours.map((c, i) => (
<figure key={i} alt={c.colour}>
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
</figure>
))
);
}
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 (
<div className="thresholds" key={i} alt={t}>
{threshold}
SPEC_CONSTANT[spec].colours.map((c, i) => (
<figure key={i} alt={c.colour}>
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
</figure>
))
);
}
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 (
<div className="thresholds" key={i} alt={t}>
{threshold}
</div>
);
}) : null;
return (
<div className="info-spec">
<div>
<div> {value.spec} </div>
<div> {SPEC_CONSTANT[value.spec].description} </div>
{breaks}
</div>
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
unequip
</button>
</div>
);
}) : null;
return (
<div className="instance-info">
<div>
<div> {value.spec} </div>
<div> {SPECS[value.spec].description} </div>
{breaks}
</div>
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
unequip
</button>
</div>
);
}
}
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
: (<span>&nbsp;</span>);
return <button key={i} className="cryp-skill-btn right" >{s}</button>;
});
const stats = Object.values(STATS).map((s, j) => (
<figure key={j} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const specs = cryp.specs.map((s, i) => (
<figure key={i}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
));
return (
<div className="instance-info">
<div className="info-cryp">
<h5>{cryp.name}</h5>
<div className="info-stats">
<div className="stats">
{stats}
</div>
<div className="specs">
{specs}
</div>
<div className="skills">
{skills}
</div>
</div>
);
}
const infoCryp = activeCryp
? infoCrypElement(activeCryp)
: null;
const otherInfo = info.length
? infoVar(info)
: null;
return (
<div className="instance-info">
{infoCryp}
{otherInfo}
</div>
);
}
module.exports = Info;

15
client/src/components/info.container.jsx
View File

@ -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) {

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

@ -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
: (<span>&nbsp;</span>);
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
function skillClick() {
if (!skill) return false;
setInfo('skill', { skill, cryp });
return setActiveCryp(cryp);
}
return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
});
// 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) => (
<figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
));
const specs = cryp.specs.map((s, i) => {
function specClick() {
setActiveCryp(cryp);
setInfo('spec', { spec: s, cryp });
}
return (
<figure key={i} onClick={specClick}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
);
});
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 <div>...</div>;
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 (
<main className="instance" onClick={() => setActiveVar(null)} >
<main className="instance" onClick={onClick} >
<div className="instance-hdr">
<button
className="instance-btn instance-ui-btn menu-btn left"

12
client/src/components/instance.container.jsx
View File

@ -19,7 +19,7 @@ const addState = connect(
return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
},
function receiveDispatch(dispatch, { instance, combiner }) {
function receiveDispatch(dispatch) {
function quit() {
dispatch(actions.setInstance(null));
}
@ -32,7 +32,15 @@ const addState = connect(
dispatch(actions.setActiveVar(value));
}
return { quit, setInfo, setActiveVar };
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
}
function clearInfo() {
return dispatch(actions.setInfo([]));
}
return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
}
);

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

@ -88,14 +88,11 @@ function Vbox(args) {
let boundTimer;
function boundTouchStart(e, i) {
e.preventDefault();
e.stopPropagation();
// e.preventDefault();
// e.stopPropagation();
boundTimer = (setTimeout(() => {
const insert = combiner.findIndex(j => j === null);
if (insert === -1) return setCombiner([i, null, null]);
combiner[insert] = i;
boundTimer = null;
return setCombiner(combiner);
return setActiveVar(i);
}, LONG_TOUCH_TIME));
return true;
}
@ -105,7 +102,12 @@ function Vbox(args) {
clearTimeout(boundTimer);
if (reclaiming && i) sendVboxReclaim(i);
else if (vbox.bound[i]) setActiveVar(i);
else if (vbox.bound[i]) {
const insert = combiner.findIndex(j => j === null);
if (insert === -1) return setCombiner([i, null, null]);
combiner[insert] = i;
return setCombiner(combiner);
}
}
return true;
}

3
client/src/components/vbox.container.jsx
View File

@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
const addState = connect(
function receiveState(state) {
const { ws, instance, combiner, reclaiming, activeVar } = state;
const { ws, instance, combiner, reclaiming, activeVar, info } = state;
function sendVboxDiscard() {
return ws.sendVboxDiscard(instance.instance);
@ -29,6 +29,7 @@ const addState = connect(
combiner,
reclaiming,
activeVar,
info,
sendVboxAccept,
sendVboxDiscard,
sendVboxReclaim,

1
server/WORKLOG.md
View File

@ -19,6 +19,7 @@
*CLIENT*
* general
* icons change with %
* colour vbox icons
* instance
* cryp / vbox page separation