feat: Added a rudimentary loading indicator.

gulpfile.js

@@ -1,6 +1,6 @@
 const gulp = require("gulp");
 const replace = require("gulp-replace");
-const sass = require("gulp-sass");
+const sass = require('gulp-sass')(require('sass'));
 const cleancss = require("gulp-clean-css");
 const purgecss = require("gulp-purgecss");
 

package.json

@@ -7,16 +7,15 @@
   "scripts": {
     "release": "yarn standard-version && yarn gulp deploy && git commit -am \"chore: version bump\" && git push --follow-tags origin master"
   },
-  "dependencies": {
+  "devDependencies": {
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-purgecss": "^4.0.3",
     "gulp-replace": "^1.1.2",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "^5.1.0",
     "gulp-uglify": "^3.0.2",
+    "markdown-it": "^12.0.6",
+    "sass": "^1.49.9",
     "standard-version": "^9.3.0"
-  },
-  "devDependencies": {
-    "markdown-it": "^12.0.6"
   }
 }

src/scripts/loading-indicator.js

@@ -0,0 +1,16 @@
+
+const classNames = ["warlock", "titan", "hunter", "default"];
+let i = 0;
+
+const changeClass = () => {
+  const container = document.querySelector(".loading-indicator .container");
+  if(container) {
+    container.classList.remove(classNames[i]);
+    i = i < classNames.length - 1 ? i + 1 : 0;
+    container.classList.add(classNames[i]);
+
+    setTimeout(changeClass, 3000);
+  }
+};
+
+setTimeout(changeClass, 100);

src/scripts/mainWindow.js

