Merge pull request #6 from andreev2007/ISSUE_7

feat(sanya-loh): add server functionality with toasts (ISSUE-7)

Author: andreev2007

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "firebase": "^10.12.2",
     "moment": "^2.30.1",
     "vue": "^3.2.13",
     "vue3-toastify": "^0.2.1"

package.json

@@ -27,12 +27,11 @@ body {
   backdrop-filter: blur(4px);
   padding: 40px;
   overflow-x: hidden;
-  min-height: 100vh;
 }
 
 @media (max-width: 1000px) {
   body {
-    background-image: url("assets/a-cheerful-korean-girl-wearing-hoodie-and-knit-hat-ai-generative-photo.jpg");
+    background-image: url("https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/images%2Fkorean-girl-bg.jpg?alt=media&token=80b00ef2-b0ea-4f26-bdc4-1ea4bb7b6084");
   }
 }
 </style>

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sanya-loh__music-wrapper">
+  <div class="sanya-loh__music-wrapper" >
     <button v-if="windowWidth < 1000" class="sanya-loh__menu-wrapper" @click="toggleMenu">
       <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 50 50">
         <path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z" fill="pink"></path>
@@ -19,15 +19,10 @@
   </div>
 </template>
 <script>
-import gtaSound from "@/assets/gta san.mp3";
-import blowjoberSound from "@/assets/sanya-loh.mp3";
-import chinaSound from "@/assets/china sound.mp3";
-import chinaLoveSound from "@/assets/loverman.mp3";
-import penisMusic from "@/assets/penis music.mp3";
-import socialCreditPlusMusic from "@/assets/chin chen hong chi.mp3";
-import socialCreditMinusMusic from "@/assets/siren.mp3";
 import { toast } from 'vue3-toastify';
 import 'vue3-toastify/dist/index.css';
