This commit is contained in:
ntr 2018-10-26 12:01:23 +11:00
parent 89445a0b65
commit c5e07a26b5
18 changed files with 1554 additions and 106 deletions

File diff suppressed because it is too large Load Diff

View File

@ -26,9 +26,11 @@
"redux": "^4.0.0"
},
"devDependencies": {
"jest": "^18.0.0",
"eslint": "^5.6.0",
"babel-preset-react": "^6.24.1",
"eslint-plugin-react": "^7.11.1"
"eslint": "^5.6.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
"jest": "^18.0.0"
}
}

View File

@ -1,23 +1,23 @@
export const SET_ACCOUNT = 'SET_ACCOUNT';
export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
export const setAccount = value => ({ type: SET_ACCOUNT, value });
export const SET_CRYPS = 'SET_CRYPS';
export const setCryps = (value) => ({ type: SET_CRYPS, value });
export const setCryps = value => ({ type: SET_CRYPS, value });
export const SET_ITEMS = 'SET_ITEMS';
export const setItems = (value) => ({ type: SET_ITEMS, value });
export const setItems = value => ({ type: SET_ITEMS, value });
export const SET_GAME = 'SET_GAME';
export const setGame = (value) => ({ type: SET_GAME, value });
export const setGame = value => ({ type: SET_GAME, value });
export const SET_ACTIVE_ITEM = 'SET_ACTIVE_ITEM';
export const setActiveItem = (value) => ({ type: SET_ACTIVE_ITEM, value });
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 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 ? { crypId, skill} : null });
export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
export const SET_WS = 'SET_WS';
export const setWs = (value) => ({ type: SET_WS, value });
export const setWs = value => ({ type: SET_WS, value });

View File

