vbox stuff
This commit is contained in:
ntr
parent
145f8e6a35
commit
ffc043d526
@ -6,12 +6,10 @@
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr minmax(min-content, 1fr);
|
||||
grid-template-rows: min-content min-content min-content 1fr;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"top info"
|
||||
"vbox info"
|
||||
"equip info"
|
||||
"constructs info";
|
||||
}
|
||||
|
||||
@ -81,10 +79,6 @@
|
||||
"vbox . combiner";
|
||||
}
|
||||
|
||||
.vbox-box {
|
||||
grid-area: vbox;
|
||||
}
|
||||
|
||||
.vbox-inventory {
|
||||
grid-area: inventory;
|
||||
}
|
||||
@ -121,19 +115,6 @@
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover {
|
||||
background: #a52a2a;
|
||||
color: black;
|
||||
box-shadow: inset 0.5em 0 0 0 #a52a2a;
|
||||
}
|
||||
|
||||
.vbox-btn.reclaim:hover {
|
||||
color: #a52a2a;
|
||||
}
|
||||
|
||||
.vbox-hdr {
|
||||
display: flex;
|
||||
@ -164,26 +145,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-btn {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #333;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.vbox-table td {
|
||||
transition-property: color, background, border;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vbox-table td:active, .vbox-table td:focus {
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* CONSTRUCT LIST */
|
||||
|
||||
.construct-list {
|
||||
|
||||
@ -146,7 +146,7 @@ button, input {
|
||||
color: whitesmoke;
|
||||
height: auto;
|
||||
border-width: 2px;
|
||||
border-color: #222;
|
||||
border-color: #333;
|
||||
border-radius: 0;
|
||||
letter-spacing: 0.25em;
|
||||
box-sizing: border-box;
|
||||
@ -234,8 +234,8 @@ table .highlight {
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
color: #333;
|
||||
border-color: #333;
|
||||
color: #222;
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -4,46 +4,94 @@
|
||||
@white: #f5f5f5; // whitesmoke
|
||||
@purple: #9355b5; // 6lack - that far cover
|
||||
|
||||
.vbox-vbox {
|
||||
grid-area: vbox;
|
||||
@darkgray: #222;
|
||||
@gray: #333;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.vbox {
|
||||
margin-bottom: 2em;
|
||||
|
||||
.vbox-section {
|
||||
// border: 2px solid #444;
|
||||
}
|
||||
|
||||
.vbox-hdr {
|
||||
margin-bottom: 1em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.vbox-colours {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 1em;
|
||||
grid-gap: 1em 2em;
|
||||
align-items: center;
|
||||
margin: 1em 0;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
stroke: none;
|
||||
border: 2px solid #222;
|
||||
}
|
||||
|
||||
svg.red {
|
||||
fill: @red;
|
||||
}
|
||||
|
||||
svg.green {
|
||||
fill: @green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
fill: @blue;
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.vbox-skills, .vbox-specs {
|
||||
.vbox-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 1em;
|
||||
grid-gap: 1em 2em;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-btn {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: @gray;
|
||||
border-width: 0;
|
||||
|
||||
.reclaim {
|
||||
height: auto;
|
||||
|
||||
:hover {
|
||||
color: @red;
|
||||
};
|
||||
}
|
||||
|
||||
:active, :hover, :focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reclaiming, .reclaiming:hover, .reclaiming:active {
|
||||
background: @red;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: black;
|
||||
border-width: 1px;
|
||||
};
|
||||
}
|
||||
|
||||
button {
|
||||
height: 3em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: none;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg.red {
|
||||
fill: @red;
|
||||
}
|
||||
|
||||
svg.green {
|
||||
fill: @green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
fill: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,4 +32,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value });
|
||||
export const setShop = value => ({ type: 'SET_SHOP', value });
|
||||
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
|
||||
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
|
||||
|
||||
export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
|
||||
|
||||
export const setWs = value => ({ type: 'SET_WS', value });
|
||||
|
||||
@ -49,7 +49,6 @@ function Instance(args) {
|
||||
<main class={instanceClasses} onMouseOver={() => setInfo(null)} >
|
||||
<Vbox />
|
||||
<InfoContainer />
|
||||
<EquipmentContainer />
|
||||
<InstanceConstructsContainer />
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -2,11 +2,11 @@ const preact = require('preact');
|
||||
|
||||
module.exports = function vboxColour(colour) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour.toLowerCase()} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour} >
|
||||
<circle
|
||||
cx={50}
|
||||
cy={50}
|
||||
r={40}
|
||||
r={50}
|
||||
// stroke-width="2"
|
||||
// stroke={colour}
|
||||
/>
|
||||
|
||||
@ -3,7 +3,6 @@ const range = require('lodash/range');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { convertItem } = require('./../utils');
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
@ -15,6 +14,7 @@ const addState = connect(
|
||||
combiner,
|
||||
reclaiming,
|
||||
vboxHighlight,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
} = state;
|
||||
|
||||
@ -44,6 +44,7 @@ const addState = connect(
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
vboxHighlight,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
};
|
||||
},
|
||||
@ -65,11 +66,16 @@ const addState = connect(
|
||||
return dispatch(actions.setVboxHighlight(v));
|
||||
}
|
||||
|
||||
function setVboxSelected(v) {
|
||||
return dispatch(actions.setVboxSelected(v));
|
||||
}
|
||||
|
||||
return {
|
||||
setCombiner,
|
||||
setReclaiming,
|
||||
setInfo,
|
||||
setVboxHighlight,
|
||||
setVboxSelected,
|
||||
};
|
||||
}
|
||||
|
||||
@ -90,6 +96,10 @@ function Vbox(args) {
|
||||
|
||||
setCombiner,
|
||||
setInfo,
|
||||
|
||||
vboxSelected,
|
||||
setVboxSelected,
|
||||
|
||||
setReclaiming,
|
||||
setVboxHighlight,
|
||||
} = args;
|
||||
@ -124,39 +134,6 @@ function Vbox(args) {
|
||||
//
|
||||
// VBOX
|
||||
//
|
||||
// const free = [];
|
||||
|
||||
// // Colours
|
||||
// free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
|
||||
// free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
|
||||
// // Skills
|
||||
// free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
|
||||
// // Specs
|
||||
// free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
|
||||
|
||||
let vboxTimer;
|
||||
const LONG_TOUCH_TIME = 500;
|
||||
function vboxTouchStart(e, i, j) {
|
||||
vboxTimer = (setTimeout(() => {
|
||||
sendVboxAccept(j, i);
|
||||
vboxTimer = null;
|
||||
}, LONG_TOUCH_TIME));
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxTouchEnd(e, i, j) {
|
||||
if (vboxTimer) {
|
||||
clearTimeout(vboxTimer);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxTouchMove(e) {
|
||||
if (vboxTimer) clearTimeout(vboxTimer);
|
||||
e.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
|
||||
function vboxHover(e, v) {
|
||||
if (v) {
|
||||
setInfo(v);
|
||||
@ -165,9 +142,29 @@ function Vbox(args) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const vboxBtn = v => (
|
||||
<button>{convertItem(v)}</button>
|
||||
);
|
||||
function boundBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
function onClick() {
|
||||
// double clicked
|
||||
if (vboxSelected[0] === group && vboxSelected[1] === index) {
|
||||
document.activeElement.blur();
|
||||
setVboxSelected([]);
|
||||
return sendVboxAccept(group, index);
|
||||
}
|
||||
|
||||
return setVboxSelected([group, index]);
|
||||
}
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<button onClick={onClick} >{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
);
|
||||
}
|
||||
|
||||
return <button onClick={onClick} >{v}</button>;
|
||||
}
|
||||
|
||||
|
||||
function vboxElement() {
|
||||
return (
|
||||
@ -179,20 +176,17 @@ function Vbox(args) {
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{vbox.free[0].map(shapes.vboxColour)}
|
||||
{range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-skills">
|
||||
{vbox.free[1].map(vboxBtn)}
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => boundBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => boundBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
<div class="vbox-specs">
|
||||
{vbox.free[2].map(vboxBtn)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
refill - 5b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@ -240,72 +234,70 @@ function Vbox(args) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const boundTds = range(0, 9).map(i => {
|
||||
const value = vbox.bound[i];
|
||||
if (combiner.indexOf(i) > -1) {
|
||||
// const boundTds = range(0, 9).map(i => {
|
||||
// const value = vbox.bound[i];
|
||||
// if (combiner.indexOf(i) > -1) {
|
||||
// return (
|
||||
// <td
|
||||
// key={i}>
|
||||
//
|
||||
// </td>
|
||||
// );
|
||||
// }
|
||||
|
||||
// const highlighted = value && vboxHighlight.includes(value);
|
||||
|
||||
// return (
|
||||
// <td
|
||||
// key={i}
|
||||
// class={`${highlighted ? 'highlight' : ''}`}
|
||||
// onMouseOver={(e) => vboxHover(e, value)}
|
||||
// onClick={e => boundClick(e, i, highlighted) }>
|
||||
// {convertItem(value)}
|
||||
// </td>
|
||||
// );
|
||||
// });
|
||||
|
||||
function inventoryBtn(v, i) {
|
||||
if (!v) return <button disabled class='empty' > </button>;
|
||||
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
<td
|
||||
key={i}>
|
||||
|
||||
</td>
|
||||
<button>{shapes.vboxColour(v.toLowerCase())}</button>
|
||||
);
|
||||
}
|
||||
|
||||
const highlighted = value && vboxHighlight.includes(value);
|
||||
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
class={`${highlighted ? 'highlight' : ''}`}
|
||||
onMouseOver={(e) => vboxHover(e, value)}
|
||||
onClick={e => boundClick(e, i, highlighted) }>
|
||||
{convertItem(value)}
|
||||
</td>
|
||||
);
|
||||
});
|
||||
|
||||
const boundRows = [
|
||||
<tr key={0} >
|
||||
{boundTds[0]}
|
||||
{boundTds[1]}
|
||||
{boundTds[2]}
|
||||
</tr>,
|
||||
<tr key={1}>
|
||||
{boundTds[3]}
|
||||
{boundTds[4]}
|
||||
{boundTds[5]}
|
||||
</tr>,
|
||||
<tr key={2}>
|
||||
{boundTds[6]}
|
||||
{boundTds[7]}
|
||||
{boundTds[8]}
|
||||
</tr>,
|
||||
];
|
||||
|
||||
//
|
||||
// COMBINER
|
||||
//
|
||||
function combinerRmv(i) {
|
||||
combiner[i] = null;
|
||||
return combinerChange(combiner);
|
||||
return <button onDblClick={() => sendVboxAccept(0, i)}>{v}</button>;
|
||||
}
|
||||
|
||||
|
||||
function inventoryElement() {
|
||||
return (
|
||||
<div class='vbox-section'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
class={reclaimClass}
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<div class='vbox-items'>
|
||||
{range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
■ ▫ ▫
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const combinerElement = (
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td onClick={() => combinerRmv(0)}>
|
||||
{combiner[0] !== null ? convertItem(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')}
|
||||
</td>
|
||||
<td onClick={() => combinerRmv(1)}>
|
||||
{combiner[1] !== null ? convertItem(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')}
|
||||
</td>
|
||||
<td onClick={() => combinerRmv(2)}>
|
||||
{convertItem(vbox.bound[combiner[2]])}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
//
|
||||
// EVERYTHING
|
||||
@ -321,42 +313,14 @@ function Vbox(args) {
|
||||
return setInfo(info);
|
||||
}
|
||||
|
||||
const classes = "vbox";
|
||||
const classes = 'vbox';
|
||||
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
{vboxElement()}
|
||||
<div class="vbox-arrow">⮞</div>
|
||||
<div class="vbox-arrow-mobile">⮟</div>
|
||||
<div class='vbox-inventory'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'inventory')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
class={reclaimClass}
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
</div>
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{boundRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="vbox-combiner-arrow" onTouchStart={e => e.target.scrollIntoView(true)}>⮟⮝</div>
|
||||
<div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
|
||||
{combinerElement}
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
onClick={() => sendVboxCombine()}>
|
||||
combine
|
||||
</button>
|
||||
</div>
|
||||
{inventoryElement()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -44,5 +44,8 @@ module.exports = {
|
||||
shop: createReducer(false, 'SET_SHOP'),
|
||||
team: createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
|
||||
vboxHighlight: createReducer([], 'SET_VBOX_HIGHLIGHT'),
|
||||
|
||||
vboxSelected: createReducer([], 'SET_VBOX_SELECTED'),
|
||||
|
||||
ws: createReducer(null, 'SET_WS'),
|
||||
};
|
||||
|
||||
@ -168,20 +168,6 @@ function eventClasses(game, account, resolution, construct, postSkill) {
|
||||
return '';
|
||||
}
|
||||
|
||||
function convertItem(v) {
|
||||
if (['Red', 'Green', 'Blue'].includes(v)) {
|
||||
return (
|
||||
shapes.vboxColour(v.toLowerCase())
|
||||
);
|
||||
}
|
||||
return v || <span> </span>;
|
||||
// uncomment for double borders in vbox;
|
||||
// if (v) {
|
||||
// return <div>{v}</div>;
|
||||
// }
|
||||
// return;
|
||||
}
|
||||
|
||||
const COLOURS = [
|
||||
'#a52a2a',
|
||||
'#1FF01F',
|
||||
@ -314,7 +300,6 @@ function errorToast(message) {
|
||||
|
||||
module.exports = {
|
||||
stringSort,
|
||||
convertItem,
|
||||
numSort,
|
||||
eventClasses,
|
||||
postData,
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
use rand::prelude::*;
|
||||
use rand::{thread_rng};
|
||||
|
||||
const FIRSTS: [&'static str; 28] = [
|
||||
const FIRSTS: [&'static str; 33] = [
|
||||
"artificial",
|
||||
"ambient",
|
||||
"borean",
|
||||
"brewing",
|
||||
"bristling",
|
||||
"compressed",
|
||||
"chromatic",
|
||||
"concave",
|
||||
"convex",
|
||||
"distorted",
|
||||
@ -18,8 +20,11 @@ const FIRSTS: [&'static str; 28] = [
|
||||
"metallic",
|
||||
"mossy",
|
||||
"mighty",
|
||||
"modulated",
|
||||
"nocturnal",
|
||||
"noisy",
|
||||
"nutritious",
|
||||
"powerful",
|
||||
"obscure",
|
||||
"organic",
|
||||
"piscine",
|
||||
@ -32,16 +37,19 @@ const FIRSTS: [&'static str; 28] = [
|
||||
"weary",
|
||||
];
|
||||
|
||||
const LASTS: [&'static str; 36] = [
|
||||
const LASTS: [&'static str; 41] = [
|
||||
"artifact",
|
||||
"assembly",
|
||||
"console",
|
||||
"construct",
|
||||
"design",
|
||||
"drone",
|
||||
"energy",
|
||||
"entropy",
|
||||
"foilage",
|
||||
"forest",
|
||||
"form",
|
||||
"fossil",
|
||||
"frequency",
|
||||
"function",
|
||||
"information",
|
||||
@ -52,19 +60,21 @@ const LASTS: [&'static str; 36] = [
|
||||
"mountain",
|
||||
"nectar",
|
||||
"oak",
|
||||
"pattern",
|
||||
"plant",
|
||||
"poseidon",
|
||||
"problem",
|
||||
"receiver",
|
||||
"replicant",
|
||||
"river",
|
||||
"river",
|
||||
"scaffold",
|
||||
"shape",
|
||||
"signal",
|
||||
"synthesiser",
|
||||
"system",
|
||||
"tower",
|
||||
"transmitter",
|
||||
"scaffold",
|
||||
"pattern",
|
||||
"receiver",
|
||||
"traveller",
|
||||
"warning",
|
||||
"wildlife",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user