wip"
This commit is contained in:
parent
3f1367172d
commit
145f8e6a35
@ -454,4 +454,8 @@
|
||||
#mnml .game .skills button, #mnml .game .stats {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.game-construct .name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -164,7 +164,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.vbox button {
|
||||
.vbox-btn {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #333;
|
||||
@ -179,7 +179,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vbox-table td:active {
|
||||
.vbox-table td:active, .vbox-table td:focus {
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
}
|
||||
|
||||
49
client/assets/styles/vbox.less
Normal file
49
client/assets/styles/vbox.less
Normal file
@ -0,0 +1,49 @@
|
||||
@green: #1FF01F;
|
||||
@red: #a52a2a;
|
||||
@blue: #3498db;
|
||||
@white: #f5f5f5; // whitesmoke
|
||||
@purple: #9355b5; // 6lack - that far cover
|
||||
|
||||
.vbox-vbox {
|
||||
grid-area: vbox;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.vbox-colours {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 1em;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-skills, .vbox-specs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 1em;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
require('./assets/styles/styles.css');
|
||||
require('./assets/styles/styles.mobile.css');
|
||||
require('./assets/styles/instance.css');
|
||||
require('./assets/styles/vbox.less');
|
||||
require('./assets/styles/instance.mobile.css');
|
||||
require('./assets/styles/game.css');
|
||||
|
||||
|
||||
@ -40,7 +40,8 @@
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"jest": "^18.0.0"
|
||||
"jest": "^18.0.0",
|
||||
"less": "^3.9.0"
|
||||
},
|
||||
"alias": {
|
||||
"react": "preact-compat",
|
||||
|
||||
@ -140,7 +140,7 @@ function Construct(props) {
|
||||
);
|
||||
});
|
||||
|
||||
const specs = range(0, 6).map(i => {
|
||||
const specs = range(0, 3).map(i => {
|
||||
const s = construct.specs[i];
|
||||
|
||||
if (!s) {
|
||||
|
||||
@ -26,10 +26,6 @@ const addState = connect(
|
||||
return ws.sendInstanceState(instance.id);
|
||||
}
|
||||
|
||||
function sendAccountInstances() {
|
||||
return ws.sendAccountInstances();
|
||||
}
|
||||
|
||||
function sendInstanceList() {
|
||||
return ws.sendInstanceList();
|
||||
}
|
||||
@ -41,7 +37,6 @@ const addState = connect(
|
||||
game,
|
||||
ping,
|
||||
sendInstanceState,
|
||||
sendAccountInstances,
|
||||
sendInstanceList,
|
||||
};
|
||||
},
|
||||
@ -90,7 +85,6 @@ function Nav(args) {
|
||||
team,
|
||||
|
||||
sendInstanceState,
|
||||
sendAccountInstances,
|
||||
sendInstanceList,
|
||||
|
||||
setTestGame,
|
||||
@ -102,7 +96,6 @@ function Nav(args) {
|
||||
function navTo(p) {
|
||||
if (p === 'list') {
|
||||
sendInstanceList();
|
||||
sendAccountInstances();
|
||||
}
|
||||
return setNav(p);
|
||||
}
|
||||
|
||||
@ -6,7 +6,8 @@ const saw = require('./svgs/saw');
|
||||
const square = require('./svgs/square');
|
||||
const squircle = require('./svgs/squircle');
|
||||
const triangle = require('./svgs/triangle');
|
||||
const vboxColour = require('./svgs/colour');
|
||||
// const vboxColour = require('./svgs/colour');
|
||||
const vboxColour = require('./svgs/vbox.colour');
|
||||
|
||||
module.exports = {
|
||||
circle,
|
||||
|
||||
15
client/src/components/svgs/vbox.colour.jsx
Normal file
15
client/src/components/svgs/vbox.colour.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
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()} >
|
||||
<circle
|
||||
cx={50}
|
||||
cy={50}
|
||||
r={40}
|
||||
// stroke-width="2"
|
||||
// stroke={colour}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@ -124,15 +124,15 @@ function Vbox(args) {
|
||||
//
|
||||
// VBOX
|
||||
//
|
||||
const free = [];
|
||||
// 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]]);
|
||||
// // 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;
|
||||
@ -165,32 +165,65 @@ function Vbox(args) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const freeRows = free.map((row, i) => {
|
||||
const cells = row.map((c, j) => {
|
||||
const highlighted = c && vboxHighlight.includes(c);
|
||||
// First two rows are colours
|
||||
const sendItemType = i > 1 ? i - 1 : 0;
|
||||
const sendItemIndex = i === 1 ? j + 3 : j;
|
||||
return <td
|
||||
key={j}
|
||||
class={`${highlighted ? 'highlight' : ''}`}
|
||||
onTouchStart={e => vboxTouchStart(e, i, j)}
|
||||
onTouchEnd={e => vboxTouchEnd(e, i, j)}
|
||||
onTouchMove={e => vboxTouchMove(e)}
|
||||
const vboxBtn = v => (
|
||||
<button>{convertItem(v)}</button>
|
||||
);
|
||||
|
||||
// onClick={freeClick}
|
||||
onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
|
||||
onMouseOver={e => vboxHover(e, c)}
|
||||
>
|
||||
{convertItem(c)}
|
||||
</td>;
|
||||
});
|
||||
function vboxElement() {
|
||||
return (
|
||||
<tr key={i}>
|
||||
{cells}
|
||||
</tr>
|
||||
<div class='vbox-vbox'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div class="vbox-colours">
|
||||
{vbox.free[0].map(shapes.vboxColour)}
|
||||
</div>
|
||||
<div class="vbox-skills">
|
||||
{vbox.free[1].map(vboxBtn)}
|
||||
</div>
|
||||
<div class="vbox-specs">
|
||||
{vbox.free[2].map(vboxBtn)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// const freeRows = free.map((row, i) => {
|
||||
// const cells = row.map((c, j) => {
|
||||
// const highlighted = c && vboxHighlight.includes(c);
|
||||
// // First two rows are colours
|
||||
// const sendItemType = i > 1 ? i - 1 : 0;
|
||||
// const sendItemIndex = i === 1 ? j + 3 : j;
|
||||
// return <td
|
||||
// key={j}
|
||||
// class={`${highlighted ? 'highlight' : ''}`}
|
||||
// onTouchStart={e => vboxTouchStart(e, i, j)}
|
||||
// onTouchEnd={e => vboxTouchEnd(e, i, j)}
|
||||
// onTouchMove={e => vboxTouchMove(e)}
|
||||
|
||||
// // onClick={freeClick}
|
||||
// onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
|
||||
// onMouseOver={e => vboxHover(e, c)}
|
||||
// >
|
||||
// {convertItem(c)}
|
||||
// </td>;
|
||||
// });
|
||||
// return (
|
||||
// <tr key={i}>
|
||||
// {cells}
|
||||
// </tr>
|
||||
// );
|
||||
// });
|
||||
|
||||
//
|
||||
// INVENTORY
|
||||
@ -293,37 +326,7 @@ function Vbox(args) {
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
<div class='vbox-box'
|
||||
onClick={() => setReclaiming(false)}
|
||||
onMouseOver={e => hoverInfo(e, 'vbox')}>
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<div style="text-align: center"> Colours </div>
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{freeRows.slice(0, 2)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="text-align: center"> Skills </div>
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{freeRows[2]}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="text-align: center"> Specs </div>
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{freeRows[3]}
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
</button>
|
||||
</div>
|
||||
{vboxElement()}
|
||||
<div class="vbox-arrow">⮞</div>
|
||||
<div class="vbox-arrow-mobile">⮟</div>
|
||||
<div class='vbox-inventory'
|
||||
@ -348,6 +351,7 @@ function Vbox(args) {
|
||||
<div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
|
||||
{combinerElement}
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
onClick={() => sendVboxCombine()}>
|
||||
combine
|
||||
|
||||
@ -277,7 +277,7 @@ impl Construct {
|
||||
}
|
||||
|
||||
pub fn spec_add(&mut self, spec: Spec) -> Result<&mut Construct, Error> {
|
||||
if self.specs.len() >= 6 {
|
||||
if self.specs.len() >= 3 {
|
||||
return Err(err_msg("maximum specs equipped"));
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
use rand::prelude::*;
|
||||
use rand::{thread_rng};
|
||||
|
||||
const FIRSTS: [&'static str; 25] = [
|
||||
const FIRSTS: [&'static str; 28] = [
|
||||
"artificial",
|
||||
"borean",
|
||||
"brewing",
|
||||
"bristling",
|
||||
@ -15,6 +16,7 @@ const FIRSTS: [&'static str; 25] = [
|
||||
"leafy",
|
||||
"lurking",
|
||||
"metallic",
|
||||
"mossy",
|
||||
"mighty",
|
||||
"nocturnal",
|
||||
"nutritious",
|
||||
@ -25,11 +27,12 @@ const FIRSTS: [&'static str; 25] = [
|
||||
"recalcitrant",
|
||||
"rogue",
|
||||
"subterranean",
|
||||
"synthetic",
|
||||
"sweet",
|
||||
"weary",
|
||||
];
|
||||
|
||||
const LASTS: [&'static str; 34] = [
|
||||
const LASTS: [&'static str; 36] = [
|
||||
"artifact",
|
||||
"assembly",
|
||||
"console",
|
||||
@ -43,7 +46,6 @@ const LASTS: [&'static str; 34] = [
|
||||
"function",
|
||||
"information",
|
||||
"insulator",
|
||||
"kaffe",
|
||||
"layout",
|
||||
"lens",
|
||||
"mechanism",
|
||||
@ -60,6 +62,9 @@ const LASTS: [&'static str; 34] = [
|
||||
"signal",
|
||||
"tower",
|
||||
"transmitter",
|
||||
"scaffold",
|
||||
"pattern",
|
||||
"receiver",
|
||||
"traveller",
|
||||
"warning",
|
||||
"wildlife",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user