From 2c09034fcee13de30d6aed25f069aafeb24b63c9 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 4 May 2022 13:42:15 -0700
Subject: [PATCH] Incorporate 3D star into animation on button click.

---
 src/lib/Star.svelte                           | 42 ++++++++++++++
 src/routes/index.svelte                       | 56 ++++++++-----------
 .../{star.svelte => star_canvas.svelte}       |  0
 3 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/Star.svelte
 rename src/routes/{star.svelte => star_canvas.svelte} (100%)

diff --git a/src/lib/Star.svelte b/src/lib/Star.svelte
new file mode 100644
index 0000000..429983b
--- /dev/null
+++ b/src/lib/Star.svelte
@@ -0,0 +1,42 @@
+<script>
+  import * as THREE from 'three';
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+  import * as SC from 'svelte-cubed';
+  let star;
+  let rotation = 0;
+
+  let loader = new GLTFLoader();
+  loader.load('star.gltf', (gltf) => {
+    star = gltf.scene.children[0].geometry;
+  });
+
+  SC.onFrame(() => {
+    rotation += 0.01
+  })
+</script>
+
+<div class="star-container">
+  <SC.Canvas antialias alpha>
+    <SC.Mesh
+      geometry={star}
+      rotation={[-90, 0, rotation]}
+      material={new THREE.MeshStandardMaterial({
+        color: 0xffff00,
+        roughness: 0,
+        metalness: 0.7,
+      })}
+    />
+    <SC.PerspectiveCamera position={[3, 1, 3]} />
+    <SC.AmbientLight intensity={1} />
+    <SC.DirectionalLight intensity={0.7} />
+    <SC.PointLight intensity={1} position={[2, 5, 2]} />
+  </SC.Canvas>
+</div>
+
+<style>
+  .star-container {
+    position: relative;
+    width: 100px;
+    height: 100px;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7170284..0001a89 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,50 +1,40 @@
 <script>
-  import * as THREE from 'three';
-  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-  import * as SC from 'svelte-cubed';
-  let star;
-  let rotation = 0;
+  import { fly } from 'svelte/transition';
+  import Star from '$lib/Star.svelte'
 
-  let loader = new GLTFLoader();
-  loader.load('star.gltf', (gltf) => {
-    star = gltf.scene.children[0].geometry;
-  });
+  let isStar = false;
 
-  SC.onFrame(() => {
-    rotation += 0.01
-  })
+  function hitButton() {
+    isStar = true;
+    setTimeout(() => {
+      isStar = false;
+    }, 40);
+  }
 </script>
 
 <header>
-  <div class="star-container">
-    <SC.Canvas antialias alpha>
-      <SC.Mesh
-        geometry={star}
-        rotation={[-90, 0, rotation]}
-        material={new THREE.MeshStandardMaterial({
-          color: 0xffff00,
-          roughness: 0,
-          metalness: 0.7,
-        })}
-      />
-      <SC.PerspectiveCamera position={[3, 1, 3]} />
-      <SC.AmbientLight intensity={1} />
-      <SC.DirectionalLight intensity={0.7} />
-      <SC.PointLight intensity={1} position={[2, 5, 2]} />
-    </SC.Canvas>
-  </div>
   <h1>Star World</h1>
 </header>
 
+<div style:position="relative">
+  {#if isStar}
+    <div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
+      <Star />
+    </div>
+  {/if}
+  <button on:click={hitButton}>Level Up</button>
+</div>
+
 <style>
   header {
     display: flex;
     font-family: Arial, Helvetica, sans-serif;
+    margin-bottom: 60px;
   }
 
-  .star-container {
-    position: relative;
-    width: 100px;
-    height: 100px;
+  .star {
+    position: absolute;
+    top: -30px;
+    z-index: -1;
   }
 </style>
diff --git a/src/routes/star.svelte b/src/routes/star_canvas.svelte
similarity index 100%
rename from src/routes/star.svelte
rename to src/routes/star_canvas.svelte