wip
This commit is contained in:
Mashy
parent
e53983db98
commit
3dddf4b1a8
@ -1,6 +1,8 @@
|
|||||||
# WORK WORK
|
# WORK WORK
|
||||||
## NOW
|
## NOW
|
||||||
|
|
||||||
|
* add combine between all of shop and stash, stash size -> 4
|
||||||
|
|
||||||
*PRODUCTION*
|
*PRODUCTION*
|
||||||
|
|
||||||
* can't reset password without knowing password =\
|
* can't reset password without knowing password =\
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.instance {
|
.instance {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr minmax(min-content, 1fr);
|
grid-template-columns: min-content minmax(min-content, 1fr);
|
||||||
grid-template-rows: min-content 1fr;
|
grid-template-rows: min-content 1fr;
|
||||||
|
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
|
|||||||
@ -3,46 +3,61 @@
|
|||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
grid-area: vbox;
|
grid-area: vbox;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: min-content 3.5em min-content 1em min-content 3.5em min-content;
|
grid-template-rows: 9em 3em 2em min-content;
|
||||||
grid-template-columns: 7em 1em 25em;
|
grid-template-columns: 7em 25em;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"shop-hdr . shop"
|
"shop-hdr shop"
|
||||||
". . shop"
|
"combiner shop"
|
||||||
"combiner . shop"
|
"combiner stash"
|
||||||
"combiner . ."
|
"stash-hdr stash";
|
||||||
"combiner . stash"
|
border-top: 0.1em solid @gray-exists;
|
||||||
". . stash"
|
border-right: 0.1em solid @gray-exists;
|
||||||
"stash-hdr . stash";
|
border-bottom: 0.1em solid @gray-exists;
|
||||||
|
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.shop {
|
.shop {
|
||||||
grid-area: shop;
|
grid-area: shop;
|
||||||
|
border-bottom: 0.1em solid @gray-exists;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-hdr {
|
.shop-hdr {
|
||||||
grid-area: shop-hdr;
|
grid-area: shop-hdr;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-bottom: 0.1em solid @gray-exists;
|
||||||
|
border-left: 0.1em solid @gray-exists;
|
||||||
}
|
}
|
||||||
|
|
||||||
.combiner {
|
.combiner {
|
||||||
grid-area: combiner;
|
grid-area: combiner;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-right: 0.1em solid @gray-exists;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stash {
|
.stash {
|
||||||
grid-area: stash;
|
grid-area: stash;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stash-hdr {
|
.stash-hdr {
|
||||||
grid-area: 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;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vbox-hdr {
|
.vbox-hdr {
|
||||||
@ -109,7 +124,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 4em;
|
height: 3.25em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -138,7 +153,7 @@
|
|||||||
// figures don't scale well
|
// figures don't scale well
|
||||||
figure {
|
figure {
|
||||||
svg {
|
svg {
|
||||||
height: 2em;
|
height: 1.5em;
|
||||||
stroke-width: 0.5em;
|
stroke-width: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -234,14 +234,15 @@ class Vbox extends preact.Component {
|
|||||||
return (
|
return (
|
||||||
<div class='shop'
|
<div class='shop'
|
||||||
onClick={e => e.stopPropagation()}>
|
onClick={e => e.stopPropagation()}>
|
||||||
<div class="vbox-colours">
|
<div class='items'>
|
||||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
<div class="vbox-colours">
|
||||||
|
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||||
|
</div>
|
||||||
|
<div class="vbox-items">
|
||||||
|
{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>
|
</div>
|
||||||
<div class="vbox-items">
|
|
||||||
{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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -249,24 +250,26 @@ class Vbox extends preact.Component {
|
|||||||
function vboxHdr() {
|
function vboxHdr() {
|
||||||
return (
|
return (
|
||||||
<div class="shop-hdr">
|
<div class="shop-hdr">
|
||||||
<h3
|
<div class='items'>
|
||||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
<h3
|
||||||
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
|
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||||
</h3>
|
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
|
||||||
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')}>
|
</h3>
|
||||||
<h1> {vbox.bits}b </h1>
|
<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')}
|
||||||
|
disabled={vbox.bits < 2
|
||||||
|
|| (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||||
|
}
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
onMouseDown={() => sendVboxDiscard()}>
|
||||||
|
refill <br />
|
||||||
|
2b
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
class='vbox-btn'
|
|
||||||
onMouseOver={e => hoverInfo(e, 'refill')}
|
|
||||||
disabled={vbox.bits < 2
|
|
||||||
|| (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
|
|
||||||
}
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
onMouseDown={() => sendVboxDiscard()}>
|
|
||||||
refill <br />
|
|
||||||
2b
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -375,13 +378,15 @@ class Vbox extends preact.Component {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div class='combiner'>
|
<div class='combiner'>
|
||||||
<button
|
<div clas='items'>
|
||||||
class='vbox-btn'
|
<button
|
||||||
disabled={!mouseEvent}
|
class='vbox-btn'
|
||||||
onClick={e => e.stopPropagation()}
|
disabled={!mouseEvent}
|
||||||
onMouseDown={() => mouseEvent()}>
|
onClick={e => e.stopPropagation()}
|
||||||
{text}
|
onMouseDown={() => mouseEvent()}>
|
||||||
</button>
|
{text}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -401,8 +406,10 @@ class Vbox extends preact.Component {
|
|||||||
onDragOver={ev => ev.preventDefault()}
|
onDragOver={ev => ev.preventDefault()}
|
||||||
onDrop={inventoryClick}
|
onDrop={inventoryClick}
|
||||||
>
|
>
|
||||||
<div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
|
<div class='items'>
|
||||||
{range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
|
<div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
|
||||||
|
{range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -411,21 +418,23 @@ class Vbox extends preact.Component {
|
|||||||
function inventoryHdr() {
|
function inventoryHdr() {
|
||||||
return (
|
return (
|
||||||
<div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
|
<div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
|
||||||
<h3
|
<div class='items'>
|
||||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
<h3
|
||||||
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
|
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||||
</h3>
|
onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
|
||||||
<button
|
</h3>
|
||||||
disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
|
<button
|
||||||
class='vbox-btn reclaim'
|
disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
|
||||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
class='vbox-btn reclaim'
|
||||||
onClick={e => e.stopPropagation()}
|
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||||
onMouseDown={e => {
|
onClick={e => e.stopPropagation()}
|
||||||
e.stopPropagation()
|
onMouseDown={e => {
|
||||||
setReclaiming(!reclaiming)
|
e.stopPropagation()
|
||||||
}}>
|
setReclaiming(!reclaiming)
|
||||||
refund
|
}}>
|
||||||
</button>
|
refund
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user