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

styles and blast

Browse Source
This commit is contained in:
ntr 2019-07-24 12:04:18 +10:00
parent 16c83a529b
commit 9dc840765c
8 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/animations.test.js
View File

@ -1,4 +1,4 @@
require('./assets/styles/styles.css');
require('./assets/styles/styles.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.less');
require('./assets/styles/instance.mobile.css');

9
client/assets/styles/colours.less
View File

@ -4,9 +4,12 @@
@white: #f5f5f5; // whitesmoke
@purple: #9355b5; // 6lack - that far cover
@darkgray: #222;
@gray: #333;
@gray: #222;
@gray-box: #222;
@gray-exists: #444;
@gray-hint: #666;
@gray-hover: #888;
@gray-focus: whitesmoke;
svg {
stroke: none;

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

@ -1,6 +1,4 @@
/*
INSTANCE
*/
@import 'colours.less';
.instance {
overflow-x: hidden;
@ -92,7 +90,7 @@
}
.vbox-combiner-arrow {
color: #444;
color: @gray-hint;
grid-area: carrow;
display: block;
text-align: center;
@ -109,7 +107,7 @@
margin: 1em 0.25em 0 0.25em;
grid-area: varrow;
font-size: 2em;
color: #444;
color: @gray-hint;
}
.vbox-combiner button {
@ -134,7 +132,7 @@
.arrow {
grid-area: arrow;
color: #444;
color: @gray-hint;
}
@keyframes action {
@ -350,8 +348,7 @@
.equipping, .receiving {
transition: border-color 0.5s ease-in;
border-color: whitesmoke;
border-width: 2px;
border: 2px dashed @gray-hint;
}
.thresholds {

12
client/assets/styles/styles.css → client/assets/styles/styles.less
View File

@ -1,3 +1,5 @@
@import 'colours.less';
/*
GLOBAL
*/
@ -6,7 +8,7 @@ html, body, #mnml {
/*width: 100%;*/
margin: 0;
background-color: #000000;
background-color: black;
font-family: 'Jura';
color: whitesmoke;
font-size: 14pt;
@ -146,7 +148,7 @@ button, input {
color: whitesmoke;
height: auto;
border-width: 2px;
border-color: #333;
border-color: @gray-exists;
border-radius: 0;
letter-spacing: 0.25em;
box-sizing: border-box;
@ -162,13 +164,13 @@ button, input {
button:hover {
color: whitesmoke;
border-color: #888;
border-color: @gray-hover;
}
button:focus {
/*colour necesary to bash skellington*/
color: whitesmoke;
border-color: whitesmoke;
color: @gray-focus;
border-color: @gray-focus;
}
a {

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

@ -3,10 +3,6 @@
.vbox {
margin-bottom: 2em;
.vbox-section {
// border: 2px solid #444;
}
.vbox-hdr {
margin-bottom: 1em;
height: 2em;
@ -35,7 +31,7 @@
.vbox-btn {
width: 100%;
margin: 0;
background-color: @gray;
background-color: @gray-box;
border-width: 0;
height: 3em;

2
client/index.js
View File

@ -1,4 +1,4 @@
require('./assets/styles/styles.css');
require('./assets/styles/styles.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');

31
client/src/components/anims/blast.jsx
View File

@ -42,23 +42,18 @@ class Blast extends Component {
transform-box='fill-box'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<defs>
<filter id="blastFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
{times(50, () => (
<g>
<rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
<rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
</g>
))}
</g>
{times(50, () => (
<g>
<rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="2" height="2" />
<rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="1" height="1" />
</g>
))}
{times(50, () => (
<g>
<rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="3" height="3" />
<rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="2" height="2" />
</g>
))}
</svg>
);
}
@ -76,7 +71,7 @@ class Blast extends Component {
this.animations.push(anime({
targets: ['#blast g'],
transform: () => `
translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
translate(${anime.random(-150, 150)} ${anime.random(-150, 150)})
`,
style: { rotate: anime.random(-180, 180) },
easing: 'easeOutCubic',

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

@ -184,13 +184,15 @@ function Vbox(args) {
const selected = vboxSelected[0] === group && vboxSelected[1] === index;
// state not yet set in double click handler
function onDblClick(e) {
sendVboxAccept(group, index);
e.stopPropagation();
}
function onClick(e) {
e.stopPropagation();
// double clicked
if (selected) {
return vboxBuySelected();
}
if (selected) return clearVboxSelected();
return setVboxSelected([group, index]);
}
@ -201,7 +203,8 @@ function Vbox(args) {
<button
class={classes}
onMouseOver={e => vboxHover(e, v)}
onClick={onClick}>
onClick={onClick}
onDblClick={onDblClick} >
{shapes[v]()}
</button>
);
@ -211,6 +214,7 @@ function Vbox(args) {
<button
class={classes}
onClick={onClick}
onDblClick={onDblClick}
onMouseOver={e => vboxHover(e, v)}>
{v}
</button>
@ -361,7 +365,7 @@ function Vbox(args) {
return (
<div class='vbox-section'
onClick={inventoryClick}
style={vboxSelecting ? { cursor: 'pointer' } : null}
style={vboxSelecting || itemUnequip ? { cursor: 'pointer' } : null}
onMouseOver={e => hoverInfo(e, 'inventory')}>
<div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>