Cryp battle UI panel
This commit is contained in:
Mashy
parent
daf18c26b0
commit
5836e93c3c
100
client/src/components/cryp.battle.jsx
Normal file
100
client/src/components/cryp.battle.jsx
Normal 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;
|
||||||
@ -47,7 +47,7 @@ function CrypPanel({ cryp, sendCombatPve }) {
|
|||||||
<p className="subtitle">Level - {cryp.lvl}</p>
|
<p className="subtitle">Level - {cryp.lvl}</p>
|
||||||
<div className="columns">
|
<div className="columns">
|
||||||
<div className="column">
|
<div className="column">
|
||||||
<ul> Hit Points <i className="fas fa-plus" /> {cryp.hp} </ul>
|
<ul> Hit Points <i className="fas fa-plus" /> {cryp.hp.value} </ul>
|
||||||
<ul> Attack Damage <i className="fas fa-bomb" /> {cryp.dmg.value} </ul>
|
<ul> Attack Damage <i className="fas fa-bomb" /> {cryp.dmg.value} </ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="column">
|
<div className="column">
|
||||||
|
|||||||
@ -12,6 +12,7 @@ const createSocket = require('./socket');
|
|||||||
const CrypContainer = require('./components/cryp.container');
|
const CrypContainer = require('./components/cryp.container');
|
||||||
const LoginContainer = require('./components/login.container');
|
const LoginContainer = require('./components/login.container');
|
||||||
const Navbar = require('./components/navbar');
|
const Navbar = require('./components/navbar');
|
||||||
|
const CrypBattle = require('./components/cryp.battle');
|
||||||
|
|
||||||
// Redux Store
|
// Redux Store
|
||||||
const store = createStore(
|
const store = createStore(
|
||||||
@ -40,6 +41,8 @@ const Cryps = () => (
|
|||||||
<LoginContainer />
|
<LoginContainer />
|
||||||
<div id="fizzytext" />
|
<div id="fizzytext" />
|
||||||
<CrypContainer />
|
<CrypContainer />
|
||||||
|
<br />
|
||||||
|
<CrypBattle />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user