Skip to content

Commit

Permalink
feat(landing): fix a few errors and add an insturction
Browse files Browse the repository at this point in the history
  • Loading branch information
@haxgun
haxgun committed Nov 2, 2023
1 parent 79f9b91 commit e6bc8cb
Show file tree
Hide file tree
Showing 5 changed files with 228 additions and 117 deletions.
Binary file added public/img/steps/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 68 additions & 11 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,12 @@ document.querySelector('#app').innerHTML = `
class="start"
x-data="
{
modal: false,
alert: false,
nickname: 'MAGICX#1337',
editorContinue: false,
infoContainer: true,
contentContainer: false,
generateContainer: false,
search: false,
configutarion: false,
backgroundColor: '#ffffff',
Expand All @@ -63,7 +66,39 @@ document.querySelector('#app').innerHTML = `
Catch your audience's attention with real-time Valorant stats!
</h2>
</div>
<div class="content" x-show="!editorContinue">
<div class="info" x-show="infoContainer" x-transition:enter.duration.250ms.opacity.0>
<div class="info__content">
<div class="info__subcontent">
<span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 10V3.6C20 3.03995 20 2.75992 19.891 2.54601C19.7951 2.35785 19.6422 2.20487 19.454 2.10899C19.2401 2 18.9601 2 18.4 2H5.6C5.03995 2 4.75992 2 4.54601 2.10899C4.35785 2.20487 4.20487 2.35785 4.10899 2.54601C4 2.75992 4 3.03995 4 3.6V10M20 10H4M20 10V10.2C20 11.8802 20 12.7202 19.673 13.362C19.3854 13.9265 18.9265 14.3854 18.362 14.673C17.7202 15 16.8802 15 15.2 15H8.8C7.11984 15 6.27976 15 5.63803 14.673C5.07354 14.3854 4.6146 13.9265 4.32698 13.362C4 12.7202 4 11.8802 4 10.2V10M14.5 15V19.5C14.5 20.8807 13.3807 22 12 22C10.6193 22 9.5 20.8807 9.5 19.5V15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span>Customize your overlay according to your stream.</span>
</div>
<div class="info__subcontent">
<span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5455 9.92543C15.9195 9.26103 16.2313 8.66151 16.4236 8.20521C17.3573 5.98947 16.434 3.44077 14.1769 2.40112C11.9199 1.36148 9.65341 2.4395 8.65871 4.52093C6.75657 3.2157 4.21918 3.40739 2.81989 5.44424C1.42059 7.48108 1.85975 10.142 3.77629 11.594C4.6461 12.253 6.36636 13.2242 7.98596 14.0884M16.2972 11.7499C15.8751 9.482 13.9454 7.82334 11.5156 8.27415C9.08592 8.72497 7.51488 10.9171 7.84335 13.299C8.10725 15.2127 9.56392 19.7027 10.1264 21.394C10.2032 21.6248 10.2415 21.7402 10.3175 21.8206C10.3837 21.8907 10.4717 21.9416 10.5655 21.9638C10.6732 21.9894 10.7923 21.9649 11.0306 21.916C12.7765 21.5575 17.3933 20.574 19.1826 19.8457C21.4096 18.9392 22.5589 16.4841 21.6981 14.153C20.8372 11.8219 18.4723 10.9815 16.2972 11.7499Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span>It's absolutely free! There is support for many popular streaming programs like OBS and others.</span>
</div>
<div class="info__subcontent">
<span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8V5L19 2L20 4L22 5L19 8H16ZM16 8L12 11.9999M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span>Setup once and everything will always work!</span>
</div>
</div>
<div class="info__buttons">
<button @click="modal = true">How it work</button>
<button @click="infoContainer = false; contentContainer = true" class="fill">Create your Overlay</button>
</div>
</div>
<div class="content" x-show="contentContainer" x-cloak x-transition:enter.duration.250ms.opacity.0>
<div class="profile">
<h2 class="title__title">Profile</h2>
<p>
Expand Down Expand Up @@ -91,7 +126,7 @@ document.querySelector('#app').innerHTML = `
placeholder="NICKNAME#TAG"
autocomplete="off"
/>
<button @click="if (await checkNickname(nickname)) { getPreview(); search = true;} else { alert = true; setTimeout(() => alert = false, 5000)}" style="padding: 5px">
<button class="icons" @click="if (await checkNickname(nickname)) { getPreview(); search = true;} 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>
Expand Down Expand Up @@ -302,7 +337,6 @@ document.querySelector('#app').innerHTML = `
<button
style="width: 100%; margin-top: 5px;"
@click="getPreview()"
class="button"
>
Update
</button>
Expand All @@ -312,15 +346,14 @@ document.querySelector('#app').innerHTML = `
style="width: 100%"
x-transition
x-show="search"
@click="editorContinue=true"
@click="contentContainer = false; generateContainer = true"
id="submitButton"
class="button"
type="submit"
>
Submit
</button>
</div>
<div class="generate" x-show="editorContinue" x-cloak x-transition>
<div class="generate" x-show="generateContainer" x-cloak x-transition:enter.duration.250ms.opacity.0>
<div class="generate__link">
<h2 class="title__title">Overlay URL: Streaming Software</h2>
<p>
Expand All @@ -337,7 +370,7 @@ document.querySelector('#app').innerHTML = `
placeholder="Your link goes here"
readonly
/>
<button class="button" id="copyButton">
<button style="padding: 14px" id="copyButton">
<svg
width="16"
height="16"
Expand All @@ -358,8 +391,7 @@ document.querySelector('#app').innerHTML = `
<button
style="width: 100%"
@click="editorContinue=false"
class="button"
@click="contentContainer = true; generateContainer = false"
>
<svg
width="16"
Expand All @@ -378,7 +410,7 @@ document.querySelector('#app').innerHTML = `
Back
</button>
</div>
<footer>
<footer>
<span>Made with ❤️ © 2023 Valory</span>
<ul class="socials">
<li>
Expand Down Expand Up @@ -437,6 +469,31 @@ document.querySelector('#app').innerHTML = `
</svg>
</span>
</div>
<div x-cloak x-transition:enter.duration.250ms.opacity.0 x-transition:leave.duration.250ms.opacity.0 x-show="modal" class="modal">
<div x-transition x-show="modal" @click.outside="modal = false" class="modal__content">
<div class="modal__leftside">
<img src="/img/steps/1.png" alt="">
</div>
<div class="modal__rightside">
<div class="modal__title">Follow a few simple steps!</div>
<div class="modal__steps">
<div class="modal__step">
<span class="number">1.</span>
<span>Open our overlay editor, insert your nickname and you can do some customization if you want.</span>
</div>
<div class="modal__step">
<span class="number">2.</span>
<span>Save the changes and copy the link. Paste the link into any streaming program in the "Browser Source" plugin.</span>
</div>
<div class="modal__step">
<span class="number">3.</span>
<span>Place the widget on your stream anywhere you want.</span>
</div>
</div>
<button @click="modal = false" class="fill">Continue</button>
</div>
</div>
</div>
</div>
`

