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

wi

Browse Source
This commit is contained in:
ntr 2019-11-22 12:47:46 +11:00
parent 672644514d
commit d4f2f9623f
8 changed files with 107 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
WORKLOG.md
View File

@ -12,6 +12,22 @@ _ntr_
* animation effects * animation effects
* vbox combine / buy / equip etc * vbox combine / buy / equip etc
* background music * background music
* effects rework
Siphon =
[
DamageBlue(50%),
Apply(
Siphon(2T)
- Siphoning(2T)
),
]
Hexagon Set
- Pick Colour
- Random Walk
- Draw hex
- Increase intensity for each visit
_mashy_ _mashy_
* buy from preview if you have the required bases in vbox / inventory * buy from preview if you have the required bases in vbox / inventory
@ -53,9 +69,9 @@ _tba_
- Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed) - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed)
- Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life) - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life)
- Can also work as module style passive keystones - Can also work as module style passive keystones
* troll life -> dmg -> Invert life spec? * troll life -> dmg -> Invert life spec?
* prince of peace * prince of peace
* bonus healing / no damage -> Heal power spec? * bonus healing / no damage -> Heal power spec?
* fuck magic -> Some sort of reflect spec? * fuck magic -> Some sort of reflect spec?
* empower on ko -> Amplify + Power spec * empower on ko -> Amplify + Power spec

2
client/assets/styles/instance.less
View File

