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

rearrange vbox wip

Browse Source
This commit is contained in:
Mashy 2019-11-20 21:47:19 +10:00
parent b6c90661a7
commit e53983db98
2 changed files with 105 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
client/assets/styles/vbox.less
View File

@ -1,6 +1,50 @@
.vbox {
margin-bottom: 2em;
align-content: space-between;
grid-area: vbox;
display: grid;
grid-template-rows: min-content 3.5em min-content 1em min-content 3.5em min-content;
grid-template-columns: 7em 1em 25em;
grid-template-areas:
"shop-hdr . shop"
". . shop"
"combiner . shop"
"combiner . ."
"combiner . stash"
". . stash"
"stash-hdr . stash";
margin-bottom: 1em;
line-height: 0;
.shop {
grid-area: shop;
}
.shop-hdr {
grid-area: shop-hdr;
display: flex;
flex-direction: column;
}
.combiner {
grid-area: combiner;
display: flex;
flex-direction: column;
}
.stash {
grid-area: stash;
display: flex;
flex-direction: column;
}
.stash-hdr {
grid-area: stash-hdr;
}
.vbox-hdr {
margin-bottom: 1em;
height: 2em;
@ -104,22 +148,6 @@
}
}
/* VBOX */
.vbox {
align-content: space-between;
grid-area: vbox;
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: 1fr min-content 1fr;
grid-template-areas:
"vbox varrow inventory"
"vbox varrow combiner";
}
.vbox-inventory {
grid-area: inventory;
}
.vbox-combiner {
grid-area: combiner;
display: flex;
@ -127,18 +155,6 @@
justify-content: flex-end;
}
.vbox-arrow, .vbox-arrow-mobile {
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
margin: 1em 0.25em 0 0.25em;
grid-area: varrow;
font-size: 2em;
color: @gray-hint;
}
.vbox-combiner button {
flex: 0;
}
@ -156,9 +172,4 @@
font-size: 2em;
line-height: 1em;
animation: bits 1s ease-out;
}
.arrow {
grid-area: arrow;
color: @gray-hint;
}
}

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

@ -232,15 +232,8 @@ class Vbox extends preact.Component {
function vboxElement() {
return (
<div class='vbox-vbox'
<div class='shop'
onClick={e => e.stopPropagation()}>
<div class="vbox-hdr">
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
</h3>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
</div>
<div class="vbox-colours">
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
</div>
@ -248,6 +241,21 @@ class Vbox extends preact.Component {
{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>
</div>
);
}
function vboxHdr() {
return (
<div class="shop-hdr">
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
</h3>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')}>
<h1> {vbox.bits}b </h1>
</div>
<button
class='vbox-btn'
onMouseOver={e => hoverInfo(e, 'refill')}
@ -256,19 +264,15 @@ class Vbox extends preact.Component {
}
onClick={e => e.stopPropagation()}
onMouseDown={() => sendVboxDiscard()}>
refill - 2b
refill <br />
2b
</button>
</div>
);
}
//
// INVENTORY
//
function reclaimClick(e) {
e.stopPropagation();
return setReclaiming(!reclaiming);
}
function inventoryBtn(v, i) {
const inventoryHighlight = vboxSelecting || itemUnequip.length;
@ -353,12 +357,12 @@ class Vbox extends preact.Component {
let bits = 0;
shopSelect.forEach(item => bits += item[0] + 1);
text = bits
? `Buy ${comboItem} - ${bits}b`
: `Combine - ${comboItem}`;
? <p>Buy<br /> {comboItem} <br/> {bits}b</p>
: <p>Combine<br />{comboItem}</p>;
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
} else if (stashSelect.length === 0 && shopSelect.length === 1) {
const item = shopSelect[0];
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
text = <p>Buy <br/>{vbox.free[item[0]][item[1]]}<br/>{item[0] + 1}b</p>;
mouseEvent = vboxBuySelected;
} else {
for (let i = 0; i < 3; i++) {
@ -370,13 +374,15 @@ class Vbox extends preact.Component {
}
}
return (
<button
class='vbox-btn'
disabled={!mouseEvent}
onClick={e => e.stopPropagation()}
onMouseDown={() => mouseEvent()}>
{text}
</button>
<div class='combiner'>
<button
class='vbox-btn'
disabled={!mouseEvent}
onClick={e => e.stopPropagation()}
onMouseDown={() => mouseEvent()}>
{text}
</button>
</div>
);
}
@ -389,34 +395,42 @@ class Vbox extends preact.Component {
return (
<div
class='stash'
onMouseDown={inventoryClick}
onClick={e => e.stopPropagation()}
onDragOver={ev => ev.preventDefault()}
onDrop={inventoryClick}
>
<div class={`vbox-hdr ${reclaiming ? 'reclaiming' : ''}`}>
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
</h3>
<button
disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
class='vbox-btn reclaim'
onMouseOver={e => hoverInfo(e, 'reclaim')}
onClick={e => e.stopPropagation()}
onMouseDown={reclaimClick}>
reclaim
</button>
</div>
<div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
{range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
</div>
{combinerBtn()}
</div>
);
}
function inventoryHdr() {
return (
<div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
</h3>
<button
disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
class='vbox-btn reclaim'
onMouseOver={e => hoverInfo(e, 'reclaim')}
onClick={e => e.stopPropagation()}
onMouseDown={e => {
e.stopPropagation()
setReclaiming(!reclaiming)
}}>
refund
</button>
</div>
);
}
//
// EVERYTHING
//
@ -429,12 +443,13 @@ class Vbox extends preact.Component {
return setInfo(newInfo);
}
const classes = 'vbox';
return (
<div class={classes}>
<div class='vbox'>
{vboxHdr()}
{vboxElement()}
<div class="vbox-arrow">⮞</div>
{inventoryHdr()}
{inventoryElement()}
{combinerBtn()}
</div>
);
}