300 lines
11 KiB
JavaScript
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)}>← 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')
|
|
);
|