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

wip"

Browse Source
This commit is contained in:
ntr
2019-07-20 18:04:08 +10:00
parent 3f1367172d
commit 145f8e6a35
12 changed files with 151 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/instance.constructs.jsx
+1 -1
View File
@@ -140,7 +140,7 @@ function Construct(props) {
);
});
const specs = range(0, 6).map(i => {
const specs = range(0, 3).map(i => {
const s = construct.specs[i];
if (!s) {
client/src/components/nav.jsx
-7
View File
@@ -26,10 +26,6 @@ const addState = connect(
return ws.sendInstanceState(instance.id);
}
function sendAccountInstances() {
return ws.sendAccountInstances();
}
function sendInstanceList() {
return ws.sendInstanceList();
}
@@ -41,7 +37,6 @@ const addState = connect(
game,
ping,
sendInstanceState,
sendAccountInstances,
sendInstanceList,
};
},
@@ -90,7 +85,6 @@ function Nav(args) {
team,
sendInstanceState,
sendAccountInstances,
sendInstanceList,
setTestGame,
@@ -102,7 +96,6 @@ function Nav(args) {
function navTo(p) {
if (p === 'list') {
sendInstanceList();
sendAccountInstances();
}
return setNav(p);
}
client/src/components/shapes.jsx
+2 -1
View File
@@ -6,7 +6,8 @@ const saw = require('./svgs/saw');
const square = require('./svgs/square');
const squircle = require('./svgs/squircle');
const triangle = require('./svgs/triangle');
const vboxColour = require('./svgs/colour');
// const vboxColour = require('./svgs/colour');
const vboxColour = require('./svgs/vbox.colour');
module.exports = {
circle,
client/src/components/svgs/vbox.colour.jsx
+15
View File
@@ -0,0 +1,15 @@
const preact = require('preact');
module.exports = function vboxColour(colour) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour.toLowerCase()} >
<circle
cx={50}
cy={50}
r={40}
// stroke-width="2"
// stroke={colour}
/>
</svg>
);
};
client/src/components/vbox.component.jsx
+66 -62
View File
@@ -124,15 +124,15 @@ function Vbox(args) {
//
// VBOX
//
const free = [];
// const free = [];
// Colours
free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
// Skills
free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
// Specs
free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
// // Colours
// free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
// free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
// // Skills
// free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
// // Specs
// free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
let vboxTimer;
const LONG_TOUCH_TIME = 500;
@@ -165,32 +165,65 @@ function Vbox(args) {
return true;
}
const freeRows = free.map((row, i) => {
const cells = row.map((c, j) => {
const highlighted = c && vboxHighlight.includes(c);
// First two rows are colours
const sendItemType = i > 1 ? i - 1 : 0;
const sendItemIndex = i === 1 ? j + 3 : j;
return <td
key={j}
class={`${highlighted ? 'highlight' : ''}`}
onTouchStart={e => vboxTouchStart(e, i, j)}
onTouchEnd={e => vboxTouchEnd(e, i, j)}
onTouchMove={e => vboxTouchMove(e)}
const vboxBtn = v => (
<button>{convertItem(v)}</button>
);
// onClick={freeClick}
onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
onMouseOver={e => vboxHover(e, c)}
>
{convertItem(c)}
</td>;
});
function vboxElement() {
return (
<tr key={i}>
{cells}
</tr>
<div class='vbox-vbox'
onClick={() => setReclaiming(false)}
onMouseOver={e => hoverInfo(e, 'vbox')}>
<div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
</div>
<div class="vbox-colours">
{vbox.free[0].map(shapes.vboxColour)}
</div>
<div class="vbox-skills">
{vbox.free[1].map(vboxBtn)}
</div>
<div class="vbox-specs">
{vbox.free[2].map(vboxBtn)}
</div>
<button
class='vbox-btn'
onMouseOver={e => hoverInfo(e, 'reroll')}
onClick={() => sendVboxDiscard()}>
Reroll
</button>
</div>
);
});
}
// const freeRows = free.map((row, i) => {
// const cells = row.map((c, j) => {
// const highlighted = c && vboxHighlight.includes(c);
// // First two rows are colours
// const sendItemType = i > 1 ? i - 1 : 0;
// const sendItemIndex = i === 1 ? j + 3 : j;
// return <td
// key={j}
// class={`${highlighted ? 'highlight' : ''}`}
// onTouchStart={e => vboxTouchStart(e, i, j)}
// onTouchEnd={e => vboxTouchEnd(e, i, j)}
// onTouchMove={e => vboxTouchMove(e)}
// // onClick={freeClick}
// onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
// onMouseOver={e => vboxHover(e, c)}
// >
// {convertItem(c)}
// </td>;
// });
// return (
// <tr key={i}>
// {cells}
// </tr>
// );
// });
//
// INVENTORY
@@ -293,37 +326,7 @@ function Vbox(args) {
return (
<div class={classes}>
<div class='vbox-box'
onClick={() => setReclaiming(false)}
onMouseOver={e => hoverInfo(e, 'vbox')}>
<div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
</div>
<div style="text-align: center"> Colours </div>
<table class="vbox-table">
<tbody>
{freeRows.slice(0, 2)}
</tbody>
</table>
<div style="text-align: center"> Skills </div>
<table class="vbox-table">
<tbody>
{freeRows[2]}
</tbody>
</table>
<div style="text-align: center"> Specs </div>
<table class="vbox-table">
<tbody>
{freeRows[3]}
</tbody>
</table>
<button
onMouseOver={e => hoverInfo(e, 'reroll')}
onClick={() => sendVboxDiscard()}>
Reroll
</button>
</div>
{vboxElement()}
<div class="vbox-arrow">⮞</div>
<div class="vbox-arrow-mobile">⮟</div>
<div class='vbox-inventory'
@@ -348,6 +351,7 @@ function Vbox(args) {
<div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
{combinerElement}
<button
class='vbox-btn'
onMouseOver={e => hoverInfo(e, 'refine')}
onClick={() => sendVboxCombine()}>
combine