126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
const preact = require('preact');
|
|
// const key = require('keymaster');
|
|
|
|
function convertVar(v) {
|
|
return v || '';
|
|
}
|
|
|
|
function Vbox(args) {
|
|
const {
|
|
instance,
|
|
combiner,
|
|
setCombiner,
|
|
sendVboxAccept,
|
|
sendVboxDiscard,
|
|
sendVboxReclaim,
|
|
sendVboxCombine,
|
|
} = args;
|
|
|
|
const { vbox } = instance;
|
|
if (!instance.vbox) return false;
|
|
|
|
// lots of rubbish to make it flow nice
|
|
function combinerAdd(i) {
|
|
if (combiner.indexOf(i) === -1) {
|
|
const insert = combiner.findIndex(j => j === null);
|
|
combiner[insert] = i;
|
|
return setCombiner(combiner);
|
|
}
|
|
return setCombiner([i, null, null]);
|
|
}
|
|
|
|
function combinerRmv(i) {
|
|
combiner[i] = null;
|
|
return setCombiner(combiner);
|
|
}
|
|
|
|
const free = [];
|
|
for (let i = 0 ; i < 6; i++) {
|
|
free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
|
|
}
|
|
|
|
const freeRows = free.map((row, i) => {
|
|
const cells = row.map((c, j) => (
|
|
<td
|
|
key={j}
|
|
onClick={() => c && sendVboxAccept(j, i)} >
|
|
{convertVar(c)}
|
|
</td>
|
|
));
|
|
|
|
return (
|
|
<tr key={i}>
|
|
{cells}
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
const boundRows = [
|
|
<tr key={0} >
|
|
<td onClick={() => combinerAdd(0) }>{convertVar(vbox.bound[0])}</td>
|
|
<td onClick={() => combinerAdd(1) }>{convertVar(vbox.bound[1])}</td>
|
|
<td onClick={() => combinerAdd(2) }>{convertVar(vbox.bound[2])}</td>
|
|
</tr>,
|
|
<tr key={1}>
|
|
<td onClick={() => combinerAdd(3) }>{convertVar(vbox.bound[3])}</td>
|
|
<td onClick={() => combinerAdd(4) }>{convertVar(vbox.bound[4])}</td>
|
|
<td onClick={() => combinerAdd(5) }>{convertVar(vbox.bound[5])}</td>
|
|
</tr>,
|
|
<tr key={2}>
|
|
<td onClick={() => combinerAdd(6) }>{convertVar(vbox.bound[6])}</td>
|
|
<td onClick={() => combinerAdd(7) }>{convertVar(vbox.bound[7])}</td>
|
|
<td onClick={() => combinerAdd(8) }>{convertVar(vbox.bound[8])}</td>
|
|
</tr>,
|
|
];
|
|
|
|
const combinerElement = (
|
|
<table className="vbox-table">
|
|
<tbody>
|
|
<tr>
|
|
<td onClick={() => combinerRmv(0)}>{convertVar(vbox.bound[combiner[0]])}</td>
|
|
<td onClick={() => combinerRmv(1)}>{convertVar(vbox.bound[combiner[1]])}</td>
|
|
<td onClick={() => combinerRmv(2)}>{convertVar(vbox.bound[combiner[2]])}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
);
|
|
|
|
return (
|
|
<div className="three columns">
|
|
<div className="vbox-hdr">
|
|
<div>VBOX</div>
|
|
<h3>{vbox.bits}b</h3>
|
|
</div>
|
|
<button
|
|
className="instance-btn instance-ui-btn vbox-btn"
|
|
onClick={() => sendVboxDiscard()}>
|
|
Reroll
|
|
</button>
|
|
<table className="vbox-table">
|
|
<tbody>
|
|
{freeRows}
|
|
</tbody>
|
|
</table>
|
|
<span>INVENTORY</span>
|
|
<button
|
|
className="instance-btn instance-ui-btn vbox-btn"
|
|
onClick={() => sendVboxReclaim()}>
|
|
reclaim
|
|
</button>
|
|
<table className="vbox-table">
|
|
<tbody>
|
|
{boundRows}
|
|
</tbody>
|
|
</table>
|
|
<span>I-COMBINATOR</span>
|
|
<button
|
|
className="instance-btn instance-ui-btn vbox-btn"
|
|
onClick={() => sendVboxCombine()}>
|
|
combine
|
|
</button>
|
|
{combinerElement}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = Vbox; |