wip getting client prep for changes
This commit is contained in:
Mashy
parent
4fac208d8b
commit
8cb7e0c419
@ -5,7 +5,7 @@
|
||||
.instance {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-rows: 7fr 12fr;
|
||||
|
||||
grid-template-areas:
|
||||
"vbox"
|
||||
@ -31,13 +31,13 @@
|
||||
.instance-construct {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"name "
|
||||
"skills "
|
||||
"specs "
|
||||
"avatar "
|
||||
"stats ";
|
||||
"name name "
|
||||
"skills skills"
|
||||
"stats avatar"
|
||||
"defStats defStats";
|
||||
|
||||
/*padding: 0.5em;*/
|
||||
border: 0.1em solid #222;
|
||||
@ -78,7 +78,6 @@
|
||||
z-index: 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
|
||||
button {
|
||||
@ -89,58 +88,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
.specs {
|
||||
grid-area: specs;
|
||||
padding: 0 0.5em;
|
||||
margin-bottom: 0.75em;
|
||||
z-index: 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
|
||||
button {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
// font-size: 75%;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
.offStats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
border-width: 0px;
|
||||
text-align: center;
|
||||
|
||||
figcaption {
|
||||
// font-size: 75%;
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
// give speed some space
|
||||
div:nth-child(4n) {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
margin: 0.5em 0.75em;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.defStats {
|
||||
grid-area: defStats;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
margin: 0.5em 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
align-content: space-between;
|
||||
grid-area: vbox;
|
||||
display: grid;
|
||||
grid-template-rows: 3fr minmax(min-content, 2fr);
|
||||
grid-template-columns: 1fr 4fr 6fr minmax(min-content, 2fr);;
|
||||
grid-template-rows: 1fr min-content;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-areas:
|
||||
"store-hdr store info-combiner combos"
|
||||
"stash-hdr stash info-combiner combos";
|
||||
"store-hdr info-combiner"
|
||||
"store store";
|
||||
margin-bottom: 1em;
|
||||
|
||||
// immediate children
|
||||
@ -48,53 +48,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.stash {
|
||||
grid-area: stash;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
|
||||
align-items: center;
|
||||
border: 0.15em solid @gray;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.stash-hdr {
|
||||
grid-area: stash-hdr;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
text-align: center;
|
||||
border: 0.15em solid @gray;
|
||||
border-right: 0;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.15em;
|
||||
border-width: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-hdr {
|
||||
grid-area: vbox-hdr;
|
||||
margin-bottom: 1em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.vbox-colours {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.vbox-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
}
|
||||
@ -115,58 +77,6 @@
|
||||
border-width: 0.1em;
|
||||
};
|
||||
}
|
||||
|
||||
.Refunding {
|
||||
button:not([disabled]) {
|
||||
&, &:hover, &:active {
|
||||
background: @red;
|
||||
color: black;
|
||||
border: 0.1em solid black;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
.white {
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: 3.5em;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
// text-transform: none;
|
||||
&.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background: @silver;
|
||||
// overwrite the classes on white svg elements
|
||||
svg {
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// figures don't scale well
|
||||
figure {
|
||||
svg {
|
||||
height: 1.5em;
|
||||
stroke-width: 0.5em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.info-combiner {
|
||||
grid-area: info-combiner;
|
||||
display: grid;
|
||||
@ -202,111 +112,46 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.combiner {
|
||||
grid-area: combiner;
|
||||
margin: 1em 0.5em;
|
||||
width: 50%;
|
||||
line-height: 1.3;
|
||||
font-size: 1.25em;
|
||||
letter-spacing: 0.1em;
|
||||
border: 0.1em solid @gray-exists;
|
||||
&:hover {
|
||||
border: 0.1em solid @gray-hover;
|
||||
}
|
||||
}
|
||||
// align-self: flex-end;
|
||||
}
|
||||
|
||||
.combos {
|
||||
display: grid;
|
||||
grid-area: combos;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
grid-template-rows: min-content min-content;
|
||||
width: 15.5em;
|
||||
grid-template-areas:
|
||||
"comboHeader"
|
||||
"comboList";
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
|
||||
button {
|
||||
height: 5em;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
// text-transform: none;
|
||||
&.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: inline;
|
||||
height: 0.5em;
|
||||
&.highlight {
|
||||
background: @silver;
|
||||
// overwrite the classes on white svg elements
|
||||
svg {
|
||||
margin-right: 0.5em;
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// figures don't scale well
|
||||
figure {
|
||||
svg {
|
||||
height: 1.5em;
|
||||
stroke-width: 0.5em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.combo-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combo-list {
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
width: 15.5em;
|
||||
|
||||
.table-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"ingr";
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
background-color: @gray;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-top: 0.1em solid #222;
|
||||
border-bottom: 0.1em solid #222;
|
||||
flex: 1;
|
||||
grid-area: item;
|
||||
font-weight: bold;
|
||||
div {
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
border-left: 0.1em solid #222;
|
||||
border-right: 0.1em solid #222;
|
||||
height: 1.75em;
|
||||
width: 7.5em;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0.1em solid #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ const range = require('lodash/range');
|
||||
|
||||
const buttons = require('./buttons');
|
||||
const shapes = require('./shapes');
|
||||
const { STATS } = require('../utils');
|
||||
const { OFFENSE, DEFENSE } = require('../utils');
|
||||
const { ConstructAvatar } = require('./construct');
|
||||
const actions = require('../actions');
|
||||
const { removeTier } = require('../utils');
|
||||
@ -125,7 +125,7 @@ function Construct(props) {
|
||||
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
|
||||
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
|
||||
|
||||
const skills = range(0, 3).map(i => {
|
||||
const skills = range(0, 1).map(i => {
|
||||
const skill = construct.skills[i];
|
||||
const s = skill
|
||||
? skill.skill
|
||||
@ -169,7 +169,7 @@ function Construct(props) {
|
||||
);
|
||||
});
|
||||
|
||||
const specs = range(0, 3).map(i => {
|
||||
const specs = range(0, 0).map(i => {
|
||||
const s = construct.specs[i];
|
||||
|
||||
if (!s) {
|
||||
@ -207,12 +207,24 @@ function Construct(props) {
|
||||
);
|
||||
});
|
||||
|
||||
const stats = Object.keys(STATS).map(s => {
|
||||
const stat = STATS[s];
|
||||
const offensiveStats = Object.keys(OFFENSE).map(s => {
|
||||
const stat = OFFENSE[s];
|
||||
|
||||
const info = (s === 'SpeedStat' && 'speedStat')
|
||||
|| (s.includes('Power') && 'powerStat')
|
||||
|| (s.includes('Life') && 'lifeStat');
|
||||
|| (s.includes('Power') && 'powerStat');
|
||||
return <div key={stat.stat}
|
||||
alt={stat.stat}
|
||||
class={stat.stat}
|
||||
onMouseOver={e => hoverInfo(e, info)} >
|
||||
{shapes[s]()}
|
||||
<div>{construct[stat.stat].value}</div>
|
||||
</div>;
|
||||
});
|
||||
|
||||
const defensiveStats = Object.keys(DEFENSE).map(s => {
|
||||
const stat = DEFENSE[s];
|
||||
|
||||
const info = (s.includes('Life') && 'lifeStat');
|
||||
return <div key={stat.stat}
|
||||
alt={stat.stat}
|
||||
class={stat.stat}
|
||||
@ -234,8 +246,11 @@ function Construct(props) {
|
||||
<div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
|
||||
{specs}
|
||||
</div>
|
||||
<div class="stats">
|
||||
{stats}
|
||||
<div class="offStats">
|
||||
{offensiveStats}
|
||||
</div>
|
||||
<div class="defStats">
|
||||
{defensiveStats}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -45,10 +45,6 @@ const addState = connect(
|
||||
return ws.sendVboxRefund(instance.id, i);
|
||||
}
|
||||
|
||||
function sendItemUnequip([constructId, item]) {
|
||||
return ws.sendVboxUnequip(instance.id, constructId, item);
|
||||
}
|
||||
|
||||
return {
|
||||
itemUnequip,
|
||||
instance,
|
||||
@ -59,7 +55,6 @@ const addState = connect(
|
||||
itemInfo,
|
||||
|
||||
sendInstance,
|
||||
sendItemUnequip,
|
||||
sendVboxBuy,
|
||||
sendVboxCombine,
|
||||
sendVboxRefill,
|
||||
@ -112,7 +107,6 @@ class Vbox extends preact.Component {
|
||||
itemInfo,
|
||||
// Function Calls
|
||||
dispatchVboxSelect,
|
||||
sendItemUnequip,
|
||||
sendInstance,
|
||||
sendVboxBuy,
|
||||
sendVboxCombine,
|
||||
@ -128,7 +122,6 @@ class Vbox extends preact.Component {
|
||||
|
||||
const setVboxSelected = v => dispatchVboxSelect(v, { itemInfo, itemUnequip, vbox });
|
||||
const clearVboxSelected = () => setVboxSelected({ storeSelect: [], stashSelect: [] });
|
||||
const vboxBuySelected = () => sendVboxBuy(storeSelect[0][0], storeSelect[0][1]);
|
||||
const clearTutorial = () => {
|
||||
setTutorial(null);
|
||||
sendInstance();
|
||||
@ -147,7 +140,7 @@ class Vbox extends preact.Component {
|
||||
<div class="store-hdr">
|
||||
<h2
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'store')}> STORE
|
||||
onMouseOver={e => vboxHover(e, 'store')}> VBOX
|
||||
</h2>
|
||||
<h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
|
||||
{vbox.bits}b
|
||||
@ -168,41 +161,10 @@ class Vbox extends preact.Component {
|
||||
);
|
||||
}
|
||||
|
||||
function stashHdr() {
|
||||
const refund = storeSelect.length === 0 && stashSelect.length === 1
|
||||
? itemInfo.items.find(i => i.item === vbox.stash[stashSelect[0]]).cost
|
||||
: 0;
|
||||
const tutorialDisabled = tutorial && tutorial < 8
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
const refundBtn = (
|
||||
<button
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
sendVboxRefund(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class='stash-hdr'>
|
||||
<h2 onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'stash')}> STASH
|
||||
</h2>
|
||||
{refundBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// EVERYTHING
|
||||
return (
|
||||
<div class='vbox'>
|
||||
{storeHdr()}
|
||||
{stashHdr()}
|
||||
<StoreElement
|
||||
clearVboxSelected={clearVboxSelected}
|
||||
setVboxSelected={setVboxSelected}
|
||||
@ -210,26 +172,11 @@ class Vbox extends preact.Component {
|
||||
vboxSelected={vboxSelected}
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<StashElement
|
||||
sendItemUnequip={sendItemUnequip}
|
||||
setInfo={setInfo}
|
||||
setVboxSelected={setVboxSelected}
|
||||
vbox={vbox}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
vboxHover={vboxHover}
|
||||
/>
|
||||
<div class='info-combiner'>
|
||||
<InfoContainer
|
||||
clearTutorial={clearTutorial}
|
||||
/>
|
||||
<Combiner
|
||||
vbox={vbox}
|
||||
vboxSelected={vboxSelected}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
sendVboxCombine={sendVboxCombine}
|
||||
/>
|
||||
</div>
|
||||
<Combos />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -80,11 +80,8 @@ class storeElement extends preact.Component {
|
||||
return (
|
||||
<div class='store'
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.store['Colours'][i], 'Colours', i.toString()))}
|
||||
</div>
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
|
||||
{range(0, 2).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.store['Specs'][i], 'Specs', i.toString()))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,7 +47,7 @@ const numSort = (k, desc) => {
|
||||
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const STATS = {
|
||||
const OFFENSE = {
|
||||
RedPower: {
|
||||
stat: 'red_power',
|
||||
colour: 'red',
|
||||
@ -68,6 +68,8 @@ const STATS = {
|
||||
colour: 'white',
|
||||
svg: shapes.triangle,
|
||||
},
|
||||
};
|
||||
const DEFENSE = {
|
||||
RedLife: {
|
||||
stat: 'red_life',
|
||||
colour: 'red',
|
||||
@ -83,7 +85,7 @@ const STATS = {
|
||||
colour: 'blue',
|
||||
svg: shapes.square,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const COLOURS = [
|
||||
'#a52a2a',
|
||||
@ -294,7 +296,8 @@ module.exports = {
|
||||
errorToast,
|
||||
infoToast,
|
||||
NULL_UUID,
|
||||
STATS,
|
||||
OFFENSE,
|
||||
DEFENSE,
|
||||
COLOURS,
|
||||
TARGET_COLOURS,
|
||||
randomPoints,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user