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

woah

Browse Source
This commit is contained in:
ntr 2019-09-06 12:13:54 +10:00
parent 60d9ea5198
commit 7af81c5252
23 changed files with 265 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
WORKLOG.md
View File

@ -11,9 +11,6 @@
* constructs jiggle when clicked
* background colour changes depending on time of day
* bug fixes
* pvp 1st round doesn't resolve until warden timer completes
* bot game grind
* stress test

3
client/assets/styles/account.less
View File

@ -1,9 +1,6 @@
@import 'colours.less';
.account {
margin-top: 2em;
grid-area: bottom;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 0 1em;

13
client/assets/styles/controls.less
View File

@ -8,10 +8,17 @@ aside {
"timer controls";
grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 0.5em 0;
grid-template-rows: 1fr;
padding: 1em 1em 1em 0;
padding-left: 1em;
.controls {
grid-area: controls;
display: grid;
grid-auto-rows: 1fr;
grid-gap: 0.5em 0;
}
// fix chrome being inconsistent
table {

2
client/assets/styles/instance.less
View File

@ -1,7 +1,7 @@
@import 'colours.less';
.instance {
overflow-x: hidden;
overflow: hidden;
display: grid;
grid-template-columns: 1fr minmax(min-content, 1fr);
grid-template-rows: min-content 1fr;

25
client/assets/styles/menu.less
View File

@ -4,17 +4,16 @@
height: 100%;
display: grid;
grid-template-rows: minmax(min-content, 2fr) min-content 1fr;
grid-template-rows: min-content 1fr 2fr;
grid-template-columns: 1fr;
grid-template-areas:
"hdr"
"top"
"tabs"
"bottom";
.top {
grid-area: top;
padding: 0 0 0.5em 2em;
border-bottom: 0.1em solid #222;
box-sizing: border-box;
}
@ -25,9 +24,10 @@
.team {
display: grid;
grid-area: top;
grid-area: bottom;
grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
max-height: 100%;
margin-top: 1em;
.team-select:not(:nth-child(3n)) {
margin-right: 0.5em;
@ -62,8 +62,6 @@
}
.inventory {
margin-top: 2em;
grid-area: bottom;
display: grid;
grid-template-columns: 1fr 1fr;
@ -71,6 +69,10 @@
margin-bottom: 0.5em;
}
.news {
padding-right: 1em;
}
.list {
letter-spacing: 0.25em;
text-transform: uppercase;
@ -89,16 +91,19 @@
}
.options {
grid-area: tabs;
display: flex;
flex-flow: row;
grid-area: hdr;
button {
width: 25%;
border-top: 0;
border: 1px solid #222;
&:not(:last-child) {
border-right: 0;
}
flex: 1;
&:last-child {
float: right;
}
}
}
}

28
client/assets/styles/styles.less
View File

@ -84,16 +84,17 @@ dl {
#mnml {
display: grid;
grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
grid-template-rows: min-content 1fr min-content;
grid-template-columns: 9fr 1fr;
grid-template-rows: min-content min-content 1fr;
grid-template-areas:
"hd hd ctrl"
"main main ctrl"
"main main ctrl";
"hdr ctrl"
"main ctrl"
"main ctrl";
padding: 0.5em 1em;
}
main {
padding: 1em;
grid-area: main;
}
@ -253,10 +254,17 @@ figure.gray {
display: none;
}
.options {
display: flex;
flex-flow: row;
header {
.options {
font-size: 150%;
}
button {
height: 2em;
}
}
.options {
button {
&.highlight {
color: @white;
@ -279,4 +287,4 @@ figure.gray {
nav {
display: none;
}
}

25
client/src/components/account.management.jsx
View File

@ -151,19 +151,9 @@ class AccountStatus extends Component {
}
return (
<section class='account' onClick={tlClick}>
<section class='account top' onClick={tlClick}>
<div>
<h1>{account.name}</h1>
<div class="list">
<figure>
<figcaption>spawn new construct</figcaption>
<button onClick={() => sendConstructSpawn()} type="submit">
¤50
</button>
</figure>
</div>
<button onClick={() => logout()}>Logout</button>
<button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
{subInfo()}
</div>
<div>
<label for="email">Email Settings:</label>
@ -216,7 +206,16 @@ class AccountStatus extends Component {
</button>
</div>
<div>
{subInfo()}
<div class="list">
<figure>
<figcaption>spawn new construct</figcaption>
<button onClick={() => sendConstructSpawn()} type="submit">
¤50
</button>
</figure>
</div>
<button onClick={() => logout()}>Logout</button>
<button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
</div>
</section>
);

2
client/src/components/account.page.jsx
View File

@ -2,6 +2,7 @@ const { connect } = require('preact-redux');
const preact = require('preact');
const Team = require('./team');
const Header = require('./header');
const AccountManagement = require('./account.management');
const addState = connect(
@ -24,6 +25,7 @@ function Account(args) {
return (
<main class="menu">
<Header />
<Team />
<AccountManagement />
</main>

8
client/src/components/game.ctrl.jsx
View File

@ -125,9 +125,11 @@ function Controls(args) {
return (
<aside class="controls">
{timer}
{scoreboard(game, opponent, true)}
{game.phase === 'Finish' ? quitBtn : readyBtn}
{scoreboard(game, player)}
<div class="controls">
{scoreboard(game, opponent, true)}
{game.phase === 'Finish' ? quitBtn : readyBtn}
{scoreboard(game, player)}
</div>
</aside>
);
}

131
client/src/components/header.jsx
View File

@ -1,40 +1,121 @@
// eslint-disable-next-line
const preact = require('preact');
const { connect } = require('preact-redux');
const preact = require('preact');
const { saw } = require('./shapes');
const actions = require('./../actions');
function pingColour(ping) {
if (ping < 100) return 'forestgreen';
if (ping < 200) return 'yellow';
return 'red';
}
const actions = require('../actions');
const AccountStatus = require('./account.status');
const addState = connect(
({ account, ping, showNav }) => {
return { account, ping };
function receiveState(state) {
const {
ws,
account,
instances,
team,
nav,
ping,
game,
} = state;
function sendInstanceState(instance) {
return ws.sendInstanceState(instance.id);
}
function sendAccountStates() {
ws.sendEmailState();
ws.sendSubscriptionState();
}
return {
account,
instances,
team,
game,
ping,
nav,
sendInstanceState,
sendAccountStates,
};
},
function receiveDispatch(dispatch) {
function setNav(place) {
dispatch(actions.setGame(null));
dispatch(actions.setInstance(null));
dispatch(actions.setCombiner([]));
dispatch(actions.setReclaiming(false));
dispatch(actions.setActiveSkill(null));
dispatch(actions.setActiveConstruct(null));
dispatch(actions.setInfo(null));
dispatch(actions.setItemEquip(null));
dispatch(actions.setItemUnequip([]));
dispatch(actions.setVboxHighlight([]));
return dispatch(actions.setNav(place));
}
function hideNav() {
return dispatch(actions.setShowNav(false));
}
return {
setNav,
hideNav,
};
}
);
function renderHeader(args) {
const { account, ping } = args;
function Nav(args) {
const {
account,
game,
team,
nav,
const accountStatus = account
? (<div class="header-status">
<h1 class="header-username">{account.name}</h1>
{saw(pingColour(ping))}
<div class="ping-text">{ping}ms</div>
</div>)
: '';
sendAccountStates,
sendInstanceState,
setNav,
hideNav,
} = args;
if (!account) return false;
function navTo(p) {
return setNav(p);
}
function joinInstance(i) {
sendInstanceState(i);
if (game) navTo('transition');
return true;
}
function accountClick() {
sendAccountStates();
navTo('account');
}
return (
<header>
<h1 class="header-title">mnml.gg</h1>
{accountStatus}
<div class="options">
<button
onClick={() => navTo('play')}
class={`login-btn ${nav === 'play' ? 'highlight' : ''}`}>
MNML
</button>
<button
onClick={() => navTo('news')}
class={`login-btn ${nav === 'news' ? 'highlight' : ''}`}>
Shop
</button>
<button
onClick={accountClick}
class={`login-btn ${nav === 'account' ? 'highlight' : ''}`}>
⚙ {account.name}
</button>
</div>
</header>
);
}
module.exports = addState(renderHeader);
module.exports = addState(Nav);

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

@ -18,7 +18,19 @@ function InfoComponent(args) {
// const { info } = args;
function Info() {
if (!info) return false;
if (!info) {
return (
<div>
<h2>VBOX phase</h2>
<p>double clicking items in the <b>VBOX</b> will purchase and move them to your <b>INVENTORY</b>.</p>
<p>
hover over an item to see its effects and combinations.<br />
click an item and then click a construct to equip that item to it.<br />
</p>
<p>click the <b>READY</b> button on the right to progress to the <b>GAME PHASE</b>.</p>
</div>
);
}
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
if (!fullInfo) return false;
const isSkill = fullInfo.skill;

2
client/src/components/instance.constructs.jsx
View File

@ -98,7 +98,7 @@ function Construct(props) {
const skill = construct.skills[i];
const s = skill
? skill.skill
: (<span class="gray">+</span>);
: (<span class="gray">SKILL</span>);
function skillClick(e) {
if (!skill) return false;

10
client/src/components/instance.ctrl.jsx
View File

@ -93,11 +93,13 @@ function Controls(args) {
);
return (
<aside class="controls">
<aside>
{timer}
{scoreboard(instance, opponent, true)}
<button class="ready" onClick={() => sendReady()}>Ready</button>
{scoreboard(instance, player)}
<div class="controls">
{scoreboard(instance, opponent, true)}
<button class="ready" onClick={() => sendReady()}>Ready</button>
{scoreboard(instance, player)}
</div>
</aside>
);
}

29
client/src/components/inventory.jsx
View File

@ -7,6 +7,8 @@ const toast = require('izitoast');
const actions = require('./../actions');
const StripeBtns = require('./stripe.buttons');
const VERSION = process.env.npm_package_version;
const addState = connect(
function receiveState(state) {
const {
@ -64,21 +66,32 @@ function Inventory(args) {
);
return (
<div class="inventory">
<div class="inventory top">
<div class="news">
<h1>v{VERSION}</h1>
<h2>welcome to mnml</h2>
<p>use the buttons on the right to join an instance.</p>
<p>
select <b>PVP</b> to play against other players.<br />
click <b>LEARN</b> to practice the game without time controls.
</p>
<p>
if you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
glhf
</p>
<p>--ntr & mashy</p>
</div>
<div>
<h1>Shop</h1>
<h1 class="credits">¤ {account.balance}</h1>
<Elements>
<StripeBtns account={account} />
</Elements>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
</div>
<div>
<h1 class="credits">¤ {account.balance}</h1>
<div class='list'>
{shop.owned.map(useMtx)}
</div>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
</div>
</div>
);

2
client/src/components/main.jsx
View File

@ -38,7 +38,7 @@ function Main(props) {
if (nav === 'transition') return false;
if (nav === 'play') return <Play />;
if (nav === 'team') return <Team />;
// if (nav === 'team') return <Team />;
if (nav === 'account') return <Account />;
return (

1
client/src/components/mnml.jsx
View File

@ -1,7 +1,6 @@
const preact = require('preact');
const { connect } = require('preact-redux');
// const Header = require('./header');
const Main = require('./main');
const Nav = require('./nav');
const Controls = require('./controls');

1
client/src/components/nav.jsx
View File

@ -92,7 +92,6 @@ function Nav(args) {
const canJoin = team.some(c => !c);
return (
<nav onClick={hideNav} >
<h1 class="header-title">mnml.gg</h1>

57
client/src/components/play.ctrl.jsx
View File

@ -3,7 +3,14 @@ const { connect } = require('preact-redux');
const addState = connect(
function receiveState(state) {
const { ws } = state;
const {
ws,
instances,
} = state;
function sendInstanceState(id) {
ws.sendInstanceState(id);
}
function sendInstancePractice() {
ws.sendInstancePractice();
@ -14,6 +21,9 @@ const addState = connect(
}
return {
instances,
sendInstanceState,
sendInstanceQueue,
sendInstancePractice,
};
@ -22,25 +32,46 @@ const addState = connect(
function JoinButtons(args) {
const {
instances,
sendInstanceState,
sendInstanceQueue,
sendInstancePractice,
} = args;
if (instances.length) {
return (
<aside class='play-ctrl'>
<div class="timer-container"></div>
<div class="controls">
<button
class='pvp ready full'
onClick={() => sendInstanceState(instances[0].id)}
type="submit">
Rejoin
</button>
</div>
</aside>
);
}
return (
<aside class='play-ctrl'>
<div class="timer-container"></div>
<button
class='pvp ready'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
<button
class='practice ready'
onClick={() => sendInstancePractice()}
type="submit">
Practice
</button>
<div class="controls">
<button
class='pvp ready'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
<button
class='practice ready'
onClick={() => sendInstancePractice()}
type="submit">
Learn
</button>
</div>
</aside>
);
}

24
client/src/components/play.jsx
View File

@ -5,6 +5,7 @@ const { stringSort } = require('./../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('./../actions');
const Inventory = require('./inventory');
const Header = require('./header');
const idSort = stringSort('id');
@ -108,28 +109,11 @@ function Play(args) {
return (
<main class="menu">
<div class="team top">
<Header />
<Inventory />
<div class="team">
{constructPanels}
</div>
<div class="options">
<button
class={`login-btn highlight`}>
Play
</button>
<button
class={`login-btn`}>
News
</button>
<button
class={`login-btn`}>
Store
</button>
<button
class={`login-btn`}>
⚙ Account
</button>
</div>
<Inventory />
</main>
);
}

2
client/src/components/shapes.jsx
View File

@ -42,7 +42,7 @@ module.exports = {
None: () =>
<figure>
{diamond(['gray'])}
<figcaption>&nbsp;</figcaption>
<figcaption>SPEC</figcaption>
</figure>,

2
client/src/components/team.ctrl.jsx
View File

@ -52,7 +52,7 @@ function TeamCtrl(args) {
class='ready'
disabled={teamSelect.some(c => !c)}
onClick={sendAccountSetTeam}>
Set Team
Set
</button>
<div class="team-page-ctrl">
<button onClick={() => setTeamPage(teamPage - 1)} disabled={disableDecrement}> &laquo; </button>

4
client/src/components/team.jsx
View File

@ -58,7 +58,7 @@ function Team(args) {
}
console.log(constructs.length);
const dispConstructs = constructs.length >= ((teamPage + 1) * 6)
? constructs.slice(teamPage * 6, (teamPage + 1) * 6)
? constructs.slice(teamPage * 6, (teamPage + 1) * 6)
: constructs.slice(teamPage * 6, constructs.length);
const constructPanels = dispConstructs.map(construct => {
@ -80,7 +80,7 @@ function Team(args) {
});
return (
<section class="team top">
<section class="team">
{constructPanels}
</section>
);

5
server/src/img.rs
View File

@ -53,16 +53,15 @@ pub fn invader_write(id: Uuid) -> Result<Uuid, Error> {
colours.push("none".to_string());
// add up to 100 for %
// [3] is the transparent colour
let weights = [
5,
5,
65,
25,
25, // the transparent colour
];
let colour_dist = WeightedIndex::new(&weights)?;
write!(&mut svg, "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-250 -250 1000 1000' width='500' height='500'><g>")?;
write!(&mut svg, "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-250 -250 1000 1000' width='375' height='375'><g>")?;
for i in 0..50 {
let x = (i % 5) * 50;
let y = (i / 5) * 50;