instance mobile stuff and no sword slay
This commit is contained in:
ntr
@@ -9,6 +9,6 @@ require('./assets/styles/vbox.less');
|
||||
require('./assets/styles/game.less');
|
||||
require('./assets/styles/player.less');
|
||||
require('./assets/styles/styles.mobile.css');
|
||||
require('./assets/styles/instance.mobile.css');
|
||||
require('./assets/styles/instance.mobile.less');
|
||||
|
||||
require('./src/animations.test.jsx');
|
||||
|
||||
@@ -44,7 +44,10 @@ aside {
|
||||
button {
|
||||
width: 100%;
|
||||
font-size: 150%;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.ready:enabled {
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
@import 'colours.less';
|
||||
|
||||
// tablet / ipad
|
||||
@media (max-width: 1100px) {
|
||||
.instance {
|
||||
grid-template-columns: 1fr2;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"vbox"
|
||||
"constructs";
|
||||
|
||||
.info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.instance {
|
||||
font-size: 8pt;
|
||||
@@ -32,6 +47,10 @@
|
||||
&:not(.visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vbox-vbox {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-arrow {
|
||||
|
||||
@@ -124,6 +124,7 @@ button, input {
|
||||
font-size: 100%;
|
||||
flex: 1;
|
||||
border-radius: 0.5em;
|
||||
line-height: 2em;
|
||||
|
||||
/*the transitions */
|
||||
transition-property: border-color, color, background;
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
margin: 0;
|
||||
background-color: @gray-box;
|
||||
height: 3em;
|
||||
line-height: 1em;
|
||||
border-width: 0;
|
||||
|
||||
:active, :hover, :focus {
|
||||
|
||||
@@ -21,20 +21,14 @@ function projectile(x, y, radius, colour) {
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius}
|
||||
fill="url(#grad1)"
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
fill={colour}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function sword(colour) {
|
||||
return (
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
|
||||
<path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<polygon points='150,150 75,75, 150,300, 225,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,18 +48,11 @@ class Slay extends Component {
|
||||
version="1.1"
|
||||
id="slay"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 300 400">
|
||||
<defs>
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
|
||||
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<filter id="explosion">
|
||||
viewBox="0 0 300 300">
|
||||
<filter id="slayFilter">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
|
||||
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
||||
|
||||
</filter>
|
||||
{sword(this.colour)}
|
||||
{this.charges}
|
||||
@@ -94,13 +81,14 @@ class Slay extends Component {
|
||||
translateY: -1 * (window.screen.height) * 0.35,
|
||||
translateX: 0,
|
||||
});
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 100,
|
||||
|
||||
anime.set('#slayFilter feDisplacementMap', {
|
||||
scale: 0,
|
||||
});
|
||||
|
||||
anime.set('#sword', {
|
||||
fill: this.colour,
|
||||
stroke: this.colour,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
this.animations.push(anime({
|
||||
@@ -119,10 +107,11 @@ class Slay extends Component {
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
}));
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 10000,
|
||||
loop: false,
|
||||
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
|
||||
baseFrequency: 100,
|
||||
scale: 100,
|
||||
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
@@ -130,8 +119,7 @@ class Slay extends Component {
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '#sword',
|
||||
fill: '#1FF01F',
|
||||
stroke: '#1FF01F',
|
||||
opacity: 0,
|
||||
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
|
||||
}));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user