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

tripping with triangles

Browse Source
This commit is contained in:
Mashy 2019-06-11 17:52:33 +10:00
parent f8c1019411
commit 09868b42d5
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/assets/styles/game.css
View File

@ -30,7 +30,7 @@
.opponent .combat-text { .opponent .combat-text {
left: 40%; left: 40%;
top: 75%; top: 65%;
} }
.opponent .game-construct { .opponent .game-construct {
@ -204,8 +204,8 @@
font-size: 2em; font-size: 2em;
font-family: 'Jura'; font-family: 'Jura';
position: absolute; position: absolute;
top: 50%; top: 40%;
left: 50%; left: 40%;
} }
.game-construct.active-skill { .game-construct.active-skill {

4
client/src/components/game.construct.jsx
View File

@ -8,6 +8,8 @@ const { ConstructAvatar } = require('./construct');
const { animationDivs } = require('../animations'); const { animationDivs } = require('../animations');
const shapes = require('./shapes'); const shapes = require('./shapes');
const TrippyTriangle = require('./svgs/trippy.triangle');
const SkillBtn = require('./skill.btn'); const SkillBtn = require('./skill.btn');
const addState = connect( const addState = connect(
@ -77,7 +79,7 @@ function GameConstruct(props) {
const combatTextClass = `combat-text ${combatClass}`; const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText const combatTextEl = combatText
? <div class={combatTextClass}>{combatText}</div> ? <div class={combatTextClass}>{combatText}</div>
: null; : <div class={combatTextClass}> <TrippyTriangle /></div>;
const effects = construct.effects.length const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>) ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)

22
client/src/components/svgs/trippy.triangle.jsx
View File

@ -13,14 +13,16 @@ class TrippyTriangle extends Component {
return ( return (
<svg <svg
style={ { transform: `rotate3d(0, 1, 0, ${pct * delta / 10}deg)` }} style={{
transform: `rotate3d(0, 1, 0, ${delta * 0.2}rad) translate(0px, ${-7.5 * delta}px)`,
}}
class='skill-animation' class='skill-animation'
version="1.1" version="1.1"
id="Layer_1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"> viewBox="0 0 300 300">
<g> <g>
<polygon class='blue' points={`10,190 100,${pct} 190,190`}/> <polygon class='blue' points={`0,190 100,${pct} 190,190`}/>
<polygon class='blue' points={`40,170 100,${pct} 160,170`}/> <polygon class='blue' points={`40,170 100,${pct} 160,170`}/>
<polygon class='blue' points={`70,150 100,${pct} 130,150`}/> <polygon class='blue' points={`70,150 100,${pct} 130,150`}/>
</g> </g>
@ -29,13 +31,21 @@ class TrippyTriangle extends Component {
} }
progress() { progress() {
const delta = this.state.delta + 0.1;
const pct = 50 - 50 * Math.sin(delta);
this.setState({ pct, delta });
requestAnimationFrame(this.progress); requestAnimationFrame(this.progress);
this.now = window.performance.now();
const elapsed = this.now - this.then;
if (elapsed > this.fpsInterval) {
this.then = this.now - (elapsed % this.fpsInterval);
const delta = this.state.delta + Math.PI * 0.04;
const pct = 75 + 15 * Math.sin(delta);
this.setState({ pct, delta });
}
} }
componentDidMount() { componentDidMount() {
const fps = 30;
this.fpsInterval = 1000 / fps;
this.then = window.performance.now();
requestAnimationFrame(this.progress); requestAnimationFrame(this.progress);
} }