Expand Down
98 changes: 49 additions & 49 deletions src/js/overlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@ const apiUrl = 'https://api.henrikdev.xyz/valorant'

// Color Settings
const { textColor, primaryColor, bgColor, progressRankColor, progressRankBgColor } = {
textColor: urlParams.get("textColor").replace("#", ""),
primaryColor: urlParams.get("primaryColor").replace("#", ""),
bgColor: urlParams.get("bgColor").replace("#", ""),
progressRankColor: urlParams.get("progressRankColor").replace("#", ""),
progressRankBgColor: urlParams.get("progressRankBgColor").replace("#", "")
textColor: urlParams.get('textColor').replace('#', ''),
primaryColor: urlParams.get('primaryColor').replace('#', ''),
bgColor: urlParams.get('bgColor').replace('#', ''),
progressRankColor: urlParams.get('progressRankColor').replace('#', ''),
progressRankBgColor: urlParams.get('progressRankBgColor').replace('#', '')
};

// Checks
const alphabg = urlParams.get("alphaBg") === "yes" ? "yes" : "no";
const alphagradbg = urlParams.get("alphaGradBg") === "yes" ? "yes" : "no";
const wlStatCheck = urlParams.get("wlstat") === "yes" ? "yes" : "no";
const progressRankCheck = urlParams.get("progressrank") === "yes" ? "yes" : "no";
const lastMatchPtsCheck = urlParams.get("lastMatchPts") === "yes" ? "yes" : "no";
const alphabg = urlParams.get('alphaBg') === 'yes' ? 'yes' : 'no';
const alphagradbg = urlParams.get('alphaGradBg') === 'yes' ? 'yes' : 'no';
const wlStatCheck = urlParams.get('wlstat') === 'yes' ? 'yes' : 'no';
const progressRankCheck = urlParams.get('progressrank') === 'yes' ? 'yes' : 'no';
const lastMatchPtsCheck = urlParams.get('lastMatchPts') === 'yes' ? 'yes' : 'no';


