fix: heartSection.vue

src/components/heartSection.vue

@@ -1,17 +1,34 @@
 <template>
-  <section>
+  <div ref="container" :class="sizeStyle" />
-    <div ref="container" class="w-full h-screen" />
-  </section>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from 'vue'
+import {onMounted, onBeforeUnmount, ref, computed} from 'vue'
+import { useRouter } from 'vue-router'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-import { heartSectionConst } from '../../../constants'
+import { heartSectionConst } from '../constants'
+
+const props = defineProps<{
+  mode: 'home' | 'game',
+  size?: 'primary'
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const sizeStyle = computed(() => {
+  switch (props.size) {
+    case 'primary':
+    default:
+      return 'w-full h-screen';
+  }
+})
 
 const container = ref<HTMLDivElement | null>(null)
+const router = useRouter()
 
 let scene: THREE.Scene
 let camera: THREE.PerspectiveCamera
@@ -21,11 +38,15 @@ let heart: THREE.Group | null = null
 
 let { SCALE: scale, ANIMATION_ID: animationId, DIRECTION: direction } = heartSectionConst
 
+const raycaster = new THREE.Raycaster()
+const mouse = new THREE.Vector2()
+
 const animate = () => {
   animationId = requestAnimationFrame(animate)
+
   if (heart) {
     scale += 0.003 * direction
-    if (scale > 1.05 || scale < 0.95) return (direction *= -1)
+    if (scale > 1.05 || scale < 0.95) direction *= -1
     heart.scale.set(scale, scale, scale)
     heart.rotation.y += 0.005
   }
@@ -34,6 +55,25 @@ const animate = () => {
   renderer.render(scene, camera)
 }
 
+const onClick = (event: MouseEvent) => {
+  if (!container.value || !heart) return
+
+  const rect = container.value.getBoundingClientRect()
+  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
+
+  raycaster.setFromCamera(mouse, camera)
+  const intersects = raycaster.intersectObject(heart, true)
+
+  if (intersects.length > 0) {
+    if (props.mode === 'home') {
+      router.push('/game')
+    } else if (props.mode === 'game') {
+      emit('click')
+    }
+  }
+}
+
 onMounted(() => {
   if (!container.value) return
 
@@ -44,10 +84,9 @@ onMounted(() => {
       75,
       container.value.clientWidth / container.value.clientHeight,
       0.1,
-    1000,
+      1000
   )
   camera.position.set(0, 1, 5)
-  camera.position.set(0, 1, 5)
 
   renderer = new THREE.WebGLRenderer({ antialias: true })
   renderer.setSize(container.value.clientWidth, container.value.clientHeight)
@@ -70,6 +109,7 @@ onMounted(() => {
   })
 
   window.addEventListener('resize', onWindowResize)
+  window.addEventListener('click', onClick)
 
   animate()
 })
@@ -77,6 +117,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   cancelAnimationFrame(animationId)
   window.removeEventListener('resize', onWindowResize)
+  window.removeEventListener('click', onClick)
 })
 
 const onWindowResize = () => {

src/declarations.d.ts

@@ -15,7 +15,7 @@ declare module 'three/examples/jsm/loaders/GLTFLoader' {
       url: string,
       onLoad: (gltf: GLTF) => void,
       onProgress?: (event: ProgressEvent<EventTarget>) => void,
-            onError?: (event: ErrorEvent | unknown) => void
+      onError?: (event: ErrorEvent | unknown) => void,
     ): void
   }
 }

src/layout/UiHeader.vue

@@ -1,7 +1,13 @@
 <template>
   <header>
-    <div class="flex items-center justify-between hidden">hidden</div>
+    <div class="bg-black flex items-center justify-center flex-col">
+      <UiHeadering class="text-white" tag="H1">Heart Clicker 💖</UiHeadering>
+      <UiParagraph class="text-white">Кликай по сердцу, чтобы собрать любовь!</UiParagraph>
+    </div>
   </header>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import UiHeadering from "../components/typography/UiHeadering.vue";
+import UiParagraph from "../components/typography/UiParagraph.vue";
+</script>

src/pages/clicker-game/clickerIndex.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="min-h-screen bg-black text-white">
+      <div class="flex items-center justify-center container mx-auto">
+        <HeartSection mode="game" @click="clickCount++" />
+        <UiParagraph class="text-white">{{clickCount}}</UiParagraph>
+      </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import HeartSection from '../../components/heartSection.vue'
+import UiParagraph from "../../components/typography/UiParagraph.vue";
+
+const clickCount = ref(0)
+</script>

src/pages/index/rootPage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import HeartSection from './_ui/heartSection.vue'
+import HeartSection from '../../components/heartSection.vue'
 </script>
 
 <template>
   <section>
-    <HeartSection />
+    <HeartSection mode="home"/>
   </section>
 </template>

src/router/config/routes.ts

@@ -6,5 +6,10 @@ const routes: TRoute[] = [
     name: '/',
     component: () => import('../../pages/index/rootPage.vue'),
   },
+  {
+    path:'/game',
+    name:'/game',
+    component:()=> import('../../pages/clicker-game/clickerIndex.vue')
+  }
 ]
 export default routes