add fireworks

front/package-lock.json

@@ -8,6 +8,7 @@
       "name": "front",
       "version": "0.0.0",
       "dependencies": {
+        "@fireworks-js/vue": "^2.10.7",
         "@vueuse/core": "^10.9.0",
         "pinia": "^2.1.7",
         "reset-css": "^5.0.2",
@@ -426,6 +427,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fireworks-js/vue": {
+      "version": "2.10.7",
+      "resolved": "https://registry.npmjs.org/@fireworks-js/vue/-/vue-2.10.7.tgz",
+      "integrity": "sha512-F+aF6lHlYshvlHWo8j6rmkSx7Y7pXvaccIN9ZhaOTJsf3/Q16gkuCaq8lCjgZV3+KLRAmzNzCUr4Gg1Vu1izYA==",
+      "dependencies": {
+        "fireworks-js": "2.10.7"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@iconify-json/mdi": {
       "version": "1.1.66",
       "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.66.tgz",
@@ -1298,6 +1310,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fireworks-js": {
+      "version": "2.10.7",
+      "resolved": "https://registry.npmjs.org/fireworks-js/-/fireworks-js-2.10.7.tgz",
+      "integrity": "sha512-FyRNiqlgu9ZeFCjfN0UiGUlj5dUWNYLyFaWN/Q8sOMf0E+KGA4dMROaBZpCtym85fChgCspoa3jHoLTRZiy74A=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",

front/package.json

@@ -9,16 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fireworks-js/vue": "^2.10.7",
+    "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",
-    "@vueuse/core": "^10.9.0",
     "vue": "^3.4.21",
     "vue-3d-model": "^2.0.0-alpha.4"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.2.31",
     "@iconify-json/mdi": "^1.1.66",
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.2.31",
     "sass": "^1.75.0",
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.18.5",

front/src/App.vue

@@ -1,39 +1,50 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { ModelFbx } from 'vue-3d-model';
+import type { UseSwipeDirection } from '@vueuse/core';
+import { useSwipe } from '@vueuse/core';
 import RandomIcon from './components/RandomIcon.vue';
 import { useProductStore } from './stores/product';
 import type { ProductInfo } from './stores/product';
-import { useSwipe } from '@vueuse/core';
-import type { UseSwipeDirection } from '@vueuse/core';
+import Fireworks from '@fireworks-js/vue';
+import type { FireworksOptions } from '@fireworks-js/vue'
 
 const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
 
 type StateType = {
   active_product?: ProductInfo
-  show_canvas: boolean
+  show_model: boolean,
+  show_fireworks: boolean
 }
 
 const products = useProductStore()
 
 const state: StateType = reactive({
   active_product: undefined,
-  show_canvas: false
+  show_model: false,
+  show_fireworks: false
 })
 
+const reset = () => {
+  state.active_product = undefined
+  state.show_model = false
+  state.show_fireworks = false
+}
+
 const setActive = (id: number) => {
-  state.active_product = products.list.find(el => el.id == id),
-    state.show_canvas = false
+  state.active_product = products.list.find(el => el.id == id)
+  state.show_model = false
+  state.show_fireworks = false
 }
 
 const toggleShowCanvas = () => {
-  state.show_canvas = !state.show_canvas
+  state.show_model = !state.show_model
 }
 
 const target = ref<HTMLElement | null>(null)
 useSwipe(target, {
   onSwipeEnd(_: TouchEvent, direction: UseSwipeDirection) {
-    if (state.show_canvas) {
+    if (state.show_model) {
       return
     }
     const index = products.list.findIndex(el => el.id == state.active_product?.id)
@@ -53,6 +64,16 @@ useSwipe(target, {
   }
 })
 
+const fw = ref<InstanceType<typeof Fireworks>>()
+const options = ref<FireworksOptions>({
+  lineStyle: 'square',
+  intensity: 50,
+  lineWidth: {
+    explosion: { min: 7, max: 10 },
+    trace: { min: 7, max: 10 },
+
+  }
+})
 onMounted(async () => {
   products.getData()
 })
@@ -70,24 +91,39 @@ onMounted(async () => {
         </li>
       </ul>
     </div>
-    <div class="header"><span class="logo-header">Проекты Кустарщины</span></div>
+    <div class="header"><span class="logo-header" @click="reset">Проекты Кустарщины</span></div>
     <div class="main product" v-if="state.active_product" ref="target">
-      <div class="product-image" v-if="!state.show_canvas && state.active_product.image1">
-        <img :src="`${IMAGE_URL}${state.active_product.image1}`" />
+      <div class="product-image" v-if="!state.show_model && state.active_product.image1">
+        <img :style="{
+          clipPath: `polygon(
+            0% 10%, 10% 0%, 
+            90% 0%, 100% 10%, 
+            100% 90%, 90% 100%,
+            10% 100%, 0% 90%
+          )`}" :src="`${IMAGE_URL}${state.active_product.image1}`" />
       </div>
-      <div class="product-description" v-if="!state.show_canvas">
+      <div class="product-description" v-if="!state.show_model">
         {{ state.active_product.description }}
       </div>
       <a class="product-model-icon" v-if="state.active_product.model3d" @click.stop.prevent="toggleShowCanvas">
-        <i-mdi-video-3d v-if="!state.show_canvas" />
+        <i-mdi-video-3d v-if="!state.show_model" />
         <i-mdi-file v-else />
       </a>
-      <model-fbx v-if="state.show_canvas && state.active_product.model3d" class="product-model"
-        :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`"
-        :backgroundAlpha="0"></model-fbx>
+      <model-fbx v-if="state.show_model && state.active_product.model3d" class="product-model"
+        :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`" :backgroundAlpha="0"></model-fbx>
     </div>
     <div class="main" v-else>
-      <img class="logo-img" src="./assets/logo_color.png" />
+      <img class="logo-img" src="./assets/logo_color.png"
+        @click="() => { state.show_fireworks = !state.show_fireworks }" />
+      <Fireworks ref="fw" v-if="state.show_fireworks" :autostart="true" :options="options" :style="{
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        zIndex: -1,
+        pointerEvents: 'none',
+      }" />
     </div>
   </div>
 </template>

front/src/assets/main.scss

@@ -17,7 +17,8 @@ $redColor: #f83300;
 
 body {
   font-family: 'main';
-  background: $blackColor;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) $blackColor;
+  background-blend-mode: multiply, multiply;
   color: #fff;
   user-select: none;
 }
@@ -99,6 +100,7 @@ body {
 
   &-model {
     max-height: 80%;
+
     &-icon {
       position: absolute;
       font-size: 4rem;
@@ -115,6 +117,7 @@ body {
   &-header {
     font-family: 'logo';
     font-size: 4rem;
+    padding: 1rem;
 
     background: linear-gradient(45deg, $redColor, $accentColor);
     background-clip: text;