const { NICKNAME, TAG} = {
NICKNAME: urlParams.get("nickname"),
TAG: urlParams.get("tag")
NICKNAME: urlParams.get('nickname'),
TAG: urlParams.get('tag')
};

let lastMatchId = '';
let win = 0;
let lose = 0;

const loading = document.querySelector("#loading");
const overlay = document.querySelector("#overlay");
const loading = document.querySelector('#loading');
const overlay = document.querySelector('#overlay');

overlay.innerHTML = `
<div id="elements">
Expand All @@ -60,21 +60,21 @@ overlay.innerHTML = `
overlay.style.display = "none";

// Elements
const imgRank = document.getElementById("imgRank");
const imgPTS = document.getElementById("imgPTS");
const playerRank = document.getElementById("playerRank");
const progressRank = document.getElementById("progressrank");
const rankBlock = document.getElementById("rankBlock");
const gradbg = document.getElementById("elements");
const wlStat = document.getElementById("wlstat");
const lastMatchPts = document.getElementById("lastmatchpts");
const lastMatchPtsValue = document.getElementById("lastmatchptsvalue");
const cssStyle = document.querySelector(":root").style;

const wlValue = document.getElementById("WLvalue");
const winValue = document.getElementById("winValue");
const loseValue = document.getElementById("loseValue");
const wlProccent = document.getElementById("wlProccent");
const imgRank = document.getElementById('imgRank');
const imgPTS = document.getElementById('imgPTS');
const playerRank = document.getElementById('playerRank');
const progressRank = document.getElementById('progressrank');
const rankBlock = document.getElementById('rankBlock');
const gradbg = document.getElementById('elements');
const wlStat = document.getElementById('wlstat');
const lastMatchPts = document.getElementById('lastmatchpts');
const lastMatchPtsValue = document.getElementById('lastmatchptsvalue');
const cssStyle = document.querySelector(':root').style;

const wlValue = document.getElementById('WLvalue');
const winValue = document.getElementById('winValue');
const loseValue = document.getElementById('loseValue');
const wlProccent = document.getElementById('wlProccent');

