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

wip

Browse Source
This commit is contained in:
ntr 2019-06-11 13:56:24 +10:00
parent 440376e5c3
commit f8c1019411
7 changed files with 97 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
WORKLOG.md
View File

@ -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

20
client/animations.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>mnml.gg</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name="description" content="mnml pvp tbs">
<meta name="author" content="ntr@smokestack.io">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/skeleton.css">
</head>
</head>
<body>
</body>
<script src="./animations.test.js"></script>
</html>

9
client/animations.test.js Normal file
View File

@ -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');

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

@ -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%;

1
client/package.json
View File

@ -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/",

12
client/src/animations.test.js Normal file
View File

@ -0,0 +1,12 @@
const preact = require('preact');
const TrippyTriangle = require('./components/svgs/trippy.triangle');
const Animations = () => (
<main>
<TrippyTriangle />
</main>
);
// eslint-disable-next-line
preact.render(<Animations />, document.body);

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

@ -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 (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" >
<polygon class={colours[0]} points="10,190 100,10 190,190"/>
<polygon class={colours[0]} points="40,160 100,10 190,190"/>
<polygon class={colours[0]} points="70,130 100,10 190,190"/>
<svg
style={ { transform: `rotate3d(0, 1, 0, ${pct * delta / 10}deg)` }}
class='skill-animation'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<g>
<polygon class='blue' points={`10,190 100,${pct} 190,190`}/>
<polygon class='blue' points={`40,170 100,${pct} 160,170`}/>
<polygon class='blue' points={`70,150 100,${pct} 130,150`}/>
</g>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
<clipPath id="secondColour">
<rect x="100" y="0" width="100" height="200" />
</clipPath>
progress() {
const delta = this.state.delta + 0.1;
const pct = 50 - 50 * Math.sin(delta);
this.setState({ pct, delta });
requestAnimationFrame(this.progress);
}
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
componentDidMount() {
requestAnimationFrame(this.progress);
}
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
</svg>
);
};
componentWillUnmount() {
// clearAnimation(this.props.id);
}
}
module.exports = TrippyTriangle;