Merge branch 'master' of ssh://cryps.gg:40022/~/cryps into battleui
This commit is contained in:
commit
0d439b3ef2
BIN
client/assets/alakazam-f.png
Normal file
BIN
client/assets/alakazam-f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
client/assets/aztec.jpg
Normal file
BIN
client/assets/aztec.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
client/assets/magmar.png
Normal file
BIN
client/assets/magmar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@ -1,20 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<section class="hero is-info is-large">
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
|
|
||||||
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
|
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
</body>
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<!--
|
|
||||||
<html>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
-->
|
|
||||||
@ -4,7 +4,7 @@
|
|||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "parcel index.html --port 40080",
|
"start": "parcel index.html --port 40080 --no-hmr",
|
||||||
"build": "rm -rf dist && parcel build index.html",
|
"build": "rm -rf dist && parcel build index.html",
|
||||||
"lint": "eslint --fix --ext .jsx src/",
|
"lint": "eslint --fix --ext .jsx src/",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
@ -12,6 +12,7 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@orange-games/phaser-input": "^2.0.5",
|
||||||
"borc": "^2.0.3",
|
"borc": "^2.0.3",
|
||||||
"bulma-toast": "^1.2.0",
|
"bulma-toast": "^1.2.0",
|
||||||
"docco": "^0.7.0",
|
"docco": "^0.7.0",
|
||||||
|
|||||||
@ -1,18 +1,12 @@
|
|||||||
const preact = require('preact');
|
|
||||||
const jdenticon = require('jdenticon');
|
|
||||||
|
|
||||||
const { Provider } = require('preact-redux');
|
|
||||||
const { createStore, combineReducers } = require('redux');
|
const { createStore, combineReducers } = require('redux');
|
||||||
|
|
||||||
|
const renderCryps = require('./scenes/cryps');
|
||||||
|
|
||||||
const reducers = require('./reducers');
|
const reducers = require('./reducers');
|
||||||
const actions = require('./actions');
|
const actions = require('./actions');
|
||||||
const setupKeys = require('./keyboard');
|
const setupKeys = require('./keyboard');
|
||||||
// const fizzyText = require('../lib/fizzy-text');
|
|
||||||
const createSocket = require('./socket');
|
const createSocket = require('./socket');
|
||||||
|
|
||||||
const Header = require('./components/header.component');
|
|
||||||
const Body = require('./components/body.component');
|
|
||||||
|
|
||||||
// Redux Store
|
// Redux Store
|
||||||
const store = createStore(
|
const store = createStore(
|
||||||
combineReducers({
|
combineReducers({
|
||||||
@ -34,26 +28,4 @@ const ws = createSocket(store);
|
|||||||
store.dispatch(actions.setWs(ws));
|
store.dispatch(actions.setWs(ws));
|
||||||
ws.connect();
|
ws.connect();
|
||||||
|
|
||||||
// tells jdenticon to look for new svgs and render them
|
renderCryps(store);
|
||||||
// so we don't have to setInnerHtml or manually call update
|
|
||||||
jdenticon.config = {
|
|
||||||
replaceMode: 'observe',
|
|
||||||
};
|
|
||||||
|
|
||||||
const Cryps = () => (
|
|
||||||
<section>
|
|
||||||
<Header />
|
|
||||||
<Body />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Main = () => (
|
|
||||||
<Provider store={store}>
|
|
||||||
<Cryps />
|
|
||||||
</Provider>
|
|
||||||
);
|
|
||||||
|
|
||||||
// eslint-disable-next-line
|
|
||||||
preact.render(<Main />, document.body);
|
|
||||||
|
|
||||||
// fizzyText('cryps.gg');
|
|
||||||
|
|||||||
42
client/src/scenes/cryp.list.js
Normal file
42
client/src/scenes/cryp.list.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
const crypRow = require('./cryp.row');
|
||||||
|
|
||||||
|
class CrypList extends Phaser.Scene {
|
||||||
|
constructor() {
|
||||||
|
super({ key: 'CrypList', active: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.registry.events.on('changedata', this.updateData, this);
|
||||||
|
|
||||||
|
const cryps = this.registry.get('cryps');
|
||||||
|
this.graphics = this.add.graphics();
|
||||||
|
this.graphics.originX = 0;
|
||||||
|
this.graphics.originY = 0;
|
||||||
|
this.renderCryps(cryps);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData(parent, key, data) {
|
||||||
|
if (key === 'cryps') {
|
||||||
|
return this.scene.restart();
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCryps(cryps) {
|
||||||
|
if (!cryps) return true;
|
||||||
|
|
||||||
|
const crypRows = cryps.forEach((cryp, i) => {
|
||||||
|
crypRow(this, cryp, i);
|
||||||
|
});
|
||||||
|
|
||||||
|
// seal the boxes in and stop rerendering them
|
||||||
|
this.graphics.generateTexture();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = CrypList;
|
||||||
26
client/src/scenes/cryp.row.js
Normal file
26
client/src/scenes/cryp.row.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
const ROW_WIDTH = 400;
|
||||||
|
const ROW_HEIGHT = 200;
|
||||||
|
const ROW_FILL = 0x888888;
|
||||||
|
|
||||||
|
const TOP_MARGIN = 50;
|
||||||
|
const ROW_MARGIN = 50;
|
||||||
|
const TEXT_MARGIN = 24;
|
||||||
|
|
||||||
|
const xPos = i => 0;
|
||||||
|
const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
|
||||||
|
|
||||||
|
function crypRow(list, cryp, i) {
|
||||||
|
const X_ORIGIN = xPos(i);
|
||||||
|
const Y_ORIGIN = yPos(i);
|
||||||
|
|
||||||
|
list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
|
||||||
|
list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
|
||||||
|
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = crypRow;
|
||||||
38
client/src/scenes/cryps.js
Normal file
38
client/src/scenes/cryps.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
const CrypList = require('./cryp.list');
|
||||||
|
const Menu = require('./menu');
|
||||||
|
// const Passives = require('./passives');
|
||||||
|
|
||||||
|
function renderCryps(store) {
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
// parent: 'cryps',
|
||||||
|
backgroundColor: '#181818',
|
||||||
|
resolution: window.devicePixelRatio,
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
physics: {
|
||||||
|
default: 'arcade',
|
||||||
|
arcade: {
|
||||||
|
debug: false,
|
||||||
|
gravity: { y: 0 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scene: [
|
||||||
|
Menu,
|
||||||
|
CrypList,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
|
||||||
|
store.subscribe(() => {
|
||||||
|
const state = store.getState();
|
||||||
|
game.registry.set('cryps', state.cryps);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = renderCryps;
|
||||||
13
client/src/scenes/menu.js
Normal file
13
client/src/scenes/menu.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
|
||||||
|
class Menu extends Phaser.Scene {
|
||||||
|
constructor(props) {
|
||||||
|
super({ key: 'Menu', active: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.add.text(0, 0, 'cryps.gg', { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Menu;
|
||||||
126
client/src/scenes/passives.js
Normal file
126
client/src/scenes/passives.js
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
const Phaser = require('phaser');
|
||||||
|
const PassiveNode = require('./passive.node');
|
||||||
|
const passiveDataNode = require('./passive.data.node');
|
||||||
|
const passiveDataEdge = require('./passive.data.edge');
|
||||||
|
|
||||||
|
// Passive tree generator - proof of concept visuals need work
|
||||||
|
// Mouse click hold to move, Q + E to zoom in and out
|
||||||
|
// Press 'A' to reset allocated passive nodes
|
||||||
|
|
||||||
|
class Passives extends Phaser.Scene {
|
||||||
|
preload() {
|
||||||
|
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
|
||||||
|
this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.background = this.add.image(0, 0, 'background');
|
||||||
|
this.background.setScale(5);
|
||||||
|
this.background.setInteractive();
|
||||||
|
this.graphics = this.add.graphics();
|
||||||
|
this.nodeText = this.add.text(10000, 10000, 'grep', {
|
||||||
|
fontSize: '32px',
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
color: '#ffffff',
|
||||||
|
backgroundColor: '#000000',
|
||||||
|
}).setPadding(32);
|
||||||
|
|
||||||
|
this.passiveNodeData = passiveDataNode;
|
||||||
|
this.passiveEdgeData = passiveDataEdge;
|
||||||
|
this.addPassiveNodes();
|
||||||
|
this.drawPassiveEdges();
|
||||||
|
this.addCanmeraControl();
|
||||||
|
}
|
||||||
|
|
||||||
|
addPassiveNodes() {
|
||||||
|
this.passiveNodes = [];
|
||||||
|
this.passiveNodeData.forEach((n) => {
|
||||||
|
this.passiveNodes[n.id] = this.add.existing(
|
||||||
|
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
|
||||||
|
).setInteractive();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerover', (pointer, gameObjects) => {
|
||||||
|
if (gameObjects[0] instanceof PassiveNode) {
|
||||||
|
if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
|
||||||
|
this.nodeText.x = pointer.x + this.cameras.main.scrollX;
|
||||||
|
this.nodeText.y = pointer.y + this.cameras.main.scrollY;
|
||||||
|
this.nodeText.text = gameObjects[0].text;
|
||||||
|
} else {
|
||||||
|
this.nodeText.text = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.input.on('pointerout', (pointer, gameObjects) => {
|
||||||
|
if (gameObjects[0] instanceof PassiveNode) {
|
||||||
|
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.input.on('pointerup', (pointer, gameObjects) => {
|
||||||
|
if (Math.abs(pointer.upX - pointer.downX) < 5
|
||||||
|
&& Math.abs(pointer.upY - pointer.downY) < 5) {
|
||||||
|
// Check cursor hasn't significantly moved during point allocation
|
||||||
|
// If panning and mouse release is on node it won't allocate
|
||||||
|
if (gameObjects[0] instanceof PassiveNode) {
|
||||||
|
gameObjects[0].allocate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.keyboard.on('keydown_A', () => {
|
||||||
|
this.updatePassives(); // Will update nodes from state
|
||||||
|
}, 0, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawPassiveEdges() {
|
||||||
|
this.graphics.clear();
|
||||||
|
this.passiveEdgeData.forEach((e) => {
|
||||||
|
const drawEdge = this.passiveNodeData.filter(n => (
|
||||||
|
e[0] === n.id || e[1] === n.id
|
||||||
|
));
|
||||||
|
if (drawEdge[0].alloc && drawEdge[1].alloc) {
|
||||||
|
this.graphics.lineStyle(10, 0xfff00f, 0.2);
|
||||||
|
} else {
|
||||||
|
this.graphics.lineStyle(2, 0xffffff, 0.2);
|
||||||
|
}
|
||||||
|
// console.log(drawEdge);
|
||||||
|
this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addCanmeraControl() {
|
||||||
|
this.input.on('pointermove', (pointer) => {
|
||||||
|
if (this.pan) {
|
||||||
|
const points = pointer.getInterpolatedPosition(2);
|
||||||
|
this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
|
||||||
|
this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
|
||||||
|
camera: this.cameras.main,
|
||||||
|
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||||
|
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||||
|
acceleration: 0.005,
|
||||||
|
drag: 0.0005,
|
||||||
|
maxSpeed: 0.001,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePassives() {
|
||||||
|
this.passiveNodeData.forEach((n) => {
|
||||||
|
this.passiveNodes[n.id].alloc = false;
|
||||||
|
this.passiveNodes[n.id].updateNode();
|
||||||
|
});
|
||||||
|
// This function will be modified to just update from state
|
||||||
|
// State will update n.alloc instead of false
|
||||||
|
}
|
||||||
|
|
||||||
|
camPan(bool) {
|
||||||
|
this.pan = bool;
|
||||||
|
}
|
||||||
|
|
||||||
|
update(delta) {
|
||||||
|
this.controls.update(delta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Passives;
|
||||||
@ -28,7 +28,7 @@ function createSocket(store) {
|
|||||||
|
|
||||||
// Connection opened
|
// Connection opened
|
||||||
ws.addEventListener('open', (event) => {
|
ws.addEventListener('open', (event) => {
|
||||||
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
@ -61,7 +61,7 @@ function createSocket(store) {
|
|||||||
|
|
||||||
account = login;
|
account = login;
|
||||||
store.dispatch(actions.setAccount(login));
|
store.dispatch(actions.setAccount(login));
|
||||||
// send({ method: 'cryp_spawn', params: { name: 'muji' } });
|
// send({ method: 'cryp_spawn', params: { name: 'bees' } });
|
||||||
send({ method: 'account_cryps', params: {} });
|
send({ method: 'account_cryps', params: {} });
|
||||||
send({ method: 'item_list', params: {} });
|
send({ method: 'item_list', params: {} });
|
||||||
console.log(account);
|
console.log(account);
|
||||||
|
|||||||
@ -114,7 +114,8 @@ impl Effect {
|
|||||||
Effect::Shield => match skill.cast_type() {
|
Effect::Shield => match skill.cast_type() {
|
||||||
Damage::Magic => true,
|
Damage::Magic => true,
|
||||||
Damage::Physical => false,
|
Damage::Physical => false,
|
||||||
}
|
},
|
||||||
|
Effect::Banish => true,
|
||||||
_ => false,
|
_ => false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user