async function main(nickname, tag) {
const [puuid, region] = await getPuuidWithRegion(nickname, tag);
Expand All @@ -83,7 +83,7 @@ async function main(nickname, tag) {
await decorateCard()
await checkData(region, puuid)
loading.remove()
overlay.style.display = "block";
overlay.style.display = 'block';
setIntervalAsync(checkData, 30000, region, puuid);
}

Expand All @@ -110,11 +110,11 @@ async function getPlayerInformation(region, puuid) {
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;
return data.status === 404 ? ' ' : data.data[0].leaderboardRank;
}

async function decorateCard() {
document.getElementById("mainText").style.color = `#${textColor}`;
document.getElementById('mainText').style.color = `#${textColor}`;
wlValue.style.color = `#${textColor}`;
playerRank.style.color = `#${primaryColor}`;
winValue.style.color = `#${primaryColor}`;
Expand All @@ -127,11 +127,11 @@ async function decorateCard() {
progressBarColor.setProperty('--progressrank-after-color', `#${progressRankColor}`);
progressBarColor.setProperty('--progressrank-color', `#${progressRankBgColor}45`);

rankBlock.style.backgroundColor = alphabg === "yes" ? "transparent" : `#${bgColor}40`;
gradbg.style.backgroundImage = alphagradbg === "yes" ? "none" : "linear-gradient(rgb(255 0 0 / 0%), rgb(0 0 0 / 57%))";
wlStat.style.display = wlStatCheck === "yes" ? "none" : "";
progressRank.style.display = progressRankCheck === "yes" ? "none" : "";
lastMatchPts.style.display = lastMatchPtsCheck === "yes" ? "none" : "";
rankBlock.style.backgroundColor = alphabg === 'yes' ? 'transparent' : `#${bgColor}40`;
gradbg.style.backgroundImage = alphagradbg === 'yes' ? 'none' : 'linear-gradient(rgb(255 0 0 / 0%), rgb(0 0 0 / 57%))';
wlStat.style.display = wlStatCheck === 'yes' ? 'none' : '';
progressRank.style.display = progressRankCheck === 'yes' ? 'none' : '';
lastMatchPts.style.display = lastMatchPtsCheck === 'yes' ? 'none' : '';
}

async function updatePlayerCard(region, puuid) {
Expand All @@ -144,38 +144,38 @@ async function updatePlayerCard(region, puuid) {
] = await getPlayerInformation(region, puuid);

if (playerMmr > 100) {
playerMmr = "0";
playerMmr = '0';
}

imgRank.src = `/img/ranks/${playerTier}.png`;
let actualProcent = `${playerMmr}%`;

if (playerLastGamePts === "nRanked") {
if (playerLastGamePts === 'nRanked') {
playerRank.innerHTML = playerElo;
} else if (playerTier === 27) {
const leaderboardRank = await getLeaderboard(region, puuid);
if (leaderboardRank !== " ") {
if (leaderboardRank !== ' ') {
playerRank.innerHTML = `${playerElo} #${leaderboardRank}`;
}
} else {
playerRank.innerHTML = `${playerElo} - ${playerMmrText}RR`;
}

cssStyle.setProperty("--progresspontinho", actualProcent);
cssStyle.setProperty('--progresspontinho', actualProcent);

if (playerLastGamePts === "nRanked") {
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);
actualProcent = '100%';
cssStyle.setProperty('--progresspontinho', actualProcent);
} else if (playerLastGamePts <= -1) {
lastMatchPtsValue.innerHTML = `${playerLastGamePts}pts`;
actualProcent = "0%";
cssStyle.setProperty("--progresspontinho", actualProcent);
actualProcent = '0%';
cssStyle.setProperty('--progresspontinho', actualProcent);
}
} else {
lastMatchPtsValue.innerHTML = `${playerLastGamePts}pts`;
Expand Down Expand Up @@ -225,7 +225,7 @@ async function winlose(region, puuid) {
if (won === true) {
win += 1;
lastMatchId = dataMatches.data[0].metadata.matchid;
} else if (won === false && tied === "N") {
} else if (won === false && tied === 'N') {
lose += 1;
lastMatchId = dataMatches.data[0].metadata.matchid;
}
Expand All @@ -247,9 +247,9 @@ async function getWonInfo(puuid, dataMatches) {
const playerTeamWon = dataMatches.data[0].teams[playerTeam_].has_won

if (red_won === false && blue_won === false) {
tied = "Y";
tied = 'Y';
} else {
tied = "N";
tied = 'N';
}
return [playerTeamWon, tied];
}
Expand Down
Loading

0 comments on commit e6bc8cb

Please sign in to comment.