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

moved particles into cryp box, activate on skill

Browse Source
This commit is contained in:
Mashy 2019-04-02 16:17:53 +10:00
parent d867a75254
commit d7f66a99f0
8 changed files with 13 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
html-client/cryps.css Executable file → Normal file
View File

@ -218,6 +218,11 @@ button.left:hover, button.left:focus {
margin-top: -2.5em;
}
.cryp-box .particle {
position: fixed;
z-index: -10;
}
.cryp-box figure {
margin: 0;
flex: 0 1 50%;

20
html-client/src/components/cryp.list.container.js
View File

@ -1,20 +0,0 @@
const { connect } = require('preact-redux');
const CrypList = require('./cryp.list.component');
const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const { ws, cryps, selectedCryps } = state;
return { cryps, selectedCryps };
},
function receiveDispatch(dispatch) {
function setSelectedCryps(crypIds) {
dispatch(actions.setSelectedCryps(crypIds));
}
return { setSelectedCryps };
}
);
module.exports = addState(CrypList);

1
html-client/src/components/game.component.jsx
View File

@ -103,6 +103,7 @@ function GamePanel(props) {
key={cryp.id}
style={ activeSkill ? { cursor: 'pointer' } : {}}
className="cryp-box" >
<div id={`particles-${cryp.id}`} className="particle"> </div>
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >

51
html-client/src/components/game.container.js
View File

@ -1,51 +0,0 @@
const { connect } = require('preact-redux');
const actions = require('../actions');
const Game = require('./game.component');
const addState = connect(
function receiveState(state) {
const { ws, game, account, activeSkill, activeIncoming } = state;
function selectSkillTarget(targetCrypId) {
if (activeSkill) {
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
}
return false;
}
// intercept self casting skills
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
}
function selectIncomingTarget(crypId) {
if (activeIncoming) {
return ws.sendGameTarget(game.id, crypId, activeIncoming);
}
return false;
}
return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
},
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
}
function setActiveIncoming(skillId) {
dispatch(actions.setActiveIncoming(skillId));
}
function quit() {
dispatch(actions.setGame(null));
}
return { setActiveSkill, setActiveIncoming, quit };
}
);
module.exports = addState(Game);

6
html-client/src/components/game.container.jsx
View File

@ -1,8 +1,13 @@
import 'particles.js/particles';
const { connect } = require('preact-redux');
const actions = require('../actions');
const Game = require('./game.component');
const config = require('./particles.config');
const particlesJS = window.particlesJS;
const addState = connect(
function receiveState(state) {
@ -33,6 +38,7 @@ const addState = connect(
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
particlesJS(`particles-${crypId}`, config);
}
function setActiveIncoming(skillId) {

2
html-client/src/components/header.component.jsx
View File

@ -1,7 +1,6 @@
// eslint-disable-next-line
const preact = require('preact');
const LoginContainer = require('./login.container');
const ParticleContainer = require('./particles.container');
function renderHeader() {
return (
@ -10,7 +9,6 @@ function renderHeader() {
cryps.gg
</h1>
<LoginContainer />
<ParticleContainer />
</header>
);
}

24
html-client/src/components/particles.config.js
View File

@ -1,6 +1,6 @@
const config = {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
number: { value: 300, density: { enable: true, value_area: 800 } },
color: { value: '#ffffff' },
shape: {
type: 'circle',
@ -36,28 +36,6 @@ const config = {
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'repulse' },
onclick: { enable: true, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
};
module.exports = config;

19
html-client/src/components/particles.container.jsx
View File

@ -1,19 +0,0 @@
import 'particles.js/particles';
const preact = require('preact');
const config = require('./particles.config');
const particlesJS = window.particlesJS;
class ParticleContainer extends preact.Component {
componentDidMount() {
particlesJS('particles-js', config);
}
render() {
return (
<div id="particles-js"> </div>
);
}
}
module.exports = ParticleContainer;