From 21fb210439fbe4b63b8f8d3082d520bc8dbac213 Mon Sep 17 00:00:00 2001
From: Jennifer Taylor <dragonminded@dragonminded.com>
Date: Sat, 8 Oct 2022 17:39:22 +0000
Subject: [PATCH] Apply tweaks to reflec frontend.

---
 bemani/frontend/reflec/reflec.py              |  36 +--
 .../controllers/reflec/allplayers.react.js    |   2 +-
 .../static/controllers/reflec/player.react.js |   6 +-
 .../controllers/reflec/records.react.js       | 214 +++++++++---------
 .../static/controllers/reflec/scores.react.js |  12 +-
 .../controllers/reflec/topscores.react.js     |  11 +-
 6 files changed, 146 insertions(+), 135 deletions(-)

diff --git a/bemani/frontend/reflec/reflec.py b/bemani/frontend/reflec/reflec.py
index ab978a5..e5ca28e 100644
--- a/bemani/frontend/reflec/reflec.py
+++ b/bemani/frontend/reflec/reflec.py
@@ -38,17 +38,17 @@ class ReflecBeatFrontend(FrontendBase):
         formatted_score['achievement_rate'] = score.data.get_int('achievement_rate', -1)
         formatted_score['miss_count'] = score.data.get_int('miss_count', -1)
         formatted_score['clear_type'] = {
-            ReflecBeatBase.CLEAR_TYPE_NO_PLAY: 'No Play',
-            ReflecBeatBase.CLEAR_TYPE_FAILED: 'Failed',
-            ReflecBeatBase.CLEAR_TYPE_CLEARED: 'Cleared',
-            ReflecBeatBase.CLEAR_TYPE_HARD_CLEARED: 'Hard Cleared',
-            ReflecBeatBase.CLEAR_TYPE_S_HARD_CLEARED: 'S-Hard Cleared',
-        }.get(score.data.get_int('clear_type'), 'Failed')
+            ReflecBeatBase.CLEAR_TYPE_NO_PLAY: 'NO PLAY',
+            ReflecBeatBase.CLEAR_TYPE_FAILED: 'FAILED',
+            ReflecBeatBase.CLEAR_TYPE_CLEARED: 'CLEARED',
+            ReflecBeatBase.CLEAR_TYPE_HARD_CLEARED: 'HARD CLEARED',
+            ReflecBeatBase.CLEAR_TYPE_S_HARD_CLEARED: 'S-HARD CLEARED',
+        }.get(score.data.get_int('clear_type'), 'FAILED')
         formatted_score['combo_type'] = {
             ReflecBeatBase.COMBO_TYPE_NONE: '',
-            ReflecBeatBase.COMBO_TYPE_ALMOST_COMBO: 'Almost Full Combo',
-            ReflecBeatBase.COMBO_TYPE_FULL_COMBO: 'Full Combo',
-            ReflecBeatBase.COMBO_TYPE_FULL_COMBO_ALL_JUST: 'Full Combo + All Just',
+            ReflecBeatBase.COMBO_TYPE_ALMOST_COMBO: 'ALMOST FULL COMBO',
+            ReflecBeatBase.COMBO_TYPE_FULL_COMBO: 'FULL COMBO',
+            ReflecBeatBase.COMBO_TYPE_FULL_COMBO_ALL_JUST: 'FULL COMBO + ALL JUST',
         }.get(score.data.get_int('combo_type'), '')
         formatted_score['medal'] = score.data.get_int('combo_type') * 1000 + score.data.get_int('clear_type')
         return formatted_score
@@ -59,17 +59,17 @@ class ReflecBeatFrontend(FrontendBase):
         formatted_attempt['achievement_rate'] = attempt.data.get_int('achievement_rate', -1)
         formatted_attempt['miss_count'] = attempt.data.get_int('miss_count', -1)
         formatted_attempt['clear_type'] = {
-            ReflecBeatBase.CLEAR_TYPE_NO_PLAY: 'No Play',
-            ReflecBeatBase.CLEAR_TYPE_FAILED: 'Failed',
-            ReflecBeatBase.CLEAR_TYPE_CLEARED: 'Cleared',
-            ReflecBeatBase.CLEAR_TYPE_HARD_CLEARED: 'Hard Cleared',
-            ReflecBeatBase.CLEAR_TYPE_S_HARD_CLEARED: 'S-Hard Cleared',
-        }.get(attempt.data.get_int('clear_type'), 'Failed')
+            ReflecBeatBase.CLEAR_TYPE_NO_PLAY: 'NO PLAY',
+            ReflecBeatBase.CLEAR_TYPE_FAILED: 'FAILED',
+            ReflecBeatBase.CLEAR_TYPE_CLEARED: 'CLEARED',
+            ReflecBeatBase.CLEAR_TYPE_HARD_CLEARED: 'HARD CLEARED',
+            ReflecBeatBase.CLEAR_TYPE_S_HARD_CLEARED: 'S-HARD CLEARED',
+        }.get(attempt.data.get_int('clear_type'), 'FAILED')
         formatted_attempt['combo_type'] = {
             ReflecBeatBase.COMBO_TYPE_NONE: '',
-            ReflecBeatBase.COMBO_TYPE_ALMOST_COMBO: 'Almost Full Combo',
-            ReflecBeatBase.COMBO_TYPE_FULL_COMBO: 'Full Combo',
-            ReflecBeatBase.COMBO_TYPE_FULL_COMBO_ALL_JUST: 'Full Combo + All Just',
+            ReflecBeatBase.COMBO_TYPE_ALMOST_COMBO: 'ALMOST FULL COMBO',
+            ReflecBeatBase.COMBO_TYPE_FULL_COMBO: 'FULL COMBO',
+            ReflecBeatBase.COMBO_TYPE_FULL_COMBO_ALL_JUST: 'FULL COMBO + ALL JUST',
         }.get(attempt.data.get_int('combo_type'), '')
         formatted_attempt['medal'] = attempt.data.get_int('combo_type') * 1000 + attempt.data.get_int('clear_type')
         return formatted_attempt