@ -5,7 +5,7 @@
.instance { .instance {
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: min-content minmax(min-content, 1fr); grid-template-columns: 3fr minmax(min-content, 6fr);
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
grid-template-areas: grid-template-areas:

2
client/assets/styles/styles.less
View File

@ -125,7 +125,7 @@ button, input {
font-family: 'Jura'; font-family: 'Jura';
color: whitesmoke; color: whitesmoke;
height: auto; height: auto;
border-width: 0.1em; border-width: 0.2em;
border-color: @gray-exists; border-color: @gray-exists;
letter-spacing: 0.25em; letter-spacing: 0.25em;
box-sizing: border-box; box-sizing: border-box;

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

@ -2,40 +2,38 @@
align-content: space-between; align-content: space-between;
grid-area: vbox; grid-area: vbox;
display: grid; display: grid;
grid-template-rows: 9.5em 2.5em 4.5em min-content; grid-template-rows: 1fr min-content;
grid-template-columns: 8em 24em; grid-template-columns: 1fr 3fr;
grid-template-areas: grid-template-areas:
"store-hdr store" "store-hdr store"
"stash-hdr store" "stash-hdr stash"
"stash stash" "refund combiner";
"refund combiner";
margin-bottom: 1em; margin-bottom: 1em;
line-height: 0; line-height: 0;
.vbox-padding { // immediate children
margin-left: 0.5em; > div {
margin-bottom: 0.5em; padding: 0.5em;
margin-top: 0.5em;
margin-right: 0.5em;
} }
.store { .store {
grid-area: store; grid-area: store;
border-bottom: 0.1em solid @gray-exists; border-right: 0.2em solid @gray-exists;
border-right: 0.1em solid @gray-exists; border-top: 0.2em solid @gray-exists;
border-top: 0.1em solid @gray-exists;
} }
.store-hdr { .store-hdr {
grid-area: store-hdr; grid-area: store-hdr;
border-bottom: 0.1em solid @gray-exists; display: flex;
border-left: 0.1em solid @gray-exists; flex-flow: column;
border-top: 0.1em solid @gray-exists;
text-align: center; text-align: center;
border-left: 0.2em solid @gray-exists;
border-top: 0.2em solid @gray-exists;
button { button {
margin-top: 0.5em; margin: 1em 0 0 0;
line-height: 1.6; line-height: 1.6;
height: 4em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
background-color: #421010; background-color: #421010;
&:hover { &:hover {
@ -47,18 +45,17 @@
.combiner { .combiner {
grid-area: combiner; grid-area: combiner;
border-top: 0.1em solid @gray-exists;
border-left: 0.1em solid @gray-exists;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5em 0 0 0;
.vbox-padding { .vbox-padding {
margin-right: 0em; margin-right: 0em;
margin-bottom: 0em; margin-bottom: 0em;
} }
button { button {
height: 3em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
background-color: #996100; background-color: #996100;
&[disabled] { &[disabled] {
@ -66,35 +63,42 @@
}; };
} }
} }
.stash { .stash {
grid-area: stash; grid-area: stash;
.vbox-padding { display: grid;
display: grid; grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr); grid-gap: 0.5em 1em;
grid-gap: 0.5em 1em;
align-items: center; align-items: center;
} padding: 0.5em;
border-right: 0.1em solid @gray-exists; border: 0.2em solid @gray-exists;
border-left: 0.1em solid @gray-exists; border-left: 0;
} }
.stash-hdr { .stash-hdr {
display: flex;
flex-flow: column;
justify-content: center;
grid-area: stash-hdr; grid-area: stash-hdr;
border-left: 0.1em solid @gray-exists;
border-right: 0.1em solid @gray-exists;
text-align: center; text-align: center;
border: 0.2em solid @gray-exists;
border-right: 0;
} }
.refund { .refund {
padding: 0.5em 0.5em 0 0;
button { button {
line-height: 1.4; line-height: 1.4;
height: 3em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
background-color: #996100; background-color: #996100;
} }
border-left: 0.1em solid @gray-exists;
border-bottom: 0.1em solid @gray-exists; .vbox-padding {
padding-left: 0;
}
} }
.vbox-hdr { .vbox-hdr {
@ -115,14 +119,12 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em 1em; grid-gap: 0.5em 1em;
align-items: center; align-items: center;
margin-bottom: 0.5em;
} }
.vbox-btn { .vbox-btn {
width: 100%; width: 100%;
margin: 0; margin: 0;
background-color: @gray-box; background-color: @gray-box;
height: 3em;
line-height: 1em; line-height: 1em;
border-width: 0; border-width: 0;
@ -153,7 +155,7 @@
} }
button { button {
height: 3.25em; height: 4.5em;
margin: 0; margin: 0;
width: 100%; width: 100%;

16
client/src/components/vbox.combiner.jsx
View File

@ -52,15 +52,13 @@ function combinerBtn(props) {
} }
return ( return (
<div class='combiner'> <div class='combiner'>
<div class='vbox-padding'> <button
<button class='vbox-btn'
class='vbox-btn' disabled={!mouseEvent}
disabled={!mouseEvent} onClick={e => e.stopPropagation()}
onClick={e => e.stopPropagation()} onMouseDown={() => mouseEvent()}>
onMouseDown={() => mouseEvent()}> {text}
{text} </button>
</button>
</div>
</div> </div>
); );
} }

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

@ -177,27 +177,25 @@ class Vbox extends preact.Component {
function storeHdr() { function storeHdr() {
return ( return (
<div class="store-hdr"> <div class="store-hdr">
<div class='vbox-padding'> <h3
<h3 onTouchStart={e => e.target.scrollIntoView(true)}
onTouchStart={e => e.target.scrollIntoView(true)} onMouseOver={e => vboxHover(e, 'store')}> STORE
onMouseOver={e => vboxHover(e, 'store')}> STORE </h3>
</h3> <div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}> <h2> {vbox.bits}b </h2>
<h2> {vbox.bits}b </h2>
</div>
<button
class='vbox-btn'
onMouseOver={e => vboxHover(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 => vboxHover(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>
); );
} }
@ -205,11 +203,9 @@ class Vbox extends preact.Component {
function stashHdr() { function stashHdr() {
return ( return (
<div class='stash-hdr'> <div class='stash-hdr'>
<div class='vbox-padding'> <h3 onTouchStart={e => e.target.scrollIntoView(true)}
<h3 onTouchStart={e => e.target.scrollIntoView(true)} onMouseOver={e => vboxHover(e, 'stash')}> STASH
onMouseOver={e => vboxHover(e, 'stash')}> STASH </h3>
</h3>
</div>
</div> </div>
); );
} }
@ -221,19 +217,17 @@ class Vbox extends preact.Component {
&& instance.time_control === 'Practice' && instance.rounds.length === 1; && instance.time_control === 'Practice' && instance.rounds.length === 1;
return ( return (
<div class='refund'> <div class='refund'>
<div class='vbox-padding'> <button
<button disabled={tutorialDisabled || !refund}
disabled={tutorialDisabled || !refund} class='vbox-btn'
class='vbox-btn' onClick={e => e.stopPropagation()}
onClick={e => e.stopPropagation()} onMouseDown={e => {
onMouseDown={e => { e.stopPropagation();
e.stopPropagation(); sendVboxReclaim(vboxSelected.stashSelect[0]);
sendVboxReclaim(vboxSelected.stashSelect[0]); }}>
}}> refund <br />
refund <br /> {refund}b
{refund}b </button>
</button>
</div>
</div> </div>
); );
} }

4
client/src/components/vbox.stash.jsx
View File

@ -99,9 +99,7 @@ function stashElement(props) {
onDragOver={ev => ev.preventDefault()} onDragOver={ev => ev.preventDefault()}
onDrop={stashClick} onDrop={stashClick}
> >
<div class='vbox-padding'> {range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
{range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
</div>
</div> </div>
); );
} }

14
client/src/components/vbox.store.jsx
View File

@ -65,14 +65,12 @@ function storeElement(props) {
return ( return (
<div class='store' <div class='store'
onClick={e => e.stopPropagation()}> onClick={e => e.stopPropagation()}>
<div class='vbox-padding'> <div class="vbox-colours">
<div class="vbox-colours"> {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))} </div>
</div> <div class="vbox-items">
<div class="vbox-items"> {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, 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))}
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
</div>
</div> </div>
</div> </div>
); );