From 043cfac066c5e775097156dd459890fe9886120e Mon Sep 17 00:00:00 2001 From: Delta Date: Tue, 4 Apr 2023 01:41:05 +0400 Subject: [PATCH] V1 --- app.js | 29 +++++++++++++++++++++ github.svg | 1 + index.html | 17 +++++++++++++ style.css | 54 +++++++++++++++++++++++++++++++++++++++ view.js | 56 ++++++++++++++++++++++++++++++++++++++++ viewer.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++ viewer.html | 32 +++++++++++++++++++++++ 7 files changed, 262 insertions(+) create mode 100644 app.js create mode 100644 github.svg create mode 100644 index.html create mode 100644 style.css create mode 100644 view.js create mode 100644 viewer.css create mode 100644 viewer.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..839bd0b --- /dev/null +++ b/app.js @@ -0,0 +1,29 @@ +const url = "https://valorant-api.com/v1/agents?isPlayableCharacter=true"; + +let agentsGrid = document.querySelector(".agentsGrid"); + +async function getData() { + let data = await fetch(url); + let res = await data.json(); + return res; +} + +getData().then((values) => { + values.data.forEach((value) => { + renderInfo(value); + }); +}); + +function renderInfo(v) { + let d = document.createElement("div"); + d.classList.add("agent"); + d.style.backgroundImage = "url(" + v.fullPortrait + ")"; + let n = document.createElement("h1"); + n.classList.add("name"); + n.innerText = v.displayName; + d.appendChild(n); + d.addEventListener("click", () => { + window.open("viewer.html?id=" + v.uuid, "_self"); + }); + agentsGrid.appendChild(d); +} diff --git a/github.svg b/github.svg new file mode 100644 index 0000000..0e1870c --- /dev/null +++ b/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c7579ff --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + + Valorant agents + + + +
+

Valorant agents

+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..f9e4ce6 --- /dev/null +++ b/style.css @@ -0,0 +1,54 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap"); + +* { + margin: 0; + padding: 0; + overflow-x: hidden; +} + +.main { + width: 100vw; + height: 100vh; + font-family: "Poppins", sans-serif; +} + +.titleContainer { + width: 100vw; + height: 20vh; + display: flex; + align-items: center; + justify-content: center; +} + +.title { + font-size: 60px; +} + +.agentsGrid { + width: 100vw; + height: fit-content; + display: grid; + grid-template-columns: 25% 25% 25% 25%; + place-items: center; + row-gap: 25px; +} + +.agent { + width: 250px; + height: 250px; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + background-size: cover; + background-color: rgb(37, 37, 37); + color: transparent; + cursor: pointer; + transition: 0.2s ease-in; + font-size: 5px; +} + +.agent:hover { + color: white; + font-size: 20px; +} diff --git a/view.js b/view.js new file mode 100644 index 0000000..a5d3b21 --- /dev/null +++ b/view.js @@ -0,0 +1,56 @@ +let requestUrl = "https://valorant-api.com/v1/agents?isPlayableCharacter=true"; + +let url = window.location.href; +let i = url.split("="); +id = i[1]; + +let title = document.querySelector(".title"); +let image = document.getElementById("image"); +let agentImage = document.getElementById("agentImage"); +let descriptionText = document.getElementById("descriptionText"); +let roleText = document.getElementById("roleText"); +let voice = document.getElementById("voice"); +let agentIcon = document.querySelector(".agentIcon"); +let info = document.getElementById("info"); + +async function getData() { + let data = await fetch(requestUrl); + let res = await data.json(); + return res; +} + +getData().then((values) => { + values.data.forEach((value) => { + if (value.uuid == id) { + displayInfo(value); + } + }); +}); + +function displayInfo(v) { + agentIcon.src = v.displayIcon; + title.innerHTML = v.displayName; + image.style.backgroundImage = "url(" + v.background + ")"; + agentImage.src = v.fullPortraitV2; + descriptionText.innerText = v.description; + roleText.innerText = v.role.displayName + " : " + v.role.description; + voice.src = v.voiceLine.mediaList[0].wave; + voice.load(); + + let gradientColors = v.backgroundGradientColors; + + info.style.background = + "linear-gradient(60deg, " + + "#" + + gradientColors[0] + + " 0%, " + + "#" + + gradientColors[1] + + " 35%," + + "#" + + gradientColors[2] + + " 63%," + + "#" + + gradientColors[3] + + " 100%)"; +} diff --git a/viewer.css b/viewer.css new file mode 100644 index 0000000..d213fd1 --- /dev/null +++ b/viewer.css @@ -0,0 +1,73 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap"); + +* { + margin: 0; + padding: 0; +} + +.main { + width: 100vw; + height: fit-content; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: "Poppins", sans-serif; +} + +.titleContainer { + width: 100vw; + height: 15vh; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + font-weight: 700; +} + +.agentIcon { + width: 5vw; + height: 10vh; + margin-right: 20px; +} + +.title { + margin-left: 20px; +} + +.content { + width: 95vw; + height: 85vh; + display: flex; + justify-content: space-between; + align-items: center; +} + +.image { + width: 30vw; + height: 70vh; + background-color: black; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.agentImage { + width: 30vw; + height: 70vh; +} + +.info { + width: 60vw; + height: 70vh; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + color: white; +} + +.info > p { + font-size: 20px; + max-width: 55vw; +} diff --git a/viewer.html b/viewer.html new file mode 100644 index 0000000..0db966e --- /dev/null +++ b/viewer.html @@ -0,0 +1,32 @@ + + + + + + + Agent viewer + + + +
+
+ +

+
+
+
+ +
+
+

Description

+

+

Role

+

+

Voice lines

+ +
+
+
+ + +