diff --git a/bemani/frontend/static/controllers/reflec/allplayers.react.js b/bemani/frontend/static/controllers/reflec/allplayers.react.js
index f84bbcf..9dea099 100644
--- a/bemani/frontend/static/controllers/reflec/allplayers.react.js
+++ b/bemani/frontend/static/controllers/reflec/allplayers.react.js
@@ -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;
diff --git a/bemani/frontend/static/controllers/reflec/player.react.js b/bemani/frontend/static/controllers/reflec/player.react.js
index 3cb5867..59e3164 100644
--- a/bemani/frontend/static/controllers/reflec/player.react.js
+++ b/bemani/frontend/static/controllers/reflec/player.react.js
@@ -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>
diff --git a/bemani/frontend/static/controllers/reflec/records.react.js b/bemani/frontend/static/controllers/reflec/records.react.js
index cba385d..216d480 100644
--- a/bemani/frontend/static/controllers/reflec/records.react.js
+++ b/bemani/frontend/static/controllers/reflec/records.react.js
@@ -57,10 +57,10 @@ var HighScore = React.createClass({
                     <span className="score">{this.props.score.points}</span>
                     <span className="label">M</span>
                     <span className="score">{this.props.score.miss_count < 0 ? '-' : this.props.score.miss_count}</span>
-                </div>
-                <div>
-                    <span className="label">Combo</span>
-                    <span className="score">{this.props.score.combo < 0 ? '-' : this.props.score.combo}</span>
+                    {this.props.score.combo > 0 ? <span>
+                        <span className="label">Combo</span>
+                        <span className="score">{this.props.score.combo < 0 ? '-' : this.props.score.combo}</span>
+                    </span> : null}
                 </div>
                 <div>
                     <span className="status">{this.props.score.combo_type}</span>
@@ -231,8 +231,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">Basic</td>
                                             <td className="subheader">Medium</td>
                                             <td className="subheader">Hard</td>
@@ -501,107 +503,109 @@ var network_records = React.createClass({
 
     renderBySongIDList: function(songids, showplays) {
         return (
-            <table className="list records">
-                <thead>
-                    <tr>
-                        <th className="subheader">Song</th>
-                        <th className="subheader">Basic</th>
-                        <th className="subheader">Medium</th>
-                        <th className="subheader">Hard</th>
-                        <th className="subheader">Special</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)}
-                                        <span> / </span>
-                                        {this.renderDifficulty(songid, 3)}
-                                    </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>
-                            </tr>
-                        );
-                    }.bind(this))}
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td colSpan={6}>
-                            { 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">Basic</th>
+                            <th className="subheader">Medium</th>
+                            <th className="subheader">Hard</th>
+                            <th className="subheader">Special</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)}
+                                            <span> / </span>
+                                            {this.renderDifficulty(songid, 3)}
+                                        </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>
+                                </tr>
+                            );
+                        }.bind(this))}
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td colSpan={6}>
+                                { 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>
         );
     },
 
diff --git a/bemani/frontend/static/controllers/reflec/scores.react.js b/bemani/frontend/static/controllers/reflec/scores.react.js
index 0300a9e..a136e62 100644
--- a/bemani/frontend/static/controllers/reflec/scores.react.js
+++ b/bemani/frontend/static/controllers/reflec/scores.react.js
@@ -76,10 +76,10 @@ var network_scores = React.createClass({
                     <span className="score">{score.points}</span>
                     <span className="label">M</span>
                     <span className="score">{score.miss_count < 0 ? '-' : score.miss_count}</span>
-                </div>
-                <div>
-                    <span className="label">Combo</span>
-                    <span className="score">{score.combo < 0 ? '-' : score.combo}</span>
+                    {score.combo > 0 ? <span>
+                        <span className="label">Combo</span>
+                        <span className="score">{score.combo < 0 ? '-' : score.combo}</span>
+                    </span> : null}
                 </div>
                 <div>
                     <span className="status">{score.combo_type}</span>
@@ -98,8 +98,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>
diff --git a/bemani/frontend/static/controllers/reflec/topscores.react.js b/bemani/frontend/static/controllers/reflec/topscores.react.js
index d6b35a6..0b7f7e3 100644
--- a/bemani/frontend/static/controllers/reflec/topscores.react.js
+++ b/bemani/frontend/static/controllers/reflec/topscores.react.js
@@ -151,11 +151,18 @@ var top_scores = React.createClass({
                             },
                             {
                                 name: 'Combo',
-                                render: function(topscore) { return topscore.combo > 0 ? topscore.combo : '-'; },
+                                render: function(topscore) { return topscore.combo > 0 ? topscore.combo : ''; },
+                                sort: function(a, b) {
+                                    return a.combo - b.combo;
+                                },
+                                reverse: true,
                             },
                             {
                                 name: 'Miss Count',
-                                render: function(topscore) { return topscore.miss_count > 0 ? topscore.miss_count : '-'; },
+                                render: function(topscore) { return topscore.miss_count; },
+                                sort: function(a, b) {
+                                    return a.miss_count - b.miss_count;
+                                },
                             },
                         ]}
                         defaultsort='Score'