new combiner
This commit is contained in:
ntr
parent
ffc043d526
commit
c69182b94e
@ -71,27 +71,34 @@
|
||||
button {
|
||||
height: 3em;
|
||||
margin: 0;
|
||||
|
||||
&.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
button.empty {
|
||||
border-style: dashed;
|
||||
&.highlight {
|
||||
color: black;
|
||||
background: @white;
|
||||
border: 1px solid @white;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: none;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg.red {
|
||||
&.red {
|
||||
fill: @red;
|
||||
}
|
||||
|
||||
svg.green {
|
||||
&.green {
|
||||
fill: @green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
&.blue {
|
||||
fill: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
const without = require('lodash/without');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
@ -142,7 +143,7 @@ function Vbox(args) {
|
||||
return true;
|
||||
}
|
||||
|
||||
function boundBtn(v, group, index) {
|
||||
function availableBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
function onClick() {
|
||||
@ -158,11 +159,21 @@ function Vbox(args) {
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<button onClick={onClick} >{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
<button
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={onClick}>
|
||||
{shapes.vboxColour(v.toLowerCase())}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return <button onClick={onClick} >{v}</button>;
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
onMouseOver={e => vboxHover(e, v)}>
|
||||
{v}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -176,11 +187,11 @@ function Vbox(args) {
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<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))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
@ -192,47 +203,9 @@ function Vbox(args) {
|
||||
);
|
||||
}
|
||||
|
||||
// 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
|
||||
//
|
||||
function boundClick(e, i) {
|
||||
const value = vbox.bound[i];
|
||||
if (reclaiming && value) return sendVboxReclaim(i);
|
||||
if (value) {
|
||||
const insert = combiner.findIndex(j => j === null);
|
||||
if (insert === -1) return combinerChange([i, null, null]);
|
||||
combiner[insert] = i;
|
||||
return combinerChange(combiner);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// const boundTds = range(0, 9).map(i => {
|
||||
// const value = vbox.bound[i];
|
||||
@ -258,18 +231,79 @@ function Vbox(args) {
|
||||
// );
|
||||
// });
|
||||
|
||||
|
||||
function reclaimClick(e) {
|
||||
e.stopPropagation();
|
||||
return setReclaiming(!reclaiming);
|
||||
}
|
||||
|
||||
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
|
||||
|
||||
function inventoryBtn(v, i) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
function onClick(e) {
|
||||
if (reclaiming) return sendVboxReclaim(i);
|
||||
|
||||
const combinerIndex = combiner.indexOf(i);
|
||||
if (combinerIndex > -1) {
|
||||
return combinerChange(without(combiner, i));
|
||||
}
|
||||
|
||||
combiner.push(i);
|
||||
return combinerChange(combiner);
|
||||
}
|
||||
|
||||
const highlighted = combiner.indexOf(i) > -1;
|
||||
const classes = `${highlighted ? 'highlight' : ''}`;
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<button>{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
<button
|
||||
class={classes}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={onClick}>
|
||||
{shapes.vboxColour(v.toLowerCase())}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return <button onDblClick={() => sendVboxAccept(0, i)}>{v}</button>;
|
||||
return (
|
||||
<button
|
||||
class={classes}
|
||||
onClick={onClick}
|
||||
onMouseOver={e => vboxHover(e, v)}>
|
||||
{v}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function combinerBtn() {
|
||||
const dots = combiner.filter(v => v).length;
|
||||
let text = '';
|
||||
|
||||
if (dots < 3) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (dots > i) {
|
||||
text += '■ ';
|
||||
} else {
|
||||
text += '▫ ';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
text = 'combine'
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={dots !== 3}
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
onClick={() => sendVboxCombine()}>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function inventoryElement() {
|
||||
return (
|
||||
@ -288,13 +322,7 @@ function Vbox(args) {
|
||||
<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>
|
||||
{combinerBtn()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -303,10 +331,6 @@ function Vbox(args) {
|
||||
// EVERYTHING
|
||||
//
|
||||
|
||||
function reclaimClick(e) {
|
||||
e.stopPropagation();
|
||||
return setReclaiming(!reclaiming);
|
||||
}
|
||||
|
||||
function hoverInfo(e, info) {
|
||||
e.stopPropagation();
|
||||
@ -314,8 +338,6 @@ function Vbox(args) {
|
||||
}
|
||||
|
||||
const classes = 'vbox';
|
||||
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
{vboxElement()}
|
||||
|
||||
@ -297,12 +297,26 @@ function errorToast(message) {
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stringSort,
|
||||
numSort,
|
||||
eventClasses,
|
||||
postData,
|
||||
convertItem,
|
||||
errorToast,
|
||||
NULL_UUID,
|
||||
STATS,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user