vbox rearrange, rework reclaim
This commit is contained in:
Mashy
parent
3dddf4b1a8
commit
7dc4a3f4f4
@ -3,22 +3,21 @@
|
||||
align-content: space-between;
|
||||
grid-area: vbox;
|
||||
display: grid;
|
||||
grid-template-rows: 9em 3em 2em min-content;
|
||||
grid-template-columns: 7em 25em;
|
||||
grid-template-rows: 9.5em 2.5em 4.5em min-content;
|
||||
grid-template-columns: 7em 21em;
|
||||
grid-template-areas:
|
||||
"shop-hdr shop"
|
||||
"combiner shop"
|
||||
"combiner stash"
|
||||
"stash-hdr stash";
|
||||
"shop-hdr shop"
|
||||
"stash-hdr shop"
|
||||
"stash-hdr combiner"
|
||||
"stash stash";
|
||||
border-top: 0.1em solid @gray-exists;
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
border-bottom: 0.1em solid @gray-exists;
|
||||
|
||||
margin-bottom: 1em;
|
||||
line-height: 0;
|
||||
|
||||
.items {
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0.5em;
|
||||
margin-right: 1em;
|
||||
@ -27,37 +26,63 @@
|
||||
.shop {
|
||||
grid-area: shop;
|
||||
border-bottom: 0.1em solid @gray-exists;
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
}
|
||||
|
||||
.shop-hdr {
|
||||
grid-area: shop-hdr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 0.1em solid @gray-exists;
|
||||
border-left: 0.1em solid @gray-exists;
|
||||
text-align: center;
|
||||
button {
|
||||
margin-top: 0.5em;
|
||||
line-height: 1.6;
|
||||
height: 4em;
|
||||
letter-spacing: 0.1em;
|
||||
background-color: #421010;
|
||||
}
|
||||
}
|
||||
|
||||
.combiner {
|
||||
grid-area: combiner;
|
||||
border-bottom: 0.1em solid @gray-exists;
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
|
||||
button {
|
||||
height: 3em;
|
||||
letter-spacing: 0.1em;
|
||||
background-color: #342100;
|
||||
&[disabled] {
|
||||
color: #342100;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.stash {
|
||||
grid-area: stash;
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
}
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
border-left: 0.1em solid @gray-exists;
|
||||
}
|
||||
|
||||
.stash-hdr {
|
||||
grid-area: stash-hdr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
border-left: 0.1em solid @gray-exists;
|
||||
border-top: 0.1em solid @gray-exists;
|
||||
|
||||
|
||||
border-right: 0.1em solid @gray-exists;
|
||||
text-align: center;
|
||||
button {
|
||||
margin-top: 0.5em;
|
||||
line-height: 1.6;
|
||||
height: 4em;
|
||||
letter-spacing: 0.1em;
|
||||
background-color: #342100;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-hdr {
|
||||
@ -93,14 +118,6 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.reclaim {
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
color: @red;
|
||||
};
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: black;
|
||||
border-width: 1px;
|
||||
|
||||
@ -111,7 +111,7 @@ class InfoComponent extends preact.Component {
|
||||
|
||||
return (
|
||||
<div class={isSkill ? 'info-item' : 'info-item'}>
|
||||
<h2>{infoName} {fullInfo.cost}b</h2>
|
||||
<h2>{infoName}</h2>
|
||||
{header}
|
||||
{itemSourceInfo}
|
||||
{cooldown}
|
||||
@ -121,10 +121,10 @@ class InfoComponent extends preact.Component {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
|
||||
|
||||
return (
|
||||
<div class="info-item">
|
||||
<h2>{fullInfo.item} {cost}</h2>
|
||||
<h2>{fullInfo.item}</h2>
|
||||
{itemDescription()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -253,10 +253,10 @@ class Vbox extends preact.Component {
|
||||
<div class='items'>
|
||||
<h3
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}> STORE
|
||||
</h3>
|
||||
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')}>
|
||||
<h1> {vbox.bits}b </h1>
|
||||
<h2> {vbox.bits}b </h2>
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
@ -291,8 +291,6 @@ class Vbox extends preact.Component {
|
||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||
|
||||
function onClick(type) {
|
||||
if (reclaiming) return sendVboxReclaim(i);
|
||||
|
||||
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
||||
// removing
|
||||
if (combinerContainsIndex) {
|
||||
@ -360,12 +358,12 @@ class Vbox extends preact.Component {
|
||||
let bits = 0;
|
||||
shopSelect.forEach(item => bits += item[0] + 1);
|
||||
text = bits
|
||||
? <p>Buy<br /> {comboItem} <br/> {bits}b</p>
|
||||
: <p>Combine<br />{comboItem}</p>;
|
||||
? `Buy ${comboItem} - ${bits}b`
|
||||
: `Combine - ${comboItem}`;
|
||||
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
||||
} else if (stashSelect.length === 0 && shopSelect.length === 1) {
|
||||
const item = shopSelect[0];
|
||||
text = <p>Buy <br/>{vbox.free[item[0]][item[1]]}<br/>{item[0] + 1}b</p>;
|
||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
@ -378,7 +376,7 @@ class Vbox extends preact.Component {
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<div clas='items'>
|
||||
<div class='items'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
@ -407,39 +405,42 @@ class Vbox extends preact.Component {
|
||||
onDrop={inventoryClick}
|
||||
>
|
||||
<div class='items'>
|
||||
<div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
|
||||
{range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function inventoryHdr() {
|
||||
const refund = shopSelect.length === 0 && stashSelect.length === 1
|
||||
? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
|
||||
: 0;
|
||||
const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
|
||||
return (
|
||||
<div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
|
||||
<div class='items'>
|
||||
<h3
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}> STASH
|
||||
</h3>
|
||||
<button
|
||||
disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn reclaim'
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation()
|
||||
setReclaiming(!reclaiming)
|
||||
e.stopPropagation();
|
||||
sendVboxReclaim(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// EVERYTHING
|
||||
//
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user