1
0
mirror of synced 2024-12-15 15:51:15 +01:00
bemaniutils/bemani/frontend/static/controllers/jubeat/jubility.react.js

300 lines
11 KiB
JavaScript

/*** @jsx React.DOM */
var valid_versions = Object.keys(window.versions);
var pagenav = new History(valid_versions);
var jubility_view = createReactClass({
getInitialState: function(props) {
var profiles = Object.keys(window.player);
return {
player: window.player,
songs: window.songs,
profiles: profiles,
version: pagenav.getInitialState(profiles[profiles.length - 1]),
};
},
componentDidMount: function() {
pagenav.onChange(function(version) {
this.setState({version: version});
}.bind(this));
this.refreshProfile();
},
refreshProfile: function() {
AJAX.get(
Link.get('refresh'),
function(response) {
var profiles = Object.keys(response.player);
this.setState({
player: response.player,
profiles: profiles,
});
setTimeout(this.refreshProfile, 5000);
}.bind(this)
);
},
convertChart: function(chart) {
switch(chart) {
case 0:
return 'Basic';
case 1:
return 'Advanced';
case 2:
return 'Extreme';
case 3:
return 'Hard Mode Basic';
case 4:
return 'Hard Mode Advanced';
case 5:
return 'Hard Mode Extreme';
default:
return 'u broke it';
}
},
renderJubilityBreakdown: function(player) {
if (this.state.version == 13) // festo
return (
<div className='row'>
{this.renderFestoJubilityTable(player, true)}
{this.renderFestoJubilityTable(player, false)}
</div>
);
if (this.state.version == 12) // clan
return (
<div className='row'>
{this.renderClanJubilityTable(player)}
</div>
);
return null;
},
renderClanJubilityTable: function(player) {
if (typeof player.chart === 'undefined' || player.chart.length == 0) {
return null;
}
return(
<div className='col-6 col-12-medium'>
<p>
<b><b>Chart breakdown</b></b>
</p>
<p>Individual song jubility gets averaged to calculate player total jubility.</p>
<Table
className='list jubility'
columns={[
{
name: 'Song',
render: function(entry) {
return (
<a href={Link.get('individual_score', entry.songid, this.convertChart(entry.chart))}>
<div>{ this.state.songs[entry.songid].name }</div>
</a>
);
}.bind(this),
},
{
name: 'Hard Mode',
render: function(entry) { return entry.hard_mode ? 'Yes' : 'No'; }
},
{
name: 'Jubility',
render: function(entry) { return (entry.value / 100.0).toFixed(2); },
sort: function(a, b) {
return a.value - b.value;
},
reverse: true,
},
]}
defaultsort='Jubility'
rows={player.chart}
/>
</div>
);
},
renderFestoJubilityTable: function(player, pickup) {
if (pickup == true)
jubilityChart = player.pick_up_chart;
else
jubilityChart = player.common_chart;
if (typeof jubilityChart === 'undefined' || jubilityChart.length == 0) {
return null;
}
return(
<div className='col-6 col-12-medium'>
<p>
<b>
{pickup == true ? <b>Pick up chart breakdown</b> : <b>Common chart breakdown</b>}
</b>
</p>
<p>Individual song jubility gets added to calculate total jubility.</p>
<Table
className='list jubility'
columns={[
{
name: 'Song',
render: function(entry) {
return (
<a href={Link.get('individual_score', entry.music_id, this.convertChart(entry.seq))}>
<div>{ this.state.songs[entry.music_id].name }</div>
</a>
);
}.bind(this),
},
{
name: 'Hard Mode',
render: function(entry) { return entry.seq >= 3 ? 'Yes' : 'No'; }
},
{
name: 'Music Rate',
render: function(entry) { return entry.music_rate.toFixed(1) + '%'; },
sort: function(a, b) {
return a.music_rate - b.music_rate;
},
reverse: true,
},
{
name: 'Jubility',
render: function(entry) { return entry.value.toFixed(1); },
sort: function(a, b) {
return a.value - b.value;
},
reverse: true,
},
]}
defaultsort='Jubility'
rows={jubilityChart}
/>
</div>
);
},
renderJubility: function(player) {
return(
// version == prop ( No Jubility )
this.state.version == 10 ?
<div>
<p>This version of jubeat doesn't support Jubility</p>
</div>
:
// version == qubell ( No Jubility )
this.state.version == 11 ?
<div>
<p>This version of jubeat doesn't support Jubility</p>
</div>
:
// version == festo
this.state.version == 13 ?
<div>
<LabelledSection label='Jubility'>
{(player.common_jubility+player.pick_up_jubility).toFixed(1)}
</LabelledSection>
<LabelledSection label='Common Jubility'>
{player.common_jubility.toFixed(1)}
</LabelledSection>
<LabelledSection label='Pick up Jubility'>
{player.pick_up_jubility.toFixed(1)}
</LabelledSection>
</div>
:
// Default which version >= Saucer except qubell and festo
this.state.version >= 8 ?
<div>
<LabelledSection label='Jubility'>
{player.jubility / 100}
</LabelledSection>
</div>
:
<div>
<p>This version of jubeat doesn't support Jubility</p>
</div>
)
},
render: function() {
if (this.state.player[this.state.version]) {
var player = this.state.player[this.state.version];
var item = Object.keys(window.versions).map(function(k){
return window.versions[k]
})
return (
<div>
<section>
<p>
<b>
<a href={Link.get('profile', null, this.state.version)}>&larr; Back To Profile</a>
</b>
</p>
</section>
<section>
<h3>{player.name}'s jubility</h3>
<p>
{this.state.profiles.map(function(version) {
if (version < 12) {
// No breakdown here, no point in displaying.
return null;
}
return (
<Nav
title={window.versions[version]}
active={this.state.version == version}
onClick={function(event) {
if (this.state.version == version) { return; }
this.setState({
version: version,
});
pagenav.navigate(version);
}.bind(this)}
/>
);
}.bind(this))}
</p>
</section>
<section>
{this.renderJubility(player)}
</section>
<section>
{this.renderJubilityBreakdown(player)}
</section>
</div>
);
} else {
var item = Object.keys(window.versions).map(function(k){
return window.versions[k]
})
return (
<div>
<section>
<p>
<SelectVersion
name='version'
value={ item.indexOf(item[this.state.version - 1]) }
versions={ item }
onChange={function(event) {
var version = item.indexOf(item[event]) + 1
if (this.state.version == version) { return; }
this.setState({version: version});
pagenav.navigate(version);
}.bind(this)}
/>
</p>
</section>
<section>
<p>This player has no profile for {window.versions[this.state.version]}!</p>
</section>
</div>
);
}
},
});
ReactDOM.render(
React.createElement(jubility_view, null),
document.getElementById('content')
);