Issue 781 user badges without meta (#833)

* initial commit * initial commit * updated styles and details * updated component loading to avoid error in case of headless browsing * meta update * linked with user name in play details * intermediate * local image * filter update in useeffect * cleanup * added local server * added local server * added local server * added local server * netlify fails with missing script info * create express entry * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated deplyment steps * updated badges for profile * alignment issue fix * resolve conflict * clean up of unwanted code * updated tweet count to support test cases Co-authored-by: shrilakshmishastry <[email protected]> Co-authored-by: Koustov <[email protected]>
reactplay · Jan 21, 2023 · 42b05ca · 42b05ca · vercel · Jan 21, 2023
1 parent a2b7bc6
commit 42b05ca
Show file tree

Hide file tree

Showing 25 changed files with 549 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<object
+  type="text/html"
+  data="/.netlify/functions/server"
+  style="width:100%;height:100%;"
+>
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
     <meta name="theme-color" content="#000000" />
     <meta property="og:type" content="website" />
     <meta name="twitter:site" content="@ReactPlayIO" />
-
+    
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/common/badges-dashboard/Badge.js b/src/common/badges-dashboard/Badge.js
@@ -0,0 +1,45 @@
+const Badge = ({ badge, selectionChanged, readonly = false, showtext = true }) => {
+  return (
+    <div className="hover:group-hover">
+      {readonly ? (
+        <div className="py-8 flex justify-center items-center flex-column lg:flex-col">
+          <div
+            className="bg-cover bg-center h-32 w-32 lg:h-48 lg:w-48 group-hover:scale-125 ease-in duration-300"
+            style={{
+              backgroundImage: `url(${badge.image})`
+            }}
+          />
+        </div>
+      ) : (
+        <div class="p-4 w-full">
+          <div>
+            <div class="relative group ">
+              <div>
+                <div class="absolute -inset-0.5 rounded-lg blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt" />
+                <button
+                  class="relative px-2 py-4 rounded-lg leading-none flex items-center divide-x divide-gray-600 w-full transition duration-1000  group-hover:shadow-md group-hover:drop-shadow-xl"
+                  onClick={() => selectionChanged()}
+                >
+                  <div class="flex flex-row lg:flex-col items-center space-x-5  w-full justify-center">
+                    <div className="py-8 flex justify-center items-center">
+                      <div
+                        className="bg-cover bg-center h-28 w-28 group-hover:scale-125 ease-in duration-300"
+                        style={{
+                          backgroundImage: `url(${badge.image})`
+                        }}
+                      />
+                    </div>
+
+                    {showtext && <div class="pr-6 text-gray-800 text-sm h-8">{badge.level}</div>}
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Badge;
diff --git a/src/common/badges-dashboard/BadgeCard.js b/src/common/badges-dashboard/BadgeCard.js
@@ -0,0 +1,11 @@
+const BadgeCard = ({ id, coverImage, tag, level }) => {
+  return (
+    <div className=" py-4 flex bg-white flex-col items-center shadow w-36 h-36 " key={id}>
+      <img alt={`${tag} badge`} className=" h-16 w-16" src={coverImage} />
+      <span className=" text-xs">{tag}</span>
+      <span className=" text-center text-sm ">{level}</span>
+    </div>
+  );
+};
+
+export default BadgeCard;
diff --git a/src/common/badges-dashboard/BadgeDetails.js b/src/common/badges-dashboard/BadgeDetails.js
@@ -0,0 +1,73 @@
+import Badge from './Badge';
+import './badge.css';
+
+const BadgeDetails = ({ badge, onClose }) => {
+  return (
+    <div
+      aria-hidden="true"
+      class="overflow-y-auto flex overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center transition duration-1000 backdrop-blur "
+      id="defaultModal"
+      tabindex="-1"
+      onClick={() => onClose()}
+    >
+      <div
+        class="relative p-0.5 w-full max-w-4xl h-full md:h-auto bg-gradient-to-r from-sky-500 to-indigo-500 rounded-lg drop-shadow-md"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <div class="relative bg-white rounded-lg shadow ">
+          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+            <h3 class="text-xl font-semibold text-gray-800">{badge.level}</h3>
+            <button
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              data-modal-toggle="defaultModal"
+              type="button"
+              onClick={() => onClose()}
+            >
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span class="sr-only">Close modal</span>
+            </button>
+          </div>
+          <div class="p-6 space-y-6">
+            <div className="flex flex-col lg:flex-row">
+              <div className="px-4">
+                <Badge readonly badge={badge} showtext={false} />
+              </div>
+              <div className="flex-1 flex justify-center items-center">
+                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-600">
+                  {badge.description}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+            <button
+              class="app-header-btn app-header-btn--primary"
+              data-modal-toggle="defaultModal"
+              type="button"
+              onClick={() => onClose()}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BadgeDetails;
diff --git a/src/common/badges-dashboard/Badges.js b/src/common/badges-dashboard/Badges.js
@@ -0,0 +1,34 @@
+import BadgeCard from './BadgeCard';
+
+const Badges = ({ badges, isAuthenticated, handleLogin, handleViewBtnClick }) => {
+  return (
+    <div className=" flex flex-col">
+      <div className=" self-end">
+        {!isAuthenticated ? (
+          <button onClick={handleLogin}>Login</button>
+        ) : (
+          <button onClick={handleViewBtnClick}>View my badges</button>
+        )}
+      </div>
+      <div>
+        {badges.length === 0 ? (
+          <p>They haven't earned any badge</p>
+        ) : (
+          badges.map((badge, index) => {
+            return (
+              <BadgeCard
+                coverImage={badge.badge_id_map.image}
+                id={badge.badge_id_map.id}
+                key={index}
+                level={badge.badge_id_map.level}
+                tag={badge.badge_id_map.tag}
+              />
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Badges;
diff --git a/src/common/badges-dashboard/ClaimedBadges.js b/src/common/badges-dashboard/ClaimedBadges.js
@@ -0,0 +1,24 @@
+import BadgeCard from './BadgeCard';
+
+const ClaimedBadges = ({ badges }) => {
+  return (
+    <>
+      {badges.length === 0 ? (
+        <p>No badges claimed yet</p>
+      ) : (
+        badges.map((badge) => {
+          return (
+            <BadgeCard
+              coverImage={badge.badge_id_map.image}
+              id={badge.badge_id_map.id}
+              level={badge.badge_id_map.level}
+              tag={badge.badge_id_map.tag}
+            />
+          );
+        })
+      )}
+    </>
+  );
+};
+
+export default ClaimedBadges;
diff --git a/src/common/badges-dashboard/OverView.js b/src/common/badges-dashboard/OverView.js
@@ -0,0 +1,24 @@
+import BadgeCard from './BadgeCard';
+
+const OverView = ({ badges }) => {
+  return (
+    <>
+      {badges.length === 0 ? (
+        <p>You have not earned badges</p>
+      ) : (
+        badges.map((badge) => {
+          return (
+            <BadgeCard
+              coverImage={badge.badge_id_map.image}
+              id={badge.badge_id_map.id}
+              level={badge.badge_id_map.level}
+              tag={badge.badge_id_map.tag}
+            />
+          );
+        })
+      )}
+    </>
+  );
+};
+
+export default OverView;
diff --git a/src/common/badges-dashboard/badge.css b/src/common/badges-dashboard/badge.css
@@ -0,0 +1,22 @@
+.app-header-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: solid 1px var(--color-brand-primary);
+    border-radius: 2rem;
+    grid-gap: 0.4rem;
+    padding: 0.4rem 1.2rem;
+    font-size: var(--fs-sm);
+    text-decoration: none;
+    width: unset;
+    height: unset;
+    transition: all 0.12s ease-in-out;
+  }
+
+  .app-header-btn--primary {
+    border: solid 2px var(--color-brand-primary);
+    background-color: var(--color-brand-primary);
+    color: var(--color-neutral-80);
+    grid-gap: 0.3rem;
+    margin-left: 0.4rem;
+  }
diff --git a/src/common/badges-dashboard/img/Finisher - 512x512.png b/src/common/badges-dashboard/img/Finisher - 512x512.png
diff --git a/src/common/badges-dashboard/img/Participant - 512x512.png b/src/common/badges-dashboard/img/Participant - 512x512.png
diff --git a/src/common/badges-dashboard/img/Winner – 512x512.png b/src/common/badges-dashboard/img/Winner – 512x512.png
diff --git a/src/common/badges-dashboard/img/p.jpg b/src/common/badges-dashboard/img/p.jpg
diff --git a/src/common/badges-dashboard/img/pf.jpg b/src/common/badges-dashboard/img/pf.jpg
diff --git a/src/common/badges-dashboard/img/pfw.jpg b/src/common/badges-dashboard/img/pfw.jpg