From c4690e269d0b43a8d66bf86b57005bfc62507a11 Mon Sep 17 00:00:00 2001
From: starlitskies <majikx.prod0@gmail.com>
Date: Tue, 7 Nov 2023 04:11:12 +0500
Subject: [PATCH] feat: add live preview

---
 src/js/components/overlay.js |  34 ++++---
 src/js/main.js               | 182 ++++++++++++++++++++++++++++++++---
 src/scss/overlay.scss        |  52 +++++-----
 3 files changed, 213 insertions(+), 55 deletions(-)

diff --git a/src/js/components/overlay.js b/src/js/components/overlay.js
index 9256773..1b58aa3 100644
--- a/src/js/components/overlay.js
+++ b/src/js/components/overlay.js
@@ -1,21 +1,23 @@
 export const overlayHTML = `
-  <div id="elements">
-    <div id="rankBlock">
-      <img alt="rank" src="#" id="imgRank" height="80" width="80" />
-    </div>
-    <div id="playerInfo">
-      <h2 style="text-transform: uppercase" id="mainText">
-        Rating
-      </h2>
-      <h1 style="text-transform: uppercase" id="playerRank"></h1>
-      <div id="wlstat">
-        <h2 id="WLvalue">Win: <span id="winValue"></span> Lose: <span id="loseValue"></span> <span id="wlProccent"></span></h2>
+  <div class="overlay__body">
+    <div id="elements" :style="!transparentGradientCheck ? 'background-image: ' + 'linear-gradient(rgba(255, 0, 0, 0), rgba(0, 0, 0, 0.57))' : ''">
+      <div id="rankBlock" :style="!transparentCheck ? 'background-color: ' + backgroundColor + '40' : ''">
+        <img alt="rank" src="#" id="imgRank" height="80" width="80" />
       </div>
-      <div id="progressrank"></div>
-      <div class="lastmatchpts">
-        <span id="lastmatchpts">Last Match:</span>
-        <span id="lastmatchptsvalue"></span>
-        <img src="#" id="imgPTS" height="16" width="16"/>
+      <div id="playerInfo">
+        <h2 style="text-transform: uppercase;" :style="{ color: textColor }" id="mainText">
+          Rating
+        </h2>
+        <h1 style="text-transform: uppercase;" :style="{ color: primaryColor }" id="playerRank"></h1>
+        <div id="wlstat" :style="wlStat ? 'display: none' : ''" >
+          <h2 id="WLvalue" :style="{ color: textColor }">Win: <span id="winValue" :style="{ color: primaryColor }"></span> Lose: <span id="loseValue" :style="{ color: primaryColor }"></span> <span id="wlProccent" :style="{ color: primaryColor }"></span></h2>
+        </div>
+        <div id="progressrank" :style="progressRank ? 'display: none' : '--progressrank-after-color:' + progressRankColor + ';' + '--progressrank-color:' +  progressRankBackgroundColor + '45';"></div>
+        <div id="lastmatchpts" class="lastmatchpts" :style="lastMarchPts ? 'display: none' : 'color:' + textColor">
+          <span>Last Match:</span>
+          <span id="lastmatchptsvalue" :style="{ color: primaryColor }"></span>
+          <img src="#" id="imgPTS" height="16" width="16"/>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/js/main.js b/src/js/main.js
index cafd0bc..67fc412 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,5 +1,11 @@
-import '../scss/main.scss'
-import Alpine from 'alpinejs'
+import "../scss/overlay.scss";
+import "../scss/main.scss";
+import Alpine from "alpinejs";
+
+import { overlayHTML } from "./components/overlay.js";
+
+const apiUrl = 'https://api.henrikdev.xyz/valorant'
+let playerData;
 
 async function checkNickname(name) {
     const regex = /^[a-zA-Zа-яА-Я0-9\s]{1,16}#[a-zA-Zа-яА-Я0-9]{1,5}$/
@@ -119,14 +125,14 @@ document.querySelector('#app').innerHTML = `
                   </svg>
                 </span>
                 <input
