This commit is contained in:
ntr 2019-07-20 18:04:08 +10:00
parent 3f1367172d
commit 145f8e6a35
12 changed files with 151 additions and 78 deletions

View File

@ -454,4 +454,8 @@
#mnml .game .skills button, #mnml .game .stats {
font-size: 75%;
}
.game-construct .name {
display: none;
}
}

View File

@ -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;
}

View 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%;
}
}
}

View File

@ -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');

View File

@ -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",

View File

@ -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) {

View File

@ -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);
}

View File

@ -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,

View 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>
);
};

View File

@ -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

View File

@ -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"));
}

View File

@ -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",