vbox stuff
This commit is contained in:
ntr
@@ -32,4 +32,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value });
|
||||
export const setShop = value => ({ type: 'SET_SHOP', value });
|
||||
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
|
||||
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
|
||||
|
||||
export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
|
||||
|
||||
export const setWs = value => ({ type: 'SET_WS', value });
|
||||
|
||||
@@ -49,7 +49,6 @@ function Instance(args) {
|
||||
<main class={instanceClasses} onMouseOver={() => setInfo(null)} >
|
||||
<Vbox />
|
||||
<InfoContainer />
|
||||
<EquipmentContainer />
|
||||
<InstanceConstructsContainer />
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -2,11 +2,11 @@ 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()} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour} >
|
||||
<circle
|
||||
cx={50}
|
||||
cy={50}
|
||||
r={40}
|
||||
r={50}
|
||||
// stroke-width="2"
|
||||
// stroke={colour}
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,6 @@ const range = require('lodash/range');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { convertItem } = require('./../utils');
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
@@ -15,6 +14,7 @@ const addState = connect(
|
||||
combiner,
|
||||
reclaiming,
|
||||
vboxHighlight,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
} = state;
|
||||
|
||||
@@ -44,6 +44,7 @@ const addState = connect(
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
vboxHighlight,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
};
|
||||
},
|
||||
@@ -65,11 +66,16 @@ const addState = connect(
|
||||
return dispatch(actions.setVboxHighlight(v));
|
||||
}
|
||||
|
||||
function setVboxSelected(v) {
|
||||
return dispatch(actions.setVboxSelected(v));
|
||||
}
|
||||
|
||||
return {
|
||||
setCombiner,
|
||||
setReclaiming,
|
||||
setInfo,
|
||||
setVboxHighlight,
|
||||
setVboxSelected,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -90,6 +96,10 @@ function Vbox(args) {
|
||||
|
||||
setCombiner,
|
||||
setInfo,
|
||||
|
||||
vboxSelected,
|
||||
setVboxSelected,
|
||||
|
||||
setReclaiming,
|
||||
setVboxHighlight,
|
||||
} = args;
|
||||
@@ -124,39 +134,6 @@ function Vbox(args) {
|
||||
//
|
||||
// VBOX
|
||||
//
|
||||
// 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]]);
|
||||
|
||||
let vboxTimer;
|
||||
const LONG_TOUCH_TIME = 500;
|
||||
function vboxTouchStart(e, i, j) {
|
||||
vboxTimer = (setTimeout(() => {
|
||||
sendVboxAccept(j, i);
|
||||
vboxTimer = null;
|
||||
}, LONG_TOUCH_TIME));
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxTouchEnd(e, i, j) {
|
||||
if (vboxTimer) {
|
||||
clearTimeout(vboxTimer);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxTouchMove(e) {
|
||||
if (vboxTimer) clearTimeout(vboxTimer);
|
||||
e.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxHover(e, v) {
|
||||
if (v) {
|
||||
setInfo(v);
|
||||
@@ -165,9 +142,29 @@ function Vbox(args) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const vboxBtn = v => (
|
||||
<button>{convertItem(v)}</button>
|
||||
);
|
||||
function boundBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
function onClick() {
|
||||
// double clicked
|
||||
if (vboxSelected[0] === group && vboxSelected[1] === index) {
|
||||
document.activeElement.blur();
|
||||
setVboxSelected([]);
|
||||
return sendVboxAccept(group, index);
|
||||
}
|
||||
|
||||
return setVboxSelected([group, index]);
|
||||
}
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<button onClick={onClick} >{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
);
|
||||
}
|
||||
|
||||
return <button onClick={onClick} >{v}</button>;
|
||||
}
|
||||
|
||||
|
||||
function vboxElement() {
|
||||
return (
|
||||
@@ -179,20 +176,17 @@ function Vbox(args) {
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{vbox.free[0].map(shapes.vboxColour)}
|
||||
{range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-skills">
|
||||
{vbox.free[1].map(vboxBtn)}
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => boundBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => boundBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
<div class="vbox-specs">
|
||||
{vbox.free[2].map(vboxBtn)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
refill - 5b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@@ -240,72 +234,70 @@ function Vbox(args) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const boundTds = range(0, 9).map(i => {
|
||||
const value = vbox.bound[i];
|
||||
if (combiner.indexOf(i) > -1) {
|
||||
// const boundTds = range(0, 9).map(i => {
|
||||
// const value = vbox.bound[i];
|
||||
// if (combiner.indexOf(i) > -1) {
|
||||
// return (
|
||||
// <td
|
||||
// key={i}>
|
||||
//
|
||||
// </td>
|
||||
// );
|
||||
// }
|
||||
|
||||
// const highlighted = value && vboxHighlight.includes(value);
|
||||
|
||||
// return (
|
||||
// <td
|
||||
// key={i}
|
||||
// class={`${highlighted ? 'highlight' : ''}`}
|
||||
// onMouseOver={(e) => vboxHover(e, value)}
|
||||
// onClick={e => boundClick(e, i, highlighted) }>
|
||||
// {convertItem(value)}
|
||||
// </td>
|
||||
// );
|
||||
// });
|
||||
|
||||
function inventoryBtn(v, i) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<td
|
||||
key={i}>
|
||||
|
||||
</td>
|
||||
<button>{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
);
|
||||
}
|
||||
|
||||
const highlighted = value && vboxHighlight.includes(value);
|
||||
return <button onDblClick={() => sendVboxAccept(0, i)}>{v}</button>;
|
||||
}
|
||||
|
||||
|
||||
function inventoryElement() {
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
class={`${highlighted ? 'highlight' : ''}`}
|
||||
onMouseOver={(e) => vboxHover(e, value)}
|
||||
onClick={e => boundClick(e, i, highlighted) }>
|
||||
{convertItem(value)}
|
||||
</td>
|
||||
<div class='vbox-section'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
class={reclaimClass}
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<div class='vbox-items'>
|
||||
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
■ ▫ ▫
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const boundRows = [
|
||||
<tr key={0} >
|
||||
{boundTds[0]}
|
||||
{boundTds[1]}
|
||||
{boundTds[2]}
|
||||
</tr>,
|
||||
<tr key={1}>
|
||||
{boundTds[3]}
|
||||
{boundTds[4]}
|
||||
{boundTds[5]}
|
||||
</tr>,
|
||||
<tr key={2}>
|
||||
{boundTds[6]}
|
||||
{boundTds[7]}
|
||||
{boundTds[8]}
|
||||
</tr>,
|
||||
];
|
||||
|
||||
//
|
||||
// COMBINER
|
||||
//
|
||||
function combinerRmv(i) {
|
||||
combiner[i] = null;
|
||||
return combinerChange(combiner);
|
||||
}
|
||||
const combinerElement = (
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td onClick={() => combinerRmv(0)}>
|
||||
{combiner[0] !== null ? convertItem(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')}
|
||||
</td>
|
||||
<td onClick={() => combinerRmv(1)}>
|
||||
{combiner[1] !== null ? convertItem(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')}
|
||||
</td>
|
||||
<td onClick={() => combinerRmv(2)}>
|
||||
{convertItem(vbox.bound[combiner[2]])}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
//
|
||||
// EVERYTHING
|
||||
@@ -321,42 +313,14 @@ function Vbox(args) {
|
||||
return setInfo(info);
|
||||
}
|
||||
|
||||
const classes = "vbox";
|
||||
const classes = 'vbox';
|
||||
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
{vboxElement()}
|
||||
<div class="vbox-arrow">⮞</div>
|
||||
<div class="vbox-arrow-mobile">⮟</div>
|
||||
<div class='vbox-inventory'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
class={reclaimClass}
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{boundRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="vbox-combiner-arrow" onTouchStart={e => e.target.scrollIntoView(true)}>⮟⮝</div>
|
||||
<div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
|
||||
{combinerElement}
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
onClick={() => sendVboxCombine()}>
|
||||
combine
|
||||
</button>
|
||||
</div>
|
||||
{inventoryElement()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,5 +44,8 @@ module.exports = {
|
||||
shop: createReducer(false, 'SET_SHOP'),
|
||||
team: createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
|
||||
vboxHighlight: createReducer([], 'SET_VBOX_HIGHLIGHT'),
|
||||
|
||||
vboxSelected: createReducer([], 'SET_VBOX_SELECTED'),
|
||||
|
||||
ws: createReducer(null, 'SET_WS'),
|
||||
};
|
||||
|
||||
@@ -168,20 +168,6 @@ function eventClasses(game, account, resolution, construct, postSkill) {
|
||||
return '';
|
||||
}
|
||||
|
||||
function convertItem(v) {
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
shapes.vboxColour(v.toLowerCase())
|
||||
);
|
||||
}
|
||||
return v || <span> </span>;
|
||||
// uncomment for double borders in vbox;
|
||||
// if (v) {
|
||||
// return <div>{v}</div>;
|
||||
// }
|
||||
// return;
|
||||
}
|
||||
|
||||
const COLOURS = [
|
||||
'#a52a2a',
|
||||
'#1FF01F',
|
||||
@@ -314,7 +300,6 @@ function errorToast(message) {
|
||||
|
||||
module.exports = {
|
||||
stringSort,
|
||||
convertItem,
|
||||
numSort,
|
||||
eventClasses,
|
||||
postData,
|
||||
|
||||
Reference in New Issue
Block a user