Sort the teams accordings to match and point differential

js/utils/sort.js

@@ -0,0 +1,73 @@
+
+/**
+ * Constants for the ordering in which the sorting
+ * algorithm should bring the elements.
+ */
+export const Order = {
+    ascending : 1,
+    descending: 2
+};
+
+/**
+ * A sorting function that can be used to sort any kind of data
+ * given an applicable comparator. Said comparator will take in two
+ * elements of the given array `data`, and produce an integer result
+ * which can be interpreted as follows:
+ * ```
+ * comparator(a, b) < 0 => a < b
+ * comparator(a, b) = 0 => a = b
+ * comparator(a, b) > 0 => a > b
+ * ```
+ * The parameter order should be given as one of the constants in Order.
+ * Said `order` parameter is optional; it will default to ascending.
+ *
+ * @param {T[]} data The array that is to be sorted.
+ * @param {(T, T) => int} comparator A function which can be used
+ *     to compare any two elemments from the given array.
+ * @param {int} order The order in which the data should be sorted,
+ *     as defined in Order.
+ * @return An array with the elements from data sorted in the given order.
+ */
+export function sort(data, comparator, order) {
+    if(order === undefined) {
+        order = Order.ascending;
+    }
+    let target = data.slice();
+    return sortToTarget(data, target, 0, data.length, comparator, order);
+}
+
+function sortToTarget(data, target, start, end, comparator, order) {
+    if(end - start < 2) {
+        return data;
+    }
+
+    let middle = Math.floor((end + start) / 2);
+    
+    sortToTarget(target, data, start, middle, comparator, order);
+    sortToTarget(target, data, middle, end, comparator, order);
+
+    return merge(data, target, start, middle, end, comparator, order);
+}
+
+function merge(data, target, start, middle, end, comparator, order) {
+    let i = start;
+    let j = middle;
+
+    for(let k = start; k < end; k++) {
+        if(order === Order.ascending) {
+            if(i < middle && (j >= end || comparator(data[i], data[j]) >= 0)) {
+                target[k] = data[i++];
+            } else {
+                target[k] = data[j++];
+            }
+        } else {
+            if(i < middle && (j >= end || comparator(data[i], data[j]) <= 0)) {
+                target[k] = data[i++];
+            } else {
+                target[k] = data[j++];
+            }
+        }
+    }
+
+    return target;
+}

pages/tournament-statistics.js

@@ -11,6 +11,7 @@ import {
 import { TurniereNavigation } from '../js/components/Navigation';
 import { BigImage } from '../js/components/BigImage';
 import { Footer } from '../js/components/Footer';
+import { Order, sort } from '../js/utils/sort';
 
 
 class TeamRow extends React.Component {
@@ -22,8 +23,8 @@ class TeamRow extends React.Component {
         return (
             <tr>
                 <td className="w-100">{this.findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
-                <td>{ this.props.teamToShow.winlossdifferential }</td>
+                <td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
-                <td>{ this.props.teamToShow.pointDifferential }</td>
+                <td className="text-center">{ this.props.teamToShow.pointDifferential }</td>
             </tr>
         );
     }
@@ -46,18 +47,29 @@ class StatisticsComponent extends React.Component {
     }
 
     render() {
+        let performances = this.props.data.groupPhasePerformances;
+
+        /**
+         * comparison(p1, p2) < 0 => p1 < p2
+         * comparison(p1, p2) = 0 => p1 = p2
+         * comparison(p1, p2) > 0 => p1 > p2
+         */
+        let sortedPerformances = sort(performances, (p1, p2) => {
+            return (p2.winlossdifferential - p1.winlossdifferential) * 100 + (p2.pointDifferential - p1.pointDifferential);
+        }, Order.descending);
+
         return (
             <Card className="shadow">
                 <CardBody>
                     <h1 className="custom-font">Turnier-Statistiken für {this.props.data.tournament.name}</h1>
                     <Table className="table-striped mt-3">
-                        <thead>
-                            <th>Team Name</th>
-                            <th>Match Differenz</th>
-                            <th>Punkt Differenz</th>
-                        </thead>
                         <tbody>
-                            { this.props.data.groupPhasePerformances.map((team, index) => (
+                            <tr>
+                                <th>Team Name</th>
+                                <th className="text-center">Match Differenz</th>
+                                <th className="text-center">Punkt Differenz</th>
+                            </tr>
+                            { sortedPerformances.map((team, index) => (
                                 <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
                             )) }
                         </tbody>
@@ -74,29 +86,6 @@ class StatisticsTournamentPage extends React.Component {
         return {query};
     }
 
-/*
-                    team: 0x1234 // New York Excelsior
-                    team: 0x1235 // Los Angeles Gladiators
-                    team: 0x1236 // San Francisco Shock
-                    team: 0x1237 // Vancouver Titans
-                    team: 0x1238 // London Spitfire
-                    team: 0x1239 //Dallas Fuel
-                    team: 0x123a // Chengdu Hunters
-                    team: 0x123b // Boston Uprising
-                    team: 0x123c // Paris Eternal
-                    team: 0x123d // Philadelphia Fusion
-                    team: 0x123e // Hangzhou Spark
-                    team: 0x123f // Houston Outlaws
-                    team: 0x1240 // Shanghai Dragons
-                    team: 0x1241 // Los Angeles Valiant
-                    team: 0x1242 // Seoul Dynasty
-                    team: 0x1243 // Atlanta Reign
-                    team: 0x1244 // Toronto Defiant
-                    team: 0x1245 // Florida Mayhem
-                    team: 0x1246 // Washington Justice
-                    team: 0x1247 // Guangzhou Charge
-*/
-
     render() {
         let tournamentStatistics = {
             tournament: {
@@ -244,7 +233,7 @@ class StatisticsTournamentPage extends React.Component {
         };
 
         return (
-            <div>
+            <div className="main">
                 <Head>
                     <title>{tournamentStatistics.tournament.name}: turnie.re</title>
                 </Head>