cryp persistence
This commit is contained in:
ntr
@@ -0,0 +1,16 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const Battle = require('./battle');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { battle } = state;
|
||||
// function sendCombatPve(crypId) {
|
||||
// return ws.sendCombatPve(crypId);
|
||||
// }
|
||||
|
||||
return { battle };
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(Battle);
|
||||
@@ -0,0 +1,11 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function CrypPanel({ battle }) {
|
||||
return (
|
||||
<div className="">
|
||||
{JSON.stringify(battle)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = CrypPanel;
|
||||
@@ -0,0 +1,20 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
|
||||
const CrypListContainer = require('./cryp.list.container');
|
||||
const BattleContainer = require('./battle.container');
|
||||
|
||||
function renderBody() {
|
||||
return (
|
||||
<section className="columns">
|
||||
<div className="column is-3">
|
||||
<CrypListContainer />
|
||||
</div>
|
||||
<div className="column">
|
||||
<BattleContainer />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = renderBody;
|
||||
@@ -1,100 +0,0 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function CrypPanel() {
|
||||
return (
|
||||
<div className="tile is-ancestor has-text-centered">
|
||||
<div className="tile is-vertical is-parent">
|
||||
<div className="tile">
|
||||
<div className="tile is-vertical is-child is-6">
|
||||
<p className="title"> Future Animation / Fizzy Area</p>
|
||||
</div>
|
||||
<div className="tile is-vertical is-child">
|
||||
<div className="columns">
|
||||
<div className ="column has-text-right">
|
||||
<figure className="image">
|
||||
<svg width="160" height="160" data-jdenticon-value="Drake" />
|
||||
</figure>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="columns">
|
||||
<div className="column has-text-left">
|
||||
<p className="title">Drake</p>
|
||||
<p className="subtitle">Level 1</p>
|
||||
</div>
|
||||
<div className="column has-text-centered">
|
||||
<p> Flying </p>
|
||||
<p> Fire </p>
|
||||
<p> Stone </p>
|
||||
</div>
|
||||
<div className="column has-text-centered">
|
||||
<ul> <i className="fas fa-bomb" /> 5 </ul>
|
||||
<ul> <i className="fas fa-walking" /> 5 </ul>
|
||||
<ul> <i className="fas fa-shield-alt" /> 5 </ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="has-text-centered">5 / 5 HP </div>
|
||||
<progress className="progress is-success" value="5" max="5"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div className="tile">
|
||||
<div className="tile is-vertical is-child is-5">
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<div className="columns">
|
||||
<div className="column has-text-centered">
|
||||
<ul> <i className="fas fa-bomb" /> 10 </ul>
|
||||
<ul> <i className="fas fa-walking" /> 1 </ul>
|
||||
<ul> <i className="fas fa-shield-alt" /> 40 </ul>
|
||||
</div>
|
||||
<div className="column has-text-centered">
|
||||
<p> Walking </p>
|
||||
<p> Water </p>
|
||||
<p> Rock </p>
|
||||
</div>
|
||||
<div className="column has-text-right">
|
||||
<p className="title">BB</p>
|
||||
<p className="subtitle">Level 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="has-text-centered">5 / 5 HP </div>
|
||||
<progress className="progress is-success" value="5" max="5"></progress>
|
||||
</div>
|
||||
<div className ="column has-text-left is-narrow">
|
||||
<figure className="image">
|
||||
<svg width="160" height="160" data-jdenticon-value="Turtle" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-vertical">
|
||||
<div className="columns">
|
||||
<div className="column is-one-quarter">
|
||||
<span className="button is-large is-info is-fullwidth is-rounded" >Ability 1</span>
|
||||
<br />
|
||||
<span className="button is-large is-info is-fullwidth is-rounded" >Ability 3</span>
|
||||
</div>
|
||||
<div className="column is-one-quarter">
|
||||
<span className="button is-large is-info is-fullwidth is-rounded" >Ability 2</span>
|
||||
<br />
|
||||
<span className="button is-large is-info is-fullwidth is-rounded" >Ability 4</span>
|
||||
</div>
|
||||
<div className="column">
|
||||
<p className="title"> Combat Log </p>
|
||||
<p> "bamboo basher" deals 0 dmg to "drake" (0 blocked / 1 hp remaining) </p>
|
||||
<p> "bamboo basher" deals 0 dmg to "drake" (0 blocked / 1 hp remaining) </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = CrypPanel;
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const CrypsPanel = require('./cryps.panel');
|
||||
const CrypList = require('./cryp.list');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
@@ -13,4 +13,4 @@ const addState = connect(
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(CrypsPanel);
|
||||
module.exports = addState(CrypList);
|
||||
@@ -0,0 +1,23 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function CrypPanel({ cryps, sendCombatPve }) {
|
||||
if (!cryps) return <div>not ready</div>;
|
||||
const crypPanels = cryps.map(cryp => (
|
||||
<div key={cryp.id} className="tile is-parent is-vertical box">
|
||||
<div className="title">{cryp.name}</div>
|
||||
<button
|
||||
className="button is-success"
|
||||
type="submit"
|
||||
onClick={() => sendCombatPve(cryp.id)}>
|
||||
Start PVE
|
||||
</button>
|
||||
</div>
|
||||
));
|
||||
return (
|
||||
<div>
|
||||
{crypPanels}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = CrypPanel;
|
||||
@@ -0,0 +1,37 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function renderCrypPanel(cryp) {
|
||||
return (
|
||||
<div className="tile">
|
||||
<div className="tile is-vertical is-child">
|
||||
<div className="columns">
|
||||
<div className ="column has-text-right">
|
||||
<figure className="image">
|
||||
<svg width="160" height="160" data-jdenticon-value="Drake" />
|
||||
</figure>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="columns">
|
||||
<div className="column has-text-left">
|
||||
<p className="title">Drake</p>
|
||||
<p className="subtitle">Level 1</p>
|
||||
</div>
|
||||
<div className="column has-text-centered">
|
||||
<p>Flying</p>
|
||||
<p>Fire</p>
|
||||
<p>Stone</p>
|
||||
</div>
|
||||
<div className="column has-text-centered">
|
||||
<ul> <i className="fas fa-bomb" /> 5 </ul>
|
||||
<ul> <i className="fas fa-walking" /> 5 </ul>
|
||||
<ul> <i className="fas fa-shield-alt" /> 5 </ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="has-text-centered">5 / 5 HP </div>
|
||||
<progress className="progress is-success" value="5" max="5"></progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function CrypPanel({ cryps, sendCombatPve }) {
|
||||
if (!cryps) return <div>not ready</div>;
|
||||
const crypPanels = cryps.map(cryp => (
|
||||
<div key={cryp.id} className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
|
||||
<div className="tile is-6">
|
||||
<div className="tile is-parent is-vertical is-3">
|
||||
<section className="tile is-child notification is-success">
|
||||
<p>Helm Slot</p>
|
||||
</section>
|
||||
<section className="tile is-child notification is-success">
|
||||
<p>Body Armor</p>
|
||||
</section>
|
||||
<section className="tile is-child notification is-success">
|
||||
<p>Gloves</p>
|
||||
</section>
|
||||
<section className="tile is-child notification is-success">
|
||||
<p>Boots</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className="tile is-parent is-6">
|
||||
<section className="tile is-child notification is-info">
|
||||
<figure className="image">
|
||||
<svg width="160" height="160" data-jdenticon-value={cryp.name} />
|
||||
</figure>
|
||||
<p className="title">{cryp.name}</p>
|
||||
<p className="subtitle">The big boy</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className="tile is-parent is-vertical is-3">
|
||||
<section className="tile is-child notification is-dark">
|
||||
<p>Weapon</p>
|
||||
</section>
|
||||
<section className="tile is-child notification is-dark">
|
||||
<p>Jewellery</p>
|
||||
</section>
|
||||
<section className="tile is-child notification is-dark">
|
||||
<p>Artifact</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-parent is-6">
|
||||
<section className="tile is-child notification has-background-grey is-dark">
|
||||
<p className="title">Cryp Stats</p>
|
||||
<p className="subtitle">Level - {cryp.lvl}</p>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<ul> Hit Points <i className="fas fa-plus" /> {cryp.hp.value} </ul>
|
||||
<ul> Attack Damage <i className="fas fa-bomb" /> {cryp.dmg.value} </ul>
|
||||
</div>
|
||||
<div className="column">
|
||||
<ul> Stamina <i className="fas fa-walking" /> {cryp.stam.value} </ul>
|
||||
<ul> Defense <i className="fas fa-shield-alt" /> {cryp.def.value} </ul>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
Progress to next level
|
||||
<div className="columns">
|
||||
<div className="column is-10">
|
||||
<progress className="progress is-success" value={cryp.xp} max="4"></progress>
|
||||
</div>
|
||||
<div className="column has-text-left has-text-weight-bold">
|
||||
{cryp.xp} / 4 XP
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="button is-success"
|
||||
type="submit"
|
||||
onClick={() => sendCombatPve(cryp.id)}>
|
||||
Start PVE
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
// map is a function that is called on every element of an array
|
||||
// so in this ^^ case it calls Icon('Mashy') which returns some jsx
|
||||
// that gets put into the dom
|
||||
|
||||
return (
|
||||
<section>
|
||||
{crypPanels}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = CrypPanel;
|
||||
@@ -0,0 +1,19 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
|
||||
const LoginContainer = require('./login.container');
|
||||
|
||||
function renderHeader() {
|
||||
return (
|
||||
<section className="hero is-dark">
|
||||
<div className="hero-body">
|
||||
<div className="container">
|
||||
<h1 className="title">cryps.gg</h1>
|
||||
<LoginContainer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = renderHeader;
|
||||
@@ -0,0 +1,19 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
|
||||
const LoginContainer = require('./login.container');
|
||||
|
||||
function renderHeader() {
|
||||
return (
|
||||
<section className="hero is-dark">
|
||||
<div className="hero-body">
|
||||
<div className="container">
|
||||
<h1 className="title">cryps.gg</h1>
|
||||
<LoginContainer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = renderHeader;
|
||||
Reference in New Issue
Block a user