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/styles.mobile.css');
require('./assets/styles/instance.less'); require('./assets/styles/instance.less');
require('./assets/styles/instance.mobile.css'); require('./assets/styles/instance.mobile.css');

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

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

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

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

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

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

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

@ -3,10 +3,6 @@
.vbox { .vbox {
margin-bottom: 2em; margin-bottom: 2em;
.vbox-section {
// border: 2px solid #444;
}
.vbox-hdr { .vbox-hdr {
margin-bottom: 1em; margin-bottom: 1em;
height: 2em; height: 2em;
@ -35,7 +31,7 @@
.vbox-btn { .vbox-btn {
width: 100%; width: 100%;
margin: 0; margin: 0;
background-color: @gray; background-color: @gray-box;
border-width: 0; border-width: 0;
height: 3em; 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/styles.mobile.css');
require('./assets/styles/instance.less'); require('./assets/styles/instance.less');
require('./assets/styles/vbox.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' transform-box='fill-box'
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<defs> {times(50, () => (
<filter id="blastFilter"> <g>
<feGaussianBlur in="SourceGraphic" stdDeviation="3" /> <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="2" height="2" />
<feMerge> <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="1" height="1" />
<feMergeNode /> </g>
<feMergeNode in="SourceGraphic" /> ))}
</feMerge> {times(50, () => (
</filter> <g>
</defs> <rect stroke-width="0" fill={COLOURS.BLUE} x="150" y="200" width="3" height="3" />
<g> <rect stroke-width="0" fill={COLOURS.WHITE} x="150" y="200" width="2" height="2" />
{times(50, () => ( </g>
<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>
</svg> </svg>
); );
} }
@ -76,7 +71,7 @@ class Blast extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#blast g'], targets: ['#blast g'],
transform: () => ` 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) }, style: { rotate: anime.random(-180, 180) },
easing: 'easeOutCubic', 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; 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) { function onClick(e) {
e.stopPropagation(); e.stopPropagation();
// double clicked if (selected) return clearVboxSelected();
if (selected) {
return vboxBuySelected();
}
return setVboxSelected([group, index]); return setVboxSelected([group, index]);
} }
@ -201,7 +203,8 @@ function Vbox(args) {
<button <button
class={classes} class={classes}
onMouseOver={e => vboxHover(e, v)} onMouseOver={e => vboxHover(e, v)}
onClick={onClick}> onClick={onClick}
onDblClick={onDblClick} >
{shapes[v]()} {shapes[v]()}
</button> </button>
); );
@ -211,6 +214,7 @@ function Vbox(args) {
<button <button
class={classes} class={classes}
onClick={onClick} onClick={onClick}
onDblClick={onDblClick}
onMouseOver={e => vboxHover(e, v)}> onMouseOver={e => vboxHover(e, v)}>
{v} {v}
</button> </button>
@ -361,7 +365,7 @@ function Vbox(args) {
return ( return (
<div class='vbox-section' <div class='vbox-section'
onClick={inventoryClick} onClick={inventoryClick}
style={vboxSelecting ? { cursor: 'pointer' } : null} style={vboxSelecting || itemUnequip ? { cursor: 'pointer' } : null}
onMouseOver={e => hoverInfo(e, 'inventory')}> onMouseOver={e => hoverInfo(e, 'inventory')}>
<div class="vbox-hdr"> <div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>