Tweak frontend nomenclature and some layout stuff for DDR and BishiBashi.
This commit is contained in:
Jennifer Taylor
parent
6004929b35
commit
e13b434f19
@ -57,7 +57,7 @@ var all_players = React.createClass({
|
||||
}.bind(this),
|
||||
},
|
||||
{
|
||||
name: 'Play Count',
|
||||
name: 'Total Rounds',
|
||||
render: function(userid) {
|
||||
var player = this.state.players[userid];
|
||||
return player.plays;
|
||||
|
||||
@ -59,13 +59,13 @@ var profile_view = React.createClass({
|
||||
</div>
|
||||
<div className="section">
|
||||
<LabelledSection label="User ID">{player.extid}</LabelledSection>
|
||||
<LabelledSection label="Register Time">
|
||||
<LabelledSection label="Profile Created">
|
||||
<Timestamp timestamp={player.first_play_time}/>
|
||||
</LabelledSection>
|
||||
<LabelledSection label="Last Play Time">
|
||||
<LabelledSection label="Last Played">
|
||||
<Timestamp timestamp={player.last_play_time}/>
|
||||
</LabelledSection>
|
||||
<LabelledSection label="Total Plays">
|
||||
<LabelledSection label="Total Rounds">
|
||||
{player.plays}回
|
||||
</LabelledSection>
|
||||
</div>
|
||||
|
||||
@ -57,7 +57,7 @@ var all_players = React.createClass({
|
||||
}.bind(this),
|
||||
},
|
||||
{
|
||||
name: 'Play Count',
|
||||
name: 'Total Rounds',
|
||||
render: function(userid) {
|
||||
var player = this.state.players[userid];
|
||||
return player.sp + player.dp;
|
||||
|
||||
@ -59,16 +59,16 @@ var profile_view = React.createClass({
|
||||
</div>
|
||||
<div className="section">
|
||||
<LabelledSection label="User ID">{player.extid}</LabelledSection>
|
||||
<LabelledSection label="Register Time">
|
||||
<LabelledSection label="Profile Created">
|
||||
<Timestamp timestamp={player.first_play_time}/>
|
||||
</LabelledSection>
|
||||
<LabelledSection label="Last Play Time">
|
||||
<LabelledSection label="Last Played">
|
||||
<Timestamp timestamp={player.last_play_time}/>
|
||||
</LabelledSection>
|
||||
<LabelledSection label="Single Plays">
|
||||
<LabelledSection label="Single Rounds">
|
||||
{player.sp}回
|
||||
</LabelledSection>
|
||||
<LabelledSection label="Double Plays">
|
||||
<LabelledSection label="Double Rounds">
|
||||
{player.dp}回
|
||||
</LabelledSection>
|
||||
</div>
|
||||
|
||||
@ -210,8 +210,10 @@ var network_records = React.createClass({
|
||||
if (paginate && curpage != this.state.subtab) { return null; }
|
||||
|
||||
return (
|
||||
<tr key={(-songid).toString()}>
|
||||
<td className="subheader">{ this.state.versions[-songid] }</td>
|
||||
<tr key={(-songid).toString()} className="header">
|
||||
<td className="subheader">{
|
||||
!paginate ? this.state.versions[-songid] : "Song / Artist / Difficulties"
|
||||
}</td>
|
||||
<td className="subheader">SP Beginner</td>
|
||||
<td className="subheader">SP Basic</td>
|
||||
<td className="subheader">SP Difficult</td>
|
||||
@ -491,165 +493,167 @@ var network_records = React.createClass({
|
||||
|
||||
renderBySongIDList: function(songids, showplays) {
|
||||
return (
|
||||
<table className="list records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="subheader">Song</th>
|
||||
<th className="subheader">SP Beginner</th>
|
||||
<th className="subheader">SP Basic</th>
|
||||
<th className="subheader">SP Difficult</th>
|
||||
<th className="subheader">SP Expert</th>
|
||||
<th className="subheader">SP Challenge</th>
|
||||
<th className="subheader">DP Basic</th>
|
||||
<th className="subheader">DP Difficult</th>
|
||||
<th className="subheader">DP Expert</th>
|
||||
<th className="subheader">DP Challenge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{songids.map(function(songid, index) {
|
||||
if (index < this.state.offset || index >= this.state.offset + this.state.limit) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var records = this.state.records[songid];
|
||||
if (!records) {
|
||||
records = {};
|
||||
}
|
||||
|
||||
var difficulties = this.state.songs[songid].difficulties;
|
||||
var plays = this.getPlays(records);
|
||||
return (
|
||||
<tr key={songid.toString()}>
|
||||
<td className="center">
|
||||
<div>
|
||||
<a href={Link.get('individual_score', songid)}>
|
||||
<div className="songname">{ this.state.songs[songid].name }</div>
|
||||
<div className="songartist">{ this.state.songs[songid].artist }</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="songdifficulties">
|
||||
<span>SP </span>
|
||||
{this.renderDifficulty(songid, 0)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 1)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 2)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 3)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 4)}
|
||||
</div>
|
||||
<div className="songdifficulties">
|
||||
<span>DP </span>
|
||||
{this.renderDifficulty(songid, 6)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 7)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 8)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 9)}
|
||||
</div>
|
||||
{ showplays ? <div className="songplays">#{index + 1} - {plays}{plays == 1 ? ' play' : ' plays'}</div> : null }
|
||||
</td>
|
||||
<td className={difficulties[0] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={0}
|
||||
score={records[0]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[1] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={1}
|
||||
score={records[1]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[2] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={2}
|
||||
score={records[2]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[3] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={3}
|
||||
score={records[3]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[4] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={4}
|
||||
score={records[4]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[6] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={6}
|
||||
score={records[6]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[7] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={7}
|
||||
score={records[7]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[8] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={8}
|
||||
score={records[8]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[9] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={9}
|
||||
score={records[9]}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}.bind(this))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
{ this.state.offset > 0 ?
|
||||
<Prev onClick={function(event) {
|
||||
var page = this.state.offset - this.state.limit;
|
||||
if (page < 0) { page = 0; }
|
||||
this.setState({offset: page});
|
||||
}.bind(this)}/> : null
|
||||
<div className="section">
|
||||
<table className="list records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="subheader">Song / Artist / Difficulties</th>
|
||||
<th className="subheader">SP Beginner</th>
|
||||
<th className="subheader">SP Basic</th>
|
||||
<th className="subheader">SP Difficult</th>
|
||||
<th className="subheader">SP Expert</th>
|
||||
<th className="subheader">SP Challenge</th>
|
||||
<th className="subheader">DP Basic</th>
|
||||
<th className="subheader">DP Difficult</th>
|
||||
<th className="subheader">DP Expert</th>
|
||||
<th className="subheader">DP Challenge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{songids.map(function(songid, index) {
|
||||
if (index < this.state.offset || index >= this.state.offset + this.state.limit) {
|
||||
return null;
|
||||
}
|
||||
{ (this.state.offset + this.state.limit) < songids.length ?
|
||||
<Next style={ {float: 'right'} } onClick={function(event) {
|
||||
var page = this.state.offset + this.state.limit;
|
||||
if (page >= songids.length) { return }
|
||||
this.setState({offset: page});
|
||||
}.bind(this)}/> :
|
||||
null
|
||||
|
||||
var records = this.state.records[songid];
|
||||
if (!records) {
|
||||
records = {};
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
var difficulties = this.state.songs[songid].difficulties;
|
||||
var plays = this.getPlays(records);
|
||||
return (
|
||||
<tr key={songid.toString()}>
|
||||
<td className="center">
|
||||
<div>
|
||||
<a href={Link.get('individual_score', songid)}>
|
||||
<div className="songname">{ this.state.songs[songid].name }</div>
|
||||
<div className="songartist">{ this.state.songs[songid].artist }</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="songdifficulties">
|
||||
<span>SP </span>
|
||||
{this.renderDifficulty(songid, 0)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 1)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 2)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 3)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 4)}
|
||||
</div>
|
||||
<div className="songdifficulties">
|
||||
<span>DP </span>
|
||||
{this.renderDifficulty(songid, 6)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 7)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 8)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 9)}
|
||||
</div>
|
||||
{ showplays ? <div className="songplays">#{index + 1} - {plays}{plays == 1 ? ' play' : ' plays'}</div> : null }
|
||||
</td>
|
||||
<td className={difficulties[0] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={0}
|
||||
score={records[0]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[1] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={1}
|
||||
score={records[1]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[2] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={2}
|
||||
score={records[2]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[3] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={3}
|
||||
score={records[3]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[4] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={4}
|
||||
score={records[4]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[6] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={6}
|
||||
score={records[6]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[7] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={7}
|
||||
score={records[7]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[8] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={8}
|
||||
score={records[8]}
|
||||
/>
|
||||
</td>
|
||||
<td className={difficulties[9] > 0 ? "" : "nochart"}>
|
||||
<HighScore
|
||||
players={this.state.players}
|
||||
songid={songid}
|
||||
chart={9}
|
||||
score={records[9]}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}.bind(this))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
{ this.state.offset > 0 ?
|
||||
<Prev onClick={function(event) {
|
||||
var page = this.state.offset - this.state.limit;
|
||||
if (page < 0) { page = 0; }
|
||||
this.setState({offset: page});
|
||||
}.bind(this)}/> : null
|
||||
}
|
||||
{ (this.state.offset + this.state.limit) < songids.length ?
|
||||
<Next style={ {float: 'right'} } onClick={function(event) {
|
||||
var page = this.state.offset + this.state.limit;
|
||||
if (page >= songids.length) { return }
|
||||
this.setState({offset: page});
|
||||
}.bind(this)}/> :
|
||||
null
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
@ -298,7 +298,7 @@ var rivals_view = React.createClass({
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<td><Rival userid={rival.userid} player={player} /></td>
|
||||
<Rival userid={rival.userid} player={player} />
|
||||
{ rival.active ?
|
||||
<div className="pill">active</div> :
|
||||
null
|
||||
|
||||
@ -85,8 +85,8 @@ var network_scores = React.createClass({
|
||||
<tr>
|
||||
{ window.shownames ? <th>Name</th> : null }
|
||||
<th>Timestamp</th>
|
||||
<th>Song</th>
|
||||
<th>Chart</th>
|
||||
<th>Song / Artist</th>
|
||||
<th>Difficulty</th>
|
||||
<th>Score</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -180,7 +180,7 @@ var top_scores = React.createClass({
|
||||
},
|
||||
{
|
||||
name: 'Grade',
|
||||
render: function(topscore) { return topscore.rank; },
|
||||
render: function(topscore) { return <span className="grade">{topscore.rank}</span>; },
|
||||
},
|
||||
{
|
||||
name: 'Score',
|
||||
|
||||
@ -104,7 +104,7 @@ div.score span.score {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
div.score span.grade {
|
||||
div.score span.grade, table.topscores span.grade {
|
||||
font-weight: bold;
|
||||
padding-right: 3px;
|
||||
}
|
||||
@ -114,7 +114,7 @@ div.songname {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
div.songartist, div.songgenre, div.songdifficulty, div.songplays {
|
||||
div.songartist, div.songgenre, div.songdifficulty, div.songdifficulties, div.songplays {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
@ -152,9 +152,9 @@ span.loading {
|
||||
}
|
||||
|
||||
span.raised {
|
||||
font-style: italic;
|
||||
font-size: small;
|
||||
font-size: smaller;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
dl {
|
||||
|
||||
@ -29,6 +29,10 @@ table.list tbody td, table.add tbody td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table.list tr.header td {
|
||||
vertical-align: middle ! important;
|
||||
}
|
||||
|
||||
table.list tbody td {
|
||||
border: 1px solid #6a6a6a;
|
||||
padding: 10px;
|
||||
|
||||
@ -104,7 +104,7 @@ div.score span.score {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
div.score span.grade {
|
||||
div.score span.grade, table.topscores span.grade {
|
||||
font-weight: bold;
|
||||
padding-right: 3px;
|
||||
}
|
||||
@ -114,7 +114,7 @@ div.songname {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
div.songartist, div.songgenre, div.songdifficulty, div.songplays {
|
||||
div.songartist, div.songgenre, div.songdifficulty, div.songdifficulties, div.songplays {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
@ -152,9 +152,9 @@ span.loading {
|
||||
}
|
||||
|
||||
span.raised {
|
||||
font-style: italic;
|
||||
font-size: small;
|
||||
font-size: smaller;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
dl {
|
||||
|
||||
@ -29,6 +29,10 @@ table.list tbody td, table.add tbody td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table.list tr.header td {
|
||||
vertical-align: middle ! important;
|
||||
}
|
||||
|
||||
table.list tbody td {
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user