Tweak Museca frontend, add judgement stats to all pages.
This commit is contained in:
Jennifer Taylor
parent
36ca2c777e
commit
2738527d9c
@ -50,6 +50,7 @@ class MusecaFrontend(FrontendBase):
|
||||
MusecaBase.CLEAR_TYPE_FULL_COMBO: 'Full Combo',
|
||||
}.get(score.data.get_int('clear_type'), 'Failed')
|
||||
formatted_score['medal'] = score.data.get_int('clear_type')
|
||||
formatted_score['stats'] = score.data.get_dict('stats')
|
||||
return formatted_score
|
||||
|
||||
def format_attempt(self, userid: UserID, attempt: Attempt) -> Dict[str, Any]:
|
||||
@ -72,6 +73,7 @@ class MusecaFrontend(FrontendBase):
|
||||
MusecaBase.CLEAR_TYPE_FULL_COMBO: 'Full Combo',
|
||||
}.get(attempt.data.get_int('clear_type'), 'Failed')
|
||||
formatted_attempt['medal'] = attempt.data.get_int('clear_type')
|
||||
formatted_attempt['stats'] = attempt.data.get_dict('stats')
|
||||
return formatted_attempt
|
||||
|
||||
def format_profile(self, profile: Profile, playstats: ValidatedDict) -> Dict[str, Any]:
|
||||
|
||||
@ -148,13 +148,13 @@ var top_scores = React.createClass({
|
||||
);
|
||||
return has_stats ? <div title="perfect / great / good / poor / miss">
|
||||
{topscore.stats.perfect}
|
||||
<span> / </span>
|
||||
<span> / </span>
|
||||
{topscore.stats.great}
|
||||
<span> / </span>
|
||||
<span> / </span>
|
||||
{topscore.stats.good}
|
||||
<span> / </span>
|
||||
<span> / </span>
|
||||
{topscore.stats.poor}
|
||||
<span> / </span>
|
||||
<span> / </span>
|
||||
{topscore.stats.miss}
|
||||
</div> : null;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -27,20 +27,32 @@ var HighScore = React.createClass({
|
||||
if (!this.props.score) {
|
||||
return null;
|
||||
}
|
||||
has_stats = (
|
||||
this.props.score.stats.critical > 0 ||
|
||||
this.props.score.stats.near > 0 ||
|
||||
this.props.score.stats.error > 0
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="score">
|
||||
<div>
|
||||
<span className="label">Score</span>
|
||||
<span className="score">{this.props.score.points}</span>
|
||||
<span className="status">{this.props.score.grade}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Combo</span>
|
||||
<span className="score">{this.props.score.combo < 0 ? '-' : this.props.score.combo}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="status">{this.props.score.clear_type}</span>
|
||||
<span className="status">{this.props.score.grade}</span>
|
||||
</div>
|
||||
{has_stats ? <div title="critical / near / error">
|
||||
{this.props.score.stats.critical}
|
||||
<span> / </span>
|
||||
{this.props.score.stats.near}
|
||||
<span> / </span>
|
||||
{this.props.score.stats.error}
|
||||
</div> : null}
|
||||
<div>
|
||||
<span className="status">{this.props.score.clear_type.toUpperCase()}</span>
|
||||
</div>
|
||||
{ this.props.score.userid && window.shownames ?
|
||||
<div><a href={Link.get('player', this.props.score.userid)}>{
|
||||
@ -206,8 +218,10 @@ var network_records = React.createClass({
|
||||
if (paginate && curpage != this.state.subtab) { return null; }
|
||||
|
||||
return (
|
||||
<tr key={((-songid) - 1).toString()}>
|
||||
<td className="subheader">{ this.state.versions[(-songid) - 1] }</td>
|
||||
<tr key={((-songid) - 1).toString()} className="header">
|
||||
<td className="subheader">{
|
||||
!paginate ? this.state.versions[(-songid) - 1] : "Song / Artist / Difficulties"
|
||||
}</td>
|
||||
<td className="subheader">{ 'Green (\u7FE0)' }</td>
|
||||
<td className="subheader">{ 'Orange (\u6A59)' }</td>
|
||||
<td className="subheader">{ 'Red (\u6731)' }</td>
|
||||
@ -415,96 +429,98 @@ var network_records = React.createClass({
|
||||
|
||||
renderBySongIDList: function(songids, showplays) {
|
||||
return (
|
||||
<table className="list records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="subheader">Song</th>
|
||||
<th className="subheader">{ 'Green (\u7FE0)' }</th>
|
||||
<th className="subheader">{ 'Orange (\u6A59)' }</th>
|
||||
<th className="subheader">{ 'Red (\u6731)' }</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 plays = this.getPlays(records);
|
||||
var difficulties = this.state.songs[songid].difficulties;
|
||||
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">
|
||||
{this.renderDifficulty(songid, 0)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 1)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 2)}
|
||||
</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>
|
||||
</tr>
|
||||
);
|
||||
}.bind(this))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
{ 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">{ 'Green (\u7FE0)' }</th>
|
||||
<th className="subheader">{ 'Orange (\u6A59)' }</th>
|
||||
<th className="subheader">{ 'Red (\u6731)' }</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 plays = this.getPlays(records);
|
||||
var difficulties = this.state.songs[songid].difficulties;
|
||||
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">
|
||||
{this.renderDifficulty(songid, 0)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 1)}
|
||||
<span> / </span>
|
||||
{this.renderDifficulty(songid, 2)}
|
||||
</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>
|
||||
</tr>
|
||||
);
|
||||
}.bind(this))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
{ 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>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
@ -58,19 +58,29 @@ var network_scores = React.createClass({
|
||||
},
|
||||
|
||||
renderScore: function(score) {
|
||||
has_stats = (
|
||||
score.stats.critical > 0 ||
|
||||
score.stats.near > 0 ||
|
||||
score.stats.error > 0
|
||||
);
|
||||
return (
|
||||
<div className="score">
|
||||
<div>
|
||||
<span className="label">Score</span>
|
||||
<span className="score">{score.points}</span>
|
||||
<span className="status">{score.grade}</span>
|
||||
<div>
|
||||
</div>
|
||||
<span className="label">Combo</span>
|
||||
<span className="score">{score.combo < 0 ? '-' : score.combo}</span>
|
||||
<span className="status">{score.grade}</span>
|
||||
</div>
|
||||
{has_stats ? <div title="critical / near / error">
|
||||
{score.stats.critical}
|
||||
<span> / </span>
|
||||
{score.stats.near}
|
||||
<span> / </span>
|
||||
{score.stats.error}
|
||||
</div> : null}
|
||||
<div>
|
||||
<span className="status">{score.clear_type}</span>
|
||||
<span className="status">{score.clear_type.toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -84,8 +94,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>
|
||||
|
||||
@ -88,7 +88,7 @@ var top_scores = React.createClass({
|
||||
}.bind(this))}
|
||||
</div>
|
||||
<div className="section">
|
||||
<Table
|
||||
<Table
|
||||
className="list topscores"
|
||||
columns={[
|
||||
{
|
||||
@ -112,7 +112,7 @@ var top_scores = React.createClass({
|
||||
},
|
||||
{
|
||||
name: 'Clear Type',
|
||||
render: function(topscore) { return topscore.clear_type; },
|
||||
render: function(topscore) { return topscore.clear_type.toUpperCase(); },
|
||||
},
|
||||
{
|
||||
name: 'Score',
|
||||
@ -125,6 +125,27 @@ var top_scores = React.createClass({
|
||||
{
|
||||
name: 'Combo',
|
||||
render: function(topscore) { return topscore.combo > 0 ? topscore.combo : '-'; },
|
||||
sort: function(a, b) {
|
||||
return a.combo - b.combo;
|
||||
},
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
name: 'Judgement Stats',
|
||||
render: function(topscore) {
|
||||
has_stats = (
|
||||
topscore.stats.critical > 0 ||
|
||||
topscore.stats.near > 0 ||
|
||||
topscore.stats.error > 0
|
||||
);
|
||||
return has_stats ? <div title="critical / near / error">
|
||||
{topscore.stats.critical}
|
||||
<span> / </span>
|
||||
{topscore.stats.near}
|
||||
<span> / </span>
|
||||
{topscore.stats.error}
|
||||
</div> : null;
|
||||
}
|
||||
},
|
||||
]}
|
||||
defaultsort='Score'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user