@ -22,8 +22,8 @@ function CrypCard(cryp) {
<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 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

View File

@ -10,7 +10,7 @@ const CrypListContainer = require('./cryp.list.container');
const GameContainer = require('./game.container');
const addState = connect(
function receiveState(state) {
(state) => {
const { game, ws } = state;
if (!game) {
@ -20,17 +20,17 @@ const addState = connect(
return { game };
},
function receiveDispatch(dispatch) {
(dispatch) => {
function setGame(game) {
dispatch(actions.setGame(game))
dispatch(actions.setGame(game));
}
return {setGame}
}
return { setGame };
},
);
function renderBody(props){
const {game, setGame} = props;
if (game){
function renderBody(props) {
const { game, setGame } = props;
if (game) {
return (
<div>
<GameContainer />
@ -42,7 +42,7 @@ function renderBody(props){
Return to Main Menu
</button>
</div>
)
);
}
return (
<section className="columns">

View File

@ -1,9 +1,12 @@
const preact = require('preact');
const { stringSort } = require('./../utils');
const nameSort = stringSort('name');
function CrypList({ cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse }) {
function CrypList({
cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse,
}) {
if (!cryps) return <div>not ready</div>;
const crypPanels = cryps.sort(nameSort).map(cryp => (
@ -27,8 +30,8 @@ function CrypList({ cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse })
<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 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

View File

@ -33,5 +33,5 @@ function renderCrypPanel(cryp) {
</div>
</div>
</div>
)
);
}

View File

@ -27,4 +27,4 @@ function renderSpawnButton({ account, sendCrypSpawn }) {
);
}
module.exports = renderSpawnButton;
module.exports = renderSpawnButton;

View File

@ -2,14 +2,14 @@ const preact = require('preact');
const { connect } = require('preact-redux');
const addState = connect(
function receiveState(state) {
(state) => {
const { ws, cryps } = state;
function sendGameJoin(gameId) {
return ws.sendGameJoin(gameId, [cryps[0].id]);
}
return { account: state.account, sendGameJoin };
}
},
);
function GameJoinButton({ account, sendGameJoin }) {

View File

@ -12,7 +12,7 @@ function GamePanel(props) {
setActiveIncoming,
selectSkillTarget,
selectIncomingTarget,
account
account,
} = props;
if (!game) return <div>...</div>;
@ -21,7 +21,7 @@ function GamePanel(props) {
const playerTeam = game.teams.find(t => t.id === account.id);
const incoming = playerTeam.incoming.map(inc => {
const incoming = playerTeam.incoming.map((inc) => {
key.unbind('1');
key('1', () => setActiveIncoming(inc.id));
return (
@ -55,11 +55,9 @@ function GamePanel(props) {
);
});
const statuses = cryp.statuses.map((status, i) => {
return (
<div key={i}>{status} for {status.turns}T</div>
)
})
const statuses = cryp.statuses.map((status, i) => (
<div key={i}>{status} for {status.turns}T</div>
));
if (activeIncoming) console.log('should be a pointer');
return (
@ -84,8 +82,8 @@ function GamePanel(props) {
<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 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>
{statuses}
{skills}
@ -100,15 +98,13 @@ function GamePanel(props) {
<div className="tile">
{cryps}
</div>
)
);
}
function OpponentCrypCard(cryp) {
const statuses = cryp.statuses.map((status, i) => {
return (
<div key={i}>{status.status} for {status.turns}T</div>
)
});
const statuses = cryp.statuses.map((status, i) => (
<div key={i}>{status.status} for {status.turns}T</div>
));
return (
<div key={cryp.id} className="tile is-vertical">
@ -128,8 +124,8 @@ function GamePanel(props) {
<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 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>
{statuses}
@ -146,18 +142,18 @@ function GamePanel(props) {
onClick={() => selectSkillTarget(team.id)} >
{cryps}
</div>
)
);
}
// style={{ "min-height": "100%" }}
function phaseText(phase){
switch (phase){
case 'Skill':
return "Choose abilities"
case 'Target':
return "Block abilities"
case 'Finish':
return "Game over"
function phaseText(phase) {
switch (phase) {
case 'Skill':
return 'Choose abilities';
case 'Target':
return 'Block abilities';
case 'Finish':
return 'Game over';
}
}
return (
@ -180,7 +176,7 @@ function GamePanel(props) {
<div className="title is-4">log</div>
</div>
</section>
)
);
}
module.exports = GamePanel;

View File

@ -13,7 +13,7 @@ function renderHeader() {
</div>
</div>
</section>
)
);
}
module.exports = renderHeader;

View File

@ -1,7 +1,7 @@
// eslint-disable-next-line
const preact = require('preact');
function renderLogin({ account, submitLogin, submitRegister}) {
function renderLogin({ account, submitLogin, submitRegister }) {
if (account) return <div>{JSON.stringify(account)}</div>;
const details = {
@ -45,7 +45,7 @@ function renderLogin({ account, submitLogin, submitRegister}) {
<button
className="button inverted"
type="submit"
onClick={() => submitLogin("ntr", "grepgrepgrep")}>
onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
Default
</button>
<button

View File

@ -3,7 +3,7 @@ const { connect } = require('preact-redux');
const Login = require('./login.component');
const addState = connect(
function receiveState(state) {
(state) => {
const { ws } = state;
function submitLogin(name, password) {
return ws.sendAccountLogin(name, password);
@ -12,7 +12,7 @@ const addState = connect(
return ws.sendAccountRegister(name, password);
}
return { account: state.account, submitLogin, submitRegister };
}
},
);
module.exports = addState(Login);

View File

@ -2,7 +2,7 @@ const key = require('keymaster');
const actions = require('./actions');
function setupKeys(store) {
store.subscribe(function mapKeys() {
store.subscribe(() => {
const state = store.getState();
key.unbind('esc');
@ -16,8 +16,6 @@ function setupKeys(store) {
if (state.activeIncoming) {
key('esc', () => store.dispatch(actions.setActiveIncoming(null)));
}
});
}

View File

@ -24,7 +24,7 @@ const store = createStore(
cryps: reducers.crypsReducer,
items: reducers.itemsReducer,
ws: reducers.wsReducer,
})
}),
);
store.subscribe(() => console.log(store.getState()));
@ -34,6 +34,11 @@ const ws = createSocket(store);
store.dispatch(actions.setWs(ws));
ws.connect();
function blah() {
}
// tells jdenticon to look for new svgs and render them
// so we don't have to setInnerHtml or manually call update
jdenticon.config = {

View File

@ -3,80 +3,80 @@ const actions = require('./actions');
const defaultAccount = null;
function accountReducer(state = defaultAccount, action) {
switch (action.type) {
case actions.SET_ACCOUNT:
return action.value;
default:
return state;
case actions.SET_ACCOUNT:
return action.value;
default:
return state;
}
}
const defaultCryps = null;
function crypsReducer(state = defaultCryps, action) {
switch (action.type) {
case actions.SET_CRYPS:
return action.value;
default:
return state;
case actions.SET_CRYPS:
return action.value;
default:
return state;
}
}
const defaultItems = null;
function itemsReducer(state = defaultItems, action) {
switch (action.type) {
case actions.SET_ITEMS:
return action.value;
default:
return state;
case actions.SET_ITEMS:
return action.value;
default:
return state;
}
}
const defaultActiveItem = null;
function activeItemReducer(state = defaultActiveItem, action) {
switch (action.type) {
case actions.SET_ACTIVE_ITEM:
return action.value;
default:
return state;
case actions.SET_ACTIVE_ITEM:
return action.value;
default:
return state;
}
}
const defaultActiveSkill = null;
function activeSkillReducer(state = defaultActiveSkill, action) {
switch (action.type) {
case actions.SET_ACTIVE_SKILL:
return action.value;
default:
return state;
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;
case actions.SET_ACTIVE_INCOMING:
return action.value;
default:
return state;
}
}
const defaultGame = null;
function gameReducer(state = defaultGame, action) {
switch (action.type) {
case actions.SET_GAME:
return action.value;
default:
return state;
case actions.SET_GAME:
return action.value;
default:
return state;
}
}
const defaultWs = null;
function wsReducer(state = defaultWs, action) {
switch (action.type) {
case actions.SET_WS:
return action.value;
default:
return state;
case actions.SET_WS:
return action.value;
default:
return state;
}
}

View File

@ -27,20 +27,20 @@ function createSocket(store) {
ws.binaryType = 'arraybuffer';
// Connection opened
ws.addEventListener('open', function wsOpen(event) {
ws.addEventListener('open', (event) => {
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
});
// Listen for messages
ws.addEventListener('message', onMessage);
ws.addEventListener('error', function wsError(event) {
ws.addEventListener('error', (event) => {
console.error('WebSocket error', event);
account = null;
// return setTimeout(connect, 5000);
});
ws.addEventListener('close', function wsClose(event) {
ws.addEventListener('close', (event) => {
console.error('WebSocket closed', event);
account = null;
return setTimeout(connect, 5000);
@ -63,7 +63,7 @@ function createSocket(store) {
store.dispatch(actions.setAccount(login));
// send({ method: 'cryp_spawn', params: { name: 'muji' } });
send({ method: 'account_cryps', params: {} });
send({ method: 'item_list', params: {}});
send({ method: 'item_list', params: {} });
console.log(account);
}
@ -134,7 +134,9 @@ function createSocket(store) {
function sendGameSkill(gameId, crypId, targetTeamId, skill) {
send({
method: 'game_skill',
params: { game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill }
params: {
game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill,
},
});
store.dispatch(actions.setActiveSkill(null));
}

View File

@ -33,4 +33,4 @@ const numSort = (k, desc) => {
module.exports = {
stringSort,
numSort,
}
};