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

Merging UI panel changes

Browse Source
This commit is contained in:
Mashy 2018-09-26 11:14:32 +10:00
commit 6ffc98e472
3 changed files with 125 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/components/cryp.battle.jsx Normal file
View File

@ -0,0 +1,100 @@
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;

28
client/src/components/cryps.panel.jsx Executable file → Normal file
View File

@ -2,7 +2,6 @@ const preact = require('preact');
function CrypPanel({ cryps, sendCombatPve }) { function CrypPanel({ cryps, sendCombatPve }) {
if (!cryps) return <div>not ready</div>; if (!cryps) return <div>not ready</div>;
const crypPanels = cryps.map(cryp => ( const crypPanels = cryps.map(cryp => (
<div key={cryp.id} className="tile is-ancestor has-text-centered has-background-grey is-dark is-10"> <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-6">
@ -43,11 +42,28 @@ function CrypPanel({ cryps, sendCombatPve }) {
</div> </div>
<div className="tile is-parent is-6"> <div className="tile is-parent is-6">
<section className="tile is-child notification has-background-grey is-dark"> <section className="tile is-child notification has-background-grey is-dark">
<p className="title">Stat Area</p> <p className="title">Cryp Stats</p>
<p>{JSON.stringify(cryp.def)}</p> <p className="subtitle">Level - {cryp.lvl}</p>
<p>{JSON.stringify(cryp.dmg)}</p> <div className="columns">
<p>{JSON.stringify(cryp.hp)}</p> <div className="column">
<p>{JSON.stringify(cryp.stam)}</p> <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 <button
className="button is-success" className="button is-success"
type="submit" type="submit"

3
client/src/main.jsx Normal file → Executable file
View File

@ -11,6 +11,7 @@ const createSocket = require('./socket');
const CrypsContainer = require('./components/cryps.container'); const CrypsContainer = require('./components/cryps.container');
const LoginContainer = require('./components/login.container'); const LoginContainer = require('./components/login.container');
const CrypBattle = require('./components/cryp.battle');
// const Navbar = require('./components/navbar'); // const Navbar = require('./components/navbar');
// Redux Store // Redux Store
@ -39,6 +40,8 @@ const Cryps = () => (
<LoginContainer /> <LoginContainer />
<div id="fizzytext" /> <div id="fizzytext" />
<CrypsContainer /> <CrypsContainer />
<br />
<CrypBattle />
</section> </section>
); );