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

bulma shit

Browse Source
This commit is contained in:
ntr 2018-10-15 23:23:04 +11:00
parent eb96b59ca2
commit 1ee7996485
14 changed files with 151 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/actions.jsx
View File

@ -4,6 +4,9 @@ export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
export const SET_CRYPS = 'SET_CRYPS';
export const setCryps = (value) => ({ type: SET_CRYPS, value });
export const SET_ITEMS = 'SET_ITEMS';
export const setItems = (value) => ({ type: SET_ITEMS, value });
export const SET_BATTLE = 'SET_BATTLE';
export const setBattle = (value) => ({ type: SET_BATTLE, value });

14
client/src/components/body.component.jsx
View File

@ -1,15 +1,27 @@
// eslint-disable-next-line
const preact = require('preact');
const ItemListContainer = require('./item.list.container');
const CrypSpawnContainer = require('./cryp.spawn.container');
const CrypListContainer = require('./cryp.list.container');
const BattleContainer = require('./battle.container');
function renderBody() {
return (
<section className="columns">
<div className="column is-3">
<div className="column is-4">
<div className="column">
<CrypSpawnContainer />
</div>
<div className="columns">
<div className="column is-8">
<CrypListContainer />
</div>
<div className="column">
<ItemListContainer />
</div>
</div>
</div>
<div className="column">
<BattleContainer />
</div>

12
client/src/components/cryp.list.jsx
View File

@ -1,10 +1,11 @@
const preact = require('preact');
function CrypList({ 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 key={cryp.id} className="tile is-vertical box">
<div className="tile is-vertical is-child">
<div className="columns" >
<div className="column is-10">
@ -19,10 +20,10 @@ function CrypList({ cryps, sendCombatPve }) {
</div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
<progress className="progress is-success" value={cryp.hp.value} max={cryp.stam.value}></progress>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
</div>
<button
className="button is-success"
className="button is-dark"
type="submit"
onClick={() => sendCombatPve(cryp.id)}>
Start PVE
@ -30,10 +31,7 @@ function CrypList({ cryps, sendCombatPve }) {
</div>
));
return (
<div>
<a className="button is-large is-fullwidth">
<span>Spawn 👾</span>
</a>
<div className="tile is-parent is-vertical" >
{crypPanels}
</div>
);

2
client/src/components/cryp.panel.jsx
View File

@ -28,7 +28,7 @@ function renderCrypPanel(cryp) {
</div>
</div>
<div className="has-text-centered">5 / 5 HP </div>
<progress className="progress is-success" value="5" max="5"></progress>
<progress className="progress is-dark" value="5" max="5"></progress>
</div>
</div>
</div>

31
client/src/components/cryp.spawn.button.jsx Normal file
View File

@ -0,0 +1,31 @@
// eslint-disable-next-line
const preact = require('preact');
function renderSpawnButton({ account, sendCrypSpawn }) {
let name = '';
if (!account) return <div>...</div>;
return (
<div className="columns">
<div className="column">
<input
className="input"
type="email"
placeholder="cryp name"
onChange={e => (name = e.target.value)}
/>
</div>
<div className="column is-3">
<button
className="button is-dark is-fullwidth"
type="submit"
onClick={() => sendCrypSpawn(name)}>
Spawn 👾
</button>
</div>
</div>
);
}
module.exports = renderSpawnButton;

18
client/src/components/cryp.spawn.container.js Normal file
View File

@ -0,0 +1,18 @@
const { connect } = require('preact-redux');
const CrypSpawnButton = require('./cryp.spawn.button');
const addState = connect(
function receiveState(state) {
const { ws } = state;
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
}
console.log(ws);
return { account: state.account, sendCrypSpawn };
}
);
module.exports = addState(CrypSpawnButton);

16
client/src/components/item.list.container.js Normal file
View File

@ -0,0 +1,16 @@
const { connect } = require('preact-redux');
const ItemList = require('./item.list');
const addState = connect(
function receiveState(state) {
const { ws, items } = state;
function sendItemUse(crypId) {
return ws.sendItemUse(crypId);
}
return { items, sendItemUse };
}
);
module.exports = addState(ItemList);

36
client/src/components/item.list.jsx Normal file
View File

@ -0,0 +1,36 @@
const preact = require('preact');
function ItemList({ items, sendItemUse }) {
if (!items) return <div>...</div>;
const itemPanels = items.map(item => (
<div key={item.id} className="tile is-parent is-vertical box">
<div className="tile is-vertical is-child">
<div className="columns" >
<div className="column is-8">
<p className="title">{item.action}</p>
<p className="subtitle">∞</p>
</div>
<div className="column">
<figure className="image">
<svg width="40" height="40" data-jdenticon-value={item.action} />
</figure>
</div>
</div>
</div>
<button
className="button is-dark"
type="submit"
onClick={() => sendItemUse(item.id)}>
Use
</button>
</div>
));
return (
<div className="tile is-parent" >
{itemPanels}
</div>
);
}
module.exports = ItemList;

2
client/src/components/login.component.jsx
View File

@ -43,7 +43,7 @@ function renderLogin({ account, submitLogin }) {
<div className="field">
<p className="control">
<button
className="button is-success"
className="button is-dark"
type="submit"
onClick={() => submitLogin(details.name, details.password)}>
Login

19
client/src/components/sidebar.component.jsx
View File

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

3
client/src/main.jsx
View File

@ -15,9 +15,10 @@ const Body = require('./components/body.component');
// Redux Store
const store = createStore(
combineReducers({
battle: reducers.battleReducer,
account: reducers.accountReducer,
battle: reducers.battleReducer,
cryps: reducers.crypsReducer,
items: reducers.itemsReducer,
ws: reducers.wsReducer,
})
);

11
client/src/reducers.jsx
View File

@ -20,6 +20,16 @@ function crypsReducer(state = defaultCryps, action) {
}
}
const defaultItems = null;
function itemsReducer(state = defaultItems, action) {
switch (action.type) {
case actions.SET_ITEMS:
return action.value;
default:
return state;
}
}
const defaultBattle = null;
function battleReducer(state = defaultBattle, action) {
switch (action.type) {
@ -44,5 +54,6 @@ module.exports = {
battleReducer,
accountReducer,
crypsReducer,
itemsReducer,
wsReducer,
};

7
client/src/socket.jsx
View File

@ -86,7 +86,7 @@ function createSocket(store) {
function itemList(response) {
const [structName, items] = response;
console.log('got my items', items);
store.dispatch(actions.setItems(items));
}
// -------------
@ -101,6 +101,10 @@ function createSocket(store) {
send({ method: 'account_login', params: { name, password } });
}
function sendCrypSpawn(name) {
send({ method: 'cryp_spawn', params: { name } });
}
function sendCombatPve(id) {
send({ method: 'combat_pve', params: { id } });
}
@ -139,6 +143,7 @@ function createSocket(store) {
return {
sendAccountLogin,
sendCombatPve,
sendCrypSpawn,
connect,
};
}

8
server/WORKLOG.md
View File

@ -28,10 +28,16 @@
* Blockchain Integration?
# Principles
* Experience something
* Express something
* Prove something
# Mechanic Ideas
teams
1v1 2v2 3v3
physical, magic, pure dmg?
elemental?