V1

delta6626 · Apr 3, 2023 · 043cfac · 043cfac
commit 043cfac
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 0 deletions.
diff --git a/app.js 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
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Valorant agents</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="main">
+      <div class="titleContainer"><h1 class="title">Valorant agents</h1></div>
+      <div class="agentsGrid"></div>
+    </div>
+  </body>
+  <script src="app.js"></script>
+</html>
diff --git a/style.css 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
@@ -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
@@ -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
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent viewer</title>
+    <link rel="stylesheet" href="viewer.css" />
+  </head>
+  <body>
+    <div class="main">
+      <div class="titleContainer">
+        <img class="agentIcon" />
+        <h1 class="title"></h1>
+      </div>
+      <div class="content">
+        <div class="image" id="image">
+          <img class="agentImage" id="agentImage" />
+        </div>
+        <div class="info" id="info">
+          <h1 class="description">Description</h1>
+          <p id="descriptionText"></p>
+          <h1 class="role">Role</h1>
+          <p id="roleText"></p>
+          <h1 class="voiceLine">Voice lines</h1>
+          <audio controls id="voice" type="audio/wav"></audio>
+        </div>
+      </div>
+    </div>
+    <script src="view.js"></script>
+  </body>
+</html>