start building iframe!

sandervonk · Oct 8, 2022 · e2eea2b · e2eea2b
1 parent 5813329
commit e2eea2b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 28 deletions.
diff --git a/embed/js/task.js b/embed/js/task.js
@@ -29,35 +29,53 @@ auth.onAuthStateChanged(function (user) {
   console.log("auth state changed");
   if (user) {
     $("[data-role='authwall']").hide();
-    $("[data-role='authcontent']").show();
+    setupContent();
   } else {
     $("[data-role='authwall']").show();
     $("[data-role='authcontent']").hide();
   }
 });
-//*STARS
-let limit = 25,
-  body = document.body;
-loop = {
-  start: function () {
-    for (var i = 0; i <= limit; i++) {
-      var star = this.newStar();
-      star.style.top = this.rand() * 100 + "%";
-      star.style.left = this.rand() * 100 + "%";
-      star.style.webkitAnimationDelay = this.rand() + "s";
-      star.style.mozAnimationDelay = this.rand() + "s";
-      document.getElementById("bg-stars").appendChild(star);
-    }
-  },
-  //to get random number
-  rand: function () {
-    return Math.random();
-  },
-  //creating html dom for star
-  newStar: function () {
-    var d = document.createElement("div");
-    d.innerHTML = '<figure class="star"></figure>';
-    return d.firstChild;
-  },
-};
-loop.start();
+// setup content from userdoc
+function setupContent() {
+  $("#user-image").attr("src", auth.currentUser.photoURL);
+  $("#user-name").text(auth.currentUser.displayName);
+  userDoc()
+    .get()
+    .then(function (doc) {
+      let data = doc.data();
+      if (data) {
+        console.log(data);
+        $("[data-role='authcontent']").show();
+      } else {
+        window.location.reload();
+      }
+    });
+}
+try {
+  //*STARS
+  let limit = 25,
+    body = document.body;
+  loop = {
+    start: function () {
+      for (var i = 0; i <= limit; i++) {
+        var star = this.newStar();
+        star.style.top = this.rand() * 100 + "%";
+        star.style.left = this.rand() * 100 + "%";
+        star.style.webkitAnimationDelay = this.rand() + "s";
+        star.style.mozAnimationDelay = this.rand() + "s";
+        document.getElementById("bg-stars").appendChild(star);
+      }
+    },
+    //to get random number
+    rand: function () {
+      return Math.random();
+    },
+    //creating html dom for star
+    newStar: function () {
+      var d = document.createElement("div");
+      d.innerHTML = '<figure class="star"></figure>';
+      return d.firstChild;
+    },
+  };
+  loop.start();
+} catch (err) {}
diff --git a/embed/task.html b/embed/task.html
@@ -39,7 +39,16 @@
       <div id="signin-overlay-button" class="box-button fullborder">Sign in to VITE!</div>
     </div>
     <!-- embed content -->
-    <div id="embed-content" data-role="authcontent" style="display: none"></div>
+    <div id="embed-content" data-role="authcontent" style="display: none">
+      <!-- user image & xp bar -->
+      <div id="top-bar">
+        <img id="user-image" />
+        <div id="user-name"></div>
+      </div>
+      <div id="user-xp-bar">
+        <div id="user-xp-bar-fill"></div>
+      </div>
+    </div>
     <!-- decor -->
     <div id="bg-stars"></div>
     <!-- spinning earth graphic loaded as object with img backup -->