From 730f5e9715aa642d370e8c30dc631635156a17e8 Mon Sep 17 00:00:00 2001 From: log101 Date: Thu, 18 Jan 2024 00:50:12 +0300 Subject: [PATCH] feat: watch position --- package-lock.json | 61 ++++++++++--- package.json | 2 +- src/components/LockedContent.tsx | 145 +++++++++++++++++-------------- src/components/ui/separator.tsx | 29 +++++++ src/layouts/Layout.astro | 4 +- src/pages/index.astro | 38 ++++++-- src/scripts/initMap.js | 43 +++++++++ src/styles/globals.css | 38 ++++---- src/styles/locked-content.css | 19 ++++ 9 files changed, 270 insertions(+), 109 deletions(-) create mode 100644 src/components/ui/separator.tsx diff --git a/package-lock.json b/package-lock.json index 9eec934..fb15b2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "@astrojs/react": "^3.0.9", "@astrojs/tailwind": "^5.1.0", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", - "@types/leaflet": "^1.9.8", "@types/react": "^18.2.47", "@types/react-dom": "^18.2.18", "astro": "^4.1.2", @@ -1102,6 +1102,52 @@ "react": "^16.x || ^17.x || ^18.x" } }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz", + "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", @@ -1326,11 +1372,6 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" }, - "node_modules/@types/geojson": { - "version": "7946.0.13", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz", - "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==" - }, "node_modules/@types/google.maps": { "version": "3.54.10", "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.10.tgz", @@ -1345,14 +1386,6 @@ "@types/unist": "*" } }, - "node_modules/@types/leaflet": { - "version": "1.9.8", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz", - "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==", - "dependencies": { - "@types/geojson": "*" - } - }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", diff --git a/package.json b/package.json index 1b57f02..d276ad5 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "@astrojs/react": "^3.0.9", "@astrojs/tailwind": "^5.1.0", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", - "@types/leaflet": "^1.9.8", "@types/react": "^18.2.47", "@types/react-dom": "^18.2.18", "astro": "^4.1.2", diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx index 32818b8..30f1ac5 100644 --- a/src/components/LockedContent.tsx +++ b/src/components/LockedContent.tsx @@ -1,81 +1,94 @@ -import { Button } from "@/components/ui/button"; -import { Card, CardContent } from "@/components/ui/card"; -import distance from "@/utils/distance"; +import { Button } from "@/components/ui/button" +import { Card, CardContent } from "@/components/ui/card" +import distance from "@/utils/distance" -import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons"; -import { useEffect, useState } from "react"; +import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons" +import { useEffect, useState } from "react" -import "../styles/locked-content.css"; +import "../styles/locked-content.css" const LocationButton = () => { - const [isLocked, setIsLocked] = useState(true); + const [atTarget, setAtTarget] = useState(false) + const [contentVisible, setContentVisible] = useState(false) + const [hasPermission, setHasPermission] = useState(false) + + const startWatchingLocation = () => { + setHasPermission(true) + navigator.geolocation.watchPosition( + (position: GeolocationPosition) => { + const pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + } + + const totalDistanceInKM = distance(pos.lat, pos.lng, pos.lat, pos.lng).toFixed(0) + + if (totalDistanceInKM === "0") { + setAtTarget(true) + } + }, + () => null, + { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 } + ) + } useEffect(() => { - setInterval( - () => - navigator.geolocation.getCurrentPosition( - (position: GeolocationPosition) => { - const pos = { - lat: position.coords.latitude, - lng: position.coords.longitude, - }; + navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => { + if (permissionStatus.state === "granted") { + setHasPermission(true) + startWatchingLocation() + } + }) + }, []) - const totalDistanceInKM = distance( - pos.lat, - pos.lng, - pos.lat, - pos.lng - ).toFixed(0); - - if (totalDistanceInKM === "0") { - setIsLocked(false); - } - } - ), - 3000 - ); - }, []); - - if (isLocked) { - return ( -
-
-
- -
- - - - İçeriği görmek için konuma gitmelisin! - - -
-
- ); + if (contentVisible) { + return
} else { return ( -
-
-
- + +
+ + + İçeriği görmek için butona bas! +
+ ) : ( +
+ - - - İçeriği görmek için butona bas! - - -
+ + {hasPermission ? ( + İçeriği görmek için konuma gitmelisin! + ) : ( +
+ + Ne kadar yaklaştığını görmek için aşağıdaki butona bas. + + + +
+ )} + +
+ )} - ); + ) } -}; +} -export default LocationButton; +export default LocationButton diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..6d7f122 --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 3ef0367..47bc3aa 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,5 @@ --- -const googleSdkKey = import.meta.env.MAPS_SDK_KEY; + --- @@ -23,7 +23,7 @@ const googleSdkKey = import.meta.env.MAPS_SDK_KEY; Konulu Konum - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 9013bc2..00e8990 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,17 +13,36 @@ import { import { CalendarIcon } from '@radix-ui/react-icons'; import '../styles/locked-page.css'; -import LocationButton from '@/components/LockedContent'; +import LockedContent from '@/components/LockedContent'; +import { Separator } from '@/components/ui/separator'; --- -
+
+
+

+ Konulu Konum +

+

+ Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı + görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma + yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz. +

+
+ + + Abdurrahman -

Aşağıdaki konuma gitmen gerekiyor.

+

+ Hacı sana çok özel bir sürpriz hazırladık, aşağıdaki konuma muhakak + git. +

@@ -31,11 +50,16 @@ import LocationButton from '@/components/LockedContent'; -
+ - +
+ + +
+

+ Fotoğrafın kilidi şu ana dek 2 kez açıldı +

+
- - diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js index d672e43..545bea2 100644 --- a/src/scripts/initMap.js +++ b/src/scripts/initMap.js @@ -15,6 +15,13 @@ var targetLocationIcon = L.icon({ L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map); +var circle = L.circle(TARGET_LOCATION, { + color: 'blue', + fillColor: '#30f', + fillOpacity: 0.2, + radius: 50 +}).addTo(map); + var currentLocationIcon = L.icon({ iconUrl: 'blue-dot.png', iconSize: [32, 32], @@ -92,3 +99,39 @@ L.control.targetLocation = function (opts) { L.control.currentLocation({ position: 'bottomleft' }).addTo(map); L.control.targetLocation({ position: 'bottomleft' }).addTo(map); + +navigator.permissions + .query({ name: "geolocation" }) + .then((permissionStatus) => { + if (permissionStatus === 'granted') { + navigator.geolocation.watchPosition( + (position) => { + const pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + } + + console.log('The map location is' + pos) + }, + () => null, + { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 } + ) + } else { + permissionStatus.onchange = () => { + if (permissionStatus.state === 'granted') { + navigator.geolocation.watchPosition( + (position) => { + const pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + } + + console.log('The map location is' + pos) + }, + () => null, + { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 } + ) + } + }; + } + }); diff --git a/src/styles/globals.css b/src/styles/globals.css index 6a75725..8abdb15 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,7 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { --background: 0 0% 100%; @@ -9,63 +9,63 @@ --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; - + --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - + --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; - + --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; - + --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; - + --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; - + --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; - + --radius: 0.5rem; } - + .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; - + --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; - + --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; - + --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - + --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; - + --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; - + --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; - + --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; - + --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } - + @layer base { * { @apply border-border; @@ -73,4 +73,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/src/styles/locked-content.css b/src/styles/locked-content.css index 5b65507..bb3a8b9 100644 --- a/src/styles/locked-content.css +++ b/src/styles/locked-content.css @@ -5,6 +5,13 @@ overflow: hidden; } +.module-unlocked { + display: grid; + place-items: center; + position: relative; + overflow: hidden; +} + .module::before { content: ""; top: 0; @@ -18,6 +25,18 @@ filter: blur(20px); } +.module-unlocked::before { + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + background-image: url("/sample-selfie.webp"); + background-position: center; + background-repeat: no-repeat; +} + .module-inside { position: relative; }