feat: show content on click

src/components/LockedContent.tsx

@@ -22,7 +22,7 @@ const LocationButton = ({
   imageUrl?: string;
   location?: string;
 }) => {
-  const [atTarget, setAtTarget] = useState(false);
+  const [atTarget, setAtTarget] = useState(true);
   const [contentVisible, setContentVisible] = useState(false);
   const [hasPermission, setHasPermission] = useState(false);
   const [watchId, setWatchId] = useState<number>();
@@ -57,7 +57,7 @@ const LocationButton = ({
 
           if (betweenMeters > 1000) {
             setDistanceRemain(`${(betweenMeters / 1000).toFixed()} KM`);
-          } else if (betweenMeters > 50) {
+          } else if (betweenMeters > 200) {
             setDistanceRemain(`${betweenMeters.toFixed(0)} M`);
           } else {
             setAtTarget(true);

src/components/WebComponentWrapper.astro

@@ -1,5 +1,5 @@
 ---
-import { LockClosedIcon } from "@radix-ui/react-icons";
+import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons";
 
 interface Props {
   contentId?: string;
@@ -17,30 +17,34 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
     <div class="flex flex-col justify-center items-center image-wrapper">
       <img id="content" src="#" class="blur-2xl h-[450px]" />
 
-      <div class="flex flex-col justify-center gap-4 overlay">
+      <template id="locked-button-template">
-        <template id="unlocked-button-template">
+        <div class="flex flex-col justify-center gap-4 overlay">
+          <button
+            id="unlock-content-button"
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md"
+          >
+            <LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
+          </button>
+          <div
+            class="rounded-lg border bg-card text-card-foreground shadow-sm p-2"
+          >
+            <div class="pb-0 px-4 text-center">
+              İçeriği görmek için konuma gitmelisin!
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template id="unlocked-button-template">
+        <div class="flex flex-col justify-center gap-4 overlay">
           <button
             id="unlock-content-button"
             class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-11 rounded-md text-lg p-6 animate-pulse bg-indigo-600 hover:bg-indigo-700 hover:animate-none border-2 border-indigo-800"
           >
+            <LockOpen1Icon className="mr-2 h-4 w-4" />
             İçeriğin Kilidi Açıldı
           </button>
-        </template>
 
-        <template id="locked-button-template">
-          <button
-            id="unlock-content-button"
-            class="inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md px-8 text-md"
-          >
-            <LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
-          </button>
-        </template>
-
-        <slot name="locked-content-button" />
-
-        <unlock-content-button locked></unlock-content-button>
-
-        <slot name="locked-content-description">
           <div
             class="rounded-lg border bg-card text-card-foreground shadow-sm p-2"
           >
@@ -48,8 +52,10 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
               İçeriği görmek için butona bas!
             </div>
           </div>
-        </slot>
+        </div>
-      </div>
+      </template>
+
+      <unlock-content-button></unlock-content-button>
     </div>
   </div>
   <style>

src/components/locked-content.ts

@@ -9,15 +9,8 @@ class LockedContent extends HTMLElement {
     let templateContent = template.content;
 
     // Get attributes
-    const contentId = this.getAttribute("contentId");
     const imageURL = this.getAttribute("imageURL") ?? "#";
 
-    // Fetch functions
-    const incrementCounter = async (id: string) =>
-      await fetch(`http://localhost:3000/api/location/increment/${id}`, {
-        method: "PATCH",
-      });
-
     // Attach cloned template to DOM
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.appendChild(templateContent.cloneNode(true));
@@ -32,11 +25,7 @@ class LockedContent extends HTMLElement {
     );
 
     if (unlockContentButton) {
-      unlockContentButton.addEventListener("click", () => {
+      unlockContentButton.addEventListener("click", (el) => {});
-        if (contentId) {
-          incrementCounter(contentId);
-        }
-      });
     }
   }
 }
@@ -44,6 +33,11 @@ class LockedContent extends HTMLElement {
 class UnlockContentButton extends HTMLElement {
   static observedAttributes = ["locked"];
 
+  private incrementCounter = async (id: string) =>
+    fetch(`http://localhost:3000/api/location/increment/${id}`, {
+      method: "PATCH",
+    });
+
   constructor() {
     super();
   }
@@ -52,6 +46,8 @@ class UnlockContentButton extends HTMLElement {
     const host = document.getElementById("locked-content");
 
     if (host) {
+      const contentId = host.getAttribute("contentId");
+
       let lockedTemplate = host.shadowRoot?.getElementById(
         "locked-button-template"
       ) as HTMLTemplateElement;
@@ -67,6 +63,15 @@ class UnlockContentButton extends HTMLElement {
       } else {
         this.appendChild(unlockedTemplateContent.cloneNode(true));
       }
+
+      this.addEventListener("click", (el) => {
+        if (contentId) {
+          this.incrementCounter(contentId);
+          const imageContent = host.shadowRoot?.getElementById("content");
+          imageContent?.classList.remove("blur-2xl");
+          this.remove();
+        }
+      });
     }
   }