Release v1.9.8 (#63)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.9.3",
+  "version": "1.9.7",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {

server/apib/data_structures/_log.apib

@@ -85,6 +85,7 @@
             + `LIGHT`
             + `HEAVY`
             + `AIR`
+            + `BOAT`
             + `UNKNOWN`
 + shooterVehicle: `FV-720 Mora` (string, optional) - vehicle in whiock the shooting player sat
 + magazine: `30 mm APFSDS` (string, optional) - magazine name used to execute the kill

server/apib/data_structures/_war.apib

@@ -6,6 +6,8 @@ A war as used in statistics
 + title: `Battle No.1` (string, required) - the display neme of the war
 + date: `2018-02-24T20:01:25.825Z` (string, required) - war start timestamp
 + endDate: `2018-02-24T22:31:26.855Z` (string, required) - war end timestamp
++ fractionMappingBlufor: `BLUFOR` (enum[string], required) - display name mapping for Blufor fraction
++ fractionMappingOpfor: `OPFOR`  (enum[string], required) - display name mapping for Opfor fraction
 + ptBlufor: 11 (number, required) - final points fraction Blufor
 + ptOpfor: 12 (number, required) - final points fraction Opfor
 + playersBlufor: 36 (number, required) - player count of fraction Blufor

server/models/decoration.js

@@ -10,7 +10,7 @@ const DecorationSchema = new Schema({
   },
   fraction: {
     type: String,
-    enum: ['BLUFOR', 'OPFOR', 'GLOBAL'],
+    enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD', 'GLOBAL'],
     required: true,
   },
   description: {

server/models/logs/vehicle.js

@@ -30,7 +30,7 @@ const LogVehicleKillSchema = new Schema({
   },
   vehicleClass: {
     type: String,
-    enum: ['LIGHT', 'HEAVY', 'AIR', 'UNKNOWN'],
+    enum: ['LIGHT', 'HEAVY', 'AIR', 'BOAT', 'UNKNOWN'],
     required: true,
   },
   magazine: {

server/models/player.js

@@ -42,6 +42,12 @@ const PlayerSchema = new Schema({
     set: (v) => Math.round(v),
     required: true,
   },
+  vehicleBoat: {
+    type: Number,
+    get: (v) => Math.round(v),
+    set: (v) => Math.round(v),
+    required: true,
+  },
   death: {
     type: Number,
     get: (v) => Math.round(v),

server/models/war.js

@@ -14,6 +14,16 @@ const WarSchema = new Schema({
   endDate: {
     type: Date,
   },
+  fractionMappingBlufor: {
+   type: String,
+   enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD'],
+   default: 'BLUFOR',
+  },
+  fractionMappingOpfor: {
+   type: String,
+   enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD'],
+   default: 'OPFOR',
+  },
   ptBlufor: {
     type: Number,
     get: (v) => Math.round(v),

server/routes/decorations.js

@@ -37,7 +37,11 @@ decorationRouter.route('/')
                 .get((req, res, next) => {
                   const filter = {};
                   if (req.query.fractFilter) {
-                    filter.fraction = req.query.fractFilter.toUpperCase();
+                    filter.fraction = {
+                      '$in': req.query.fractFilter
+                                .toUpperCase()
+                                .split(','),
+                    };
                   }
                   if (req.query.q) {
                     filter.name = {$regex: req.query.q, $options: 'i'};

server/routes/players.js

@@ -26,92 +26,100 @@ campaignPlayer.route('/ranking/:campaignId')
                   const warIds = wars.map((obj) => {
                     return obj._id;
                   });
-                  PlayerModel.find({warId: {'$in': warIds}}, (err, items) => {
-                    if (err) return next(err);
-                    if (!items || items.length === 0) {
-                      const err = new Error('No players for given campaignId');
-                      err.status = codes.notfound;
-                      return next(err);
-                    }
-
-                    const rankingItems = [];
-
-                    // check only first player to have valid steamUUID - then decide if tracked by name or by ID
-                    const usesUUID = isSteamUUID(items[0].steamUUID);
-
-                    new Set(items.map(usesUUID ? (x) => x.steamUUID : (x) => x.name))
-                      .forEach((player) => {
-                        const playerInstances = items.filter(
-                          usesUUID ? (p) => p.steamUUID === player : (p) => p.name === player);
-                        const resItem = {
-                          name: usesUUID ? playerInstances[playerInstances.length - 1].name : player,
-                          kill: 0,
-                          vehicleLight: 0,
-                          vehicleHeavy: 0,
-                          vehicleAir: 0,
-                          death: 0,
-                          friendlyFire: 0,
-                          revive: 0,
-                          respawn: 0,
-                          flagTouch: 0,
-                          travelDistance: 0,
-                          driverDistance: 0,
-                        };
-                        for (let i = 0; i < playerInstances.length; i++) {
-                          const player = playerInstances[i];
-                          resItem.kill += player.kill;
-                          resItem.death += player.death;
-                          resItem.friendlyFire += player.friendlyFire;
-                          resItem.vehicleLight += player.vehicleLight;
-                          resItem.vehicleHeavy += player.vehicleHeavy;
-                          resItem.vehicleAir += player.vehicleAir;
-                          resItem.revive += player.revive;
-                          resItem.respawn += player.respawn;
-                          resItem.flagTouch += player.flagTouch;
-                          if (player.travelDistance) {
-                            resItem.travelDistance += Math.round(player.travelDistance / 1000); // meters -> km
-                          }
-                          if (player.driverDistance) {
-                            resItem.driverDistance += Math.round(player.driverDistance / 1000); // meters -> km
-                          }
-                        }
-                        resItem.warCount = playerInstances.length;
-                        resItem.fraction = playerInstances[playerInstances.length - 1].fraction;
-                        rankingItems.push(resItem);
-                      });
-
-                    const getSortedField = (fieldName) => {
-                      let num = 1;
-                      const filteredSortResult = rankingItems.map((item) => {
-                                                               return {
-                                                                 name: item.name,
-                                                                 fraction: item.fraction,
-                                                                 [fieldName]: item[fieldName],
-                                                               };
-                                                             })
-                                                             .sort((a, b) => b[fieldName] - a[fieldName]);
-                      const res = JSON.parse(JSON.stringify(filteredSortResult));
-                      for (const entity of res) {
-                        entity.num = num++;
+                  WarModel.findOne({campaign: req.params.campaignId}, {}, {sort: {'date': -1}}, (err, latestWar) => {
+                    PlayerModel.find({warId: {'$in': warIds}}, (err, items) => {
+                      if (err) return next(err);
+                      if (!items || items.length === 0) {
+                        const err = new Error('No players for given campaignId');
+                        err.status = codes.notfound;
+                        return next(err);
                       }
-                      return res;
-                    };
 
-                    res.locals.items = {
-                      kill: getSortedField('kill'),
-                      death: getSortedField('death'),
-                      friendlyFire: getSortedField('friendlyFire'),
-                      vehicleLight: getSortedField('vehicleLight'),
-                      vehicleHeavy: getSortedField('vehicleHeavy'),
-                      vehicleAir: getSortedField('vehicleAir'),
-                      revive: getSortedField('revive'),
-                      respawn: getSortedField('respawn'),
-                      flagTouch: getSortedField('flagTouch'),
-                      travelDistance: getSortedField('travelDistance'),
-                      driverDistance: getSortedField('driverDistance'),
-                      warCount: getSortedField('warCount'),
-                    };
-                    next();
+                      const rankingItems = [];
+
+                      // check only first player to have valid steamUUID - then decide if tracked by name or by ID
+                      const usesUUID = isSteamUUID(items[0].steamUUID);
+
+                      new Set(items.map(usesUUID ? (x) => x.steamUUID : (x) => x.name))
+                        .forEach((player) => {
+                          const playerInstances = items.filter(
+                            usesUUID ? (p) => p.steamUUID === player : (p) => p.name === player);
+                          const resItem = {
+                            name: usesUUID ? playerInstances[playerInstances.length - 1].name : player,
+                            kill: 0,
+                            vehicleLight: 0,
+                            vehicleHeavy: 0,
+                            vehicleAir: 0,
+                            death: 0,
+                            friendlyFire: 0,
+                            revive: 0,
+                            respawn: 0,
+                            flagTouch: 0,
+                            travelDistance: 0,
+                            driverDistance: 0,
+                          };
+                          for (let i = 0; i < playerInstances.length; i++) {
+                            const player = playerInstances[i];
+                            resItem.kill += player.kill;
+                            resItem.death += player.death;
+                            resItem.friendlyFire += player.friendlyFire;
+                            resItem.vehicleLight += player.vehicleLight;
+                            resItem.vehicleHeavy += player.vehicleHeavy;
+                            resItem.vehicleAir += player.vehicleAir;
+                            resItem.revive += player.revive;
+                            resItem.respawn += player.respawn;
+                            resItem.flagTouch += player.flagTouch;
+                            if (player.travelDistance) {
+                              resItem.travelDistance += Math.round(player.travelDistance / 1000); // meters -> km
+                            }
+                            if (player.driverDistance) {
+                              resItem.driverDistance += Math.round(player.driverDistance / 1000); // meters -> km
+                            }
+                          }
+                          resItem.warCount = playerInstances.length;
+
+                          const latestPlayerFraction = playerInstances[playerInstances.length - 1].fraction;
+                          resItem.fraction =
+                            (latestPlayerFraction === 'OPFOR') ?
+                              latestWar.fractionMappingOpfor :
+                              latestWar.fractionMappingBlufor;
+
+                          rankingItems.push(resItem);
+                        });
+
+                      const getSortedField = (fieldName) => {
+                        let num = 1;
+                        const filteredSortResult = rankingItems.map((item) => {
+                                                                 return {
+                                                                   name: item.name,
+                                                                   fraction: item.fraction,
+                                                                   [fieldName]: item[fieldName],
+                                                                 };
+                                                               })
+                                                               .sort((a, b) => b[fieldName] - a[fieldName]);
+                        const res = JSON.parse(JSON.stringify(filteredSortResult));
+                        for (const entity of res) {
+                          entity.num = num++;
+                        }
+                        return res;
+                      };
+
+                      res.locals.items = {
+                        kill: getSortedField('kill'),
+                        death: getSortedField('death'),
+                        friendlyFire: getSortedField('friendlyFire'),
+                        vehicleLight: getSortedField('vehicleLight'),
+                        vehicleHeavy: getSortedField('vehicleHeavy'),
+                        vehicleAir: getSortedField('vehicleAir'),
+                        revive: getSortedField('revive'),
+                        respawn: getSortedField('respawn'),
+                        flagTouch: getSortedField('flagTouch'),
+                        travelDistance: getSortedField('travelDistance'),
+                        driverDistance: getSortedField('driverDistance'),
+                        warCount: getSortedField('warCount'),
+                      };
+                      next();
+                    });
                   });
                 });
               })

server/routes/users.js

@@ -168,7 +168,6 @@ users.route('/:id')
              res.locals.items = item;
            } else {
              err.status = codes.wrongrequest;
-             console.log(err);
              err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
            }
 

server/routes/wars.js

@@ -172,6 +172,11 @@ wars.route('/:id')
             return next(err);
           }
 
+          // TODO: temp solution for CC-93 - add boat kills to light vehicle kills until FE available
+          items.forEach((player) => {
+            player.vehicleLight = player.vehicleLight + player.vehicleBoat;
+          });
+
           const responseObj = item.toObject();
           responseObj.players = items;
           res.locals.items = responseObj;

server/server.js

@@ -19,8 +19,7 @@ const {exec} = require('child_process');
 // cluster mode
 const cluster = require('cluster');
 const envWorkerNum = process.env.NODE_WORKER_COUNT;
-const cpuCount = require('os').cpus().length;
-const numWorkers = (envWorkerNum) ? envWorkerNum : cpuCount;
+const numWorkers = (envWorkerNum) ? envWorkerNum : 2;
 
 // own modules
 const config = require('./config/config');

server/tools/font/DEVAJU_SANS_19.fnt

@@ -1,813 +0,0 @@
-info face="DejaVu Sans" size=19 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
-common lineHeight=23 base=18 scaleW=512 scaleH=512 pages=1 packed=0
-page id=0 file="DEVAJU_SANS_19.png"
-chars count=193
-char id=0       x=298  y=0    width=13   height=20   xoffset=-1   yoffset=3    xadvance=11   page=0    chnl=0 
-char id=10      x=0    y=0    width=22   height=22   xoffset=-1   yoffset=-1   xadvance=19   page=0    chnl=0 
-char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=17   xadvance=6    page=0    chnl=0 
-char id=33      x=500  y=42   width=4    height=16   xoffset=2    yoffset=3    xadvance=8    page=0    chnl=0 
-char id=34      x=67   y=75   width=7    height=7    xoffset=1    yoffset=3    xadvance=9    page=0    chnl=0 
-char id=35      x=40   y=59   width=15   height=16   xoffset=0    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=36      x=287  y=0    width=11   height=20   xoffset=1    yoffset=2    xadvance=13   page=0    chnl=0 
-char id=37      x=22   y=59   width=18   height=16   xoffset=0    yoffset=3    xadvance=18   page=0    chnl=0 
-char id=38      x=55   y=59   width=15   height=16   xoffset=0    yoffset=3    xadvance=14   page=0    chnl=0 
-char id=39      x=507  y=59   width=4    height=7    xoffset=1    yoffset=3    xadvance=6    page=0    chnl=0 
-char id=40      x=240  y=0    width=7    height=20   xoffset=1    yoffset=2    xadvance=8    page=0    chnl=0 
-char id=41      x=247  y=0    width=7    height=20   xoffset=0    yoffset=2    xadvance=7    page=0    chnl=0 
-char id=42      x=489  y=59   width=11   height=11   xoffset=-1   yoffset=3    xadvance=9    page=0    chnl=0 
-char id=43      x=199  y=59   width=14   height=14   xoffset=1    yoffset=5    xadvance=16   page=0    chnl=0 
-char id=44      x=74   y=75   width=5    height=7    xoffset=0    yoffset=14   xadvance=6    page=0    chnl=0 
-char id=45      x=119  y=75   width=7    height=4    xoffset=0    yoffset=10   xadvance=7    page=0    chnl=0 
-char id=46      x=115  y=75   width=4    height=5    xoffset=1    yoffset=14   xadvance=6    page=0    chnl=0 
-char id=47      x=51   y=22   width=9    height=18   xoffset=-1   yoffset=3    xadvance=6    page=0    chnl=0 
-char id=48      x=0    y=59   width=12   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=49      x=396  y=42   width=11   height=16   xoffset=1    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=50      x=407  y=42   width=11   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=51      x=418  y=42   width=11   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=52      x=429  y=42   width=13   height=16   xoffset=-1   yoffset=3    xadvance=12   page=0    chnl=0 
-char id=53      x=442  y=42   width=11   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=54      x=453  y=42   width=12   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=55      x=465  y=42   width=11   height=16   xoffset=1    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=56      x=476  y=42   width=12   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=57      x=488  y=42   width=12   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=58      x=430  y=59   width=4    height=12   xoffset=1    yoffset=7    xadvance=6    page=0    chnl=0 
-char id=59      x=152  y=59   width=5    height=15   xoffset=0    yoffset=6    xadvance=6    page=0    chnl=0 
-char id=60      x=171  y=59   width=14   height=14   xoffset=1    yoffset=5    xadvance=16   page=0    chnl=0 
-char id=61      x=30   y=75   width=14   height=8    xoffset=1    yoffset=8    xadvance=16   page=0    chnl=0 
-char id=62      x=185  y=59   width=14   height=14   xoffset=1    yoffset=5    xadvance=16   page=0    chnl=0 
-char id=63      x=12   y=59   width=10   height=16   xoffset=0    yoffset=3    xadvance=10   page=0    chnl=0 
-char id=64      x=268  y=0    width=19   height=20   xoffset=0    yoffset=2    xadvance=19   page=0    chnl=0 
-char id=65      x=78   y=42   width=15   height=16   xoffset=-1   yoffset=3    xadvance=13   page=0    chnl=0 
-char id=66      x=93   y=42   width=12   height=16   xoffset=1    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=67      x=105  y=42   width=13   height=16   xoffset=0    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=68      x=118  y=42   width=14   height=16   xoffset=1    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=69      x=132  y=42   width=11   height=16   xoffset=1    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=70      x=143  y=42   width=10   height=16   xoffset=1    yoffset=3    xadvance=11   page=0    chnl=0 
-char id=71      x=153  y=42   width=14   height=16   xoffset=0    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=72      x=167  y=42   width=13   height=16   xoffset=1    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=73      x=504  y=22   width=4    height=16   xoffset=1    yoffset=3    xadvance=6    page=0    chnl=0 
-char id=74      x=233  y=0    width=7    height=20   xoffset=-2   yoffset=3    xadvance=6    page=0    chnl=0 
-char id=75      x=180  y=42   width=13   height=16   xoffset=1    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=76      x=193  y=42   width=11   height=16   xoffset=1    yoffset=3    xadvance=11   page=0    chnl=0 
-char id=77      x=204  y=42   width=15   height=16   xoffset=1    yoffset=3    xadvance=17   page=0    chnl=0 
-char id=78      x=219  y=42   width=13   height=16   xoffset=1    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=79      x=232  y=42   width=15   height=16   xoffset=0    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=80      x=247  y=42   width=11   height=16   xoffset=1    yoffset=3    xadvance=11   page=0    chnl=0 
-char id=81      x=11   y=22   width=15   height=19   xoffset=0    yoffset=3    xadvance=15   page=0    chnl=0 
-char id=82      x=258  y=42   width=13   height=16   xoffset=1    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=83      x=271  y=42   width=12   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=84      x=283  y=42   width=14   height=16   xoffset=-1   yoffset=3    xadvance=12   page=0    chnl=0 
-char id=85      x=297  y=42   width=13   height=16   xoffset=1    yoffset=3    xadvance=14   page=0    chnl=0 
-char id=86      x=310  y=42   width=15   height=16   xoffset=-1   yoffset=3    xadvance=13   page=0    chnl=0 
-char id=87      x=325  y=42   width=21   height=16   xoffset=-1   yoffset=3    xadvance=19   page=0    chnl=0 
-char id=88      x=346  y=42   width=15   height=16   xoffset=-1   yoffset=3    xadvance=13   page=0    chnl=0 
-char id=89      x=361  y=42   width=14   height=16   xoffset=-1   yoffset=3    xadvance=12   page=0    chnl=0 
-char id=90      x=375  y=42   width=13   height=16   xoffset=0    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=91      x=254  y=0    width=7    height=20   xoffset=1    yoffset=2    xadvance=8    page=0    chnl=0 
-char id=92      x=60   y=22   width=9    height=18   xoffset=-1   yoffset=3    xadvance=6    page=0    chnl=0 
-char id=93      x=261  y=0    width=7    height=20   xoffset=0    yoffset=2    xadvance=7    page=0    chnl=0 
-char id=94      x=16   y=75   width=14   height=8    xoffset=1    yoffset=2    xadvance=16   page=0    chnl=0 
-char id=95      x=126  y=75   width=12   height=4    xoffset=-1   yoffset=20   xadvance=10   page=0    chnl=0 
-char id=96      x=100  y=75   width=8    height=6    xoffset=0    yoffset=1    xadvance=10   page=0    chnl=0 
-char id=97      x=255  y=59   width=11   height=13   xoffset=0    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=98      x=308  y=22   width=11   height=17   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=99      x=266  y=59   width=10   height=13   xoffset=0    yoffset=6    xadvance=10   page=0    chnl=0 
-char id=100     x=319  y=22   width=11   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=101     x=276  y=59   width=12   height=13   xoffset=0    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=102     x=330  y=22   width=9    height=17   xoffset=0    yoffset=2    xadvance=7    page=0    chnl=0 
-char id=103     x=339  y=22   width=11   height=17   xoffset=0    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=104     x=350  y=22   width=11   height=17   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=105     x=361  y=22   width=4    height=17   xoffset=1    yoffset=2    xadvance=6    page=0    chnl=0 
-char id=106     x=39   y=0    width=6    height=21   xoffset=-1   yoffset=2    xadvance=6    page=0    chnl=0 
-char id=107     x=365  y=22   width=12   height=17   xoffset=1    yoffset=2    xadvance=11   page=0    chnl=0 
-char id=108     x=377  y=22   width=4    height=17   xoffset=1    yoffset=2    xadvance=6    page=0    chnl=0 
-char id=109     x=288  y=59   width=18   height=13   xoffset=1    yoffset=6    xadvance=19   page=0    chnl=0 
-char id=110     x=306  y=59   width=11   height=13   xoffset=1    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=111     x=317  y=59   width=12   height=13   xoffset=0    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=112     x=381  y=22   width=11   height=17   xoffset=1    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=113     x=392  y=22   width=11   height=17   xoffset=0    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=114     x=329  y=59   width=8    height=13   xoffset=1    yoffset=6    xadvance=9    page=0    chnl=0 
-char id=115     x=337  y=59   width=10   height=13   xoffset=0    yoffset=6    xadvance=10   page=0    chnl=0 
-char id=116     x=388  y=42   width=8    height=16   xoffset=0    yoffset=3    xadvance=8    page=0    chnl=0 
-char id=117     x=347  y=59   width=11   height=13   xoffset=1    yoffset=6    xadvance=13   page=0    chnl=0 
-char id=118     x=358  y=59   width=13   height=13   xoffset=-1   yoffset=6    xadvance=11   page=0    chnl=0 
-char id=119     x=371  y=59   width=17   height=13   xoffset=-1   yoffset=6    xadvance=16   page=0    chnl=0 
-char id=120     x=388  y=59   width=13   height=13   xoffset=-1   yoffset=6    xadvance=11   page=0    chnl=0 
-char id=121     x=403  y=22   width=13   height=17   xoffset=0    yoffset=6    xadvance=11   page=0    chnl=0 
-char id=122     x=401  y=59   width=10   height=13   xoffset=0    yoffset=6    xadvance=10   page=0    chnl=0 
-char id=123     x=45   y=0    width=10   height=21   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=124     x=22   y=0    width=4    height=22   xoffset=1    yoffset=2    xadvance=6    page=0    chnl=0 
-char id=125     x=55   y=0    width=10   height=21   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=126     x=79   y=75   width=14   height=7    xoffset=1    yoffset=8    xadvance=16   page=0    chnl=0 
-char id=160     x=0    y=0    width=0    height=0    xoffset=-1   yoffset=17   xadvance=6    page=0    chnl=0 
-char id=161     x=504  y=42   width=4    height=16   xoffset=2    yoffset=3    xadvance=8    page=0    chnl=0 
-char id=162     x=501  y=0    width=10   height=19   xoffset=1    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=163     x=70   y=59   width=11   height=16   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=164     x=213  y=59   width=14   height=14   xoffset=-1   yoffset=5    xadvance=12   page=0    chnl=0 
-char id=165     x=81   y=59   width=14   height=16   xoffset=-1   yoffset=3    xadvance=12   page=0    chnl=0 
-char id=166     x=26   y=22   width=4    height=19   xoffset=1    yoffset=3    xadvance=6    page=0    chnl=0 
-char id=167     x=30   y=22   width=10   height=19   xoffset=0    yoffset=3    xadvance=10   page=0    chnl=0 
-char id=168     x=138  y=75   width=8    height=4    xoffset=1    yoffset=2    xadvance=10   page=0    chnl=0 
-char id=169     x=416  y=22   width=16   height=17   xoffset=2    yoffset=2    xadvance=20   page=0    chnl=0 
-char id=170     x=434  y=59   width=9    height=12   xoffset=-1   yoffset=3    xadvance=8    page=0    chnl=0 
-char id=171     x=443  y=59   width=11   height=12   xoffset=0    yoffset=6    xadvance=11   page=0    chnl=0 
-char id=172     x=44   y=75   width=15   height=8    xoffset=1    yoffset=8    xadvance=17   page=0    chnl=0 
-char id=173     x=119  y=75   width=7    height=4    xoffset=0    yoffset=10   xadvance=7    page=0    chnl=0 
-char id=174     x=432  y=22   width=16   height=17   xoffset=2    yoffset=2    xadvance=20   page=0    chnl=0 
-char id=175     x=146  y=75   width=8    height=4    xoffset=1    yoffset=2    xadvance=10   page=0    chnl=0 
-char id=176     x=59   y=75   width=8    height=8    xoffset=1    yoffset=3    xadvance=10   page=0    chnl=0 
-char id=177     x=227  y=59   width=14   height=14   xoffset=1    yoffset=5    xadvance=16   page=0    chnl=0 
-char id=178     x=500  y=59   width=7    height=10   xoffset=0    yoffset=3    xadvance=7    page=0    chnl=0 
-char id=179     x=0    y=75   width=8    height=10   xoffset=-1   yoffset=3    xadvance=7    page=0    chnl=0 
-char id=180     x=108  y=75   width=7    height=6    xoffset=2    yoffset=1    xadvance=10   page=0    chnl=0 
-char id=181     x=448  y=22   width=12   height=17   xoffset=1    yoffset=6    xadvance=13   page=0    chnl=0 
-char id=182     x=40   y=22   width=11   height=19   xoffset=0    yoffset=3    xadvance=12   page=0    chnl=0 
-char id=183     x=115  y=75   width=4    height=5    xoffset=1    yoffset=8    xadvance=6    page=0    chnl=0 
-char id=184     x=93   y=75   width=7    height=7    xoffset=1    yoffset=17   xadvance=10   page=0    chnl=0 
-char id=185     x=8    y=75   width=8    height=10   xoffset=-1   yoffset=3    xadvance=7    page=0    chnl=0 
-char id=186     x=454  y=59   width=10   height=12   xoffset=-1   yoffset=3    xadvance=9    page=0    chnl=0 
-char id=187     x=464  y=59   width=11   height=12   xoffset=1    yoffset=6    xadvance=12   page=0    chnl=0 
-char id=188     x=69   y=22   width=20   height=18   xoffset=-1   yoffset=2    xadvance=18   page=0    chnl=0 
-char id=189     x=89   y=22   width=19   height=18   xoffset=-1   yoffset=2    xadvance=18   page=0    chnl=0 
-char id=190     x=108  y=22   width=21   height=18   xoffset=-1   yoffset=2    xadvance=19   page=0    chnl=0 
-char id=191     x=95   y=59   width=10   height=16   xoffset=0    yoffset=3    xadvance=10   page=0    chnl=0 
-char id=192     x=311  y=0    width=15   height=20   xoffset=-1   yoffset=-1   xadvance=13   page=0    chnl=0 
-char id=193     x=326  y=0    width=15   height=20   xoffset=-1   yoffset=-1   xadvance=13   page=0    chnl=0 
-char id=194     x=341  y=0    width=15   height=20   xoffset=-1   yoffset=-1   xadvance=13   page=0    chnl=0 
-char id=195     x=65   y=0    width=16   height=21   xoffset=-2   yoffset=-2   xadvance=12   page=0    chnl=0 
-char id=196     x=356  y=0    width=16   height=20   xoffset=-1   yoffset=-1   xadvance=14   page=0    chnl=0 
-char id=197     x=81   y=0    width=15   height=21   xoffset=-1   yoffset=-2   xadvance=13   page=0    chnl=0 
-char id=198     x=105  y=59   width=20   height=16   xoffset=-2   yoffset=3    xadvance=18   page=0    chnl=0 
-char id=199     x=372  y=0    width=13   height=20   xoffset=0    yoffset=3    xadvance=13   page=0    chnl=0 
-char id=200     x=385  y=0    width=11   height=20   xoffset=1    yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=201     x=396  y=0    width=11   height=20   xoffset=1    yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=202     x=407  y=0    width=11   height=20   xoffset=1    yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=203     x=418  y=0    width=11   height=20   xoffset=1    yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=204     x=429  y=0    width=7    height=20   xoffset=-1   yoffset=-1   xadvance=6    page=0    chnl=0 
-char id=205     x=436  y=0    width=7    height=20   xoffset=0    yoffset=-1   xadvance=6    page=0    chnl=0 
-char id=206     x=443  y=0    width=8    height=20   xoffset=-1   yoffset=-1   xadvance=6    page=0    chnl=0 
-char id=207     x=451  y=0    width=8    height=20   xoffset=0    yoffset=-1   xadvance=7    page=0    chnl=0 
-char id=208     x=125  y=59   width=16   height=16   xoffset=0    yoffset=3    xadvance=16   page=0    chnl=0 
-char id=209     x=96   y=0    width=13   height=21   xoffset=1    yoffset=-2   xadvance=15   page=0    chnl=0 
-char id=210     x=109  y=0    width=15   height=21   xoffset=0    yoffset=-2   xadvance=15   page=0    chnl=0 
-char id=211     x=124  y=0    width=15   height=21   xoffset=0    yoffset=-2   xadvance=15   page=0    chnl=0 
-char id=212     x=139  y=0    width=15   height=21   xoffset=0    yoffset=-2   xadvance=15   page=0    chnl=0 
-char id=213     x=154  y=0    width=15   height=21   xoffset=0    yoffset=-2   xadvance=15   page=0    chnl=0 
-char id=214     x=459  y=0    width=15   height=20   xoffset=0    yoffset=-1   xadvance=15   page=0    chnl=0 
-char id=215     x=241  y=59   width=14   height=14   xoffset=1    yoffset=5    xadvance=16   page=0    chnl=0 
-char id=216     x=129  y=22   width=16   height=18   xoffset=-1   yoffset=2    xadvance=15   page=0    chnl=0 
-char id=217     x=169  y=0    width=13   height=21   xoffset=1    yoffset=-2   xadvance=14   page=0    chnl=0 
-char id=218     x=182  y=0    width=13   height=21   xoffset=1    yoffset=-2   xadvance=14   page=0    chnl=0 
-char id=219     x=195  y=0    width=13   height=21   xoffset=1    yoffset=-2   xadvance=14   page=0    chnl=0 
-char id=220     x=474  y=0    width=13   height=20   xoffset=1    yoffset=-1   xadvance=14   page=0    chnl=0 
-char id=221     x=487  y=0    width=14   height=20   xoffset=-1   yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=222     x=141  y=59   width=11   height=16   xoffset=1    yoffset=3    xadvance=11   page=0    chnl=0 
-char id=223     x=460  y=22   width=12   height=17   xoffset=1    yoffset=2    xadvance=13   page=0    chnl=0 
-char id=224     x=145  y=22   width=11   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=225     x=156  y=22   width=11   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=226     x=167  y=22   width=11   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=227     x=472  y=22   width=11   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=228     x=483  y=22   width=11   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=229     x=0    y=22   width=11   height=20   xoffset=0    yoffset=-1   xadvance=12   page=0    chnl=0 
-char id=230     x=411  y=59   width=19   height=13   xoffset=0    yoffset=6    xadvance=19   page=0    chnl=0 
-char id=231     x=494  y=22   width=10   height=17   xoffset=0    yoffset=6    xadvance=10   page=0    chnl=0 
-char id=232     x=178  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=233     x=190  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=234     x=202  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=235     x=0    y=42   width=12   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=236     x=214  y=22   width=8    height=18   xoffset=-2   yoffset=1    xadvance=6    page=0    chnl=0 
-char id=237     x=222  y=22   width=8    height=18   xoffset=0    yoffset=1    xadvance=6    page=0    chnl=0 
-char id=238     x=230  y=22   width=9    height=18   xoffset=-2   yoffset=1    xadvance=6    page=0    chnl=0 
-char id=239     x=12   y=42   width=8    height=17   xoffset=-1   yoffset=2    xadvance=6    page=0    chnl=0 
-char id=240     x=20   y=42   width=12   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=241     x=32   y=42   width=11   height=17   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=242     x=239  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=243     x=251  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=244     x=263  y=22   width=12   height=18   xoffset=0    yoffset=1    xadvance=12   page=0    chnl=0 
-char id=245     x=43   y=42   width=12   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=246     x=55   y=42   width=12   height=17   xoffset=0    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=247     x=475  y=59   width=14   height=12   xoffset=1    yoffset=6    xadvance=16   page=0    chnl=0 
-char id=248     x=157  y=59   width=14   height=15   xoffset=-1   yoffset=5    xadvance=12   page=0    chnl=0 
-char id=249     x=275  y=22   width=11   height=18   xoffset=1    yoffset=1    xadvance=13   page=0    chnl=0 
-char id=250     x=286  y=22   width=11   height=18   xoffset=1    yoffset=1    xadvance=13   page=0    chnl=0 
-char id=251     x=297  y=22   width=11   height=18   xoffset=1    yoffset=1    xadvance=13   page=0    chnl=0 
-char id=252     x=67   y=42   width=11   height=17   xoffset=1    yoffset=2    xadvance=13   page=0    chnl=0 
-char id=253     x=26   y=0    width=13   height=22   xoffset=0    yoffset=1    xadvance=11   page=0    chnl=0 
-char id=254     x=208  y=0    width=11   height=21   xoffset=1    yoffset=2    xadvance=12   page=0    chnl=0 
-char id=255     x=219  y=0    width=14   height=21   xoffset=-1   yoffset=2    xadvance=12   page=0    chnl=0 
-kernings count=615
-kerning first=65 second=171 amount=-1
-kerning first=194 second=87 amount=-1
-kerning first=86 second=58 amount=-2
-kerning first=89 second=229 amount=-3
-kerning first=196 second=65 amount=1
-kerning first=45 second=66 amount=-1
-kerning first=221 second=67 amount=-1
-kerning first=45 second=71 amount=1
-kerning first=187 second=88 amount=-1
-kerning first=45 second=74 amount=1
-kerning first=221 second=79 amount=-1
-kerning first=45 second=81 amount=1
-kerning first=65 second=84 amount=-1
-kerning first=76 second=85 amount=-1
-kerning first=45 second=86 amount=-1
-kerning first=66 second=87 amount=-1
-kerning first=45 second=88 amount=-1
-kerning first=82 second=89 amount=-1
-kerning first=65 second=192 amount=1
-kerning first=84 second=97 amount=-3
-kerning first=221 second=101 amount=-3
-kerning first=65 second=102 amount=-1
-kerning first=70 second=105 amount=-1
-kerning first=89 second=250 amount=-2
-kerning first=89 second=117 amount=-2
-kerning first=192 second=119 amount=-1
-kerning first=243 second=120 amount=-1
-kerning first=82 second=253 amount=-1
-kerning first=84 second=121 amount=-3
-kerning first=76 second=217 amount=-1
-kerning first=84 second=187 amount=-1
-kerning first=192 second=193 amount=1
-kerning first=65 second=194 amount=1
-kerning first=221 second=196 amount=-1
-kerning first=171 second=198 amount=1
-kerning first=89 second=252 amount=-2
-kerning first=75 second=210 amount=-1
-kerning first=76 second=211 amount=-1
-kerning first=75 second=212 amount=-1
-kerning first=89 second=225 amount=-3
-kerning first=84 second=228 amount=-2
-kerning first=75 second=45 amount=-2
-kerning first=84 second=231 amount=-3
-kerning first=75 second=233 amount=-1
-kerning first=87 second=234 amount=-1
-kerning first=120 second=235 amount=-1
-kerning first=80 second=244 amount=-1
-kerning first=87 second=245 amount=-1
-kerning first=120 second=246 amount=-1
-kerning first=86 second=249 amount=-1
-kerning first=192 second=253 amount=-1
-kerning first=82 second=67 amount=-1
-kerning first=221 second=213 amount=-1
-kerning first=120 second=245 amount=-1
-kerning first=87 second=111 amount=-1
-kerning first=84 second=196 amount=-1
-kerning first=195 second=65 amount=1
-kerning first=89 second=210 amount=-1
-kerning first=65 second=119 amount=-1
-kerning first=192 second=121 amount=-1
-kerning first=75 second=84 amount=-1
-kerning first=79 second=46 amount=-1
-kerning first=82 second=249 amount=-1
-kerning first=80 second=101 amount=-1
-kerning first=76 second=213 amount=-1
-kerning first=221 second=243 amount=-3
-kerning first=80 second=243 amount=-1
-kerning first=70 second=225 amount=-2
-kerning first=107 second=111 amount=-1
-kerning first=75 second=235 amount=-1
-kerning first=86 second=45 amount=-1
-kerning first=87 second=242 amount=-1
-kerning first=120 second=111 amount=-1
-kerning first=107 second=249 amount=-1
-kerning first=86 second=225 amount=-1
-kerning first=193 second=84 amount=-1
-kerning first=196 second=118 amount=-1
-kerning first=75 second=250 amount=-1
-kerning first=221 second=214 amount=-1
-kerning first=195 second=119 amount=-1
-kerning first=70 second=246 amount=-1
-kerning first=87 second=194 amount=-1
-kerning first=192 second=194 amount=1
-kerning first=89 second=233 amount=-3
-kerning first=120 second=244 amount=-1
-kerning first=84 second=244 amount=-2
-kerning first=76 second=121 amount=-2
-kerning first=84 second=225 amount=-3
-kerning first=76 second=219 amount=-1
-kerning first=211 second=221 amount=-1
-kerning first=195 second=192 amount=1
-kerning first=107 second=253 amount=-1
-kerning first=86 second=235 amount=-1
-kerning first=86 second=250 amount=-1
-kerning first=80 second=97 amount=-1
-kerning first=221 second=97 amount=-3
-kerning first=196 second=253 amount=-1
-kerning first=82 second=234 amount=-1
-kerning first=221 second=199 amount=-1
-kerning first=196 second=171 amount=-1
-kerning first=70 second=250 amount=-1
-kerning first=86 second=227 amount=-1
-kerning first=82 second=192 amount=-1
-kerning first=187 second=192 amount=-1
-kerning first=107 second=245 amount=-1
-kerning first=193 second=65 amount=1
-kerning first=84 second=117 amount=-3
-kerning first=221 second=224 amount=-3
-kerning first=80 second=224 amount=-1
-kerning first=65 second=121 amount=-1
-kerning first=89 second=235 amount=-3
-kerning first=71 second=84 amount=-1
-kerning first=45 second=87 amount=-1
-kerning first=87 second=58 amount=-1
-kerning first=89 second=212 amount=-1
-kerning first=84 second=171 amount=-2
-kerning first=187 second=195 amount=-1
-kerning first=195 second=196 amount=1
-kerning first=121 second=46 amount=-3
-kerning first=89 second=199 amount=-1
-kerning first=213 second=45 amount=1
-kerning first=107 second=255 amount=-1
-kerning first=45 second=89 amount=-2
-kerning first=79 second=88 amount=-1
-kerning first=187 second=84 amount=-2
-kerning first=82 second=84 amount=-1
-kerning first=187 second=193 amount=-1
-kerning first=195 second=86 amount=-1
-kerning first=196 second=193 amount=1
-kerning first=65 second=221 amount=-1
-kerning first=75 second=214 amount=-1
-kerning first=84 second=246 amount=-2
-kerning first=222 second=46 amount=-1
-kerning first=195 second=121 amount=-1
-kerning first=193 second=195 amount=1
-kerning first=45 second=79 amount=1
-kerning first=80 second=193 amount=-1
-kerning first=253 second=58 amount=-1
-kerning first=221 second=193 amount=-1
-kerning first=171 second=89 amount=-1
-kerning first=82 second=255 amount=-1
-kerning first=86 second=229 amount=-1
-kerning first=87 second=244 amount=-1
-kerning first=194 second=192 amount=1
-kerning first=193 second=193 amount=1
-kerning first=89 second=79 amount=-1
-kerning first=193 second=253 amount=-1
-kerning first=210 second=45 amount=1
-kerning first=192 second=171 amount=-1
-kerning first=87 second=171 amount=-1
-kerning first=45 second=210 amount=1
-kerning first=195 second=194 amount=1
-kerning first=88 second=67 amount=-1
-kerning first=194 second=89 amount=-1
-kerning first=87 second=246 amount=-1
-kerning first=70 second=117 amount=-1
-kerning first=82 second=232 amount=-1
-kerning first=214 second=221 amount=-1
-kerning first=82 second=86 amount=-1
-kerning first=187 second=86 amount=-2
-kerning first=221 second=105 amount=-1
-kerning first=82 second=46 amount=-1
-kerning first=75 second=252 amount=-1
-kerning first=89 second=187 amount=-1
-kerning first=211 second=88 amount=-1
-kerning first=196 second=194 amount=1
-kerning first=86 second=101 amount=-1
-kerning first=70 second=233 amount=-1
-kerning first=221 second=226 amount=-3
-kerning first=80 second=65 amount=-1
-kerning first=221 second=65 amount=-1
-kerning first=80 second=226 amount=-1
-kerning first=87 second=196 amount=-1
-kerning first=192 second=196 amount=1
-kerning first=102 second=46 amount=-1
-kerning first=89 second=101 amount=-3
-kerning first=70 second=234 amount=-1
-kerning first=80 second=229 amount=-1
-kerning first=214 second=88 amount=-1
-kerning first=86 second=244 amount=-1
-kerning first=221 second=251 amount=-2
-kerning first=86 second=252 amount=-1
-kerning first=214 second=45 amount=1
-kerning first=76 second=84 amount=-3
-kerning first=84 second=67 amount=-1
-kerning first=75 second=101 amount=-1
-kerning first=75 second=79 amount=-1
-kerning first=84 second=111 amount=-3
-kerning first=88 second=213 amount=-1
-kerning first=84 second=58 amount=-2
-kerning first=221 second=228 amount=-3
-kerning first=80 second=228 amount=-1
-kerning first=66 second=89 amount=-1
-kerning first=75 second=121 amount=-1
-kerning first=88 second=235 amount=-1
-kerning first=82 second=242 amount=-1
-kerning first=221 second=252 amount=-2
-kerning first=194 second=121 amount=-1
-kerning first=82 second=196 amount=-1
-kerning first=187 second=196 amount=-1
-kerning first=84 second=45 amount=-2
-kerning first=89 second=192 amount=-1
-kerning first=84 second=233 amount=-3
-kerning first=89 second=195 amount=-1
-kerning first=194 second=195 amount=1
-kerning first=87 second=227 amount=-1
-kerning first=107 second=242 amount=-1
-kerning first=195 second=84 amount=-1
-kerning first=84 second=253 amount=-3
-kerning first=75 second=221 amount=-1
-kerning first=88 second=232 amount=-1
-kerning first=86 second=224 amount=-1
-kerning first=196 second=89 amount=-1
-kerning first=84 second=114 amount=-3
-kerning first=87 second=117 amount=-1
-kerning first=75 second=245 amount=-1
-kerning first=120 second=234 amount=-1
-kerning first=107 second=117 amount=-1
-kerning first=193 second=89 amount=-1
-kerning first=213 second=221 amount=-1
-kerning first=76 second=87 amount=-2
-kerning first=107 second=243 amount=-1
-kerning first=82 second=243 amount=-1
-kerning first=45 second=221 amount=-2
-kerning first=221 second=249 amount=-2
-kerning first=193 second=192 amount=1
-kerning first=84 second=193 amount=-1
-kerning first=84 second=250 amount=-3
-kerning first=84 second=234 amount=-3
-kerning first=45 second=211 amount=1
-kerning first=192 second=221 amount=-1
-kerning first=82 second=199 amount=-1
-kerning first=89 second=214 amount=-1
-kerning first=76 second=221 amount=-3
-kerning first=75 second=244 amount=-1
-kerning first=89 second=58 amount=-3
-kerning first=75 second=220 amount=-1
-kerning first=82 second=117 amount=-1
-kerning first=192 second=87 amount=-1
-kerning first=70 second=196 amount=-2
-kerning first=211 second=45 amount=1
-kerning first=87 second=229 amount=-1
-kerning first=70 second=114 amount=-1
-kerning first=107 second=251 amount=-1
-kerning first=87 second=233 amount=-1
-kerning first=89 second=194 amount=-1
-kerning first=194 second=194 amount=1
-kerning first=86 second=245 amount=-1
-kerning first=193 second=119 amount=-1
-kerning first=194 second=102 amount=-1
-kerning first=82 second=111 amount=-1
-kerning first=196 second=192 amount=1
-kerning first=221 second=245 amount=-3
-kerning first=193 second=196 amount=1
-kerning first=89 second=224 amount=-3
-kerning first=193 second=86 amount=-1
-kerning first=208 second=221 amount=-1
-kerning first=82 second=246 amount=-1
-kerning first=221 second=235 amount=-3
-kerning first=80 second=235 amount=-1
-kerning first=195 second=87 amount=-1
-kerning first=221 second=212 amount=-1
-kerning first=255 second=58 amount=-1
-kerning first=75 second=171 amount=-1
-kerning first=86 second=195 amount=-1
-kerning first=89 second=234 amount=-3
-kerning first=81 second=45 amount=1
-kerning first=192 second=65 amount=1
-kerning first=221 second=45 amount=-2
-kerning first=213 second=89 amount=-1
-kerning first=70 second=227 amount=-2
-kerning first=89 second=244 amount=-3
-kerning first=86 second=255 amount=-1
-kerning first=86 second=65 amount=-1
-kerning first=221 second=225 amount=-3
-kerning first=80 second=225 amount=-1
-kerning first=75 second=85 amount=-1
-kerning first=82 second=193 amount=-1
-kerning first=76 second=253 amount=-2
-kerning first=194 second=171 amount=-1
-kerning first=89 second=171 amount=-2
-kerning first=194 second=86 amount=-1
-kerning first=86 second=251 amount=-1
-kerning first=84 second=194 amount=-1
-kerning first=210 second=46 amount=-1
-kerning first=196 second=255 amount=-1
-kerning first=70 second=111 amount=-1
-kerning first=120 second=233 amount=-1
-kerning first=84 second=115 amount=-3
-kerning first=114 second=45 amount=-1
-kerning first=194 second=221 amount=-1
-kerning first=45 second=118 amount=-1
-kerning first=89 second=196 amount=-1
-kerning first=221 second=232 amount=-3
-kerning first=114 second=171 amount=-1
-kerning first=65 second=87 amount=-1
-kerning first=88 second=199 amount=-1
-kerning first=245 second=120 amount=-1
-kerning first=75 second=251 amount=-1
-kerning first=192 second=102 amount=-1
-kerning first=70 second=101 amount=-1
-kerning first=70 second=121 amount=-2
-kerning first=196 second=119 amount=-1
-kerning first=196 second=86 amount=-1
-kerning first=89 second=105 amount=-1
-kerning first=75 second=218 amount=-1
-kerning first=80 second=46 amount=-3
-kerning first=221 second=46 amount=-4
-kerning first=70 second=58 amount=-1
-kerning first=89 second=45 amount=-2
-kerning first=212 second=46 amount=-1
-kerning first=84 second=227 amount=-2
-kerning first=70 second=194 amount=-2
-kerning first=80 second=192 amount=-1
-kerning first=221 second=192 amount=-1
-kerning first=89 second=211 amount=-1
-kerning first=45 second=214 amount=1
-kerning first=107 second=246 amount=-1
-kerning first=66 second=86 amount=-1
-kerning first=87 second=250 amount=-1
-kerning first=210 second=89 amount=-1
-kerning first=76 second=220 amount=-1
-kerning first=89 second=65 amount=-1
-kerning first=194 second=65 amount=1
-kerning first=222 second=58 amount=-1
-kerning first=82 second=252 amount=-1
-kerning first=193 second=121 amount=-1
-kerning first=192 second=195 amount=1
-kerning first=87 second=195 amount=-1
-kerning first=84 second=199 amount=-1
-kerning first=87 second=97 amount=-1
-kerning first=187 second=66 amount=-1
-kerning first=171 second=86 amount=-1
-kerning first=82 second=45 amount=-1
-kerning first=118 second=45 amount=-1
-kerning first=89 second=251 amount=-2
-kerning first=75 second=67 amount=-1
-kerning first=86 second=232 amount=-1
-kerning first=84 second=101 amount=-3
-kerning first=120 second=101 amount=-1
-kerning first=192 second=118 amount=-1
-kerning first=107 second=250 amount=-1
-kerning first=196 second=84 amount=-1
-kerning first=65 second=193 amount=1
-kerning first=75 second=111 amount=-1
-kerning first=70 second=245 amount=-1
-kerning first=70 second=224 amount=-2
-kerning first=80 second=196 amount=-1
-kerning first=89 second=228 amount=-3
-kerning first=86 second=234 amount=-1
-kerning first=75 second=211 amount=-1
-kerning first=86 second=253 amount=-1
-kerning first=84 second=99 amount=-3
-kerning first=107 second=252 amount=-1
-kerning first=195 second=193 amount=1
-kerning first=196 second=196 amount=1
-kerning first=86 second=46 amount=-2
-kerning first=102 second=58 amount=-1
-kerning first=82 second=87 amount=-1
-kerning first=187 second=87 amount=-1
-kerning first=75 second=253 amount=-1
-kerning first=120 second=243 amount=-1
-kerning first=187 second=89 amount=-2
-kerning first=221 second=242 amount=-3
-kerning first=80 second=242 amount=-1
-kerning first=45 second=84 amount=-2
-kerning first=76 second=214 amount=-1
-kerning first=221 second=233 amount=-3
-kerning first=221 second=195 amount=-1
-kerning first=171 second=221 amount=-1
-kerning first=66 second=221 amount=-1
-kerning first=196 second=121 amount=-1
-kerning first=82 second=250 amount=-1
-kerning first=82 second=233 amount=-1
-kerning first=196 second=102 amount=-1
-kerning first=76 second=212 amount=-1
-kerning first=221 second=117 amount=-2
-kerning first=79 second=89 amount=-1
-kerning first=70 second=226 amount=-2
-kerning first=76 second=218 amount=-1
-kerning first=195 second=253 amount=-1
-kerning first=84 second=243 amount=-3
-kerning first=88 second=79 amount=-1
-kerning first=89 second=111 amount=-3
-kerning first=84 second=224 amount=-2
-kerning first=87 second=193 amount=-1
-kerning first=75 second=255 amount=-1
-kerning first=89 second=249 amount=-2
-kerning first=89 second=67 amount=-1
-kerning first=89 second=227 amount=-3
-kerning first=193 second=255 amount=-1
-kerning first=246 second=120 amount=-1
-kerning first=75 second=234 amount=-1
-kerning first=192 second=84 amount=-1
-kerning first=87 second=101 amount=-1
-kerning first=107 second=233 amount=-1
-kerning first=84 second=195 amount=-1
-kerning first=87 second=243 amount=-1
-kerning first=213 second=46 amount=-1
-kerning first=75 second=249 amount=-1
-kerning first=221 second=58 amount=-3
-kerning first=119 second=46 amount=-2
-kerning first=79 second=45 amount=1
-kerning first=194 second=253 amount=-1
-kerning first=86 second=171 amount=-2
-kerning first=68 second=89 amount=-1
-kerning first=80 second=194 amount=-1
-kerning first=221 second=194 amount=-1
-kerning first=242 second=120 amount=-1
-kerning first=195 second=255 amount=-1
-kerning first=84 second=226 amount=-2
-kerning first=210 second=88 amount=-1
-kerning first=89 second=245 amount=-3
-kerning first=70 second=65 amount=-2
-kerning first=70 second=97 amount=-2
-kerning first=70 second=228 amount=-2
-kerning first=107 second=235 amount=-1
-kerning first=221 second=229 amount=-3
-kerning first=80 second=233 amount=-1
-kerning first=66 second=171 amount=-1
-kerning first=86 second=194 amount=-1
-kerning first=87 second=114 amount=-1
-kerning first=213 second=88 amount=-1
-kerning first=221 second=234 amount=-3
-kerning first=80 second=234 amount=-1
-kerning first=84 second=105 amount=-1
-kerning first=70 second=251 amount=-1
-kerning first=194 second=255 amount=-1
-kerning first=82 second=235 amount=-1
-kerning first=194 second=118 amount=-1
-kerning first=120 second=242 amount=-1
-kerning first=87 second=224 amount=-1
-kerning first=221 second=171 amount=-2
-kerning first=70 second=195 amount=-2
-kerning first=195 second=171 amount=-1
-kerning first=114 second=46 amount=-2
-kerning first=255 second=46 amount=-3
-kerning first=76 second=210 amount=-1
-kerning first=86 second=192 amount=-1
-kerning first=84 second=65 amount=-1
-kerning first=70 second=193 amount=-2
-kerning first=70 second=253 amount=-2
-kerning first=87 second=45 amount=-1
-kerning first=194 second=84 amount=-1
-kerning first=195 second=118 amount=-1
-kerning first=75 second=89 amount=-1
-kerning first=89 second=232 amount=-3
-kerning first=71 second=89 amount=-1
-kerning first=212 second=89 amount=-1
-kerning first=65 second=118 amount=-1
-kerning first=84 second=251 amount=-3
-kerning first=87 second=226 amount=-1
-kerning first=196 second=221 amount=-1
-kerning first=119 second=58 amount=-1
-kerning first=212 second=88 amount=-1
-kerning first=89 second=46 amount=-4
-kerning first=210 second=221 amount=-1
-kerning first=86 second=242 amount=-1
-kerning first=195 second=89 amount=-1
-kerning first=193 second=102 amount=-1
-kerning first=75 second=217 amount=-1
-kerning first=221 second=211 amount=-1
-kerning first=221 second=246 amount=-3
-kerning first=65 second=86 amount=-1
-kerning first=75 second=232 amount=-1
-kerning first=194 second=119 amount=-1
-kerning first=80 second=246 amount=-1
-kerning first=102 second=171 amount=-1
-kerning first=86 second=121 amount=-1
-kerning first=75 second=242 amount=-1
-kerning first=70 second=243 amount=-1
-kerning first=193 second=87 amount=-1
-kerning first=86 second=111 amount=-1
-kerning first=82 second=121 amount=-1
-kerning first=84 second=46 amount=-2
-kerning first=88 second=233 amount=-1
-kerning first=192 second=86 amount=-1
-kerning first=88 second=234 amount=-1
-kerning first=75 second=199 amount=-1
-kerning first=45 second=213 amount=1
-kerning first=68 second=221 amount=-1
-kerning first=70 second=255 amount=-2
-kerning first=221 second=250 amount=-2
-kerning first=86 second=243 amount=-1
-kerning first=65 second=196 amount=1
-kerning first=87 second=65 amount=-1
-kerning first=88 second=212 amount=-1
-kerning first=194 second=196 amount=1
-kerning first=87 second=252 amount=-1
-kerning first=70 second=235 amount=-1
-kerning first=107 second=121 amount=-1
-kerning first=114 second=120 amount=-1
-kerning first=75 second=219 amount=-1
-kerning first=196 second=87 amount=-1
-kerning first=102 second=45 amount=-1
-kerning first=82 second=101 amount=-1
-kerning first=221 second=227 amount=-3
-kerning first=80 second=227 amount=-1
-kerning first=75 second=243 amount=-1
-kerning first=88 second=210 amount=-1
-kerning first=87 second=249 amount=-1
-kerning first=89 second=242 amount=-3
-kerning first=70 second=232 amount=-1
-kerning first=214 second=89 amount=-1
-kerning first=221 second=210 amount=-1
-kerning first=82 second=244 amount=-1
-kerning first=211 second=89 amount=-1
-kerning first=86 second=246 amount=-1
-kerning first=82 second=58 amount=-1
-kerning first=70 second=46 amount=-3
-kerning first=211 second=46 amount=-1
-kerning first=195 second=221 amount=-1
-kerning first=80 second=245 amount=-1
-kerning first=107 second=101 amount=-1
-kerning first=193 second=221 amount=-1
-kerning first=82 second=195 amount=-1
-kerning first=65 second=65 amount=1
-kerning first=89 second=243 amount=-3
-kerning first=80 second=111 amount=-1
-kerning first=86 second=117 amount=-1
-kerning first=221 second=111 amount=-3
-kerning first=84 second=235 amount=-3
-kerning first=84 second=255 amount=-3
-kerning first=84 second=229 amount=-2
-kerning first=70 second=192 amount=-2
-kerning first=88 second=171 amount=-1
-kerning first=82 second=171 amount=-1
-kerning first=193 second=171 amount=-1
-kerning first=82 second=194 amount=-1
-kerning first=187 second=194 amount=-1
-kerning first=45 second=212 amount=1
-kerning first=65 second=253 amount=-1
-kerning first=82 second=245 amount=-1
-kerning first=76 second=86 amount=-2
-kerning first=86 second=228 amount=-1
-kerning first=86 second=196 amount=-1
-kerning first=86 second=233 amount=-1
-kerning first=84 second=249 amount=-3
-kerning first=88 second=45 amount=-1
-kerning first=79 second=221 amount=-1
-kerning first=88 second=211 amount=-1
-kerning first=89 second=97 amount=-3
-kerning first=87 second=228 amount=-1
-kerning first=192 second=255 amount=-1
-kerning first=171 second=84 amount=-1
-kerning first=84 second=245 amount=-2
-kerning first=89 second=213 amount=-1
-kerning first=86 second=187 amount=-1
-kerning first=75 second=117 amount=-1
-kerning first=76 second=79 amount=-1
-kerning first=65 second=89 amount=-1
-kerning first=70 second=229 amount=-2
-kerning first=253 second=46 amount=-3
-kerning first=86 second=97 amount=-1
-kerning first=80 second=232 amount=-1
-kerning first=107 second=234 amount=-1
-kerning first=70 second=244 amount=-1
-kerning first=84 second=192 amount=-1
-kerning first=107 second=244 amount=-1
-kerning first=86 second=226 amount=-1
-kerning first=70 second=249 amount=-1
-kerning first=75 second=246 amount=-1
-kerning first=70 second=252 amount=-1
-kerning first=193 second=118 amount=-1
-kerning first=87 second=232 amount=-1
-kerning first=118 second=46 amount=-1
-kerning first=244 second=120 amount=-1
-kerning first=84 second=119 amount=-3
-kerning first=89 second=193 amount=-1
-kerning first=121 second=58 amount=-1
-kerning first=194 second=193 amount=1
-kerning first=74 second=45 amount=-1
-kerning first=87 second=46 amount=-2
-kerning first=70 second=242 amount=-1
-kerning first=87 second=225 amount=-1
-kerning first=71 second=221 amount=-1
-kerning first=75 second=87 amount=-1
-kerning first=212 second=221 amount=-1
-kerning first=65 second=255 amount=-1
-kerning first=111 second=120 amount=-1
-kerning first=87 second=192 amount=-1
-kerning first=192 second=192 amount=1
-kerning first=75 second=213 amount=-1
-kerning first=88 second=101 amount=-1
-kerning first=88 second=214 amount=-1
-kerning first=187 second=221 amount=-2
-kerning first=82 second=221 amount=-1
-kerning first=82 second=65 amount=-1
-kerning first=187 second=65 amount=-1
-kerning first=195 second=195 amount=1
-kerning first=80 second=195 amount=-1
-kerning first=208 second=89 amount=-1
-kerning first=214 second=46 amount=-1
-kerning first=212 second=45 amount=1
-kerning first=87 second=251 amount=-1
-kerning first=84 second=252 amount=-3
-kerning first=76 second=255 amount=-2
-kerning first=118 second=58 amount=-1
-kerning first=193 second=194 amount=1
-kerning first=76 second=89 amount=-3
-kerning first=87 second=235 amount=-1
-kerning first=82 second=251 amount=-1
-kerning first=86 second=193 amount=-1
-kerning first=221 second=187 amount=-1
-kerning first=195 second=102 amount=-1
-kerning first=120 second=232 amount=-1
-kerning first=107 second=232 amount=-1
-kerning first=84 second=232 amount=-3
-kerning first=89 second=246 amount=-3
-kerning first=221 second=244 amount=-3
-kerning first=196 second=195 amount=1
-kerning first=192 second=89 amount=-1
-kerning first=84 second=242 amount=-2
-kerning first=65 second=195 amount=1
-kerning first=89 second=226 amount=-3

server/tools/log-parse-tool.js

@@ -8,6 +8,7 @@ const VehicleClasses = Object.freeze({
   LIGHT: 'Leicht',
   HEAVY: 'Schwer',
   AIR: 'Flug',
+  BOAT: 'Boot',
   UNKNOWN: 'Unbekannt',
 });
 
@@ -72,7 +73,9 @@ const parseWarLog = (lineArray, war) => {
     'Qilin (Unbewaffnet)', 'Qilin (Bewaffnet)', 'Ifrit',
     'Tempest-Transporter', 'Tempest-Transporter (abgedeckt)', 'Tempest Sanitätsfahrzeug',
     'Remote Designator [CSAT]', 'UBF Saif',
-    'Quad Bike', 'HuntIR',
+    'Quad Bike', 'HuntIR', 'Offroad',
+    // boats
+    'RHIB', 'Kampfboot', 'SDV',
   ];
 
   const addPlayerIfNotExists = (inputPlayer, steamUUID) => {
@@ -80,6 +83,10 @@ const parseWarLog = (lineArray, war) => {
     if (player && player.name && player.fraction && !playerArrayContains(stats.players, player)) {
       player['warId'] = war._id;
       player['steamUUID'] = steamUUID;
+      player['vehicleLight'] = 0;
+      player['vehicleHeavy'] = 0;
+      player['vehicleAir'] = 0;
+      player['vehicleBoat'] = 0;
       stats.players.push(player);
     }
   };
@@ -335,21 +342,27 @@ const parseWarLog = (lineArray, war) => {
     stats.players[i]['kill'] = stats.kills.filter(
       (kill) => kill.shooter === playerName && !kill.friendlyFire).length;
 
-    // TODO: use vehicle class description from enum
-    stats.players[i]['vehicleLight'] = stats.vehicles.filter(
-      (vehicle) => (vehicle.shooter === playerName ||
-        (vehicle.additionalShooter && vehicle.additionalShooter.indexOf(playerName)) > -1) && vehicle.vehicleClass ===
-        'LIGHT' && VEHICLE_BLACKLIST.indexOf(vehicle.target) < 0).length;
-
-    stats.players[i]['vehicleHeavy'] = stats.vehicles.filter(
-      (vehicle) => (vehicle.shooter === playerName ||
-        (vehicle.additionalShooter && vehicle.additionalShooter.indexOf(playerName)) > -1) && vehicle.vehicleClass ===
-        'HEAVY' && VEHICLE_BLACKLIST.indexOf(vehicle.target) < 0).length;
-
-    stats.players[i]['vehicleAir'] = stats.vehicles.filter(
-      (vehicle) => (vehicle.shooter === playerName ||
-        (vehicle.additionalShooter && vehicle.additionalShooter.indexOf(playerName)) > -1) && vehicle.vehicleClass ===
-        'AIR' && VEHICLE_BLACKLIST.indexOf(vehicle.target) < 0).length;
+    stats.vehicles
+         .filter((vehicle) => VEHICLE_BLACKLIST.indexOf(vehicle.target) < 0)
+         .forEach((vehicle) => {
+           if (vehicle.shooter === playerName ||
+             (vehicle.additionalShooter && vehicle.additionalShooter.indexOf(playerName)) > -1) {
+             switch (vehicle.vehicleClass) {
+               case 'LIGHT':
+                 stats.players[i].vehicleLight++;
+                 break;
+               case 'HEAVY':
+                 stats.players[i].vehicleHeavy++;
+                 break;
+               case 'AIR':
+                 stats.players[i].vehicleAir++;
+                 break;
+               case 'BOAT':
+                 stats.players[i].vehicleBoat++;
+                 break;
+             }
+           }
+         });
 
     stats.players[i]['friendlyFire'] = stats.kills.filter(
       (kill) => kill.shooter === playerName && kill.friendlyFire).length;

server/tools/signature-tool.js

@@ -50,16 +50,16 @@ let createSignature = (userId, res, next) => {
            .then((image) => {
              loadedImage = image;
            }).then(() => {
-             return jimp.loadFont(__dirname + '/font/DEVAJU_SANS_19.fnt');
+             return jimp.loadFont(jimp.FONT_SANS_16_BLACK);
            })
            .then((font) => {
-             loadedImage.print(font, 128, 8, user.username);
+             loadedImage.print(font, 118, 22, user.username);
            })
            .then(() => {
              return jimp.loadFont(__dirname + '/font/DEJAVU_SANS_13.fnt');
            })
            .then((font) => {
-             loadedImage.print(font, 128, 35, user.squadId.name);
+             loadedImage.print(font, 118, 49, user.squadId.name);
              return font;
            })
            .then((font) => {
@@ -75,22 +75,22 @@ let createSignature = (userId, res, next) => {
 
                if (result) {
                  if (user.squadId.fraction === 'BLUFOR') {
-                   rankW = 25;
-                   rankH = 60;
-                   rankX = 36;
-                   rankY = 34;
+                   rankW = 33;
+                   rankH = 80;
+                   rankX = 38;
+                   rankY = 20;
                  } else {
-                   rankW = 37;
-                   rankH = 58;
-                   rankX = 30;
-                   rankY = 34;
+                   rankW = 38;
+                   rankH = 60;
+                   rankX = 35;
+                   rankY = 36;
                  }
 
                  jimp.read(resourceDir + 'rank/' + result._id + fileExt)
                      .then((rankImage) => {
                        rankImage.resize(rankW, rankH);
                        loadedImage
-                         .print(font, 128, 55, result.name)
+                         .print(font, 118, 69, result.name)
                          .composite(rankImage, rankX, rankY);
                      })
                      .then(() => {
@@ -123,10 +123,10 @@ let addDecorationsAndSave = (userId, loadedImage, res, next) => {
   const medalH = 40;
   const ribbonW = 53;
   const ribbonH = 15;
-  let medalPx = 630;
-  let medalPy = 5;
-  let ribbonPx = 598;
-  let ribbonPy = 95;
+  let medalPx = 690;
+  let medalPy = 9;
+  let ribbonPx = 658;
+  let ribbonPy = 107;
 
   AwardingModel.find({
     'userId': userId,
@@ -146,21 +146,22 @@ let addDecorationsAndSave = (userId, loadedImage, res, next) => {
                              if (award.decorationId.isMedal) {
                                decorationImage.resize(medalW, medalH);
                                loadedImage.composite(decorationImage, medalPx, medalPy);
-                               if (medalPy === 5) {
+                               if (medalPy === 9) {
                                  medalPx = medalPx - 1 - medalW;
                                } else {
                                  medalPx = medalPx + 1 + medalW;
                                }
                                if (medalPx <= 300) {
+                                 medalPx = medalPx + 1 + medalW;
                                  medalPy = medalPy + 3 + medalH;
                                }
                              } else {
                                decorationImage.resize(ribbonW, ribbonH);
                                loadedImage.composite(decorationImage, ribbonPx, ribbonPy);
                                ribbonPx = ribbonPx - 2 - ribbonW;
-                               if (ribbonPx <= 154) {
+                               if (ribbonPx <= 200) {
                                  ribbonPy = ribbonPy - 3 - ribbonH;
-                                 ribbonPx = 598;
+                                 ribbonPx = 657;
                                }
                              }
                              callback();

static/src/app/admin/edit-app-user/edit-app-user.component.html

@@ -23,7 +23,7 @@
             [(ngModel)]="appUserSquadId">
       <option [value]="null">{{'user.submit.field.squad.not.assigned' | translate}}</option>
       <option *ngFor="let squad of squads" [ngValue]="squad._id">
-        {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
+        {{squad.fraction == 'BLUFOR'? fraction.ARF : fraction.SWORD}}: {{squad.name}}
       </option>
     </select>
     <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>

static/src/app/admin/user-list/app-user-item.component.html

@@ -6,8 +6,8 @@
         <a>{{appUser.username}}</a>
       </span>
       <br>
-      <small *ngIf="appUser.squad && appUser.squad.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{appUser.squad.name}}</small>
-      <small *ngIf="appUser.squad && appUser.squad.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{appUser.squad.name}}</small>
+      <small *ngIf="appUser.squad && appUser.squad.fraction == 'OPFOR'">{{fraction.SWORD}} - {{appUser.squad.name}}</small>
+      <small *ngIf="appUser.squad && appUser.squad.fraction == 'BLUFOR'">{{fraction.ARF}} - {{appUser.squad.name}}</small>
       <small *ngIf="!appUser.squad">{{'users.list.item.label.no.squad' | translate}}</small>
     </div>
 

static/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 import {SettingsService} from './services/settings.service';
 import {HttpGateway} from './services/http-gateway';
-import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material';
+import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
 import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
@@ -38,6 +38,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     MatToolbarModule,
     MatListModule,
     MatMenuModule,
+    MatTableModule,
     FlexLayoutModule,
   ],
 

static/src/app/army/army-member/army-member.component.html

@@ -8,7 +8,7 @@
     </div>
 
     <h3 class="text-center" style="font-weight: 600"
-        [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+        [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_ARF : fraction.COLOR_SWORD">
       {{'public.army.member.headline' | translate:{name: user.username} }}
     </h3>
 
@@ -25,40 +25,35 @@
       </span>
     </div>
 
-    <div class="pull-left" style="margin-top:20px;">
-      <div class="table-container" style="min-width: 500px">
-        <table class="table">
-          <thead>
-          <tr class="table-head">
-            <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
-            <th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th>
-            <th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th>
-            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
-              {{'public.army.member.awards.date' | translate}}
-            </th>
-          </tr>
-          </thead>
-          <tbody *ngFor="let award of awards">
-          <tr *ngIf="award.confirmed === 1" class="cell-outline">
-            <td class="text-center" *ngIf="award.decorationId.isMedal">
-              <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
-            </td>
-            <td class="text-center" *ngIf="!award.decorationId.isMedal">
-              <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
-            </td>
-            <td style="font-weight: bold">
-              {{award.decorationId.name}}
-            </td>
-            <td>
-              {{award.reason}}
-            </td>
-            <td class="text-right">
-              <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </div>
+    <div class="pull-left" class="table-container">
+        <mat-table [dataSource]="awards" class="mat-elevation-z8">
+          <ng-container matColumnDef="award-graphics">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let element">
+              <img src="resource/decoration/{{element.decorationId._id}}.png">
+            </mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="title">
+            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.title' | translate}}</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{element.decorationId.name}}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="reason">
+            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.reason' | translate}}</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{element.reason}}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="date">
+            <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.date' | translate}}</mat-header-cell>
+            <mat-cell *matCellDef="let element">
+              <span class="small text-nowrap">{{element.date | date: 'dd.MM.yyyy'}}</span>
+            </mat-cell>
+          </ng-container>
+
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        </mat-table>
     </div>
   </div>
 </div>

static/src/app/army/army-member/army-member.component.scss

@@ -2,7 +2,7 @@
 
 .army-member-view {
   width: 90%;
-  height: 100vh;
+  min-height: 100vh;
   padding: 5px;
   margin: auto;
 }
@@ -18,15 +18,11 @@
   padding-left: 5px;
 }
 
-.table {
-  overflow-wrap: break-word;
-  table-layout: fixed;
-}
-
-.table-container {
-  margin-top: 10px;
+div.table-container {
+  margin-top:20px;
   padding: 5px;
   overflow-x: auto;
+  min-width: 500px;
 }
 
 .table-head {
@@ -34,14 +30,26 @@
   color: white;
 }
 
-tbody {
-  background: rgba(255, 255, 255, 0.88);
+mat-table.mat-table {
+  background: rgba(255, 255, 255, 0.70);
+
+  .mat-column-award-graphics {
+    flex: 0 0 15%;
+  }
+
+  .mat-column-title {
+    flex: 0 0 25%;
+  }
+
+  .mat-column-reason {
+    flex: 0 0 52%;
+  }
+
+  .mat-column-date {
+    flex: 0 0 8%;
+  }
 }
 
-.cell-outline {
-  outline: 1px solid #D4D4D4;
-}
-
-tr.cell-outline:hover {
-  background-color: #ffffff;
+mat-row.mat-row {
+  @extend mat-table.mat-table;
 }

static/src/app/army/army-member/army-member.component.ts

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {Award, User} from '../../models/model-interfaces';
 import {ActivatedRoute, Router} from '@angular/router';
 import {UserService} from '../../services/army-management/user.service';
-import {Subscription} from 'rxjs/Subscription';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {Fraction} from '../../utils/fraction.enum';
 import {Location} from '@angular/common';
@@ -14,8 +13,6 @@ import {Location} from '@angular/common';
 })
 export class ArmyMemberComponent implements OnInit {
 
-  subscription: Subscription;
-
   user: User = {};
 
   awards: Award[] = [];
@@ -26,6 +23,8 @@ export class ArmyMemberComponent implements OnInit {
 
   readonly fraction = Fraction;
 
+  readonly displayedColumns = ['award-graphics', 'title', 'reason', 'date'];
+
   constructor(private router: Router,
               private route: ActivatedRoute,
               private userService: UserService,
@@ -34,17 +33,17 @@ export class ArmyMemberComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.subscription = this.route.params
-                            .map(params => params['id'])
-                            .filter(id => id !== undefined)
-                            .flatMap(id => this.userService.getUser(id))
-                            .subscribe(user => {
-                              this.user = user;
-                              this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
-                              this.awardingService.getUserAwardings(user._id).subscribe((awards => {
-                                this.awards = awards;
-                              }));
-                            });
+    this.route.params
+        .map(params => params['id'])
+        .filter(id => id !== undefined)
+        .flatMap(id => this.userService.getUser(id))
+        .subscribe(user => {
+          this.user = user;
+          this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
+          this.awardingService.getUserAwardings(user._id).subscribe((awards => {
+            this.awards = awards;
+          }));
+        });
   };
 
   backToOverview() {

static/src/app/army/army-squad/army-squad.component.html

@@ -7,7 +7,7 @@
   </div>
   <div class=" middle-row">
     <div class="name-cell">
-      <div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"
+      <div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_ARF : fraction.COLOR_SWORD"
            *ngFor="let member of squad.members">
           <span class="member-link"
                 (click)="select(member._id)">

static/src/app/army/army.component.html

@@ -2,8 +2,8 @@
   <h1>{{'public.army.headline' | translate}}</h1>
 
   <div class="pull-left army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.BLUFOR">
-    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">
-      {{fraction.BLUFOR}}
+    <h3 class="army-head" [style.color]="fraction.COLOR_ARF">
+      {{fraction.ARF}}
       <button mat-icon-button class="switch-btn-blufor"
               (click)="singleViewSwitch(fraction.OPFOR)">
         <mat-icon svgIcon="chevron-right"></mat-icon>
@@ -18,12 +18,12 @@
   </div>
 
   <div class="pull-right army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.OPFOR">
-    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">
+    <h3 class="army-head" [style.color]="fraction.COLOR_SWORD">
       <button mat-icon-button class="switch-btn-opfor"
               (click)="singleViewSwitch(fraction.BLUFOR)">
         <mat-icon svgIcon="chevron-right"></mat-icon>
       </button>
-      {{fraction.OPFOR}}
+      {{fraction.SWORD}}
     </h3>
     <cc-army-squad *ngFor="let squad of army[1].squads"
                    [squad]="squad"

static/src/app/login/login.component.html

@@ -1,6 +1,6 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
   <div class="row">
-    <h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
+    <h2>{{'login.headline' | translate}}</h2>
 
     <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
     <input #userName id="inputEmail" class="form-control"
@@ -11,12 +11,10 @@
     <input #password type="password" id="inputPassword" class="form-control"
            placeholder="{{'login.password' | translate}}" required="">
 
-    <div class="form-group">
-      <button mat-stroked-button type="submit">
-        <span *ngIf="!loading">{{'login.submit' | translate}}</span>
-        <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-      </button>
-    </div>
+    <button mat-stroked-button type="submit">
+      <span *ngIf="!loading">{{'login.submit' | translate}}</span>
+      <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </button>
   </div>
 </form>
 

static/src/app/login/login.component.scss

@@ -2,53 +2,31 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
 
-.form-signin > .row {
-  max-width: 400px;
-  margin: auto;
-}
+  & > .row {
+    max-width: 400px;
+    margin: auto;
 
-.form-signin-heading {
-  text-align: center;
-}
+    & > h2 {
+      text-align: center
+    }
 
-.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
-  margin-bottom: 10px;
-}
+    input.form-control {
+      margin-bottom: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      font-size: 16px;
+      height: auto;
+      padding: 10px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
 
-.form-signin .checkbox {
-  font-weight: normal;
-}
-
-.form-signin .form-control {
-  position: relative;
-  font-size: 16px;
-  height: auto;
-  padding: 10px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-
-.form-signin input[type="text"] {
-  margin-bottom: 5px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.form-signin input[type="password"] {
-  margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-button {
-  width: 100%;
+    button {
+      width: 100%;
+    }
+  }
 }
 
 /* Loading Animation */

static/src/app/login/signup.component.html

@@ -1,26 +1,27 @@
 <form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
 
-  <div class="row" style="position: absolute;width: 500px;left: 40%;">
-    <h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
+  <div class="row">
+    <h2>{{'signup.headline' | translate}}</h2>
 
     <p [innerHtml]="'signup.description' | translate"></p>
 
     <label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
-    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
+    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
+           autofocus="">
 
     <label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
-    <input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
+    <input #password type="password" id="inputPassword" class="form-control"
+           placeholder="{{'signup.password' | translate}}" required="">
 
     <label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
-    <input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
+    <input #secret type="text" id="inputSecret" class="form-control"
+           placeholder="{{'signup.secret.placeholder' | translate}}"
            required="">
 
-    <div class="form-group">
-      <button type="submit" class="btn btn-lg btn-block btn-primary">
-        <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
-        <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-      </button>
-    </div>
+    <button mat-stroked-button type="submit">
+      <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
+      <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </button>
   </div>
 </form>
 

static/src/app/manage/decorations/decoration-list/decoration-item.component.html

@@ -6,6 +6,8 @@
         <a>{{decoration.name}}</a>
       </span>
       <br>
+      <small *ngIf="decoration.fraction == 'ARF'">{{fraction.ARF}}</small>
+      <small *ngIf="decoration.fraction == 'SWORD'">{{fraction.SWORD}}</small>
       <small *ngIf="decoration.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
       <small *ngIf="decoration.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
       <small *ngIf="decoration.fraction == 'GLOBAL'">{{'decorations.list.filter.global' | translate}}</small>

static/src/app/manage/decorations/decoration-list/decoration-list.component.html

@@ -1,6 +1,8 @@
 <div class="select-list">
   <cc-list-filter
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+    [filterButtons]="[{label: fraction.ARF, value: 'ARF'},
+                      {label: fraction.SWORD, value: 'SWORD'},
+                      {label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'},
                       {label: 'decorations.list.filter.global', value: 'GLOBAL'}]"
     [addButton]="{svgIcon: 'add', tooltip: 'decorations.list.button.add'}"

static/src/app/manage/decorations/edit-decoration/edit-decoration.component.html

@@ -17,6 +17,8 @@
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="decoration.fraction">
+      <option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
+      <option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
       <option value="GLOBAL">{{'decorations.submit.field.fraction.global' | translate}}</option>

static/src/app/manage/ranks/edit-rank/edit-rank.component.html

@@ -17,8 +17,8 @@
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="rank.fraction">
-      <option value="OPFOR">{{fraction.OPFOR}}</option>
-      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
+      <option value="OPFOR">{{fraction.SWORD}}</option>
+      <option value="BLUFOR">{{fraction.ARF}}</option>
     </select>
     <show-error displayName="{{'ranks.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>

static/src/app/manage/ranks/rank-list/rank-item.component.html

@@ -6,8 +6,8 @@
         <a>{{rank.name}}</a>
       </span>
       <br>
-      <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
-      <small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
+      <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.SWORD}}</small>
+      <small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.ARF}}</small>
       <small> {{'ranks.list.item.label.level' | translate:{level: rank.level} }}</small>
     </div>
 

static/src/app/manage/ranks/rank-list/rank-list.component.html

@@ -1,7 +1,7 @@
 <div class="select-list">
   <cc-list-filter
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-                      {label: fraction.OPFOR, value: 'OPFOR'}]"
+    [filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
+                      {label: fraction.SWORD, value: 'OPFOR'}]"
     [addButton]="{svgIcon: 'add', tooltip: 'ranks.list.button.add'}"
     (executeSearch)="filterRanks($event)"
     (openAddFrom)="openNewRankForm()">

static/src/app/manage/squads/edit-squad/edit-squad.component.html

@@ -17,8 +17,8 @@
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="squad.fraction">
-      <option value="OPFOR">{{fraction.OPFOR}}</option>
-      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
+      <option value="OPFOR">{{fraction.SWORD}}</option>
+      <option value="BLUFOR">{{fraction.ARF}}</option>
     </select>
     <show-error displayName="{{'squad.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>

static/src/app/manage/squads/squad-list/squad-item.component.html

@@ -6,8 +6,8 @@
         <a>{{squad.name}}</a>
       </span>
       <br>
-      <small *ngIf="squad.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
-      <small *ngIf="squad.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
+      <small *ngIf="squad.fraction == 'OPFOR'">{{fraction.ARF}}</small>
+      <small *ngIf="squad.fraction == 'BLUFOR'">{{fraction.SWORD}}</small>
     </div>
 
     <div class="col-xs-4">

static/src/app/manage/squads/squad-list/squad-list.component.html

@@ -1,7 +1,7 @@
 <div class="select-list">
   <cc-list-filter
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-                      {label: fraction.OPFOR, value: 'OPFOR'}]"
+    [filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
+                      {label: fraction.SWORD, value: 'OPFOR'}]"
     [addButton]="{svgIcon: 'add', tooltip: 'squad.list.tooltip.new'}"
     (executeSearch)="filterSquads($event)"
     (openAddFrom)="openNewSquadForm()">

static/src/app/manage/users/award-user/award-user.component.html

@@ -13,7 +13,8 @@
             style="min-width: 200px;">
       <option [value]="0">{{'users.award.field.decoration.placeholder' | translate}}</option>
       <option *ngFor="let deco of decorations" [value]="deco._id">
-        {{deco.fraction == 'BLUFOR'? fraction.BLUFOR : deco.fraction == 'OPFOR'? fraction.OPFOR : 'Global'}}:
+        {{deco.fraction == 'BLUFOR' ? fraction.BLUFOR : deco.fraction == 'OPFOR' ? fraction.OPFOR : deco.fraction ==
+      'ARF' ? fraction.ARF : deco.fraction == 'SWORD' ? fraction.SWORD : 'Global'}}:
         {{deco.name}}
       </option>
     </select>
@@ -93,8 +94,8 @@
         </td>
         <td class="text-center">
           {{award.confirmed === 0 ?
-          awardStatus['users.award.table.status.in.progress'] : (award.confirmed === 1 ?
-          awardStatus['users.award.table.status.approved']: awardStatus['users.award.table.status.rejected'])}}
+            awardStatus['users.award.table.status.in.progress'] : (award.confirmed === 1 ?
+                awardStatus['users.award.table.status.approved'] : awardStatus['users.award.table.status.rejected'])}}
         </td>
         <td class="text-center">
           <label>

static/src/app/manage/users/edit-user/edit-user.component.html

@@ -23,7 +23,7 @@
             (change)="toggleRanks()">
       <option [value]="0">{{'user.submit.field.squad.not.assigned' | translate}}</option>
       <option *ngFor="let squad of squads" [ngValue]="squad">
-        {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
+        {{squad.fraction == 'BLUFOR'? fraction.ARF : fraction.SWORD}}: {{squad.name}}
       </option>
     </select>
     <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>

static/src/app/manage/users/user-list/user-item.component.html

@@ -6,8 +6,8 @@
         <a>{{user.username}}</a>
       </span>
       <br>
-      <small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{user.squadId.name}}</small>
-      <small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{user.squadId.name}}
+      <small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.SWORD}} - {{user.squadId.name}}</small>
+      <small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.ARF}} - {{user.squadId.name}}
       </small>
       <small *ngIf="!user.squadId">{{'users.list.item.label.no.squad' | translate}}</small>
     </div>

static/src/app/manage/users/user-list/user-list.component.html

@@ -1,7 +1,7 @@
 <div class="select-list">
   <cc-list-filter
-    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
-                      {label: fraction.OPFOR, value: 'OPFOR'},
+    [filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
+                      {label: fraction.SWORD, value: 'OPFOR'},
                       {label: 'users.list.filter.no.squad', value: 'UNASSIGNED'}]"
     [addButton]="{svgIcon: 'add-user', tooltip: 'users.list.tooltip.new'}"
     (executeSearch)="filterUsers(undefined, $event)"

static/src/app/models/model-interfaces.ts

@@ -1,4 +1,5 @@
 import {Observable} from 'rxjs';
+import {Fraction} from '../utils/fraction.enum';
 
 export interface AppUser {
   _id?: string;
@@ -59,6 +60,8 @@ export interface War {
   endDate?: string;
   ptBlufor?: number;
   ptOpfor?: number;
+  fractionMappingBlufor?: Fraction.SWORD | Fraction.ARF | 'BLUFOR' | 'OPFOR';
+  fractionMappingOpfor?: Fraction.SWORD | Fraction.ARF | 'BLUFOR' | 'OPFOR';
   playersBlufor?: number;
   playersOpfor?: number;
   budgetBlufor?: number;
@@ -85,7 +88,7 @@ export interface Rank {
 
 export interface Award {
   _id?: string;
-  userId: string;
+  userId: string | User;
   decorationId?: any; // Decoration or string
   reason?: string;
   proposer?: AppUser;

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -2,6 +2,8 @@
   <h1>{{'public.decorations.headline' | translate}}</h1>
 
   <div class="fraction-side-bar">
+    <div [ngClass]="{active: active === 'ARF'}" (click)="switchFraction('ARF')">{{fraction.ARF}}</div>
+    <div [ngClass]="{active: active === 'SWORD'}" (click)="switchFraction('SWORD')">{{fraction.SWORD}}</div>
     <div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
     <div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
     <div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -45,10 +45,11 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
           }
 
           const fract = queryParams.fraction;
-          if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
+          if (fract && (fract === 'ARF' || fract === 'SWORD' ||
+            fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
             this.switchFraction(queryParams.fraction);
           } else {
-            this.switchFraction('BLUFOR');
+            this.switchFraction('ARF');
           }
         });
   };

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html

@@ -5,8 +5,7 @@
          [class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
   </div>
   <mat-card-content>
-    <div [style.background]="decoration.fraction === 'BLUFOR' ?
-    fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+    <div [style.background]="getColor(decoration.fraction)">
       {{decoration.name}}
     </div>
     <div class="decoration-description">

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts

@@ -17,6 +17,21 @@ export class DecorationPanelComponent {
 
   readonly fraction = Fraction;
 
+  getColor(fractionKey) {
+    switch (fractionKey) {
+      case 'ARF':
+        return this.fraction.COLOR_ARF;
+      case 'SWORD':
+        return this.fraction.COLOR_SWORD;
+      case 'BLUFOR':
+        return this.fraction.COLOR_BLUFOR;
+      case 'OPFOR':
+        return this.fraction.COLOR_OPFOR;
+      default:
+        return this.fraction.COLOR_NEUTRAL;
+    }
+  }
+
   selectDecoration() {
     this.select.emit(this.decoration);
   }

static/src/app/pub/rank-overview/rank-overview.component.html

@@ -2,7 +2,7 @@
   <h1>{{'public.ranks.headline' | translate}}</h1>
 
   <div class="column-container pull-left">
-    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+    <h3 [style.color]="fraction.COLOR_ARF">{{fraction.ARF}}</h3>
 
     <table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="column-container pull-right">
-    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+    <h3 [style.color]="fraction.COLOR_SWORD">{{fraction.SWORD}}</h3>
 
     <table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">
 

static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts

@@ -13,8 +13,6 @@ export class RankPanelComponent {
 
   @Output() select = new EventEmitter();
 
-  readonly fraction = Fraction;
-
   selectRank() {
     this.select.emit(this.rank);
   }

static/src/app/pub/user-list-sheet/user-list-sheet.component.html

@@ -24,8 +24,8 @@
       <span mat-line>
         {{user.username}}
       </span>
-    <span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
-        {{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - {{user.squadId.name}}
+    <span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_ARF :fraction.COLOR_SWORD">
+        {{user.squadId.fraction === 'BLUFOR' ? fraction.ARF : fraction.SWORD}} - {{user.squadId.name}}
       </span>
   </a>
 </mat-nav-list>

static/src/app/request/award/req-award.component.html

@@ -1,66 +1,66 @@
-<form #form="ngForm" class="overview">
-  <h3>{{'request.award.headline' | translate}}</h3>
+<div class="request-award-container">
+  <form #form="ngForm" class="overview">
+    <h3>{{'request.award.headline' | translate}}</h3>
 
-  <div class="form-group">
-    <label for="user">{{'request.award.field.user' | translate}}</label>
-    <select class="form-control"
-            name="user"
-            id="user"
-            [(ngModel)]="user"
-            [compareWith]="equals"
-            (change)="toggleUser()"
-            required>
-      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
-      <option *ngFor="let user of users" [ngValue]="user">
-        {{user.username}}
-      </option>
-    </select>
-  </div>
-
-  <div class="form-group">
-    <label for="decoration">{{'request.award.field.award' | translate}}</label>
-    <select class="form-control"
-            name="decoration"
-            id="decoration"
-            [(ngModel)]="decoration"
-            [compareWith]="equals"
-            (change)="toggleDecoPreview(decoDescription, decoPreview)"
-            required>
-      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
-      <option *ngFor="let deco of decorations" [ngValue]="deco">
-        {{deco.name}}
-      </option>
-    </select>
-  </div>
-
-  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
-    <div class="col-sm-1 decoration-preview">
-      <img class="center-block" #decoPreview>
+    <div class="form-group">
+      <label for="user">{{'request.award.field.user' | translate}}</label>
+      <select class="form-control"
+              name="user"
+              id="user"
+              [(ngModel)]="user"
+              [compareWith]="equals"
+              (change)="toggleUser()"
+              required>
+        <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
+        <option *ngFor="let user of users" [ngValue]="user">
+          {{user.username}}
+        </option>
+      </select>
     </div>
-    <div class="col-sm-2"
-         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-      &nbsp;
+
+    <div class="form-group">
+      <label for="decoration">{{'request.award.field.award' | translate}}</label>
+      <select class="form-control"
+              name="decoration"
+              id="decoration"
+              [(ngModel)]="decoration"
+              [compareWith]="equals"
+              (change)="toggleDecoPreview(decoDescription, decoPreview)"
+              required>
+        <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
+        <option *ngFor="let deco of decorations" [ngValue]="deco">
+          {{deco.name}}
+        </option>
+      </select>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="reason">{{'request.award.field.reason' | translate}}</label>
-    <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
-  </div>
+    <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
+      <div class="decoration-preview">
+        <img class="center-block" #decoPreview>
+      </div>
+      <div style="border-radius: 0px 15px 15px 0px; font-style: oblique; padding: 0 10px" #decoDescription>
+      </div>
+    </div>
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.award.button.cancel' | translate}}
-  </button>
+    <div class="form-group">
+      <label for="reason">{{'request.award.field.reason' | translate}}</label>
+      <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
+                id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
+    </div>
 
-  <button id="save"
-          (click)="addAwarding(decoPreview, decoDescription)"
-          class="btn btn-default"
-          [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-    {{'request.award.button.submit' | translate}}
-  </button>
+    <button id="cancel"
+            (click)="cancel()"
+            class="btn btn-default">
+      {{'request.award.button.cancel' | translate}}
+    </button>
+
+    <button id="save"
+            (click)="addAwarding(decoPreview, decoDescription)"
+            class="btn btn-default"
+            [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
+      {{'request.award.button.submit' | translate}}
+    </button>
+  </form>
 
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
@@ -113,5 +113,4 @@
       </tbody>
     </table>
   </div>
-
-</form>
+</div>

static/src/app/request/award/req-award.component.scss

@@ -1,18 +1,19 @@
-@import url('../../style/overview.scss');
+div.request-award-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
-  width: 100% !important;
-  margin-left: 25px !important;
+  form {
+    width: 33%;
+    min-width: 300px;
+    margin: auto;
+  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
-.trash {
-  cursor: pointer;
-}
-
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -21,16 +22,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-  min-width: 300px;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}

static/src/app/request/award/req-award.component.ts

@@ -7,6 +7,7 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 import {UserService} from '../../services/army-management/user.service';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Fraction} from '../../utils/fraction.enum';
 
 
 @Component({
@@ -47,7 +48,13 @@ export class RequestAwardComponent implements OnInit {
     this.userService.findUsers({squadId: currentUser.squad._id}).subscribe(users => {
       this.users = users;
     });
-    this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
+
+    const selectableFractions = [
+      (currentUser.squad.fraction === Fraction.BLUFOR) ? Fraction.ARF : Fraction.SWORD,
+      currentUser.squad.fraction
+    ];
+
+    this.decorationService.findDecorations('', selectableFractions).subscribe(decorations => {
       this.decorations = decorations;
     });
   }

static/src/app/request/confirm-award/confirm-award.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-award-container">
   <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -58,4 +58,4 @@
       </tbody>
     </table>
   </div>
-</form>
+</div>

static/src/app/request/confirm-award/confirm-award.component.scss

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-award-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}

static/src/app/request/confirm-award/confirm-award.component.ts

@@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
     });
   }
 
-  confirm(award: Award, decision: boolean, reason: string, rejectReason: string) {
+  confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
     const updateObject = {
       _id: award._id,
       confirmed: decision ? 1 : 2

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<div class="confirm-promotion-container">
   <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -52,7 +52,7 @@
         <td class="text-right">
           <a class="action" (click)="confirm(promotion, true)">
             {{'request.confirm.promotion.table.button.action.accept' | translate}}
-          </a><br>
+          </a>
           <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
             {{'request.confirm.promotion.table.button.action.reject' | translate}}
           </a>
@@ -61,4 +61,4 @@
       </tbody>
     </table>
   </div>
-</form>
+</div>

static/src/app/request/confirm-promotion/confirm-promotion.component.scss

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+div.confirm-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -10,6 +10,7 @@
 
 .action {
   cursor: pointer;
+  line-height: 2em;
 }
 
 .table {
@@ -20,14 +21,5 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
     });
   }
 
-  confirm(promotion: Promotion, decision: boolean, rejectReason: string) {
+  confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
     const updateObject = {
       _id: promotion._id,
       confirmed: decision ? 1 : 2

static/src/app/request/promotion/req-promotion.component.html

@@ -1,61 +1,63 @@
-<form #form="ngForm" class="overview">
-  <h3>{{'request.promotion.headline' | translate}}</h3>
-
-  <div class="form-group">
-    <label for="user">{{'request.promotion.field.participant' | translate}}</label>
-    <select class="form-control"
-            name="user"
-            id="user"
-            [(ngModel)]="user"
-            [compareWith]="equals"
-            required
-            (change)="toggleUser()">
-      <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
-      <option *ngFor="let user of users" [ngValue]="user">
-        {{user.username}}
-      </option>
-    </select>
-  </div>
-
-  <div *ngIf="showForm">
+<div class="request-promotion-container">
+  <form #form="ngForm">
+    <h3>{{'request.promotion.headline' | translate}}</h3>
 
     <div class="form-group">
-      <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
-      <input class="form-control"
-             [(ngModel)]="selectedUserRank"
-             [ngModelOptions]="{standalone: true}"
-             readonly>
-    </div>
-
-    <div class="form-group">
-      <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+      <label for="user">{{'request.promotion.field.participant' | translate}}</label>
       <select class="form-control"
-              name="decoration"
-              id="decoration"
-              #decorationField
-              [(ngModel)]="newLevel"
-              required>
-        <option *ngFor="let rank of ranks" [ngValue]="rank.level">
-          {{rank.name}}
+              name="user"
+              id="user"
+              [(ngModel)]="user"
+              [compareWith]="equals"
+              required
+              (change)="toggleUser()">
+        <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
+        <option *ngFor="let user of users" [ngValue]="user">
+          {{user.username}}
         </option>
       </select>
     </div>
 
-  </div>
+    <div *ngIf="showForm">
 
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    {{'request.promotion.button.cancel' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
+        <input class="form-control"
+               [(ngModel)]="selectedUserRank"
+               [ngModelOptions]="{standalone: true}"
+               readonly>
+      </div>
 
-  <button id="save"
-          *ngIf="showForm"
-          (click)="addPromotion()"
-          class="btn btn-default"
-          [disabled]="newLevel === user.rankLvl">
-    {{'request.promotion.button.submit' | translate}}
-  </button>
+      <div class="form-group">
+        <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
+        <select class="form-control"
+                name="decoration"
+                id="decoration"
+                #decorationField
+                [(ngModel)]="newLevel"
+                required>
+          <option *ngFor="let rank of ranks" [ngValue]="rank.level">
+            {{rank.name}}
+          </option>
+        </select>
+      </div>
+
+    </div>
+
+    <button id="cancel"
+            (click)="cancel()"
+            class="btn btn-default">
+      {{'request.promotion.button.cancel' | translate}}
+    </button>
+
+    <button id="save"
+            *ngIf="showForm"
+            (click)="addPromotion()"
+            class="btn btn-default"
+            [disabled]="newLevel === user.rankLvl">
+      {{'request.promotion.button.submit' | translate}}
+    </button>
+  </form>
 
   <div class="table-container">
     <label>Beförderungsanträge</label>
@@ -106,6 +108,4 @@
       </tbody>
     </table>
   </div>
-
-
-</form>
+</div>

static/src/app/request/promotion/req-promotion.component.scss

@@ -1,17 +1,19 @@
-@import url('../../style/overview.scss');
+.request-promotion-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 
-.overview {
-  margin-left: 25px !important;
+  form {
+    width: 33%;
+    min-width: 300px;
+    margin: auto;
+  }
 }
 
 .decoration-preview {
   padding: 5px;
 }
 
-.trash {
-  cursor: pointer;
-}
-
 .table {
   overflow-wrap: break-word;
   table-layout: fixed;
@@ -20,16 +22,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-.form-group {
-  width: 25%;
-  min-width: 300px;
-}
-
-h3 {
-  margin: 80px 0 20px -20px;
-}

static/src/app/request/sql-dashboard/sql-dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="overview">
+<div class="sql-dashboard-container">
   <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
 
   <div class="table-container">
@@ -6,11 +6,11 @@
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -27,7 +27,7 @@
         <td>
           {{promotion.proposer.username}}
         </td>
-        <td class="text-center">
+        <td class="text-right">
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
       </tr>

static/src/app/request/sql-dashboard/sql-dashboard.component.scss

@@ -1,7 +1,7 @@
-@import url('../../style/overview.scss');
-
-.overview {
-  margin-left: 25px !important;
+.sql-dashboard-container {
+  margin: 2em auto;
+  width: 95%;
+  min-width: 835px;
 }
 
 .decoration-preview {
@@ -16,11 +16,6 @@
 .table-container {
   margin-top: 40px;
   overflow-x: auto;
-  width: 90%;
   min-width: 800px;
   padding: 5px;
 }
-
-h3 {
-  margin: 80px 0 20px -20px;
-}

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -1,24 +1,23 @@
-<div *ngIf="!isSmallLayout">
-  <div class="scroll-btn"
+<div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
+  <div class="scroll-btn-left"
        *ngIf="isLeftScrollVisible"
        (mouseenter)="setRepeater(-10)"
        (mouseleave)="clearRepeater()">
     <mat-icon svgIcon="chevron-left"></mat-icon>
   </div>
 
-  <div class="campaign-horizontal-list" #horizontalList>
-    <div class="campaign-entry"
-         [ngClass]="{active : selectedCampaignId === 'all'}"
-         (click)="select({_id:'all'})">
-      {{'stats.campaign.title.all.time.overview' | translate}}
-    </div>
-    <div class="campaign-entry"
-         *ngFor="let campaign of campaigns$ | async"
-         [ngClass]="{active : campaign._id === selectedCampaignId}"
-         (click)="select(campaign)">
-      {{campaign.title}}
-      <span style="display:inline-block;"
-            *ngIf="loginService.hasPermission(3)">
+  <div class="campaign-entry"
+       [ngClass]="{active : selectedCampaignId === 'all'}"
+       (click)="select({_id:'all'})">
+    {{'stats.campaign.title.all.time.overview' | translate}}
+  </div>
+  <div class="campaign-entry"
+       *ngFor="let campaign of campaigns$ | async"
+       [ngClass]="{active : campaign._id === selectedCampaignId}"
+       (click)="select(campaign)">
+    {{campaign.title}}
+    <span style="display:inline-block;"
+          *ngIf="loginService.hasPermission(3)">
       <button mat-icon-button
               [matMenuTriggerFor]="menu"
               (click)="$event.stopPropagation()"
@@ -36,10 +35,9 @@
         </button>
       </mat-menu>
     </span>
-    </div>
   </div>
 
-  <div class="scroll-btn scroll-btn-right"
+  <div class="scroll-btn-right"
        *ngIf="isRightScrollVisible"
        (mouseenter)="setRepeater(10)"
        (mouseleave)="clearRepeater()">

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss

@@ -1,20 +1,3 @@
-.scroll-btn {
-  position: absolute;
-  height: 46px;
-  width: 32px;
-  cursor: pointer;
-}
-
-.scroll-btn-right {
-  top: 0;
-  left: calc(100vw - 50px);
-}
-
-.scroll-btn mat-icon {
-  height: 46px;
-  width: 28px;
-}
-
 .campaign-horizontal-list {
   width: 100%;
   height: 100%;
@@ -23,29 +6,47 @@
   padding: 0;
   overflow: hidden;
   box-shadow: #666666 1px 1px 4px;
-}
 
-.campaign-entry {
-  border: 1px solid #222222;
-  min-width: 20%;
-  max-height: 4em;
-  padding: 10px 0;
-  text-align: center;
-  cursor: pointer;
-  font-size: 16px;
-  float: left;
-  background: #424242;
-  color: #9d9d9d;
-}
+  .scroll-btn-left {
+    position: absolute;
+    height: 46px;
+    width: 32px;
+    cursor: pointer;
 
-.active {
-  background: #222222;
-  color: white;
-  border-bottom: 3px solid #ffd740;
-}
+    mat-icon {
+      height: 46px;
+      width: 28px;
+    }
+  }
 
-.campaign-entry:hover {
-  border-bottom: 3px solid #ffd740;
+  .scroll-btn-right {
+    @extend .scroll-btn-left;
+    top: 0;
+    left: calc(100vw - 32px);
+  }
+
+  .campaign-entry {
+    border: 1px solid #222222;
+    min-width: 20%;
+    max-height: 4em;
+    padding: 10px 0;
+    text-align: center;
+    cursor: pointer;
+    font-size: 16px;
+    float: left;
+    background: #424242;
+    color: #9d9d9d;
+
+    &:hover {
+      border-bottom: 3px solid #ffd740;
+    }
+
+    &.active {
+      background: #222222;
+      color: white;
+      border-bottom: 3px solid #ffd740;
+    }
+  }
 }
 
 .campaign-select-small {

static/src/app/statistic/campaign/highscore/highscore.component.html

@@ -28,7 +28,7 @@
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>{{'stats.highscore.header.name' | translate}}</th>
           <td mat-cell *matCellDef="let element"
-              [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+              [style.color]="fractionHelpers.getFractionColor(element['fraction'])">
             {{element.name}}
           </td>
         </ng-container>

static/src/app/statistic/campaign/highscore/highscore.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {PlayerService} from '../../../services/logs/player.service';
-import {Fraction} from '../../../utils/fraction.enum';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {Player} from '../../../models/model-interfaces';
 import {PlayerUtils} from '../../../utils/player-utils';
+import {FractionHelpers} from '../../../utils/global.helpers';
 
 
 @Component({
@@ -25,7 +25,7 @@ export class StatisticHighScoreComponent implements OnInit {
 
   playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length);
 
-  readonly fraction = Fraction;
+  readonly fractionHelpers = FractionHelpers;
 
   constructor(private route: ActivatedRoute,
               private playerService: PlayerService) {

static/src/app/statistic/campaign/overview/campaign-overview.component.scss

@@ -10,6 +10,7 @@
   .slide-chart-container {
     width: 100%;
     min-width: unset;
+    height: 65vh;
     margin-top: 105px;
     margin-bottom: 35px;
   }

static/src/app/statistic/campaign/overview/campaign-overview.component.ts

@@ -4,6 +4,8 @@ import {CampaignService} from '../../../services/logs/campaign.service';
 import {ChartUtils} from '../../../utils/chart-utils';
 import {Fraction} from '../../../utils/fraction.enum';
 import {WarService} from '../../../services/logs/war.service';
+import {FractionHelpers} from '../../../utils/global.helpers';
+import {War} from '../../../models/model-interfaces';
 
 
 @Component({
@@ -22,9 +24,7 @@ export class StatisticOverviewComponent implements OnInit {
   playerData: any[] = [];
   currentData: any[] = [];
 
-  colorScheme = {
-    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
-  };
+  colorScheme;
   gradient = false;
   xAxis = true;
   yAxis = true;
@@ -81,44 +81,71 @@ export class StatisticOverviewComponent implements OnInit {
     }
   }
 
-  initChart(wars: any[]) {
-    const pointsObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    const pointsSumObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    const playersObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+  initChart(wars: War[]) {
+    const fractions: string[] = [];
+    this.colorScheme = {
+      domain: []
+    };
+
+    if (wars.find(war => war.fractionMappingBlufor === 'BLUFOR' || war.fractionMappingOpfor === 'BLUFOR')) {
+      fractions.push(Fraction.BLUFOR);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor('BLUFOR'));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === 'OPFOR' || war.fractionMappingOpfor === 'OPFOR')) {
+      fractions.push(Fraction.OPFOR);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor('OPFOR'));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === Fraction.ARF || war.fractionMappingOpfor === Fraction.ARF)) {
+      fractions.push(Fraction.ARF);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor(Fraction.ARF));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === Fraction.SWORD || war.fractionMappingOpfor === Fraction.SWORD)) {
+      fractions.push(Fraction.SWORD);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor(Fraction.SWORD));
+    }
+
+    const pointsObj = ChartUtils.getMultiDataArray(...fractions);
+    const pointsSumObj = ChartUtils.getMultiDataArray(...fractions);
+    const playersObj = ChartUtils.getMultiDataArray(...fractions);
 
     for (let i = wars.length - 1; i >= 0; i--) {
       const war = wars[i];
       if (!war) {
         continue;
       }
+
+      const bluforIndex = fractions.findIndex(fraction =>
+        fraction === FractionHelpers.getFractionName(war, 'BLUFOR'));
+      const opforIndex = fractions.findIndex(
+        fraction => fraction === FractionHelpers.getFractionName(war, 'OPFOR'));
+
       const j = wars.length - i - 1;
       const warDate = (this.id === 'all') ? new Date(war.date) : ChartUtils.getShortDateString(war.date);
-
-      pointsObj[0].series.push({
+      pointsObj[bluforIndex].series.push({
         name: warDate,
         value: war.ptBlufor
       });
-      pointsObj[1].series.push({
+      pointsObj[opforIndex].series.push({
         name: warDate,
         value: war.ptOpfor
       });
-      pointsSumObj[0].series.push({
+      pointsSumObj[bluforIndex].series.push({
         name: warDate,
-        value: pointsSumObj[0].series[j - 1] ?
-          pointsSumObj[0].series[j - 1].value + war.ptBlufor :
+        value: pointsSumObj[bluforIndex].series[j - 1] ?
+          pointsSumObj[bluforIndex].series[j - 1].value + war.ptBlufor :
           war.ptBlufor
       });
-      pointsSumObj[1].series.push({
+      pointsSumObj[opforIndex].series.push({
         name: warDate,
-        value: pointsSumObj[1].series[j - 1]
-          ? pointsSumObj[1].series[j - 1].value + war.ptOpfor :
+        value: pointsSumObj[opforIndex].series[j - 1]
+          ? pointsSumObj[opforIndex].series[j - 1].value + war.ptOpfor :
           war.ptOpfor
       });
-      playersObj[0].series.push({
+      playersObj[bluforIndex].series.push({
         name: warDate,
         value: war.playersBlufor
       });
-      playersObj[1].series.push({
+      playersObj[opforIndex].series.push({
         name: warDate,
         value: war.playersOpfor
       });

static/src/app/statistic/stats.component.scss

@@ -3,7 +3,7 @@
   float: left;
 
   @media all and (max-width: 959px) {
-    width: 100%;
+    width: 100%!important;
   }
 }
 

static/src/app/statistic/war/fraction-stats/fraction-stats.component.html

@@ -1,5 +1,4 @@
-<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html">
-
+<div class="fade-in fraction-stats-container">
   <mat-button-toggle-group class="chart-select-group"
                            #group="matButtonToggleGroup"
                            [(ngModel)]="activeChartSelect"

static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss

@@ -1,6 +1,11 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
+.fraction-stats-container {
+  border-top: 1px solid #dadada;
+  padding-top: 25px;
+}
+
 .chart-select-group {
   display: flex;
   width: fit-content;
@@ -40,16 +45,29 @@
 }
 
 @media all and (max-width: 959px) {
+  .fraction-stats-container {
+    width: 93%;
+    margin: auto;
+  }
+
   .chart-container {
-    width: 150%;
+    width: 100%;
     min-width: 0;
-    height: 70vh
+    padding: 0;
+    margin: 10px 0 0;
   }
 
   .chart-select-group {
-    background: #dadada;
-    max-width: fit-content;
-    width: 200%;
     flex-wrap: wrap;
   }
+
+  mat-button-toggle.mat-button-toggle {
+    width: 50%;
+    border: 1px solid #dadada;
+    text-align: center;
+
+    & /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
+      width: 100%;
+    }
+  }
 }

static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts

@@ -1,8 +1,8 @@
 import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
 import {ChartUtils} from '../../../utils/chart-utils';
-import {Fraction} from '../../../utils/fraction.enum';
 import {War} from '../../../models/model-interfaces';
 import {TranslateService} from '@ngx-translate/core';
+import {FractionHelpers} from '../../../utils/global.helpers';
 
 
 @Component({
@@ -12,8 +12,6 @@ import {TranslateService} from '@ngx-translate/core';
 })
 export class FractionStatsComponent implements OnInit, OnChanges {
 
-  readonly fraction = Fraction;
-
   @ViewChild('overview') private overviewContainer: ElementRef;
 
   @Input() war: War;
@@ -41,10 +39,9 @@ export class FractionStatsComponent implements OnInit, OnChanges {
   tmpStabilizeData;
   tmpPlayerCountData;
 
-  colorScheme = {
-    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR_LIGHT, Fraction.COLOR_OPFOR_LIGHT,
-      Fraction.COLOR_BLUFOR_DARK, Fraction.COLOR_OPFOR_DARK, Fraction.COLOR_BLUFOR_GREY, Fraction.COLOR_OPFOR_GREY]
-  };
+  colorScheme;
+  fractionNameBlufor;
+  fractionNameOpfor;
 
   labels;
   labelsKeys;
@@ -77,6 +74,21 @@ export class FractionStatsComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.war || changes.logData) {
+      this.fractionNameBlufor = FractionHelpers.getFractionName(this.war, 'BLUFOR');
+      this.fractionNameOpfor = FractionHelpers.getFractionName(this.war, 'OPFOR');
+      this.colorScheme = {
+        domain: [
+          FractionHelpers.getFractionColor('BLUFOR', this.war),
+          FractionHelpers.getFractionColor('OPFOR', this.war),
+          FractionHelpers.getFractionColor('BLUFOR', this.war, 'LIGHT'),
+          FractionHelpers.getFractionColor('OPFOR', this.war, 'LIGHT'),
+          FractionHelpers.getFractionColor('BLUFOR', this.war, 'DARK'),
+          FractionHelpers.getFractionColor('OPFOR', this.war, 'DARK'),
+          FractionHelpers.getFractionColor('BLUFOR', this.war, 'GREY'),
+          FractionHelpers.getFractionColor('OPFOR', this.war, 'GREY'),
+        ]
+      };
+
       this.initialized = {
         budget: false,
         kill: false,
@@ -433,7 +445,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         name: t,
         series: [
           {
-            name: Fraction.BLUFOR,
+            name: this.fractionNameBlufor,
             value: flagStatusMap.blufor[lastExistingIdx] ? 1 : 0
           }
         ]
@@ -442,7 +454,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         name: t,
         series: [
           {
-            name: Fraction.OPFOR,
+            name: this.fractionNameOpfor,
             value: flagStatusMap.opfor[lastExistingIdx] ? -1 : 0
           }
         ]
@@ -453,17 +465,17 @@ export class FractionStatsComponent implements OnInit, OnChanges {
   }
 
   initializeTempCollections() {
-    this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpVehicleData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR,
-      Fraction.BLUFOR.concat(' Leicht'), Fraction.OPFOR.concat(' Leicht'), Fraction.BLUFOR.concat(' Schwer'),
-      Fraction.OPFOR.concat(' Schwer'), Fraction.BLUFOR.concat(' Luft'), Fraction.OPFOR.concat(' Luft'));
-    this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpPlayerCountData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpPointData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpBudgetData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpKillData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpVehicleData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor,
+      this.fractionNameBlufor.concat(' Leicht'), this.fractionNameOpfor.concat(' Leicht'), this.fractionNameBlufor.concat(' Schwer'),
+      this.fractionNameOpfor.concat(' Schwer'), this.fractionNameBlufor.concat(' Luft'), this.fractionNameOpfor.concat(' Luft'));
+    this.tmpTransportData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpReviveData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpStabilizeData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
+    this.tmpPlayerCountData = ChartUtils.getMultiDataArray(this.fractionNameBlufor, this.fractionNameOpfor);
 
     [this.tmpKillData, this.tmpFrienlyFireData, this.tmpVehicleData, this.tmpReviveData, this.tmpStabilizeData,
       this.tmpTransportData].forEach(tmp => {
@@ -509,10 +521,10 @@ export class FractionStatsComponent implements OnInit, OnChanges {
 
   axisFormatY(val) {
     if (val === 1) {
-      return Fraction.BLUFOR;
+      return this.fractionNameBlufor;
     }
     if (val === -1) {
-      return Fraction.OPFOR;
+      return this.fractionNameOpfor;
     }
     return '';
   }

static/src/app/statistic/war/scoreboard/scoreboard.component.html

@@ -1,48 +1,44 @@
-<div class="fade-in scoreboard-table">
+<mat-table matSort
+           [dataSource]="sortedRows"
+           matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
+           (matSortChange)="sortScoreboardData($event)"
+           class="mat-elevation-z8 fade-in">
 
-  <mat-table matSort
-             [dataSource]="sortedRows"
-             matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
-             (matSortChange)="sortScoreboardData($event)"
-             class="mat-elevation-z8">
+  <ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
+    <mat-header-cell *matHeaderCellDef
+                     mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let element"
+              [style.color]="fractionHelpers.getFractionColor(element['fraction'],war)">
+      {{element.name}}
+    </mat-cell>
+  </ng-container>
 
-    <ng-container matColumnDef="{{tableHead[0].prop}}">
-      <mat-header-cell *matHeaderCellDef
-                       mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
-      <mat-cell *matCellDef="let element"
-                [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-        {{element.name}}
-      </mat-cell>
-    </ng-container>
+  <ng-container matColumnDef="{{tableHead[1].prop}}">
+    <mat-header-cell *matHeaderCellDef
+                     mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{fractionHelpers.getFractionName(war, element.fraction)}}</mat-cell>
+  </ng-container>
 
-    <ng-container matColumnDef="{{tableHead[1].prop}}">
-      <mat-header-cell *matHeaderCellDef
-                       mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element.fraction ===
-      'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
-    </ng-container>
+  <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
+    <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
+      <mat-icon svgIcon="{{column.prop}}">
+      </mat-icon>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
+  </ng-container>
 
-    <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
-        <mat-icon svgIcon="{{column.prop}}">
-        </mat-icon>
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="interact">
-      <mat-header-cell *matHeaderCellDef></mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        <button mat-icon-button
-                matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
-                (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
+  <ng-container matColumnDef="interact">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <button mat-icon-button
+              matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
+              (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
                  element['steamUUID'] : element['name'])">
-          <mat-icon svgIcon="stats-detail"></mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+        <mat-icon svgIcon="stats-detail"></mat-icon>
+      </button>
+    </mat-cell>
+  </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-  </mat-table>
-</div>
+  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>

static/src/app/statistic/war/scoreboard/scoreboard.component.scss

@@ -1,24 +1,12 @@
 @import url('../../../style/list-entry.scss');
 @import url('../../../style/hide-scrollbar.scss');
 
-.scoreboard-table {
+mat-table.mat-table {
   width: 1058px;
-  margin: auto;
-  height: 68vh;
   overflow-x: hidden;
   overflow-y: auto;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-  border-bottom: 1px solid #dadada;
-}
-
-.mat-header-row {
-  width: 1058px;
-  position: absolute;
-  z-index: 100;
-}
-
-.mat-table > mat-row:first-of-type {
-  padding-top: 56px;
+  margin: auto;
+  height: 70vh;
 }
 
 .mat-column-name {
@@ -50,7 +38,25 @@
     white-space: pre-wrap;
   }
 
-  .mat-header-row, .scoreboard-table {
+  .mat-header-row, mat-table.mat-table {
     width: 768px;
   }
 }
+
+@media all and (max-width: 599px) {
+  .mat-column-name {
+    flex: 0 0 130px;
+    padding-left: 1vw;
+  }
+
+  .mat-header-row {
+    width: 755px;
+  }
+
+  mat-table.mat-table {
+    width: 100%;
+    height: 50vh;
+    overflow-x: auto;
+    display: grid;
+  }
+}

static/src/app/statistic/war/scoreboard/scoreboard.component.ts

@@ -6,6 +6,7 @@ import {saveAs} from 'file-saver/FileSaver';
 import {MatSort} from '@angular/material';
 import {SortUtils} from '../../../utils/sort-utils';
 import {TranslateService} from '@ngx-translate/core';
+import {FractionHelpers} from '../../../utils/global.helpers';
 
 @Component({
   selector: 'cc-scoreboard',
@@ -16,6 +17,8 @@ export class ScoreboardComponent implements OnChanges {
 
   readonly fraction = Fraction;
 
+  readonly fractionHelpers = FractionHelpers;
+
   @Input() war: War;
 
   @Input() fractionFilterSelected: string;

static/src/app/statistic/war/war-header/war-header.component.html

@@ -1,15 +1,32 @@
 <div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
   <div class="war-header-container">
-    <div class="pull-left head-field" style="width: 250px">
+    <div class="pull-left head-field">
       <h4>{{'stats.scoreboard.standings' | translate}}</h4>
-      <span [style.color]="fraction.COLOR_BLUFOR"
-            style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
+      <span [style.color]="fractionHelpers.getFractionColor('BLUFOR',war)"
+            style="font-weight: bold; margin-right: 10px">
+        {{fractionHelpers.getFractionName(war, 'BLUFOR')}} {{war.ptBlufor}}
+      </span>
       <span style="font-size: x-large">|</span>
-      <span [style.color]="fraction.COLOR_OPFOR"
-            style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
+      <span [style.color]="fractionHelpers.getFractionColor('OPFOR',war)"
+            style="font-weight: bold; margin-left: 10px;">
+        {{war.ptOpfor}} {{fractionHelpers.getFractionName(war, 'OPFOR')}}
+      </span>
     </div>
 
-    <div class="pull-left head-field-pie-chart">
+    <div class="pull-left head-field" style="margin-top:0" *ngIf="isSmallLayout">
+      <h4>{{'stats.scoreboard.participants' | translate}}</h4>
+      <span [style.color]="fractionHelpers.getFractionColor('BLUFOR',war)"
+            style="font-weight: bold; margin-right: 10px">
+        {{fractionHelpers.getFractionName(war, 'BLUFOR')}} {{war.playersBlufor}}
+      </span>
+      <span style="font-size: 13px;font-weight: bold;">vs</span>
+      <span [style.color]="fractionHelpers.getFractionColor('OPFOR',war)"
+            style="font-weight: bold; margin-left: 10px;">
+        {{war.playersOpfor}} {{fractionHelpers.getFractionName(war, 'OPFOR')}}
+      </span>
+    </div>
+
+    <div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
       <h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
       <ngx-charts-pie-chart
         class="pull-left"

static/src/app/statistic/war/war-header/war-header.component.scss

@@ -16,10 +16,13 @@
   font-size: 22px;
   margin-top: 10px;
   margin-bottom: 10px;
+  width: 250px;
 }
 
 .head-field-pie-chart {
-  @extend .head-field;
+  font-size: 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-left: 100px;
 }
 
@@ -119,3 +122,64 @@ span.tab-control {
     padding-left: 57px;
   }
 }
+
+@media all and (max-width: 599px) {
+  .war-header {
+    position: relative;
+    overflow: auto;
+    margin-bottom: 34px; /*do not cover anything with back to top bar*/
+  }
+
+  .nav-tabs {
+    width: 100%;
+    padding-top: 0;
+  }
+
+  .war-header-container {
+    width: 100%;
+    padding-top: 0;
+
+    h4 {
+      font-size: 16px;
+      margin-bottom: 0;
+    }
+
+    div.btn-clean-log {
+      padding: 2vw 4vw 38px;
+      width: 100%;
+
+      & > a {
+        margin: 0 !important;
+        width:100%;
+      }
+    }
+  }
+
+  .head-field {
+    width: calc(100% - 1.5vw);
+    text-align: center;
+    margin-top: 1vh;
+    margin-bottom: 0;
+
+    & > span {
+      font-size: 16px;
+    }
+  }
+
+  .nav-tabs > li {
+    width: 25%;
+    font-size: 12px;
+
+    mat-icon {
+      display: block;
+    }
+  }
+
+  /* radio box fraction select */
+  .nav-tabs > li:last-child {
+    width: fit-content;
+    position: absolute;
+    margin-top: -38px;
+    margin-left: 27%;
+  }
+}

static/src/app/statistic/war/war-header/war-header.component.ts

@@ -8,6 +8,7 @@ import {LogsService} from '../../../services/logs/logs.service';
 import {ScoreboardComponent} from '../scoreboard/scoreboard.component';
 import {BaseConfig} from '../../../app.config';
 import {Observable} from 'rxjs';
+import {FractionHelpers} from '../../../utils/global.helpers';
 
 
 @Component({
@@ -19,6 +20,8 @@ export class WarHeaderComponent implements OnInit {
 
   readonly fraction = Fraction;
 
+  readonly fractionHelpers = FractionHelpers;
+
   war: War;
 
   @ViewChild('scoreboard') scoreBoardComponent: ScoreboardComponent;
@@ -43,9 +46,7 @@ export class WarHeaderComponent implements OnInit {
 
   playerChart: any[] = [];
 
-  colorScheme = {
-    domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
-  };
+  colorScheme;
 
   constructor(private route: ActivatedRoute,
               private warService: WarService,
@@ -64,8 +65,18 @@ export class WarHeaderComponent implements OnInit {
           this.fractionStatsInitialized = false;
           this.fractionFilterSelected = undefined;
 
+          this.colorScheme = {
+            domain: [
+              FractionHelpers.getFractionColor('OPFOR', war),
+              FractionHelpers.getFractionColor('BLUFOR', war)
+            ]
+          };
+
           this.playerChart =
-            ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
+            ChartUtils.getSingleDataArray(
+              FractionHelpers.getFractionName(war, 'OPFOR'), war.playersOpfor,
+              FractionHelpers.getFractionName(war, 'BLUFOR'), war.playersBlufor
+            );
           Object.assign(this, [this.playerChart]);
         });
 

static/src/app/statistic/war/war-list/war-list.component.scss

@@ -91,8 +91,13 @@
   border-right: 1px solid #dadada;
   height: 100vh;
   top: 0;
+  left: calc(20% - 1px);
   z-index: -1;
 
+  &.collapsed {
+    left: 0;
+  }
+
   @media all and (max-width: 959px) {
     display: none;
   }

static/src/app/statistic/war/war-submit/war-submit.component.html

@@ -25,6 +25,33 @@
     </select>
   </div>
 
+  <div class="form-group">
+    <label for="fractionMappingBlufor">{{'stats.war.submit.mapping.blufor' | translate}}</label>
+    <select id="fractionMappingBlufor" name="fractionMappingBlufor" class="form-control btn dropdown-toggle"
+            required
+            [(ngModel)]="war.fractionMappingBlufor">
+      <option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
+      <option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
+      <option value="OPFOR">{{fraction.OPFOR}}</option>
+      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
+    </select>
+    <show-error displayName="{{'stats.war.submit.mapping.blufor' | translate}}" controlPath="fraction"></show-error>
+  </div>
+
+  <div class="form-group">
+    <label for="fractionMappingOpfor">{{'stats.war.submit.mapping.opfor' | translate}}</label>
+    <select id="fractionMappingOpfor" name="fractionMappingOpfor" class="form-control btn dropdown-toggle"
+            required
+            [(ngModel)]="war.fractionMappingOpfor">
+      <option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
+      <option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
+      <option value="OPFOR">{{fraction.OPFOR}}</option>
+      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
+    </select>
+    <show-error displayName="{{'stats.war.submit.mapping.opfor' | translate}}" controlPath="fraction"></show-error>
+  </div>
+
+
   <div class="form-group" *ngIf="!war._id">
     <label for="log">{{'stats.war.submit.logfile' | translate}}</label>
     <input id="log" name="log" class="ui-button form-control" type="file"
@@ -35,24 +62,24 @@
   </div>
 
   <div class="form-group" *ngIf="war._id">
-    <label for="ptBlufor">{{'stats.war.submit.points' | translate}} {{fraction.BLUFOR}}</label>
+    <label for="ptBlufor">{{'stats.war.submit.points' | translate}} {{fractionHelpers.getFractionName(war, "BLUFOR")}}</label>
     <input type="number" class="form-control"
            [(ngModel)]="war.ptBlufor"
            name="ptBlufor"
            id="ptBlufor"
            required min="0"/>
-    <show-error displayName="{{'stats.war.submit.points' | translate}} {{fraction.BLUFOR}}"
+    <show-error displayName="{{'stats.war.submit.points' | translate}}"
                 controlPath="ptBlufor"></show-error>
   </div>
 
   <div class="form-group" *ngIf="war._id">
-    <label for="ptOpfor">{{'stats.war.submit.points' | translate}} {{fraction.OPFOR}}</label>
+    <label for="ptOpfor">{{'stats.war.submit.points' | translate}} {{fractionHelpers.getFractionName(war, "OPFOR")}}</label>
     <input type="number" class="form-control"
            [(ngModel)]="war.ptOpfor"
            name="ptOpfor"
            id="ptOpfor"
            required min="0"/>
-    <show-error displayName="{{'stats.war.submit.points' | translate}} {{fraction.OPFOR}}"
+    <show-error displayName="{{'stats.war.submit.points' | translate}}"
                 controlPath="ptOpfor"></show-error>
   </div>
 

static/src/app/statistic/war/war-submit/war-submit.component.ts

@@ -9,6 +9,7 @@ import {SpinnerService} from '../../../services/user-interface/spinner/spinner.s
 import {Subscription} from 'rxjs';
 import {Fraction} from '../../../utils/fraction.enum';
 import {TranslateService} from '@ngx-translate/core';
+import {FractionHelpers} from '../../../utils/global.helpers';
 
 
 @Component({
@@ -28,6 +29,8 @@ export class WarSubmitComponent {
 
   readonly fraction = Fraction;
 
+  readonly fractionHelpers = FractionHelpers;
+
   showFileError = false;
 
   loading = false;

static/src/app/style/overview.scss

@@ -8,10 +8,8 @@
   bottom: 10px;
 }
 
-.absolute-label {
-  display: block;
-  position: absolute;
-  font-size: 12px;
-  padding: 5px;
-  margin-left: 25%;
+@media all and (max-width: 959px) {
+  .overview {
+    left: 345px;
+  }
 }

static/src/app/utils/fraction.enum.ts

@@ -1,12 +1,23 @@
 export enum Fraction {
+  COLOR_NEUTRAL = '#222222',
+  ARF = 'ARF',
+  COLOR_ARF = '#336699',
+  COLOR_ARF_LIGHT = '#6666dd',
+  COLOR_ARF_DARK = '#0C0CA6',
+  COLOR_ARF_GREY = '#515179',
+  SWORD = 'SWORD',
+  COLOR_SWORD = '#8b8b8b',
+  COLOR_SWORD_GREY = '#282828',
+  COLOR_SWORD_DARK = '#101010',
+  COLOR_SWORD_LIGHT = '#b8b8b8',
   BLUFOR = 'NATO',
-  OPFOR = 'CSAT',
   COLOR_BLUFOR = '#3c5fa1',
   COLOR_BLUFOR_LIGHT = '#6666dd',
   COLOR_BLUFOR_DARK = '#0C0CA6',
   COLOR_BLUFOR_GREY = '#515179',
+  OPFOR = 'CSAT',
   COLOR_OPFOR = '#a90100',
   COLOR_OPFOR_DARK = '#890F0F',
   COLOR_OPFOR_LIGHT = '#fb5555',
-  COLOR_OPFOR_GREY = '#955c5f'
+  COLOR_OPFOR_GREY = '#955c5f',
 }

static/src/app/utils/global.helpers.ts

@@ -1,4 +1,6 @@
 import {MatButtonToggleGroup} from '@angular/material';
+import {War} from '../models/model-interfaces';
+import {Fraction} from './fraction.enum';
 
 export const CSSHelpers = {
   getBackgroundCSS: (imageUrl) => {
@@ -10,6 +12,90 @@ export const CSSHelpers = {
   }
 };
 
+export const FractionHelpers = {
+  getFractionColor: (fraction, war?: War, style?) => {
+    let switchInput;
+    if (war) {
+      switchInput = (fraction === 'BLUFOR' ? war.fractionMappingBlufor : war.fractionMappingOpfor);
+    } else {
+      switchInput = fraction;
+    }
+
+    switch (switchInput) {
+      case Fraction.ARF:
+        switch (style) {
+          case 'LIGHT':
+            return Fraction.COLOR_ARF_LIGHT;
+          case 'DARK':
+            return Fraction.COLOR_ARF_DARK;
+          case 'GREY':
+            return Fraction.COLOR_ARF_GREY;
+          default:
+            return Fraction.COLOR_ARF;
+        }
+      case 'BLUFOR':
+        switch (style) {
+          case 'LIGHT':
+            return Fraction.COLOR_BLUFOR_LIGHT;
+          case 'DARK':
+            return Fraction.COLOR_BLUFOR_DARK;
+          case 'GREY':
+            return Fraction.COLOR_BLUFOR_GREY;
+          default:
+            return Fraction.COLOR_BLUFOR;
+        }
+      case 'OPFOR':
+        switch (style) {
+          case 'LIGHT':
+            return Fraction.COLOR_OPFOR_LIGHT;
+          case 'DARK':
+            return Fraction.COLOR_OPFOR_DARK;
+          case 'GREY':
+            return Fraction.COLOR_OPFOR_GREY;
+          default:
+            return Fraction.COLOR_OPFOR;
+        }
+      case Fraction.SWORD:
+        switch (style) {
+          case 'LIGHT':
+            return Fraction.COLOR_SWORD_LIGHT;
+          case 'DARK':
+            return Fraction.COLOR_SWORD_DARK;
+          case 'GREY':
+            return Fraction.COLOR_SWORD_GREY;
+          default:
+            return Fraction.COLOR_SWORD;
+        }
+    }
+  },
+
+  getFractionColors: (war: War, fraction) => {
+    switch (fraction === 'BLUFOR' ? war.fractionMappingBlufor : war.fractionMappingOpfor) {
+      case Fraction.ARF:
+        return Fraction.COLOR_ARF;
+      case 'BLUFOR':
+        return Fraction.COLOR_BLUFOR;
+      case 'OPFOR':
+        return Fraction.COLOR_OPFOR;
+      case Fraction.SWORD:
+        return Fraction.COLOR_SWORD;
+    }
+  },
+
+  getFractionName: (war: War, fraction) => {
+    switch (fraction === 'BLUFOR' ? war.fractionMappingBlufor : war.fractionMappingOpfor) {
+      case Fraction.ARF:
+        return Fraction.ARF;
+      case 'BLUFOR':
+        return Fraction.BLUFOR;
+      case 'OPFOR':
+        return Fraction.OPFOR;
+      case Fraction.SWORD:
+        return Fraction.SWORD;
+    }
+  }
+};
+
 export const UIHelpers = {
   toggleReleaseButton: (currentVal, group?: MatButtonToggleGroup) => {
     if (group) {

static/src/assets/i18n/statistics/de.json

@@ -88,6 +88,8 @@
   "stats.war.submit.button.submit": "Bestätigen",
   "stats.war.submit.button.cancel": "Abbrechen",
   "stats.war.submit.error.file.format": "Logfile muss im Format RPT, LOG oder TXT vorliegen",
+  "stats.war.submit.mapping.blufor": "Fraktion Zuordnung NATO",
+  "stats.war.submit.mapping.opfor": "Fraktion Zuordnung CSAT",
 
   "stats.campaign.submit.headline.new": "Neue Kampagne hinzufügen",
   "stats.campaign.submit.headline.edit": "Kampagne editieren",

static/src/assets/i18n/statistics/en.json

@@ -95,6 +95,8 @@
   "stats.war.submit.button.submit": "Submit",
   "stats.war.submit.button.cancel": "Cancel",
   "stats.war.submit.error.file.format": "Logfile requires RPT, LOG or TXT format",
+  "stats.war.submit.mapping.blufor": "Fraction Mapping NATO",
+  "stats.war.submit.mapping.opfor": "Fraction Mapping CSAT",
 
   "stats.campaign.submit.headline.new": "Add new campaign",
   "stats.campaign.submit.headline.edit": "Edit campaign",