diff --git a/WORKLOG.md b/WORKLOG.md index 6afe89fa..49209c65 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -34,16 +34,24 @@ account balance -* incoming txs table / payments +* accounting id - ref + reference / hash etc currency - amount + credit + debit + +* conversions + id + tx ref accounting conversion rate converted value -* mtx table +* txs +* mtx table + id + item_name * define $cost for ingame bits * pay for rerolls diff --git a/client/animations.html b/client/animations.html new file mode 100644 index 00000000..92e3f98e --- /dev/null +++ b/client/animations.html @@ -0,0 +1,20 @@ + + + + mnml.gg + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/animations.test.js b/client/animations.test.js new file mode 100644 index 00000000..670eab45 --- /dev/null +++ b/client/animations.test.js @@ -0,0 +1,9 @@ +require('./assets/styles/styles.css'); +require('./assets/styles/styles.mobile.css'); +require('./assets/styles/instance.css'); +require('./assets/styles/instance.mobile.css'); +require('./assets/styles/game.css'); +require('./assets/styles/anims.css'); + +// kick it off +require('./src/animations.test'); diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 52d7b6e4..6ec24393 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -168,10 +168,14 @@ a { svg { fill: none; stroke: whitesmoke; - stroke-width: 0; + stroke-width: 5px; height: 2em; } +.skill-animation { + height: 5em; +} + .team .avatar { object-fit: contain; max-width: 100%; diff --git a/client/package.json b/client/package.json index 80d32b83..cfb5ac49 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,7 @@ "main": "index.js", "scripts": { "start": "parcel index.html --host 0.0.0.0 --port 40080 --no-source-maps", + "anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps", "build": "rm -rf dist && parcel build index.html && cp -r assets/molecules/ dist/", "scss": "node-sass --watch assets/scss -o assets/styles", "lint": "eslint --fix --ext .jsx src/", diff --git a/client/src/animations.test.js b/client/src/animations.test.js new file mode 100644 index 00000000..92a19996 --- /dev/null +++ b/client/src/animations.test.js @@ -0,0 +1,12 @@ +const preact = require('preact'); + +const TrippyTriangle = require('./components/svgs/trippy.triangle'); + +const Animations = () => ( +
+ +
+); + +// eslint-disable-next-line +preact.render(, document.body); diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx index 8578f9e1..194cb4a3 100644 --- a/client/src/components/svgs/trippy.triangle.jsx +++ b/client/src/components/svgs/trippy.triangle.jsx @@ -1,36 +1,47 @@ const preact = require('preact'); +const { Component } = require('preact'); + +class TrippyTriangle extends Component { + constructor() { + super(); + this.state = { pct: 0, delta: 0 }; + this.progress = this.progress.bind(this); + } + + render() { + const { pct, delta } = this.state; -module.exports = function triangle(colours) { - if (colours.length === 1) { return ( - - - - + + + + + + ); } - return ( - - - - - - - + progress() { + const delta = this.state.delta + 0.1; + const pct = 50 - 50 * Math.sin(delta); + this.setState({ pct, delta }); + requestAnimationFrame(this.progress); + } - - - - - + componentDidMount() { + requestAnimationFrame(this.progress); + } - - - - - - - ); -}; + componentWillUnmount() { + // clearAnimation(this.props.id); + } +} + +module.exports = TrippyTriangle;