+import db from '/src/firebase/index';
+import { collection, getDocs } from "firebase/firestore";
 
 export default {
   name: "MusicOptions",
@@ -37,12 +32,12 @@ export default {
     }
     const successNotify = () => {
       toast.success(`+ ${rndInt(100, 1000)} Social credits`, {
-        autoClose: 2000,
+        autoClose: 1000,
       });
     }
     const dangerNotify = () => {
       toast.error(`- ${rndInt(100000, 1000000)} Social credits`, {
-        autoClose: 2000,
+        autoClose: 1000,
       });
     }
     return { successNotify, dangerNotify };
@@ -61,50 +56,17 @@ export default {
     return {
       isMenuOpened: false,
       windowWidth: window.innerWidth,
-      musicOptions: [
-        {
-          id: 1,
-          option_name: 'nigga_chan',
-          option_label: 'nigga chan',
-          img_src: require('../assets/sanya-loh__music-nigga-head-Photoroom.png-Photoroom.png'),
-          audio_src: gtaSound,
-          social_credit: -1,
-        },
-        {
-          id: 2,
-          option_name: 'china_credit_gimn',
-          option_label: 'china credit gimn',
-          img_src: require('../assets/sanya-loh__music-nigga-head-second.png'),
-          audio_src: chinaSound,
-          social_credit: 1,
-        },
-        {
-          id: 3,
-          option_name: 'china_love',
-          option_label: 'china love',
-          img_src: require('../assets/Love_China_Flag.png'),
-          audio_src: chinaLoveSound,
-          social_credit: 1,
-        },
-        {
-          id: 4,
-          option_name: 'penis_music',
-          option_label: 'penis music',
-          img_src: require('../assets/penis.png'),
-          audio_src: penisMusic,
-          social_credit: -1,
-        },
-        {
-          id: 5,
-          option_name: 'sanya_sosi',
-          option_label: 'sanya blowjober',
-          img_src: require('../assets/728757-200.png'),
-          audio_src: blowjoberSound,
-          social_credit: -1,
-        },
-      ]
+      musicOptions: [],
     }
   },
+  async created() {
+    const querySnapshot = await getDocs(collection(db, "music_options"));
+    querySnapshot.forEach((doc) => {
+      console.log(doc.data());
+      this.musicOptions.push(doc.data());
+    });
+    this.musicOptions.sort((a, b) => b.created_at - a.created_at);
+  },
   methods: {
     onResize() {
       this.windowWidth = window.innerWidth;
@@ -115,10 +77,10 @@ export default {
     chooseAudio(item) {
       if (item.social_credit > 0) {
         this.successNotify();
-        new Audio(socialCreditPlusMusic).play();
+        new Audio('https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/audios%2Fchin%20chen%20hong%20chi.mp3?alt=media&token=50ff68d2-9a3c-479a-8491-ce845459e79b').play();
       } else {
         this.dangerNotify();
-        new Audio(socialCreditMinusMusic).play();
+        new Audio('https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/audios%2Fsiren.mp3?alt=media&token=544db688-e3fb-412f-b068-aa6b748926ca').play();
       }
       this.$emit('music-stop');
       this.$emit('music-replace', new Audio(item.audio_src), item);
@@ -138,21 +100,21 @@ export default {
 
   &.Toastify__toast--error {
     .Toastify__toast-icon {
-      background-image: url("../assets/lost social credit a lot.png");
+      background-image: url("https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/images%2Flost%20social%20credit%20a%20lot.png?alt=media&token=3007241a-feb8-4dee-b26d-cd6469753a1e");
     }
   }
 
   &.Toastify__toast--success {
     .Toastify__toast-icon {
-      background-image: url("../assets/plus-social-credits.png");
+      background-image: url("https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/images%2Fplus-social-credits.png?alt=media&token=5da280a5-bc4d-439d-8127-5771c1b93276");
     }
   }
 }
 
 .Toastify__toast-icon {
-  width: 100px;
-  height: 100px;
-  background-size: 100px 100px;
+  width: 50px;
+  height: 50px;
+  background-size: 50px 50px;
 
   svg {
     display: none;
@@ -162,12 +124,12 @@ export default {
 .sanya-loh__music-wrapper {
   display: grid;
   gap: 10px;
-  height: 200px;
   background: linear-gradient(red, orange, yellow, green, blue, purple);
   border-radius: 30px;
   box-shadow: 2px 2px 10px black;
   overflow: hidden;
   padding: 20px;
+  width: 300px;
 
   .sanya-loh__menu-wrapper {
     display: flex;
@@ -224,7 +186,6 @@ export default {
   margin: 0;
   list-style: none;
   transition: .3s;
-  height: 170px;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 10px;

src/assets/728757-200.png

@@ -19,7 +19,7 @@
             @click="toggleAudio"
             :style="sigmaStyle"
         >
-          <img src="../assets/sanya.png">
+          <img :src="activeSanyaImage">
         </div>
       </div>
       <div class="info">
@@ -36,25 +36,31 @@
 
 <script>
 import MusicOptions from "@/components/MusicOptions.vue";
-
+const defaultSanyaSrc = 'https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/images%2Fsanya.png?alt=media&token=72b9e86d-36b5-4e5a-9aca-69559477e80f';
 export default {
   name: 'SanyaLoh',
   components: {MusicOptions},
   data() {
     return {
       clicked: false,
-      audio: new Audio(require('../assets/sanya-loh.mp3')),
+      audio: new Audio('https://firebasestorage.googleapis.com/v0/b/sanya-loh-backend.appspot.com/o/audios%2Fsanya-loh.mp3?alt=media&token=2ab9aab1-3534-4adf-9fd5-f13f3b68ead6'),
       turn: 0,
+      activeSanyaImage: defaultSanyaSrc,
       activeItem: {
         id: 4,
         option_name: 'sanya_sosi',
         option_label: 'sanya blowjober',
-        img_src: require('../assets/728757-200.png'),
-        audio_src: '../assets/',
       },
     }
   },
   watch: {
+    activeItem(value) {
+      if (value.sanya_img_src) {
+        this.activeSanyaImage = value.sanya_img_src;
+      } else {
+        this.activeSanyaImage = defaultSanyaSrc;
+      }
+    },
     turn() {
       setTimeout(() => {
         if (this.clicked) {
@@ -115,6 +121,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(2, auto);
   gap: 5vw;
+  justify-content: center;
 }
 
 .sanya-loh-wrapper {
@@ -205,6 +212,10 @@ export default {
     }
   }
 
+  .sanya-loh__music-list {
+    height: 170px;
+  }
+
   .main-wrapper {
     display: grid;
     grid-template-columns: none;
@@ -218,7 +229,11 @@ export default {
 
   .sanya-loh__music-wrapper {
     max-height: 250px;
-    height: fit-content;
+    height: 170px;
+
+    &.closed {
+      height: fit-content;
+    }
   }
 }
 

src/assets/Love_China_Flag.png

@@ -0,0 +1,17 @@
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyAKhCcnYmwwWVZeBhUK8x3siWio76_FXKM",
+    authDomain: "sanya-loh-backend.firebaseapp.com",
+    projectId: "sanya-loh-backend",
+    storageBucket: "sanya-loh-backend.appspot.com",
+    messagingSenderId: "182495298842",
+    appId: "1:182495298842:web:507037d1277d25d9e198a3",
+    measurementId: "G-SL4KN10CMD"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+export default db;