From 11c4e1b62b616c590f877e9036e5cdd0a103d3eb Mon Sep 17 00:00:00 2001
From: NoLifeKing <webmaster@itssimple.se>
Date: Sat, 8 May 2021 12:07:16 +0200
Subject: [PATCH] feat: Game summary window, now showing all your sessions

---
 resources/css/main-window.css   |  2 +-
 resources/scripts/mainWindow.js |  7 +++++--
 resources/scripts/utils.js      |  2 +-
 src/scripts/mainWindow.js       | 30 ++++++++++++++++++++++++++++++
 src/scripts/utils.js            | 19 +++++++++++++++++++
 src/scss/main-window.scss       |  4 ++++
 windows/main-window.html        |  5 +++--
 7 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/resources/css/main-window.css b/resources/css/main-window.css
index 7673f5c..b5ec875 100644
--- a/resources/css/main-window.css
+++ b/resources/css/main-window.css
@@ -1 +1 @@
-:root{--default-backgroundcolor:#515960;--darker-background:#272b30}::-webkit-scrollbar{width:5px;height:5px;background:0 0}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:var(--darker-background)}::-webkit-scrollbar-thumb{background:var(--default-backgroundcolor)}#main-win-container{overflow-y:scroll;max-height:682px}body{height:100vh;overflow:hidden}.desktop{display:flex;height:100vh}#gameStarts div{margin-bottom:2px}.statsColumn{margin-left:10px;padding:5px;padding-left:10px;padding-right:10px;min-width:300px;max-width:100%}.summaryRow{display:flex;justify-content:space-between;align-items:center;padding:5px}#weekSummaryGraph{background-color:#272b30}#sessionStats td{padding-top:4px;padding-bottom:4px}.ct-label{color:#fff}.ct-grid{stroke:rgba(255,255,255,.2)}.ct-bar{stroke-width:50px;stroke:var(--default-backgroundcolor)!important}*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar{padding-left:unset;padding-right:1rem;background-color:var(--default-backgroundcolor)!important}
\ No newline at end of file
+:root{--default-backgroundcolor:#515960;--darker-background:#272b30}::-webkit-scrollbar{width:5px;height:5px;background:0 0}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:var(--darker-background)}::-webkit-scrollbar-thumb{background:var(--default-backgroundcolor)}#main-win-container{overflow-y:scroll;max-height:682px}body{height:100vh;overflow:hidden}.desktop{display:flex;height:100vh}#gameStarts div{margin-bottom:2px}.statsColumn{margin-left:10px;padding:5px;padding-left:10px;padding-right:10px;min-width:300px;max-width:100%}.summaryRow{display:flex;justify-content:space-between;align-items:center;padding:5px}#weekSummaryGraph{background-color:#272b30}#sessionStats td{padding-top:4px;padding-bottom:4px}.ct-label{color:#fff}.ct-grid{stroke:rgba(255,255,255,.2)}.ct-bar{stroke-width:50px;stroke:var(--default-backgroundcolor)!important}*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar{padding-left:unset;padding-right:1rem;background-color:var(--default-backgroundcolor)!important}.fade{transition:opacity 80ms}
\ No newline at end of file
diff --git a/resources/scripts/mainWindow.js b/resources/scripts/mainWindow.js
index 8ffe04a..300120b 100644
--- a/resources/scripts/mainWindow.js
+++ b/resources/scripts/mainWindow.js
@@ -1,7 +1,10 @@
-const backgroundWindow=overwolf.windows.getMainWindow(),eventEmitter=backgroundWindow.eventEmitter,db=backgroundWindow.db;var activeGameTicker=null;function loadLatestSessions(){db.getSessions(function(m){let c=document.querySelector("#sessionStats"),u=document.querySelector("#topGameTitle"),g=document.querySelector("#topGameTime"),f=document.querySelector("#gameStarts"),T=document.querySelector("#weekSummaryText");if(c.innerHTML="",f.innerHTML="",T.innerHTML="",0==m.length){let e=document.createElement("tr");e.innerHTML='<td colspan="3" class="text-center" style="height: 305px; vertical-align: middle;"><em>No played games so far</em></td>',c.appendChild(e),f.innerHTML="<em>You have not played any games yet</em>",T.innerHTML="No data tracked yet, play some games! :)",u.innerHTML=shorten("No games played yet",45),g.innerHTML="",renderGraph(null)}else{let t=!0,n={},a=0;for(var y of m){if(a<10){let e=document.createElement("tr");e.innerHTML=`
+const backgroundWindow=overwolf.windows.getMainWindow(),eventEmitter=backgroundWindow.eventEmitter,db=backgroundWindow.db;var activeGameTicker=null;function loadLatestSessions(){db.getSessions(function(m){let c=document.querySelector("#sessionStats"),u=document.querySelector("#summaryStats"),g=document.querySelector("#topGameTitle"),f=document.querySelector("#topGameTime"),T=document.querySelector("#gameStarts"),p=document.querySelector("#weekSummaryText");if(c.innerHTML="",T.innerHTML="",p.innerHTML="",u.innerHTML="",0==m.length){let e=document.createElement("tr");e.innerHTML='<td colspan="3" class="text-center" style="height: 305px; vertical-align: middle;"><em>No played games so far</em></td>',c.appendChild(e),u.appendChild(e),T.innerHTML="<em>You have not played any games yet</em>",p.innerHTML="No data tracked yet, play some games! :)",g.innerHTML=shorten("No games played yet",45),f.innerHTML="",renderGraph(null)}else{let t=!0,n={},a=0;for(var y of m){if(a<10){let e=document.createElement("tr");e.innerHTML=`
         <td>${shorten(y.gameTitle,40)}</td>
         <td class="text-right" style="width: 150px;">${formatTimespan(y.startDate,y.endDate,t)}</td>
         <td class="text-center" style="width: 120px;">${formatDate(new Date(y.startDate))}</td>`,c.appendChild(e),t=!1}n[y.gameTitle]||(n[y.gameTitle]={gameTitle:y.gameTitle,startCount:0,sessions:[]}),n[y.gameTitle].startCount++,n[y.gameTitle].sessions.push(y),a++}if(a<10){let e=document.createElement("tr");e.innerHTML=`
 <td colspan="3" rowspan="${10-a}" class="text-center" style="vertical-align: middle; height: ${31*(10-a)}px;">
   <em>Play more games to fill this area!</em>
-</td>`,c.appendChild(e)}var p,m=sortDictionaryByProperty(n,"startCount",!1);let e={},i=0;for(p of m){var w=p[1];if(i<10){let e=document.createElement("div");e.innerHTML=`<span class="badge badge-secondary">${w.startCount}</span> ${shorten(w.gameTitle,30)}`,f.appendChild(e)}e[p[0]]={gameTitle:w.gameTitle,totalTime:p[1].sessions.map(function(e){return getTimeDifference(e.startDate,e.endDate)}).reduce(function(e,t){return e+t},0)},i++}m=sortDictionaryByProperty(e,"totalTime",!1);u.innerHTML=shorten(m[0][1].gameTitle,45),g.innerHTML=`Played: ${outputTimesObjectFromDifference(m[0][1].totalTime)}`,window.gameStartItems=n;let r=Object.keys(n).flatMap(function(e){return n[e].sessions}),s=new NDate(Date.now()).removeTime().addDay(-6);m=r.filter(e=>e.startDate>=s.timestamp).map(e=>getTimeDifference(e.startDate,e.endDate)).reduce((e,t)=>e+t),m=getTimeObject(m);let o="";m.hours&&1===m.hours?o=`${m.hours} hour and `:1<m.hours&&(o=`${m.hours} hours and `);let l="";m.minutes&&1===m.minutes?l=`${m.minutes} minute`:1<m.minutes&&(l=`${m.minutes} minutes`);let d="";""==l&&""==o&&(1==m.seconds?d="one second":1<m.seconds&&(d=`${m.seconds} seconds`)),T.innerHTML=`The last 7 days you spent ${o}${l}${d} in-game.`,renderGraph(r)}})}function renderGraph(r){let s={labels:["Day 1","Day 2","Day 3","Day 4","Day 5","Day 6","Day 7"],series:[[0,0,0,0,0,0,0]]};for(let e=0;e<7;e++){var t=new NDate(Date.now()).removeTime().addDay(e-6);s.labels[e]=formatDate(t.date)}if(r&&null!==r)for(let i=0;i<7;i++){let e=new NDate(Date.now()).removeTime().addDay(i-6),t=e.timestamp,n=e.addDay(1).timestamp;var o=r.filter(e=>e.startDate>=t&&e.startDate<=n).map(e=>getTimeDifference(e.startDate,e.endDate));let a=0;0<o.length&&(o=o.reduce((e,t)=>e+t),a=o/3600),s.series[0][i]=a}else;setTimeout(function(){new Chartist.Bar("#weekSummaryGraph",s,{axisY:{offset:45,labelInterpolationFnc:e=>e<1?`${(60*e).toFixed(0)}min`:`${e}hrs`},height:149})},200)}eventEmitter.addEventListener("game-launched",function(){activeGameTicker=setInterval(loadLatestSessions,5e3),loadLatestSessions()}),eventEmitter.addEventListener("refresh-window",function(e){"mainWindow"==e&&loadLatestSessions()}),eventEmitter.addEventListener("game-exited",function(){null!=activeGameTicker&&(clearInterval(activeGameTicker),activeGameTicker=null,loadLatestSessions())}),loadLatestSessions(),overwolf.windows.getCurrentWindow(function(e){new DraggableWindow(e.window,document.getElementById("titleBar")),document.getElementById("exitButton").addEventListener("click",function(){overwolf.games.getRunningGameInfo(function(e){e||(log("[Exit]","No games are running, exiting application"),eventEmitter.emit("shutdown",null))}),overwolf.windows.close(e.window.id,function(){})}),overwolf.extensions.current.getManifest(function(e){document.getElementById("titleBarName").innerHTML=`Game Time Tracker - v${e.meta.version}`})});
\ No newline at end of file
+</td>`,c.appendChild(e)}var h,m=sortDictionaryByProperty(n,"startCount",!1);let e={},i=0;for(h of m){var D=h[1];if(i<10){let e=document.createElement("div");e.innerHTML=`<span class="badge badge-secondary">${D.startCount}</span> ${shorten(D.gameTitle,30)}`,T.appendChild(e)}e[h[0]]={gameTitle:D.gameTitle,totalTime:h[1].sessions.map(function(e){return getTimeDifference(e.startDate,e.endDate)}).reduce(function(e,t){return e+t},0)},i++}m=sortDictionaryByProperty(e,"totalTime",!1);g.innerHTML=shorten(m[0][1].gameTitle,45),f.innerHTML=`Played: ${outputTimesObjectFromDifference(m[0][1].totalTime)}`;var w,m=sortDictionaryByPropertyAlphabetically(n,"gameTitle",!0);console.log(m);for(w of m){let e=w[1];var v=e.sessions.map(e=>getTimeDifference(e.startDate,e.endDate)).reduce((e,t)=>e+t);let t=document.createElement("tr");t.innerHTML=`
+        <td>${shorten(e.gameTitle,50)}</td>
+        <td class="text-right" style="width: 60px;">${e.startCount}</td>
+        <td class="text-right" style="width: 120px;">${outputTimesObjectFromDifference(v)}</td>`,u.appendChild(t)}window.gameStartItems=n;let r=Object.keys(n).flatMap(function(e){return n[e].sessions}),s=new NDate(Date.now()).removeTime().addDay(-6);m=r.filter(e=>e.startDate>=s.timestamp).map(e=>getTimeDifference(e.startDate,e.endDate)).reduce((e,t)=>e+t),m=getTimeObject(m);let o="";m.hours&&1===m.hours?o=`${m.hours} hour and `:1<m.hours&&(o=`${m.hours} hours and `);let l="";m.minutes&&1===m.minutes?l=`${m.minutes} minute`:1<m.minutes&&(l=`${m.minutes} minutes`);let d="";""==l&&""==o&&(1==m.seconds?d="one second":1<m.seconds&&(d=`${m.seconds} seconds`)),p.innerHTML=`The last 7 days you spent ${o}${l}${d} in-game.`,renderGraph(r)}})}function renderGraph(r){let s={labels:["Day 1","Day 2","Day 3","Day 4","Day 5","Day 6","Day 7"],series:[[0,0,0,0,0,0,0]]};for(let e=0;e<7;e++){var t=new NDate(Date.now()).removeTime().addDay(e-6);s.labels[e]=formatDate(t.date)}if(r&&null!==r)for(let i=0;i<7;i++){let e=new NDate(Date.now()).removeTime().addDay(i-6),t=e.timestamp,n=e.addDay(1).timestamp;var o=r.filter(e=>e.startDate>=t&&e.startDate<=n).map(e=>getTimeDifference(e.startDate,e.endDate));let a=0;0<o.length&&(o=o.reduce((e,t)=>e+t),a=o/3600),s.series[0][i]=a}else;setTimeout(function(){new Chartist.Bar("#weekSummaryGraph",s,{axisY:{offset:45,labelInterpolationFnc:e=>e<1?`${(60*e).toFixed(0)}min`:`${e}hrs`},height:149})},200)}eventEmitter.addEventListener("game-launched",function(){activeGameTicker=setInterval(loadLatestSessions,5e3),loadLatestSessions()}),eventEmitter.addEventListener("refresh-window",function(e){"mainWindow"==e&&loadLatestSessions()}),eventEmitter.addEventListener("game-exited",function(){null!=activeGameTicker&&(clearInterval(activeGameTicker),activeGameTicker=null,loadLatestSessions())}),loadLatestSessions(),overwolf.windows.getCurrentWindow(function(e){new DraggableWindow(e.window,document.getElementById("titleBar")),document.getElementById("exitButton").addEventListener("click",function(){overwolf.games.getRunningGameInfo(function(e){e||(log("[Exit]","No games are running, exiting application"),eventEmitter.emit("shutdown",null))}),overwolf.windows.close(e.window.id,function(){})}),overwolf.extensions.current.getManifest(function(e){document.getElementById("titleBarName").innerHTML=`Game Time Tracker - v${e.meta.version}`})});
\ No newline at end of file
diff --git a/resources/scripts/utils.js b/resources/scripts/utils.js
index a1e1f44..6f6e8c4 100644
--- a/resources/scripts/utils.js
+++ b/resources/scripts/utils.js
@@ -1 +1 @@
-function shorten(t,e){return t.length>e?t.substring(0,e).trim()+" ...":t}function sortDictionaryByProperty(e,n,r){let t=Object.keys(e).map(function(t){return[t,e[t]]});return t.sort(function(t,e){return r?t[1][n]-e[1][n]:e[1][n]-t[1][n]}),t}function formatDate(t){let e="";return e+=t.getFullYear()+"-",t.getMonth()+1<10&&(e+="0"),e+=t.getMonth()+1+"-",t.getDate()<10&&(e+="0"),e+=t.getDate(),e}function formatTimespan(t,e,n){return n||e?outputTimesObjectFromDifference(getTimeDifference(t,e)):"Unknown, no end time"}function outputTimesObject(t,e,n,r){return`${0<t?t+"d, ":""}${0<e?e+"h, ":""}${0<n?n+"m, ":""}${r+"s"}`}function outputTimesObjectFromDifference(t){var{days:e,hours:n,minutes:r,seconds:t}=getTimeObject(t);return outputTimesObject(e,n,r,t)}function getTimeDifference(t,e){return((e=e||Date.now())-t)/1e3}function getTimeObject(t){return{days:Math.floor(t/86400),hours:Math.floor(t%86400/3600),minutes:Math.floor(t%3600/60),seconds:Math.floor(t%60)}}
\ No newline at end of file
+function shorten(t,e){return t.length>e?t.substring(0,e).trim()+" ...":t}function sortDictionaryByProperty(e,n,r){let t=Object.keys(e).map(function(t){return[t,e[t]]});return t.sort(function(t,e){return r?t[1][n]-e[1][n]:e[1][n]-t[1][n]}),t}function sortDictionaryByPropertyAlphabetically(t,e,n){let r=sortDictionaryByProperty(t,e,n);let o=[];for(let e of r.map(t=>t[0]).sort())o.push([e,r.filter(t=>t[0]==e)[0][1]]);return console.log(o),o}function formatDate(t){let e="";return e+=t.getFullYear()+"-",t.getMonth()+1<10&&(e+="0"),e+=t.getMonth()+1+"-",t.getDate()<10&&(e+="0"),e+=t.getDate(),e}function formatTimespan(t,e,n){return n||e?outputTimesObjectFromDifference(getTimeDifference(t,e)):"Unknown, no end time"}function outputTimesObject(t,e,n,r){return`${0<t?t+"d, ":""}${0<e?e+"h, ":""}${0<n?n+"m, ":""}${r+"s"}`}function outputTimesObjectFromDifference(t){var{days:e,hours:n,minutes:r,seconds:t}=getTimeObject(t);return outputTimesObject(e,n,r,t)}function getTimeDifference(t,e){return((e=e||Date.now())-t)/1e3}function getTimeObject(t){return{days:Math.floor(t/86400),hours:Math.floor(t%86400/3600),minutes:Math.floor(t%3600/60),seconds:Math.floor(t%60)}}
\ No newline at end of file
diff --git a/src/scripts/mainWindow.js b/src/scripts/mainWindow.js
index d46da4a..25e0537 100644
--- a/src/scripts/mainWindow.js
+++ b/src/scripts/mainWindow.js
@@ -38,6 +38,8 @@ function loadLatestSessions() {
   db.getSessions(function (_rows) {
     let gameSessionTable = document.querySelector("#sessionStats");
 
+    let allSessionTable = document.querySelector("#summaryStats");
+
     let topGameTitle = document.querySelector("#topGameTitle");
     let topGameTime = document.querySelector("#topGameTime");
 
@@ -48,11 +50,13 @@ function loadLatestSessions() {
     gameSessionTable.innerHTML = "";
     gameStarts.innerHTML = "";
     weekSummary.innerHTML = "";
+    allSessionTable.innerHTML = "";
 
     if (_rows.length == 0) {
       let noGames = document.createElement("tr");
       noGames.innerHTML = `<td colspan="3" class="text-center" style="height: 305px; vertical-align: middle;"><em>No played games so far</em></td>`;
       gameSessionTable.appendChild(noGames);
+      allSessionTable.appendChild(noGames);
 
       gameStarts.innerHTML = "<em>You have not played any games yet</em>";
       weekSummary.innerHTML = "No data tracked yet, play some games! :)";
@@ -156,6 +160,32 @@ function loadLatestSessions() {
         totalTimeByTime[0][1].totalTime
       )}`;
 
+      let allGamesArray = sortDictionaryByPropertyAlphabetically(
+        gameStartItems,
+        "gameTitle",
+        true
+      );
+
+      console.log(allGamesArray);
+
+      for (let game of allGamesArray) {
+        let _game = game[1];
+
+        let totalGameTime = _game.sessions
+          .map((s) => getTimeDifference(s.startDate, s.endDate))
+          .reduce((a, b) => a + b);
+
+        let row = document.createElement("tr");
+        row.innerHTML = `
+        <td>${shorten(_game.gameTitle, 50)}</td>
+        <td class="text-right" style="width: 60px;">${_game.startCount}</td>
+        <td class="text-right" style="width: 120px;">${outputTimesObjectFromDifference(
+          totalGameTime
+        )}</td>`;
+
+        allSessionTable.appendChild(row);
+      }
+
       window.gameStartItems = gameStartItems;
 
       let allSessions = Object.keys(gameStartItems).flatMap(function (key) {
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index aa9dde6..9736342 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -31,6 +31,25 @@ function sortDictionaryByProperty(dictionary, property, ascending) {
   return items;
 }
 
+function sortDictionaryByPropertyAlphabetically(
+  dictionary,
+  property,
+  ascending
+) {
+  let internal = sortDictionaryByProperty(dictionary, property, ascending);
+
+  var keys = internal.map((v) => v[0]).sort();
+
+  let newItems = [];
+  for (let key of keys) {
+    newItems.push([key, internal.filter((v) => v[0] == key)[0][1]]);
+  }
+
+  console.log(newItems);
+
+  return newItems;
+}
+
 /**
  * Outputs a date in YYYY-MM-DD format
  * @param {Date} date
diff --git a/src/scss/main-window.scss b/src/scss/main-window.scss
index abc859c..7b91069 100644
--- a/src/scss/main-window.scss
+++ b/src/scss/main-window.scss
@@ -90,3 +90,7 @@ body {
   padding-right: 1rem;
   background-color: var(--default-backgroundcolor) !important;
 }
+
+.fade {
+  transition: opacity 0.08s;
+}
diff --git a/windows/main-window.html b/windows/main-window.html
index b7aef3c..59b2195 100644
--- a/windows/main-window.html
+++ b/windows/main-window.html
@@ -172,12 +172,12 @@ <h4 class="card-title" id="topGameTitle">{topGameTitle}</h4>
             <div class="col-12 pt-2">
               <div
                 class="card text-white border-secondary mb-3"
-                style="min-height: 649px; max-height: 649px"
+
               >
                 <div class="card-header">
                   Summary of all your sessions, per game
                 </div>
-                <div class="card-body">
+                <div class="card-body" style="min-height: 609px; max-height: 609px">
                   <div class="gameSummaryData">
                     <table
                       class="table table-striped table-small table-dark table-bordered table-sm"
@@ -185,6 +185,7 @@ <h4 class="card-title" id="topGameTitle">{topGameTitle}</h4>
                       <thead class="thead-dark">
                         <tr>
                           <th>Game</th>
+                          <th class="text-right">Starts</th>
                           <th class="text-right">Duration</th>
                         </tr>
                       </thead>