New UI and more match info 💄

basrc/main-window.ts

@@ -45,7 +45,7 @@ export class MainWindow {
             width: windowState.width,
             x: windowState.x,
             y: windowState.y,
-            minHeight: 400,
+            minHeight: 450,
             minWidth: 600,
             frame: false,
             title: "Compwerstats",

frsrc/character/controller.ts

@@ -17,16 +17,16 @@ export class CharacterController {
         return table.toArray();
     }
 
-    static async getExternalContent(): Promise<void> {
+    static async getExternalContent(characterId: number, force: boolean = false): Promise<void> {
         const database = CompwerstatsDatabase.getInstance();
         const table = database.character;
+        const character = await Character.load(characterId);
         const dataUrlPrefix = 'data:image/png;base64,';
         const generateCharacterUrlByType = (char: Character, fileName: string): string => {
             return `https://blzgdapipro-a.akamaihd.net/hero/${ char.getUrlSafeName() }/${ fileName }`
         };
 
         database.transaction('rw', table, async () => {
-            const iconlessCharacters = await table.where('iconPath').equals('').toArray();
             const types = [{
                     name: 'icon-portrait.png',
                     default: './static/img/temp-icon-portrait.png',
@@ -37,13 +37,13 @@ export class CharacterController {
                     column: 'imagePath'
                 }];
 
-            iconlessCharacters.forEach((character: Character) => {
-                types.forEach((icon) => {
+            types.forEach((icon) => {
+                if (force || !character[icon.column]) {
                     fetch(generateCharacterUrlByType(character, icon.name))
                         .then((response) => response.blob())
                         .then((blob) => {
                             const reader = new FileReader();
-    
+
                             reader.readAsDataURL(blob);
                             reader.onloadend = () => {
                                 const dataUrl = <string>reader.result;
@@ -56,11 +56,21 @@ export class CharacterController {
                                 character.save();
                             }
                         });
-                })
+                }
             });
         });
     }
 
+    static async getAllExternalContent() {
+        const database = CompwerstatsDatabase.getInstance();
+        const table = database.character;
+        const iconlessCharacters = await table.where('iconPath').equals('').toArray();
+
+        iconlessCharacters.forEach((character) => {
+            CharacterController.getExternalContent(character.id);
+        });
+    }
+
     static async getFormSchema(create: boolean = false, saveCallback: () => void): Promise<Object> {
         const characterTypes = await CharacterTypeController.getAll();
 
@@ -108,8 +118,8 @@ export class CharacterController {
                     type: 'submit',
                     buttonText: create ? 'Create' : 'Save',
                     onSubmit: async (model) => {
-                        await model.save();
-                        CharacterController.getExternalContent();
+                        const id = await model.save();
+                        CharacterController.getExternalContent(id);
                         if (typeof saveCallback === 'function') {
                             saveCallback();
                         }

frsrc/database.ts

@@ -50,6 +50,11 @@ export class CompwerstatsDatabase extends Dexie {
             rank: '++id, &title, iconPath, ratingMin, ratingMax',
             season: '++id, name, placementRating'
         });
+
+        this.version(2).stores({
+            season: '++id, name, placementRating, archived',
+            match: '++id, [seasonId+type], mapId, &time, *character, result, comment, rating, groupsize, redRating, blueRating, steak',
+        });
     }
 
     private setupClassMap() {
@@ -77,9 +82,6 @@ export class CompwerstatsDatabase extends Dexie {
             Rank.create('Master', 3500, 3999, './static/img/rank_master.png').save();
             Rank.create('Grandmaster', 4000, 5000, './static/img/rank_grandmaster.png').save();
 
-            Season.create('Season 6').save();
-            Season.create('Season 7').save();
-
             CommentSuggestion.create('Good communication').save();
             CommentSuggestion.create('Great teamwork').save();
             CommentSuggestion.create('Filled').save();
@@ -122,6 +124,7 @@ export class CompwerstatsDatabase extends Dexie {
             Character.create(ctSupport, 'Ana', '', '').save();
             Character.create(ctSupport, 'Lúcio', '', '').save();
             Character.create(ctSupport, 'Mercy', '', '').save();
+            // Character.create(ctSupport, 'Moira', '', '').save();
             Character.create(ctSupport, 'Symmetra', '', '').save();
             Character.create(ctSupport, 'Zenyatta', '', '').save();
 
@@ -141,10 +144,11 @@ export class CompwerstatsDatabase extends Dexie {
             OverwatchMap.create(mtControl, 'Oasis', 'https://bnetcmsus-a.akamaihd.net/cms/page_media/mn/MNNHA2I8CTIG1497480960107.jpg').save();
 
             OverwatchMap.create(mtEscort, 'Dorado', 'https://bnetcmsus-a.akamaihd.net/cms/page_media/fn/FNBIVXUVWF6X1497480004798.jpg').save();
+            OverwatchMap.create(mtEscort, 'Junkertown', 'https://bnetcmsus-a.akamaihd.net/cms/page_media/3EDBV89EVDZG1504724220173.jpg').save();
             OverwatchMap.create(mtEscort, 'Route 66', 'https://bnetcmsus-a.akamaihd.net/cms/page_media/hj/HJDM6SIEAIGO1497481024426.jpg').save();
             OverwatchMap.create(mtEscort, 'Watchpoint: Gibraltar', 'https://bnetcmsus-a.akamaihd.net/cms/page_media/x0/X0WORICQ092M1497480184004.jpg').save();
         }).then(() => {
-            CharacterController.getExternalContent();
+            CharacterController.getAllExternalContent();
             OverwatchMapController.getExternalContent();
         }, (reason) => {
             console.error(reason);

frsrc/index.ts

@@ -1,33 +1,131 @@
 import Vue from 'vue';
+import Vuex from 'vuex'
 import VueRouter from 'vue-router';
+import * as VueMoment from 'vue-moment';
 import Chrome from './view/chrome/chrome';
-import RouterFront from './view/page-front/router';
 import RouterStats from './view/page-stats/router';
 import RouterSettings from './view/page-settings/router';
 import RouterCompetitive from './view/page-competitive/router';
+import RouterCreateSeason from './view/page-create-season/router';
 
+import { SeasonMode } from './interface'
+
+import { mainBasedOnMode } from './router-helper';
 import PercentFilter from './view/filters/percent';
 
-const VueMoment = require('vue-moment');
-
-Vue.use(VueRouter);
-Vue.use(VueMoment);
-
-Vue.filter(PercentFilter.name, PercentFilter);
-
-const router = new VueRouter({
-    routes: [
-        ...RouterFront,
-        ...RouterStats,
-        ...RouterSettings,
-        ...RouterCompetitive
-    ]
-});
-
-const vue = new Vue({
-    el: '.app',
-    components: {
-        Chrome
-    },
-    router: router
-});
+import { SeasonController } from './season';
+import { MatchController } from './match';
+import { Rank, RankController } from './rank';
+
+async function init() {
+    // Initing initial data
+    const {season, seasonMode, rating, rank} = await getInitialState();
+
+    // Initing Vue stuff
+    Vue.use(Vuex);
+    Vue.use(VueRouter);
+    Vue.use(VueMoment);
+
+    Vue.filter(PercentFilter.name, PercentFilter);
+
+    const store = new Vuex.Store({
+        strict: true,
+        state: {
+            seasonId: <number> (season ? season.id : null),
+            seasonMode: <SeasonMode> seasonMode,
+            rating: <number> rating,
+            rank: <Rank> rank
+        },
+        getters: {
+            getSeasonId: (state) => () => state.seasonId,
+            getSeasonMode: (state) => () => state.seasonMode,
+            getRating: (state) => () => state.rating,
+            getRank: (state) => () => state.rank
+        },
+        mutations: {
+            seasonId: (store, seasonId: number) => {
+                store.seasonId = seasonId;
+            },
+            seasonMode: (store, mode: SeasonMode) => {
+                store.seasonMode = mode;
+            },
+            rating: (store, rating: number) => {
+                store.rating = rating;
+            },
+            rank: (store, rank: Rank) => {
+                store.rank = rank;
+            }
+        },
+        actions: {
+            updateSeasonId: async (context, seasonId: number): Promise<void> => {
+                const season = await SeasonController.getSeasonById(seasonId);
+                const seasonMode = await SeasonController.getMode(seasonId);
+                var rating = await MatchController.latestSeasonMatchRating(seasonId);
+
+                if (!rating && season.placementRating) {
+                    rating = season.placementRating;
+                }
+                else if (!rating) {
+                    rating = -1;
+                }
+
+                context.commit('seasonId', seasonId);
+                context.commit('seasonMode', seasonMode);
+                context.dispatch('updateRating', rating);
+            },
+            updateRating: async (context, rating): Promise<void> => {
+                const rank = await RankController.getByRating(rating);
+
+                context.commit('rating', rating);
+                context.commit('rank', rank);
+            }
+        }
+    });
+
+    const router = new VueRouter({
+        routes: [
+            {
+                path: '/',
+                redirect: (to) => {
+                    return mainBasedOnMode(store.state.seasonMode);
+                }
+            },
+            ...RouterStats,
+            ...RouterSettings,
+            ...RouterCompetitive,
+            ...RouterCreateSeason
+        ]
+    });
+
+    const vue = new Vue({
+        el: '.app',
+        store,
+        components: {
+            Chrome
+        },
+        router: router
+    });
+
+    return vue;
+}
+
+async function getInitialState() {
+    let seasonMode = null;
+    let rating = null;
+    let rank = null;
+    const season = await SeasonController.getCurrent();
+    if (season) {
+        seasonMode = await SeasonController.getMode(season.id);
+        rating = await MatchController.latestSeasonMatchRating(season.id);
+        rank = await RankController.getByRating(rating);
+    }
+
+    return {
+        season,
+        seasonMode,
+        rating,
+        rank
+    };
+}
+
+init();

frsrc/interface.ts

@@ -2,3 +2,26 @@ export interface HeadSelectItem {
     value: string | number,
     label: string
 }
+
+export enum SeasonMode {
+    Placements = 1,
+    PlacementsComplete = 2,
+    Matches = 3
+}
+
+export interface ButtonMode {
+    label: string,
+    shortLabel: string,
+    path: string
+}
+
+export enum MatchType {
+    Placement = 'placement',
+    Match = 'match'
+}
+
+export enum MatchResult {
+    Win = 'win',
+    Loss = 'loss',
+    Draw = 'draw'
+}