Merge pull request #112 from HyeokjinKang/banner-editable

feat: 배너 표시 기능 구현
HyeokjinKang · Oct 30, 2023 · d402dec · d402dec
2 parents eb9da6b + 30fe2bf
commit d402dec
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 14 deletions.
diff --git a/public/css/game.css b/public/css/game.css
@@ -3206,6 +3206,68 @@ del {
 }
 
 .bannerImage {
+  float: left;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
   margin-right: 0.15vw;
   width: 10vw;
+  height: 2.3vw;
+  border-radius: 3px;
+}
+
+.bannerImage.hidden > .bannerHover {
+  opacity: 0.8;
+}
+
+.bannerHover {
+  pointer-events: none;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    45deg,
+    rgba(0, 0, 0, 0.7) 10%,
+    rgba(0, 0, 0, 0.6) 0,
+    rgba(0, 0, 0, 0.6) 20%,
+    rgba(0, 0, 0, 0.7) 0,
+    rgba(0, 0, 0, 0.7) 30%,
+    rgba(0, 0, 0, 0.6) 0,
+    rgba(0, 0, 0, 0.6) 40%,
+    rgba(0, 0, 0, 0.7) 0,
+    rgba(0, 0, 0, 0.7) 50%,
+    rgba(0, 0, 0, 0.6) 0,
+    rgba(0, 0, 0, 0.6) 60%,
+    rgba(0, 0, 0, 0.7) 0,
+    rgba(0, 0, 0, 0.7) 70%,
+    rgba(0, 0, 0, 0.6) 0,
+    rgba(0, 0, 0, 0.6) 80%,
+    rgba(0, 0, 0, 0.7) 0,
+    rgba(0, 0, 0, 0.7) 90%,
+    rgba(0, 0, 0, 0.6) 0,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  transition-duration: 0.3s;
+  border-radius: 3px;
+}
+
+.bannerImage.clickable:hover > .bannerHover {
+  opacity: 1;
+}
+
+.bannerImage.clickable:hover > .bannerHover > .bannerIcon {
+  opacity: 1;
+}
+
+.bannerHover {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.bannerIcon {
+  opacity: 0;
+  height: 1.5vw;
+  transition-duration: 0.3s;
 }
diff --git a/public/images/parts/icons/eye-closed.svg b/public/images/parts/icons/eye-closed.svg
diff --git a/public/images/parts/icons/eye.svg b/public/images/parts/icons/eye.svg
diff --git a/public/js/game.js b/public/js/game.js
@@ -72,18 +72,12 @@ let maxCount = 0;
 let speeds = [1, 2, 3];
 let bpm = 130;
 let isRankOpened = false;
-let isAdvanced = false;
-let skins = [],
-  DLCs = [];
-let carts = new Set();
-let cartArray = [];
-let DLCdata = [];
-let skinData = [];
-let songData = [];
+let skins = [];
 let loading = false;
 let tutorial = false;
 let aliasNum;
 let ownedAlias;
+let banners;
 
 let rate = 1;
 let disableText = false;
@@ -221,10 +215,11 @@ const settingApply = () => {
   document.getElementById("inputSelector").getElementsByTagName("option")[Number(settings.input.keys)].selected = true;
   for (let i = 0; i <= 1; i++) {
     document.getElementsByClassName("volumeMaster")[i].value = settings.sound.volume.master * 100;
-    document.getElementsByClassName("volumeMasterValue")[i].textContent = Math.round(settings.sound.volume.music * 100) + "%";
+    document.getElementsByClassName("volumeMasterValue")[i].textContent = Math.round(settings.sound.volume.master * 100) + "%";
   }
   document.getElementById("volumeSong").value = settings.sound.volume.music * 100;
   document.getElementById("volumeHit").value = settings.sound.volume.hitSound * 100;
+  document.getElementById("volumeEft").value = settings.sound.volume.effect * 100;
   document.getElementById("inputSensitive").value = settings.input.sens * 100;
   document.getElementById("inputSize").value = settings.game.size * 10;
   document.getElementById("mouseCheck").checked = settings.input.mouse;
@@ -587,7 +582,7 @@ const tracksUpdate = () => {
         trackRecords[i] = [];
         if (data.result == "success") {
           for (let j = 0; j < 3; j++) {
-            if ((tracks[i].type == 1 && !isAdvanced) || (tracks[i].type == 2 && !(songData.indexOf(tracks[i].name) != -1))) {
+            if (tracks[i].type == 1) {
               trackRecords[i][j] = {
                 rank: "rankL",
                 record: 0,
@@ -620,7 +615,7 @@ const tracksUpdate = () => {
           }
         } else {
           for (let j = 0; j < 3; j++) {
-            if ((tracks[i].type == 1 && !isAdvanced) || (tracks[i].type == 2 && !(songData.indexOf(tracks[i].name) != -1))) {
+            if (tracks[i].type == 1) {
               if (isOfficial) {
                 document.getElementsByClassName("ranks")[i].className = "ranks";
                 document.getElementsByClassName("ranks")[i].classList.add("rankL");
@@ -1376,13 +1371,21 @@ const profileUpdate = async (uid, isMe) => {
     document.getElementsByClassName("profileStatValue")[2].textContent = `${Number(profile.accuracy).toFixed(2)}%`;
     document.getElementsByClassName("profileStatValue")[3].textContent = profile.playtime;
     document.getElementsByClassName("profileStatValue")[4].textContent = profile["1stNum"];
-    let banners = JSON.parse(profile.banner);
+    banners = JSON.parse(profile.banner);
     if (banners.length == 0) {
       document.getElementById("profileBanner").innerHTML = `<span class="nothingHere">${nothingHere}</span>`;
     } else {
       document.getElementById("profileBanner").innerHTML = `<div id="profileBannerContainer"></div>`;
       for (let i = 0; i < banners.length; i++) {
-        document.getElementById("profileBannerContainer").innerHTML += `<img src="${cdn}/banners/${banners[i]}.webp" class="bannerImage" />`;
+        if (banners[i].indexOf("(-)") != -1 && !isMe) continue;
+        document.getElementById("profileBannerContainer").innerHTML += `
+        <div class="bannerImage${isMe ? " clickable" : ""}${banners[i].indexOf("(-)") != -1 ? " hidden" : ""}" style="background-image: url('${cdn}/banners/${banners[i].replace("(-)", "")}.webp')" ${
+          isMe ? `onclick="bannerToggle(${i})"` : ""
+        }>
+          <div class="bannerHover">
+            <img src="/images/parts/icons/${banners[i].indexOf("(-)") != -1 ? "eye-closed" : "eye"}.svg" class="bannerIcon">
+          </div>
+        </div>`;
       }
     }
     let recentPlay = JSON.parse(profile.recentPlay);
@@ -1539,10 +1542,42 @@ const langChanged = (e) => {
   window.location.href = `${url}/${e.value}`;
 };
 
-const logout = (e) => {
+const logout = () => {
   window.location.href = `${api}/auth/logout?redirect=true`;
 };
 
+const bannerToggle = (n) => {
+  if (banners[n].indexOf("(-)") == -1) {
+    banners[n] = banners[n] + "(-)";
+    document.getElementsByClassName("bannerImage")[n].classList.add("hidden");
+    document.getElementsByClassName("bannerIcon")[n].src = "/images/parts/icons/eye-closed.svg";
+  } else {
+    banners[n] = banners[n].replace("(-)", "");
+    document.getElementsByClassName("bannerImage")[n].classList.remove("hidden");
+    document.getElementsByClassName("bannerIcon")[n].src = "/images/parts/icons/eye.svg";
+  }
+  fetch(`${api}/profile/banner`, {
+    method: "PUT",
+    credentials: "include",
+    body: JSON.stringify({
+      value: JSON.stringify(banners),
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (data.result != "success") {
+        alert(`Error occured.\n${data.error}`);
+      }
+    })
+    .catch((error) => {
+      alert(`Error occured.\n${error}`);
+      console.error(`Error occured.\n${error}`);
+    });
+};
+
 const settingChanged = (e, v) => {
   if (v == "detailLang") {
     settings.general.detailLang = e.value;