Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

List styling

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-03 11:42:33 +10:00
parent 96d482317c
commit f456113467
8 changed files with 143 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/content/task_list.md
+1 -2
View File
@@ -9,16 +9,15 @@ Minor
---
* Disable attack button with no soldiers.
* Implement combat log rows.
* Implement game ladder sorting.
* Implement badges.
* Implement Patreon thank you page.
Patch
---
* Game Balance.
* Images to social media instead of links.
* Center the common links on mobile.
Wishlist
---
public/styles/shared.css
+35 -14
View File
@@ -47,13 +47,21 @@ h2 {
}
br {
padding-bottom: .5rem;
padding-bottom: .5em;
}
div.break.half {
padding-bottom: .25em;
}
div.break {
padding-bottom: .5em;
}
ul {
list-style-type: disc;
list-style-position: inside;
padding-bottom: .5rem;
padding-bottom: .5em;
}
a {
@@ -106,7 +114,7 @@ footer {
}
.central p {
padding-bottom: .5rem;
padding-bottom: .5em;
}
/* components */
@@ -244,7 +252,7 @@ footer {
justify-content: flex-start;
}
.row {
.table .row {
flex: 1;
display: flex;
flex-direction: row;
@@ -252,23 +260,17 @@ footer {
}
@media screen and (max-width: 480px) {
.row {
.table .row {
flex-direction: column;
border-style: solid;
border-color: lightblue;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1;
}
}
.col {
.table .row .col {
flex: 1 1 1%;
min-width: 0;
}
.table.noCollapse .row {
.table.noCollapse .row, .table .row.noCollapse {
flex-direction: row;
border-style: none;
}
@@ -276,7 +278,7 @@ footer {
/* bits and pieces */
.logoutButton {
align-self: stretch;
margin-bottom: .5rem;
margin-bottom: .5em;
}
.newsLine {
@@ -294,3 +296,22 @@ pre {
margin-top: 1em;
margin-bottom: 1em;
}
.show.mobile {
display: none;
}
@media screen and (max-width: 480px) {
.show.mobile {
display: block;
}
.hide.mobile {
display: none;
}
}
.central p.equipmentTextPadding {
padding-top: .25em;
padding-bottom: .25em;
}
src/components/pages/combat_log.jsx
+3 -3
View File
@@ -74,11 +74,11 @@ class CombatLog extends React.Component {
buttonHeader() {
return (
<div className='table'>
<div className='table noCollapse'>
<div className='row'>
<button className='col' onClick={ this.decrement.bind(this) }>{'< Back'}</button>
<div className='col' />
<div className='col' />
<div className='col hide mobile' />
<div className='col hide mobile' />
<button className='col' onClick={ this.increment.bind(this) }>{'Next >'}</button>
</div>
</div>
src/components/pages/ladder.jsx
+4 -3
View File
@@ -37,6 +37,7 @@ class Ladder extends React.Component {
<div className='mainPanel'>
<h1 className='centered'>Game Ladder</h1>
<ButtonHeader />
<br />
<PagedLadder
start={this.state.start}
length={this.state.length}
@@ -52,11 +53,11 @@ class Ladder extends React.Component {
buttonHeader() {
return (
<div className='table'>
<div className='table noCollapse'>
<div className='row'>
<button className='col' onClick={this.decrement.bind(this)}>{'< Back'}</button>
<div className='col' />
<div className='col' />
<div className='col hide mobile' />
<div className='col hide mobile' />
<button className='col' onClick={this.increment.bind(this)}>{'Next >'}</button>
</div>
</div>
src/components/panels/combat_log_record.jsx
+68
View File
@@ -0,0 +1,68 @@
import React from 'react';
import { withRouter, Link } from 'react-router-dom';
import PropTypes from 'prop-types';
class CombatLogRecord extends React.Component {
constructor(props) {
super(props);
this.state = {
//
};
}
render() {
return (
<div className='table noCollapse'>
<hr />
<div className='break' />
<div className='row'>
<p className='col truncate'>{this.parseDate(this.props.eventTime)}</p>
<p className='col truncate'>Atk: {this.prettyName(this.props.attacker)} ({this.props.attackingUnits} units)</p>
<p className='col truncate'>Def: {this.prettyName(this.props.defender)} ({this.props.defendingUnits} units)</p>
</div>
<div className='row'>
<p className='col truncate'>Victor: {this.capitalizeFirstLetter(this.props.victor)} {this.props.undefended ? '(undefended)' : ''}</p>
<p className='col truncate'>Gold: {this.props.spoilsGold}</p>
<p className='col truncate'>Atk. Deaths: {this.props.attackerCasualties}</p>
</div>
</div>
);
}
prettyName(name) {
//make the enemy name a link
if (name === this.props.username) {
return name;
} else {
return (<Link to={`/profile?username=${name}`}>{name}</Link>);
}
}
parseDate(eventTime) {
let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let date = new Date(eventTime);
return `${date.getDate()} ${month[date.getMonth()]}`;
}
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
};
CombatLogRecord.propTypes = {
username: PropTypes.string.isRequired,
eventTime: PropTypes.string.isRequired,
attacker: PropTypes.string.isRequired,
defender: PropTypes.string.isRequired,
attackingUnits: PropTypes.number.isRequired,
defendingUnits: PropTypes.number.isRequired,
undefended: PropTypes.number.isRequired,
victor: PropTypes.string.isRequired,
spoilsGold: PropTypes.number.isRequired,
attackerCasualties: PropTypes.number.isRequired
};
export default withRouter(CombatLogRecord);
src/components/panels/equipment.jsx
+15 -6
View File
@@ -36,16 +36,25 @@ class Equipment extends React.Component {
<p className='col centered truncate'>Name</p>
<p className='col centered truncate'>Type</p>
<p className='col centered truncate'>Owned</p>
<p className='col centered truncate'>Buy</p>
<p className='col centered truncate'>Sell</p>
<p className='col centered truncate mobile hide'>Buy</p>
<p className='col centered truncate mobile hide'>Sell</p>
</div>
{Object.keys(display).map((key) => <div className='row' key={key}>
<p className='col centered truncate'>{display[key].name}</p>
<p className='col centered truncate'>{display[key].type}</p>
<p className='col centered truncate'>{display[key].owned}</p>
<hr className='mobile show' />
{Object.keys(display).map((key) => <div key={key}>
<hr className='mobile hide'/>
<div className='break' />
<div className='row'>
<p className='col centered truncate equipmentTextPadding'>{display[key].name}</p>
<p className='col centered truncate equipmentTextPadding'>{display[key].type}</p>
<p className='col centered truncate equipmentTextPadding'>{display[key].owned}</p>
<div className='col row noCollapse' style={{flex: '1 1 20%'}}>
{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy ({display[key].cost} gold)</button> : <div className='col centered truncate' />}
{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell ({Math.floor(display[key].cost/2)} gold)</button> : <div className='col centered truncate' />}
</div>
</div>
<div className='break' />
</div>)}
</div>
</div>
src/components/panels/paged_combat_log.jsx
+5 -41
View File
@@ -3,13 +3,15 @@ import { withRouter, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import CombatLogRecord from './combat_log_record.jsx';
class PagedCombatLog extends React.Component {
constructor(props) {
super(props);
this.state = {
//
}
};
if (props.getFetch) {
props.getFetch(() => this.sendRequest('/combatlogrequest', {username: props.username, start: props.start, length: props.length}));
@@ -17,40 +19,9 @@ class PagedCombatLog extends React.Component {
}
render() {
//make the enemy name a link
const PrettyName = (props) => {
if (props.name === this.props.username) {
return (<p {...props}>{props.name}</p>);
} else {
return (<p {...props}><Link to={`/profile?username=${props.name}`}>{props.name}</Link></p>);
}
};
return (
<div className='table'>
<div className='row'>
<p className='col centered badwrap'>When</p>
<p className='col centered badwrap'>Attacker</p>
<p className='col centered badwrap'>Defender</p>
<p className='col centered badwrap'>Attacking Force</p>
<p className='col centered badwrap'>Defending Force</p>
<p className='col centered badwrap'>Undefended?</p>
<p className='col centered badwrap'>Victor</p>
<p className='col centered badwrap'>Gold Stolen</p>
<p className='col centered badwrap'>Attacker Deaths</p>
</div>
{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
<p className='col centered truncate'>{ this.parseDate(this.state[key].eventTime) }</p>
<PrettyName className='col centered truncate' name={this.state[key].attacker} />
<PrettyName className='col centered truncate' name={this.state[key].defender} />
<p className='col centered truncate'>{this.state[key].attackingUnits}</p>
<p className='col centered truncate'>{this.state[key].defendingUnits}</p>
<p className='col centered truncate'>{this.state[key].undefended ? 'yes' : 'no'}</p>
<p className='col centered truncate'>{this.state[key].victor}</p>
<p className='col centered truncate'>{this.state[key].spoilsGold}</p>
<p className='col centered truncate'>{this.state[key].attackerCasualties}</p>
</div>)}
<div>
{Object.keys(this.state).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
</div>
);
}
@@ -86,13 +57,6 @@ class PagedCombatLog extends React.Component {
...args
}));
}
parseDate(eventTime) {
let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let date = new Date(eventTime);
return `${date.getDate()} ${month[date.getMonth()]}`;
}
};
PagedCombatLog.propTypes = {
src/components/panels/paged_ladder.jsx
+6 -2
View File
@@ -23,12 +23,16 @@ class PagedLadder extends React.Component {
<p className='col centered'>Recruits</p>
<p className='col centered'>Gold</p>
</div>
{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
{Object.keys(this.state).map((key) =><div key={key}>
<hr />
<div className='break' />
<div className={'row'}>
<p className={'col centered truncate'}><Link to={`/profile?username=${this.state[key].username}`}>{this.state[key].username}</Link></p>
<p className={'col centered truncate'}>{this.state[key].soldiers}</p>
<p className={'col centered truncate'}>{this.state[key].recruits}</p>
<p className={'col centered truncate'}>{this.state[key].gold}</p>
</div> )}
</div>
</div>)}
</div>
);
}