@@ -35,15 +35,38 @@ eventEmitter.addEventListener("refresh-window", function (window) {
 });
 
 function setLastPlayedCharacter(lastPlayed) {
-  return;
-  let lastPlayedClass = document.querySelector("#lastPlayedClass");
-  let lastPlayedTotalTime = document.querySelector("#lastPlayedTotalTime");
-
-  lastPlayedClass.innerText = `${lastPlayed.genderName} ${lastPlayed.raceName} ${lastPlayed.className}`;
-  lastPlayedTotalTime.innerText = `Played ${formatTimespan(
+  let tempGoalContainer = document.querySelector("#allGoals");
+
+  tempGoalContainer.innerHTML = "";
+
+  let lastPlayedCharacter = document.createElement("div");
+  lastPlayedCharacter.classList.add("hud");
+  lastPlayedCharacter.classList.add("translucent");
+  lastPlayedCharacter.innerText =
+    destinyApiClient.profile.profile.data.userInfo.displayName;
+
+  lastPlayedCharacter.style = `
+  background-image: url("https://www.bungie.net${lastPlayed.emblemBackgroundPath}");
+  background-repeat: no-repeat;
+  padding-left: 96px;
+  padding-top: 18px;
+  height: 96px;
+  font-size: 24px;
+  `;
+
+  tempGoalContainer.appendChild(lastPlayedCharacter);
+
+  let lastPlayedClass = document.createElement("div");
+  lastPlayedClass.classList.add("hud");
+  lastPlayedClass.classList.add("sub-header");
+  lastPlayedClass.innerHTML = `${lastPlayed.genderName} ${lastPlayed.raceName} ${lastPlayed.className}<br />Played ${formatTimespan(
     new Date(),
     new Date(Date.now() + lastPlayed.minutesPlayedTotal * 60 * 1000)
   )}`;
+
+  tempGoalContainer.appendChild(lastPlayedClass);
+
+  console.log(lastPlayed);
 }
 
 eventEmitter.addEventListener("destiny-data-loaded", async function () {
@@ -59,6 +82,8 @@ async function loadGoals(loadReason, namedObject) {
     return;
   }
 
+  return;
+
   let depth = 0;
 
   let triumphPresentation =
@@ -99,7 +124,7 @@ async function renderSubPresentationNode(presentationNode, namedObject, depth) {
     for (let childNode of presentationNode.children.presentationNodes) {
       let subNode =
         destinyApiClient.destinyDataDefinition
-          .DestinyPresentationNodeDefinition[childNode.presentationNodeHash];
+        .DestinyPresentationNodeDefinition[childNode.presentationNodeHash];
 
       let goal = document.createElement("div");
       goal.classList.add("hud");
@@ -293,31 +318,31 @@ async function loadSettings() {
   );
 
   document.getElementById("trackSeasonRank").checked = JSON.parse(
-    ((await db.getItem("d2-track-seasonrank")) ?? "true").toString()
-  )
-    ? "checked"
-    : "";
+      ((await db.getItem("d2-track-seasonrank")) ?? "true").toString()
+    ) ?
+    "checked" :
+    "";
 
   document.getElementById("trackMilestones").checked = JSON.parse(
-    ((await db.getItem("d2-track-milestones")) ?? "true").toString()
-  )
-    ? "checked"
-    : "";
+      ((await db.getItem("d2-track-milestones")) ?? "true").toString()
+    ) ?
+    "checked" :
+    "";
   document.getElementById("trackBounties").checked = JSON.parse(
-    ((await db.getItem("d2-track-bounties")) ?? "true").toString()
-  )
-    ? "checked"
-    : "";
+      ((await db.getItem("d2-track-bounties")) ?? "true").toString()
+    ) ?
+    "checked" :
+    "";
   document.getElementById("trackQuests").checked = JSON.parse(
-    ((await db.getItem("d2-track-quests")) ?? "true").toString()
-  )
-    ? "checked"
-    : "";
+      ((await db.getItem("d2-track-quests")) ?? "true").toString()
+    ) ?
+    "checked" :
+    "";
   document.getElementById("trackRecords").checked = JSON.parse(
-    ((await db.getItem("d2-track-records")) ?? "true").toString()
-  )
-    ? "checked"
-    : "";
+      ((await db.getItem("d2-track-records")) ?? "true").toString()
+    ) ?
+    "checked" :
+    "";
 }
 
 function downloadUpdate() {
@@ -482,4 +507,4 @@ function bindExitButtonEvent(window) {
   });
 
   localStorage.setItem("mainWindow_opened", true);
-})();
+})();

src/scripts/overlayWindow.js

@@ -87,6 +87,12 @@ function renderGoalItem(goal) {
 async function updateGoalList(goals) {
   await loadSettings();
 
+  let loadingIndicator = document.querySelector(".loading-indicator");
+
+  if (loadingIndicator) {
+    loadingIndicator.remove();
+  }
+
   var goalList = document.getElementById("goal-list");
 
   goalList.innerHTML = "";

src/scss/destiny2.css

@@ -13,10 +13,11 @@ body {
 .destiny .checkbox {
   display: inline-block;
   position: relative;
-  padding-left: 2rem;
+  padding-left: 1.5rem;
   margin-right: 1rem;
   cursor: default;
   user-select: none;
+  /*margin-bottom: 0.1rem;*/
 }
 
 .destiny .checkbox.block {
@@ -33,13 +34,13 @@ body {
   .checkbox
   label:hover
   input[type="checkbox"]:not(:disabled)
-  ~ span::after {
+  ~ span::before {
   background-color: #388348;
 }
 
 .destiny .checkbox label span {
   cursor: pointer;
-  line-height: 0.9rem;
+  line-height: 1rem;
   vertical-align: middle;
 }
 
@@ -52,32 +53,23 @@ body {
 }
 
 .destiny .checkbox input[type="checkbox"] ~ span::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 1.2rem;
-  width: 1.2rem;
-  border: 0.1rem solid #5aa56a;
-  content: " ";
-}
-
-.destiny .checkbox input[type="checkbox"] ~ span::after {
   position: absolute;
   top: 0.2rem;
-  left: 0.2rem;
+  left: 0;
   height: 1rem;
   width: 1rem;
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+Cjxzdmcgd2lkdGg9IjM0bW0iIGhlaWdodD0iMzRtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzQgMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLDEpIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzVhYTU2YSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiA8L2c+Cjwvc3ZnPgo=");
+  background-size: cover;
   content: " ";
-  background-color: transparent;
-  transition: background-color 0.1s ease-in-out;
 }
 
-.destiny .checkbox input[type="checkbox"]:checked ~ span::after {
-  background-color: #5aa56a;
+.destiny .checkbox input[type="checkbox"]:checked ~ span::before {
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+Cjxzdmcgd2lkdGg9IjM0bW0iIGhlaWdodD0iMzRtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzQgMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLDEpIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzVhYTU2YSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjIyIiBoZWlnaHQ9IjIyIiBmaWxsPSIjNWFhNTZhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KIDwvZz4KPC9zdmc+Cg==");
+  background-size: cover;
 }
 
 .destiny .checkbox.leftCheck {
-  padding-right: 2rem;
+  padding-right: 1.5rem;
   padding-left: unset;
 }
 
@@ -86,11 +78,6 @@ body {
   left: unset;
 }
 
-.destiny .checkbox.leftCheck input[type="checkbox"] ~ span::after {
-  right: 0.2rem !important;
-  left: unset;
-}
-
 .destiny .radio {
   display: inline-block;
   position: relative;