TV stuff

components/AttachmentBlock.js

@@ -2,8 +2,8 @@ class AttachmentBlockComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
-			@import url("./css/post.css");
+			@import url("/css/global.css");
+			@import url("/css/post.css");
 		</style>
 	`;
 	#shadowDomHTMLImg = `
@@ -20,7 +20,7 @@ class AttachmentBlockComponent extends HTMLElement {
 		</audio>
 	`;
 	#shadowDomHTMLError = `
-		<img src="./img/jimbomournsyourmisfortune.png" title="Error: attachment can not be displayed." loading="lazy"></img>
+		<img src="/img/jimbomournsyourmisfortune.png" title="Error: attachment can not be displayed." loading="lazy"></img>
 	`;
 	type;
 	attachment;

components/CommentBlock.js

@@ -2,7 +2,7 @@ class CommentBlockComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 
 			:host {
 				width: 100%;
@@ -73,7 +73,7 @@ class CommentBlockComponent extends HTMLElement {
 		this.shadow = this.attachShadow({ mode: "closed" });
 		this.shadow.innerHTML = this.#shadowDomHTML;
 
-		this.shadow.querySelector("#userLink").setAttribute("href", `./user.html?username=${this.comment.poster.username}`);
+		this.shadow.querySelector("#userLink").setAttribute("href", `/user.html?username=${this.comment.poster.username}`);
 		this.shadow.querySelector("#pfp").setAttribute("src", this.comment.poster.pfp);
 		this.shadow.querySelector("#username").textContent = this.comment.poster.username;
 		if (this.comment.poster.verified) this.shadow.querySelector("#verified").classList.remove("hidden");
@@ -93,7 +93,7 @@ class CommentBlockComponent extends HTMLElement {
 			if (this.comment.poster.username === api.username) {
 				this.shadow.querySelector("#edit").classList.remove("hidden");
 				this.shadow.querySelector("#edit").addEventListener("click", () => {
-					window.location.href = `./edit.html?id=${this.post.id}&cid=${this.comment.id}`;
+					window.location.href = `/edit.html?id=${this.post.id}&cid=${this.comment.id}`;
 				});
 			}
 

components/Footer.js

@@ -2,7 +2,7 @@ class FooterComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 			footer {
 				background-color: var(--color6);
 				margin-top: 2.5rem;

components/Header.js

@@ -2,7 +2,7 @@ class HeaderComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 			header {
 				position: sticky;
 				top: 0px;
@@ -36,7 +36,7 @@ class HeaderComponent extends HTMLElement {
 				color: var(--text);
 				background-color: var(--color2);
 				padding: 0.55rem 0.75rem 0.55rem 37px;
-				background-image: url(../img/icon/search.svg);
+				background-image: url(/img/icon/search.svg);
 				background-size: 24px 24px;
 				background-repeat: no-repeat;
 				background-position-y: center;
@@ -187,13 +187,13 @@ class HeaderComponent extends HTMLElement {
 		<header id="headerElement">
 			<span id="mainHeader" class="flexcontainer">
 				<span class="leftalign">
-					<a href="./" class="flexcontainer" id="logo"><img src="./img/logo.png"></a>
+					<a href="/" class="flexcontainer" id="logo"><img src="/img/logo.png"></a>
 				</span>
 				<span class="searchbar flexcontainer hideOnMobile">
 					<input type="search" id="searchbox" placeholder="Search" autocomplete="false">
 				</span>
 				<span class="flexcontainer rightalign">
-					<span id="searchBtn" class="showOnMobileFlex"><img src="./img/icon/search.svg" alt="Search"></span>
+					<span id="searchBtn" class="showOnMobileFlex"><img src="/img/icon/search.svg" alt="Search"></span>
 					<img src="https://betacdn.stibarc.com/pfp/default.png" id="mypfp" class="headerpfp">
 				</span>
 			</span>
@@ -203,8 +203,8 @@ class HeaderComponent extends HTMLElement {
 					<button class="menuElement" id="menuregister">Register</button>
 				</div>
 				<div class="loggedin headerDropdown hidden">
-					<a class="menuElement" id="menueditprofile" href="./editprofile.html">Edit profile</a>
-					<a class="menuElement" id="menusettings" href="./settings.html">Settings</a>
+					<a class="menuElement" id="menueditprofile" href="/editprofile.html">Edit profile</a>
+					<a class="menuElement" id="menusettings" href="/settings.html">Settings</a>
 					<div class="separator"></div>
 					<a class="menuElement" id="menuprofile"></a>
 					<button class="menuElement red" id="menulogout">Logout</button>
@@ -249,13 +249,13 @@ class HeaderComponent extends HTMLElement {
 		});
 
 		this.shadow.querySelector("#searchBtn").addEventListener("click", () => {
-			location.href = "./search.html";
+			location.href = "/search.html";
 		});
 
 		this.shadow.querySelector("#searchbox").addEventListener("keypress", (e) => {
 			const query = encodeURIComponent(searchbox.value);
 			if (e.key == "Enter" && query.trim() != "") {
-				location.href = `./search.html?q=${query}`;
+				location.href = `/search.html?q=${query}`;
 			}
 		});
 
@@ -296,7 +296,7 @@ class HeaderComponent extends HTMLElement {
 				);
 				menuprofile.textContent = api.username;
 				menuprofile.addEventListener("click", () => {
-					location.href = `./user.html?username=${api.username}`;
+					location.href = `/user.html?username=${api.username}`;
 				});
 			} else {
 				mypfp.setAttribute(

components/Icon.js

@@ -42,7 +42,7 @@ class IconComponent extends HTMLElement {
 		const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 		svgIcon.classList.add("icon", this.getAttribute("size"), this.getAttribute("type"));
 		const useBlock = document.createElementNS("http://www.w3.org/2000/svg", "use");
-		useBlock.setAttribute("href", `./img/icon/icons.svg#${iconName}`);
+		useBlock.setAttribute("href", `/img/icon/icons.svg#${iconName}`);
 		svgIcon.append(useBlock);
 
 		this.shadow.appendChild(svgIcon);

components/LoginModal.js

@@ -2,7 +2,7 @@ class LoginModalComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 
 			dialog {
 				box-sizing: border-box;

components/PostBlock.js

@@ -2,8 +2,8 @@ class PostBlockComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
-			@import url("./css/post.css");
+			@import url("/css/global.css");
+			@import url("/css/post.css");
 			:host {
 				width: 100%;
 			}
@@ -61,9 +61,9 @@ class PostBlockComponent extends HTMLElement {
 		let title = this.post.title;
 		if (this.post.title.length > maxTitleLength) title = `${this.post.title.substring(0, maxTitleLength)}...`;
 
-		this.shadow.querySelector("#titleLink").setAttribute("href", `./post.html?id=${this.post.id}`);
+		this.shadow.querySelector("#titleLink").setAttribute("href", `/post.html?id=${this.post.id}`);
 		this.shadow.querySelector("#titleLink").textContent = title;
-		this.shadow.querySelector("#userLink").setAttribute("href", `./user.html?username=${this.post.poster.username}`);
+		this.shadow.querySelector("#userLink").setAttribute("href", `/user.html?username=${this.post.poster.username}`);
 		this.shadow.querySelector("#pfp").setAttribute("src", this.post.poster.pfp);
 		this.shadow.querySelector("#username").textContent = this.post.poster.username;
 		if (this.post.poster.verified) this.shadow.querySelector("#verified").classList.remove("hidden");
@@ -94,7 +94,7 @@ class PostBlockComponent extends HTMLElement {
 		}
 
 		this.addEventListener("click", () => {
-			window.location.href = `./post.html?id=${this.post.id}`;
+			window.location.href = `/post.html?id=${this.post.id}`;
 		});
 	}
 }

components/RegisterModal.js

@@ -2,7 +2,7 @@ class RegisterModalComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 
 			dialog {
 				box-sizing: border-box;

components/SessionBlock.js

@@ -1,9 +1,9 @@
 class SessionBlockComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
-		<script src="./Icon.js"></script>
+		<script src="/Icon.js"></script>
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 
 			.sessionBlock {
 				background-color: var(--color3);

components/UserBlock.js

@@ -1,9 +1,9 @@
 class UserBlockComponent extends HTMLElement {
 	// This is safe because no part of this is dynamic
 	#shadowDomHTML = `
-		<script src="./Icon.js"></script>
+		<script src="/components/Icon.js"></script>
 		<style>
-			@import url("./css/global.css");
+			@import url("/css/global.css");
 		</style>
 		<span class="post flexcontainer leftalign width100">
 			<a id="userLink" class="flexcontainer">
@@ -25,7 +25,7 @@ class UserBlockComponent extends HTMLElement {
 		this.shadow = this.attachShadow({ mode: "closed" });
 		this.shadow.innerHTML = this.#shadowDomHTML;
 
-		this.shadow.querySelector("#userLink").setAttribute("href", `./user.html?username=${this.user.username}`);
+		this.shadow.querySelector("#userLink").setAttribute("href", `/user.html?username=${this.user.username}`);
 		this.shadow.querySelector("#pfp").setAttribute("src", this.user.pfp);
 		this.shadow.querySelector("#username").textContent = this.user.username;
 		if (this.user.verified) this.shadow.querySelector("#verified").classList.remove("hidden");

index.html

@@ -5,7 +5,7 @@
 	<meta charset="utf-8" />
 	<title>STiBaRC</title>
 	<meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
-	<link rel="icon" type="image/png" href="./img/icon.png">
+	<link rel="icon" type="image/png" href="/img/icon.png">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400&display=swap" rel="stylesheet">
@@ -53,7 +53,7 @@
 	<stibarc-footer></stibarc-footer>
 	<span class="floatingplusbuttoncontainer">
 		<div id="newpost" class="flexcontainer floatingplusbutton" title="Create Post">
-			<svg class="icon iconBig"><use href="./img/icon/icons.svg#plus"></use></svg>
+			<svg class="icon iconBig"><use href="/img/icon/icons.svg#plus"></use></svg>
 		</div>
 	</span>
 	<span id="overlay" class="hidden">

js/edit.js

@@ -59,7 +59,7 @@ window.addEventListener("load", async () => {
 		fileInput.click();
 	}
 	$("#cancel").addEventListener("click", () => {
-		location.href = `./post.html?id=${id}`;
+		location.href = `/post.html?id=${id}`;
 	});
 	$("#editbutton").addEventListener("click", async () => {
 		if (clicked) return;
@@ -81,7 +81,7 @@ window.addEventListener("load", async () => {
 		const to = (target == "post") ? post : comment;
 		const combinedAttachments = [...to.attachments, ...newAttachments];
 		await api.edit({ postId: id, target, commentId: (target === "comment") ? cid : undefined, title: (target == "post") ? title : undefined, content, attachments: combinedAttachments });
-		location.href = `./post.html?id=${id}`;
+		location.href = `/post.html?id=${id}`;
 	});
 	$("#deletebutton").addEventListener("click", async () => {
 		if (!window.confirm(`Delete this ${target}?`)) {
@@ -107,7 +107,7 @@ window.addEventListener("load", async () => {
 		}
 	}
 	if (cid) comment = post.comments.filter(comment => comment.id == cid)[0];
-	if (cid && !comment) location.href = `./post.html?id=${id}`;
+	if (cid && !comment) location.href = `/post.html?id=${id}`;
 	if (!cid) {
 		$("#edittitle").value = post.title;
 		$("#editbody").value = post.content;

js/editprofile.js

@@ -42,7 +42,7 @@ window.addEventListener("load", async () => {
 		if (state) {
 			updateInfo();
 		} else {
-			location.href = "./";
+			location.href = "/";
 		}
 	});
 	clickhooks.push((event) => {

js/global.js

@@ -117,7 +117,7 @@ if (
 			api.pfp || "https://betacdn.stibarc.com/pfp/default.png"
 		);
 		$("#menuprofile").textContent = api.username;
-		$("#menuprofile").href = `./user.html?username=${api.username}`;
+		$("#menuprofile").href = `/user.html?username=${api.username}`;
 	}
 }
 

js/index.js

@@ -76,7 +76,7 @@ async function newPost() {
 		child.click();
 	}
 	attachmentBlobURLs = [];
-	location.href = `./post.html?id=${newPost.id}`;
+	location.href = `/post.html?id=${newPost}`;
 }
 
 function setFeed(activeFeed) {

js/post.js

@@ -130,7 +130,7 @@ window.addEventListener("load", async function () {
 		fileInput.click();
 	}
 	$("#editBtn").addEventListener("click", () => {
-		location.href = `./edit.html?id=${id}`;
+		location.href = `/edit.html?id=${id}`;
 	});
 
 	setLoggedinState(api.loggedIn);
@@ -150,7 +150,7 @@ window.addEventListener("load", async function () {
 	}
 	document.title = `${post.title} | STiBaRC`;
 	$("#posttitle").textContent = post.title;
-	$("#postuserlink").setAttribute("href", `./user.html?id=${post.poster.username}`);
+	$("#postuserlink").setAttribute("href", `/user.html?id=${post.poster.username}`);
 	$("#postpfp").setAttribute("src", post.poster.pfp);
 	$("#postusername").textContent = post.poster.username;
 	if (post.poster.verified) $("#postverified").classList.remove("hidden");

js/search.js

@@ -7,7 +7,7 @@ window.addEventListener("load", async () => {
 	$("#searchboxMobile").addEventListener("keypress", (e) => {
 		const query = encodeURIComponent($("#searchboxMobile").value);
 		if (e.key == "Enter" && query.trim() != "") {
-			location.href = `./search.html?q=${query}`;
+			location.href = `/search.html?q=${query}`;
 		}
 	});
 

js/settings.js

@@ -85,7 +85,7 @@ window.addEventListener("load", async () => {
 			}
 			updateInfo();
 		} else {
-			location.href = "./";
+			location.href = "/";
 		}
 	});
 	$(".sidebarItems li").forEach(item => {

tv/ChatMessage.js

@@ -0,0 +1,52 @@
+class ChatMessageComponent extends HTMLElement {
+	// This is safe because no part of this is dynamic
+	#shadowDomHTML = `
+		<style>
+			@import url("/css/global.css");
+
+			.pfp {
+				width: 25px;
+				height: 25px;
+				border-radius: 50%;
+			}
+		</style>
+		<span id="userinfo" class="flexcontainer leftalign width100">
+			<a id="userLink" class="flexcontainer">
+				<img id="pfp" class="pfp"></img>
+				<span id="username"></span>
+			</a>
+			<stibarc-icon id="verified" type="verifiedBadge" name="verified" class="verifiedBadge hidden" title="Verified"></stibarc-icon>
+			<span id="pronouns" class="pronouns"></span>
+		</span>
+		<span id="message"></span>
+	`;
+	user;
+	message;
+	showUser;
+
+	constructor(user, message, showUser = true) {
+		super();
+		this.user = user;
+		this.message = message;
+		this.showUser = showUser;
+	}
+
+	connectedCallback() {
+		this.shadow = this.attachShadow({ mode: "closed" });
+		this.shadow.innerHTML = this.#shadowDomHTML;
+
+		if (this.showUser) {
+			this.shadow.querySelector("#userLink").setAttribute("href", `/user.html?username=${this.user.username}`);
+			this.shadow.querySelector("#pfp").setAttribute("src", this.user.pfp);
+			this.shadow.querySelector("#username").textContent = this.user.username;
+			if (this.user.verified) this.shadow.querySelector("#verified").classList.remove("hidden");
+			this.shadow.querySelector("#pronouns").setAttribute("title", `Pronouns (${this.user.pronouns})`);
+			if (this.user.pronouns) this.shadow.querySelector("#pronouns").textContent = `(${this.user.pronouns})`;
+		} else {
+			this.shadow.querySelector("#userinfo").remove();
+		}
+		this.shadow.querySelector("#message").textContent = this.message;
+	}
+}
+
+customElements.define("stibarc-tv-chat-message", ChatMessageComponent);