join buttons
This commit is contained in:
ntr
parent
8a24019ff6
commit
97b3943d18
@ -1,10 +1,11 @@
|
||||
@green: #1FF01F;
|
||||
@red: #a52a2a;
|
||||
@blue: #3050f8;
|
||||
// @blue: #3498db // cyan?
|
||||
@blue: #3050f8;
|
||||
@white: #f5f5f5; // whitesmoke
|
||||
@purple: #9355b5; // 6lack - that far cover
|
||||
|
||||
@black: black;
|
||||
@gray: #222;
|
||||
@gray-box: #222;
|
||||
@gray-exists: #444;
|
||||
|
||||
@ -163,7 +163,7 @@ button, input {
|
||||
flex: 1;
|
||||
|
||||
/*the transitions */
|
||||
transition-property: color;
|
||||
transition-property: color background;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
@ -472,7 +472,7 @@ header {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.menu-instances {
|
||||
.play {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
|
||||
@ -480,32 +480,46 @@ header {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"constructs constructs"
|
||||
"inventory games";
|
||||
"team team"
|
||||
"inventory join";
|
||||
|
||||
.join {
|
||||
grid-area: join;
|
||||
|
||||
.buttons {
|
||||
margin-top: 1em;
|
||||
display: grid;
|
||||
font-size: 200%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1em;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-end;
|
||||
|
||||
button {
|
||||
height: 3em;
|
||||
&:hover {
|
||||
border-color: @green;
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team {
|
||||
grid-area: team;
|
||||
|
||||
/* poor man's <hr>*/
|
||||
padding: 0.5em 2em 0 0;
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 0.1em solid whitesmoke;
|
||||
}
|
||||
|
||||
.menu-construct {
|
||||
flex: 1 0 33%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-instances .construct-list {
|
||||
grid-area: constructs;
|
||||
|
||||
/* poor man's <hr>*/
|
||||
padding: 0.5em 2em 0 0;
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 0.1em solid whitesmoke;
|
||||
}
|
||||
|
||||
.menu-instances .menu-construct {
|
||||
flex: 1 0 33%;
|
||||
}
|
||||
|
||||
.menu-instance-list {
|
||||
grid-area: games;
|
||||
flex: 1;
|
||||
order: 99;
|
||||
flex-flow: row wrap;
|
||||
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-instance-btn {
|
||||
flex: 1 1 100%;
|
||||
@ -612,10 +626,6 @@ main .top button {
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.menu-instance-list table {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws } = state;
|
||||
|
||||
function sendInstancePractice() {
|
||||
ws.sendInstancePractice();
|
||||
}
|
||||
|
||||
function sendInstanceQueue() {
|
||||
ws.sendInstanceQueue();
|
||||
}
|
||||
|
||||
return {
|
||||
sendInstanceQueue,
|
||||
sendInstancePractice,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
function CreateButtons(args) {
|
||||
const {
|
||||
sendInstanceQueue,
|
||||
sendInstancePractice,
|
||||
} = args;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Join Game</h1>
|
||||
<button
|
||||
onClick={() => sendInstancePractice()}
|
||||
type="submit">
|
||||
Practice vs CPU
|
||||
</button>
|
||||
<button
|
||||
onClick={() => sendInstanceQueue()}
|
||||
type="submit">
|
||||
PVP
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(CreateButtons);
|
||||
@ -1,121 +0,0 @@
|
||||
const { connect } = require('preact-redux');
|
||||
const preact = require('preact');
|
||||
|
||||
const { stringSort } = require('./../utils');
|
||||
const { ConstructAvatar } = require('./construct');
|
||||
const actions = require('./../actions');
|
||||
const JoinButtons = require('./join.buttons');
|
||||
const Inventory = require('./inventory');
|
||||
|
||||
const idSort = stringSort('id');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const {
|
||||
ws,
|
||||
constructs,
|
||||
constructRename,
|
||||
team,
|
||||
mtxActive,
|
||||
} = state;
|
||||
|
||||
function sendInstancePractice() {
|
||||
return ws.sendInstancePractice();
|
||||
}
|
||||
|
||||
function sendConstructAvatarReroll(id) {
|
||||
console.log('using', mtxActive, 'on', id);
|
||||
return ws.sendMtxApply(id, mtxActive, '');
|
||||
}
|
||||
|
||||
function sendConstructRename(id, name) {
|
||||
ws.sendMtxApply(id, 'Rename', name);
|
||||
}
|
||||
|
||||
return {
|
||||
constructs,
|
||||
mtxActive,
|
||||
constructRename,
|
||||
team,
|
||||
sendConstructRename,
|
||||
sendInstancePractice,
|
||||
sendConstructAvatarReroll,
|
||||
};
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setConstructRename(id) {
|
||||
dispatch(actions.setConstructRename(id));
|
||||
}
|
||||
|
||||
function clearMtxRename() {
|
||||
dispatch(actions.setConstructRename(null));
|
||||
dispatch(actions.setMtxActive(null));
|
||||
}
|
||||
|
||||
return {
|
||||
clearMtxRename,
|
||||
setConstructRename,
|
||||
};
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
function List(args) {
|
||||
const {
|
||||
team,
|
||||
constructRename,
|
||||
clearMtxRename,
|
||||
setConstructRename,
|
||||
sendConstructRename,
|
||||
mtxActive,
|
||||
sendConstructAvatarReroll,
|
||||
} = args;
|
||||
|
||||
const constructPanels = team
|
||||
.map(construct => {
|
||||
const constructName = constructRename === construct.id
|
||||
? <input id='renameInput' type="text" style="text-align: center" placeholder="enter a new name"></input>
|
||||
: <h2>{construct.name}</h2>;
|
||||
|
||||
const confirm = constructRename === construct.id
|
||||
? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
|
||||
Confirm
|
||||
</button>
|
||||
: false;
|
||||
|
||||
const cancel = constructRename === construct.id
|
||||
? <button onClick={() => clearMtxRename()}>
|
||||
Cancel
|
||||
</button>
|
||||
: false;
|
||||
return (
|
||||
<div
|
||||
key={construct.id}
|
||||
style={ mtxActive ? { cursor: 'pointer' } : {}}
|
||||
onClick={() => {
|
||||
if (!mtxActive) return false;
|
||||
if (mtxActive === 'Rename') return setConstructRename(construct.id);
|
||||
return sendConstructAvatarReroll(construct.id);
|
||||
}}
|
||||
class="menu-construct" >
|
||||
<ConstructAvatar construct={construct} />
|
||||
{constructName}
|
||||
{confirm}
|
||||
{cancel}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<main class="menu-instances">
|
||||
<div class="construct-list">
|
||||
{constructPanels}
|
||||
</div>
|
||||
<Inventory />
|
||||
<JoinButtons />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(List);
|
||||
@ -6,7 +6,7 @@ const Login = require('./login');
|
||||
const Game = require('./game');
|
||||
const Instance = require('./instance.component');
|
||||
const Team = require('./team');
|
||||
const List = require('./list');
|
||||
const Play = require('./play');
|
||||
|
||||
const addState = connect(
|
||||
state => {
|
||||
@ -27,6 +27,8 @@ function Main(props) {
|
||||
return <Login />;
|
||||
}
|
||||
|
||||
if (nav === 'play') return <Play />;
|
||||
|
||||
if (game) {
|
||||
return <Game />;
|
||||
}
|
||||
@ -36,10 +38,9 @@ function Main(props) {
|
||||
}
|
||||
|
||||
if (nav === 'team') return <Team />;
|
||||
if (nav === 'list') return <List />;
|
||||
|
||||
return (
|
||||
<main></main>
|
||||
<Play />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ function Nav(args) {
|
||||
<h1 class="header-title">mnml.gg</h1>
|
||||
<AccountStatus />
|
||||
<hr />
|
||||
<button class="play-btn" disabled={canJoin} onClick={() => navTo('list')}>Play</button>
|
||||
<button class="play-btn" disabled={canJoin} onClick={() => navTo('play')}>Play</button>
|
||||
<hr />
|
||||
{joined}
|
||||
</nav>
|
||||
|
||||
@ -18,19 +18,7 @@ function registerEvents(store) {
|
||||
}
|
||||
|
||||
function setConstructList(constructs) {
|
||||
// check team is in list
|
||||
const { team } = store.getState();
|
||||
const ids = constructs.map(c => c.id);
|
||||
|
||||
// team is fucked up, or just registered
|
||||
// reset to the first 3 constructs
|
||||
if (!team.every(t => t && ids.includes(t))) {
|
||||
setTeam([ids[0], ids[1], ids[2]]);
|
||||
}
|
||||
|
||||
store.dispatch(actions.setConstructs(constructs));
|
||||
// Now that constructs have been set we can switch to list
|
||||
setNav('list');
|
||||
}
|
||||
|
||||
function setNewConstruct(construct) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user