select target
This commit is contained in:
ntr
parent
fa7f875bbd
commit
b7b5806d98
@ -10,11 +10,14 @@ export const setItems = (value) => ({ type: SET_ITEMS, value });
|
||||
export const SET_GAME = 'SET_GAME';
|
||||
export const setGame = (value) => ({ type: SET_GAME, value });
|
||||
|
||||
export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
|
||||
export const setActiveCryp = (value) => ({ type: SET_ACTIVE_CRYP, value });
|
||||
|
||||
export const SET_ACTIVE_ITEM = 'SET_ACTIVE_ITEM';
|
||||
export const setActiveItem = (value) => ({ type: SET_ACTIVE_ITEM, value });
|
||||
|
||||
export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
|
||||
export const setActiveIncoming = (value) => ({ type: SET_ACTIVE_INCOMING, value });
|
||||
|
||||
export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
|
||||
export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: { crypId, skill} });
|
||||
|
||||
export const SET_WS = 'SET_WS';
|
||||
export const setWs = (value) => ({ type: SET_WS, value });
|
||||
|
||||
@ -9,8 +9,6 @@ const addState = connect(
|
||||
return ws.sendCrypSpawn(name);
|
||||
}
|
||||
|
||||
console.log(ws);
|
||||
|
||||
return { account: state.account, sendCrypSpawn };
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,20 +1,33 @@
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const Game = require('./game');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, game, account } = state;
|
||||
function sendGameSkill(crypId, targetTeamId, skill) {
|
||||
return ws.sendGameSkill(game.id, crypId, targetTeamId, skill);
|
||||
const { ws, game, account, activeSkill } = state;
|
||||
function selectSkillTarget(targetTeamId) {
|
||||
if (activeSkill) {
|
||||
return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function sendGameTarget(crypId, skillId) {
|
||||
return ws.sendGameTarget(game.id, crypId, skillId);
|
||||
}
|
||||
|
||||
return { game, account, sendGameSkill, sendGameTarget };
|
||||
return { game, account, activeSkill, selectSkillTarget, sendGameTarget };
|
||||
},
|
||||
function receiveDispatch(dispatch) {
|
||||
function setActiveSkill(crypId, skill) {
|
||||
dispatch(actions.setActiveSkill(crypId, skill))
|
||||
}
|
||||
|
||||
return { setActiveSkill };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
module.exports = addState(Game);
|
||||
|
||||
@ -1,104 +1,100 @@
|
||||
const preact = require('preact');
|
||||
|
||||
function PlayerCrypCard(cryp) {
|
||||
return (
|
||||
<div key={cryp.id}
|
||||
className="tile is-vertical">
|
||||
<div className="tile is-child">
|
||||
<div className="columns" >
|
||||
<div className="column is-10">
|
||||
<p className="title">{cryp.name}</p>
|
||||
<p className="subtitle">Level {cryp.lvl}</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<figure className="image">
|
||||
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
|
||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
||||
|
||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
|
||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
|
||||
|
||||
</div>
|
||||
<button
|
||||
className="button is-dark is-fullwidth"
|
||||
type="submit"
|
||||
// onClick={() => sendGameSkill(c.id, otherTeams[0].id, 'Attack')}
|
||||
>
|
||||
Attack
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayerTeam(team) {
|
||||
const cryps = team.cryps.map(PlayerCrypCard);
|
||||
|
||||
return (
|
||||
<div className="tile">
|
||||
{cryps}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function OpponentCrypCard(cryp) {
|
||||
return (
|
||||
<div key={cryp.id}
|
||||
className="tile is-vertical">
|
||||
<div className="tile is-child">
|
||||
<div className="columns" >
|
||||
<div className="column is-10">
|
||||
<p className="title">{cryp.name}</p>
|
||||
<p className="subtitle">Level {cryp.lvl}</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<figure className="image">
|
||||
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
|
||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
||||
|
||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
|
||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpponentTeam(team) {
|
||||
const cryps = team.cryps.map(OpponentCrypCard);
|
||||
|
||||
return (
|
||||
<div className="tile">
|
||||
{cryps}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GameState(game) {
|
||||
return (
|
||||
<div className="tile" style={{ "min-height": "100%" }}>
|
||||
<div className="title is-1">{game.phase}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
|
||||
function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, account }) {
|
||||
if (!game) return <div>...</div>;
|
||||
|
||||
const otherTeams = game.teams.filter(t => t.id !== account.id);
|
||||
|
||||
const playerTeam = game.teams.find(t => t.id === account.id);
|
||||
|
||||
const gameState = GameState(game);
|
||||
const incoming = playerTeam.incoming.map((inc, i) => (
|
||||
<div key={inc}>{JSON.stringify(inc)}</div>
|
||||
));
|
||||
|
||||
function PlayerCrypCard(cryp) {
|
||||
return (
|
||||
<div key={cryp.id}
|
||||
className="tile is-vertical">
|
||||
<div className="tile is-child">
|
||||
<div className="columns" >
|
||||
<div className="column is-10">
|
||||
<p className="title">{cryp.name}</p>
|
||||
<p className="subtitle">Level {cryp.lvl}</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<figure className="image">
|
||||
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
|
||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
||||
|
||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
|
||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
|
||||
|
||||
</div>
|
||||
<button
|
||||
className="button is-dark is-fullwidth"
|
||||
type="submit"
|
||||
onClick={() => setActiveSkill(cryp.id, 'Attack')}
|
||||
>
|
||||
Attack
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayerTeam(team) {
|
||||
const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
|
||||
|
||||
return (
|
||||
<div className="tile">
|
||||
{cryps}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function OpponentCrypCard(cryp) {
|
||||
return (
|
||||
<div key={cryp.id} className="tile is-vertical">
|
||||
<div className="tile is-child">
|
||||
<div className="columns" >
|
||||
<div className="column is-10">
|
||||
<p className="title">{cryp.name}</p>
|
||||
<p className="subtitle">Level {cryp.lvl}</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<figure className="image">
|
||||
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
|
||||
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
||||
|
||||
<div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
|
||||
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpponentTeam(team) {
|
||||
const cryps = team.cryps.map(OpponentCrypCard);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="tile"
|
||||
style={activeSkill ? { cursor: 'pointer' } : {}}
|
||||
onClick={() => selectSkillTarget(team.id)} >
|
||||
{cryps}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// const targetBtn = playerTeam.incoming.map(i => (
|
||||
// <button
|
||||
@ -110,12 +106,19 @@ function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
|
||||
// </button>
|
||||
// ));
|
||||
|
||||
// style={{ "min-height": "100%" }}
|
||||
|
||||
return (
|
||||
<div className="tile is-ancestor">
|
||||
<div className="tile is-parent is-vertical">
|
||||
<div className="tile is-parent">{otherTeams.map(OpponentTeam)}</div>
|
||||
{gameState}
|
||||
<div className="tile is-parent footer" >{PlayerTeam(playerTeam)}</div>
|
||||
<div className="tile">
|
||||
<div className="title is-1">{game.phase}</div>
|
||||
</div>
|
||||
<div className="tile">
|
||||
{incoming}
|
||||
</div>
|
||||
<div className="tile is-parent footer" >{PlayerTeam(playerTeam, setActiveSkill)}</div>
|
||||
</div>
|
||||
<div className="tile is-parent is-4">
|
||||
<div className="tile" >log</div>
|
||||
|
||||
@ -17,6 +17,7 @@ const Body = require('./components/body.component');
|
||||
const store = createStore(
|
||||
combineReducers({
|
||||
activeItem: reducers.activeItemReducer,
|
||||
activeSkill: reducers.activeSkillReducer,
|
||||
account: reducers.accountReducer,
|
||||
game: reducers.gameReducer,
|
||||
cryps: reducers.crypsReducer,
|
||||
|
||||
@ -40,6 +40,26 @@ function activeItemReducer(state = defaultActiveItem, action) {
|
||||
}
|
||||
}
|
||||
|
||||
const defaultActiveSkill = null;
|
||||
function activeSkillReducer(state = defaultActiveSkill, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_ACTIVE_SKILL:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultActiveIncoming = null;
|
||||
function activeIncomingReducer(state = defaultActiveIncoming, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_ACTIVE_INCOMING:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultGame = null;
|
||||
function gameReducer(state = defaultGame, action) {
|
||||
switch (action.type) {
|
||||
@ -62,6 +82,8 @@ function wsReducer(state = defaultWs, action) {
|
||||
|
||||
module.exports = {
|
||||
activeItemReducer,
|
||||
activeIncomingReducer,
|
||||
activeSkillReducer,
|
||||
gameReducer,
|
||||
accountReducer,
|
||||
crypsReducer,
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
* skills
|
||||
* offensive -> choose target ✔
|
||||
* teach cyps skills
|
||||
* can you attack yourself?
|
||||
* fetch existing battles
|
||||
* check for cryp skill already used
|
||||
* check for cryp skill ownership
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user