-                  @keyup.enter="if (await checkNickname(nickname)) { getPreview(); search = true;} else { alert = true; setTimeout(() => alert = false, 5000)}"
+                  @keyup.enter="if (await checkNickname(nickname)) { getPreview(); search = true; main();} else { alert = true; setTimeout(() => alert = false, 5000)}"
                   x-model="nickname"
                   class="nickname"
                   id="nickname_with_tag"
                   placeholder="NICKNAME#TAG"
                   autocomplete="off"
                 />
-                <button class="icons" @click="if (await checkNickname(nickname)) { getPreview(); search = true;} else { alert = true; setTimeout(() => alert = false, 5000)}">
+                <button class="icons" @click="if (await checkNickname(nickname)) { getPreview(); search = true; main();} else { alert = true; setTimeout(() => alert = false, 5000)}">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                   </svg>
@@ -334,12 +340,6 @@ document.querySelector('#app').innerHTML = `
                   </div>
                   <label for="transparentcheck"> Disable Last match pts</label>
                 </div>
-                <button
-                  style="width: 100%; margin-top: 5px;"
-                  @click="getPreview()"
-                >
-                  Update
-                </button>
               </div>
             </div>
             <button
@@ -450,7 +450,7 @@ document.querySelector('#app').innerHTML = `
       <div class="preview">
         <div id="divframe">
           <h1 x-show="!search" class="no_iframe">Your preview will be located here. Please enter your profile to see it.</h1>
-          <iframe x-transition x-show="search" title="" id="iframe"></iframe>
+          <div x-transition x-show="search" title="" id="iframe"></div>
         </div>
       </div>
       <div x-cloak x-show="alert" class="alert" x-transition>
@@ -517,6 +517,10 @@ async function getPreview() {
   const progressRankCheck = document.getElementById('progressrankcheck').checked ? 'yes' : 'no';
   const lastMatchPtsCheck = document.getElementById('lastmatchptscheck').checked ? 'yes' : 'no';
 
+  await generateLink(nickname, tag, textColor, primaryColor, bgColor, progressRankColor, progressRankBgColor, alphaBg, alphaGradBg, wlStatCheck, progressRankCheck, lastMatchPtsCheck)
+}
+
+async function generateLink(nickname, tag, textColor, primaryColor, bgColor, progressRankColor, progressRankBgColor, alphaBg, alphaGradBg, wlStatCheck, progressRankCheck, lastMatchPtsCheck) {
   linkbox.value =
     window.location.origin +
     '/overlay/?nickname=' +
@@ -543,8 +547,6 @@ async function getPreview() {
     progressRankCheck +
     '&lastMatchPts=' +
     lastMatchPtsCheck;
-
-  iframe.src = linkbox.value;
 }
 
 const alertText = document.getElementById('alert__description')
@@ -553,6 +555,20 @@ const iframe = document.getElementById('iframe');
 const linkbox = document.getElementById('linkbox');
 const copyButton = document.getElementById('copyButton');
 
+iframe.innerHTML = overlayHTML
+
+// Elements
+const imgRank = document.getElementById('imgRank');
+const imgPTS = document.getElementById('imgPTS');
+const playerRank = document.getElementById('playerRank');
+const lastMatchPtsValue = document.getElementById('lastmatchptsvalue');
+const cssStyle = document.querySelector(':root').style;
+const winValue = document.getElementById('winValue');
+const loseValue = document.getElementById('loseValue');
+
+winValue.innerHTML = '0';
+loseValue.innerHTML = '0';
+
 submitButton.onclick = async function () {
   await getPreview();
 }
@@ -561,8 +577,148 @@ copyButton.onclick = function() {
   navigator.clipboard.writeText(linkbox.value);
 }
 
+async function main() {
+  const inputNicknameWithTag = document.getElementById('nickname_with_tag')
+  const nicknameWithTag = inputNicknameWithTag.value;
+  const [nickname, tag] = nicknameWithTag.split('#');
+
+  const check = await checkData(nickname, tag)
+
+  if (check) {
+    await insertinData();
+  }
+}
+
+
+async function checkData(nickname, tag) {
+  try {
+    const response = await fetch(`${apiUrl}/v1/account/${nickname}/${tag}`)
+    const data = await response.json();
+    const returnStatus = data.status;
+
+    const newPlayerData = await formationUserData(nickname, tag);
+
+    if (returnStatus === 200) {
+      if (playerData === undefined) {
+        playerData = newPlayerData;
+      } else if (playerData.nickname !== newPlayerData.nickname && playerData.tag !== newPlayerData.tag) {
+        playerData = newPlayerData;
+      }
+      return true;
+    } else {
+      return false;
+    }
+  } catch (error) {
+    console.log(error);
+    return false
+  }
+}
+
+async function insertinData() {
+  const playerCurrentTier = playerData.currenttierpatched;
+  let playerMmr = playerData.ranking_in_tier;
+  const playerMmrText = playerData.ranking_in_tier;
+  const playerTier = playerData.currenttier;
+  const playerLastGamePts = playerData.mmr_change_to_last_game;
+  const playerLeaderboard = playerData.leaderboard;
+
+  if (playerMmr > 100) {
+    playerMmr = '0';
+  }
+
+  imgRank.src = `/img/ranks/${playerTier}.png`;
+  let actualProcent = `${playerMmr}%`;
+
+  if (playerLastGamePts === 'nRanked') {
+    playerRank.innerHTML = playerCurrentTier;
+  } else if (playerTier === 27) {
+    if (playerLeaderboard !== ' ') {
+      playerRank.innerHTML = `${playerCurrentTier} #${playerLeaderboard}`;
+    }
+  } else {
+    playerRank.innerHTML = `${playerCurrentTier} - ${playerMmrText}RR`;
+  }
+
+  cssStyle.setProperty('--progresspontinho', actualProcent);
+
+  if (playerLastGamePts === 'nRanked') {
+    lastMatchPtsValue.innerHTML = `Unranked`;
+  } else if (playerTier >= 24 && playerLastGamePts === 0) {
+    lastMatchPtsValue.innerHTML = `${playerLastGamePts}pts`;
+  } else if (playerTier >= 24) {
+    if (playerLastGamePts >= 1) {
+      lastMatchPtsValue.innerHTML = `+${playerLastGamePts}pts`;
+      actualProcent = '100%';
+      cssStyle.setProperty('--progresspontinho', actualProcent);
+    } else if (playerLastGamePts <= -1) {
+      lastMatchPtsValue.innerHTML = `${playerLastGamePts}pts`;
+      actualProcent = '0%';
+      cssStyle.setProperty('--progresspontinho', actualProcent);
+    }
+  } else {
+    lastMatchPtsValue.innerHTML = `${playerLastGamePts}pts`;
+  }
+
+  if (playerLastGamePts > 0) {
+    if (playerLastGamePts <= 10) {
+      imgPTS.src = `/img/icons/up.png`;
+    } else if (playerLastGamePts <= 20) {
+      imgPTS.src = `/img/icons/up_plus.png`;
+    } else {
+      imgPTS.src = `/img/icons/up_plusplus.png`;
+    }
+  } else if (playerLastGamePts < 0) {
+    if (playerLastGamePts > -10) {
+      imgPTS.src = `/img/icons/down.png`;
+    } else if (playerLastGamePts > -20) {
+      imgPTS.src = `/img/icons/down_plus.png`;
+    } else {
+      imgPTS.src = `/img/icons/down_plusplus.png`;
+    }
+  }
+}
+
+async function formationUserData(nickname, tag) {
+  const [puuid, region] = await getPuuidWithRegion(nickname, tag);
+  const [currenttier, currenttierpatched, ranking_in_tier, mmr_change_to_last_game, elo] = await getPlayerInformation(region, puuid);
+  const leaderboard = await getLeaderboard(region, puuid);
+
+  return {
+    nickname: nickname,
+    tag: tag,
+    puuid: puuid,
+    region: region,
+    currenttier: currenttier,
+    currenttierpatched: currenttierpatched,
+    ranking_in_tier: ranking_in_tier,
+    mmr_change_to_last_game: mmr_change_to_last_game,
+    elo: elo,
+    leaderboard: leaderboard
+  };
+}
+
+
+async function getPuuidWithRegion(nickname, tag) {
+  const response = await fetch(`${apiUrl}/v1/account/${nickname}/${tag}`)
+  const data = await response.json()
+  return [data.data.puuid, data.data.region]
+}
+
+async function getLeaderboard(region, puuid) {
+  const response = await fetch(`${apiUrl}/v1/leaderboard/${region}?puuid=${puuid}`);
+  const data = await response.json()
+  return data.status === 404 ? ' ' : data.data[0].leaderboardRank;
+}
+
+async function getPlayerInformation(region, puuid) {
+  const response = await fetch(`${apiUrl}/v1/by-puuid/mmr/${region}/${puuid}`)
+  const data = await response.json()
+  return [data.data.currenttier, data.data.currenttierpatched, data.data.ranking_in_tier, data.data.mmr_change_to_last_game, data.data.elo]
+}
+
 window.checkNickname = checkNickname
 window.getPreview = getPreview
+window.main = main
 window.Alpine = Alpine
 
 Alpine.start()
\ No newline at end of file
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 4de89cf..dc48820 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -3,58 +3,59 @@
 :root {
 	--progresspontinho: ;
 }
-h1 {
-	line-height: 1;
-	padding: 0;
+
+.overlay__body {
 	margin: 0;
+	max-width: 450px;
+	font-family: $font-family_1;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeSpeed;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	overflow: hidden;
 }
-h2 {
+
+.overlay__body h1 {
 	line-height: 1;
 	padding: 0;
 	margin: 0;
 }
-h3 {
+.overlay__body h2 {
 	line-height: 1;
 	padding: 0;
 	margin: 0;
 }
-h4 {
+.overlay__body h3 {
 	line-height: 1;
 	padding: 0;
 	margin: 0;
 }
-span {
+.overlay__body h4 {
 	line-height: 1;
 	padding: 0;
 	margin: 0;
 }
-body {
+.overlay__body span {
+	line-height: 1;
+	padding: 0;
 	margin: 0;
-	max-height: 100px;
-	max-width: 450px;
-	font-family: $font-family_1;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizeSpeed;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	overflow: hidden;
 }
 
-#elements {
+.overlay__body #elements {
 	display: flex;
 	flex-direction: row;
 	min-height: 110px;
 	max-height: 150px;
 	border-radius: 0 0 90px 0;
 }
-#rankBlock {
+.overlay__body #rankBlock {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 120px;
 }
-#playerInfo {
+.overlay__body #playerInfo {
 	display: flex;
 	background-size: contain;
 	color: $overlay_color_1;
@@ -69,17 +70,17 @@ body {
 	gap: 5px;
 	padding: 20px 0;
 }
-#mainText {
+.overlay__body #mainText {
 	font-size: 20px;
 }
-#playerRank {
+.overlay__body #playerRank {
 	font-size: 24px;
 }
-#WLvalue {
+.overlay__body #WLvalue {
 	font-size: 17px;
 	color: $overlay_color_2;
 }
-#progressrank {
+.overlay__body #progressrank {
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
@@ -104,13 +105,12 @@ body {
 		transition: width 2s;
 	}
 }
-.lastmatchpts {
+.overlay__body .lastmatchpts {
 	display: flex;
 	gap: 6px;
 	span {
 		font-weight: bold;
 		font-size: 15px;
-		color: $overlay_color_2;
 		text-transform: uppercase;
 	}
 }