nsfw channel updates

src/webpage/channel.ts

@@ -5,7 +5,7 @@ import{ Contextmenu }from"./contextmenu.js";
 import{ Guild }from"./guild.js";
 import{ Localuser }from"./localuser.js";
 import{ Permissions }from"./permissions.js";
-import{ Dialog, Settings }from"./settings.js";
+import{ Dialog, Float, Settings }from"./settings.js";
 import{ Role, RoleList }from"./role.js";
 import{ InfiniteScroller }from"./infiniteScroller.js";
 import{ SnowFlake }from"./snowflake.js";
@@ -534,17 +534,17 @@ class Channel extends SnowFlake{
 			if(this.type === 0){
 				const decoration = document.createElement("span");
 				button.appendChild(decoration);
-				decoration.classList.add("space", "svgicon", "svg-channel");
+				decoration.classList.add("space", "svgicon", this.nsfw?"svg-channelnsfw":"svg-channel");
 			}else if(this.type === 2){
 				//
 				const decoration = document.createElement("span");
 				button.appendChild(decoration);
-				decoration.classList.add("space", "svgicon", "svg-voice");
+				decoration.classList.add("space", "svgicon", this.nsfw?"svg-voicensfw":"svg-voice");
 			}else if(this.type === 5){
 				//
 				const decoration = document.createElement("span");
 				button.appendChild(decoration);
-				decoration.classList.add("space", "svgicon", "svg-announce");
+				decoration.classList.add("space", "svgicon", this.nsfw?"svg-announcensfw":"svg-announce");
 			}else{
 				console.log(this.type);
 			}
@@ -787,25 +787,50 @@ class Channel extends SnowFlake{
 		}
 	}
 	static genid: number = 0;
-	async getHTML(addstate=true){
-		const id = ++Channel.genid;
-		if(this.localuser.channelfocus){
-			this.localuser.channelfocus.infinite.delete();
+	nsfwPannel(){
+		(document.getElementById("typebox") as HTMLDivElement).contentEditable =""+false;
+		(document.getElementById("upload") as HTMLElement).style.visibility="hidden";
+		(document.getElementById("typediv") as HTMLElement).style.visibility="hidden";
+		const messages = document.getElementById("channelw") as HTMLDivElement;
+		const messageContainers = Array.from(
+			messages.getElementsByClassName("messagecontainer")
+		);
+		for(const thing of messageContainers){
+			thing.remove();
 		}
-		if(this.guild !== this.localuser.lookingguild){
-			this.guild.loadGuild();
+		const elements = Array.from(messages.getElementsByClassName("scroller"));
+		for(const elm of elements){
+			elm.remove();
+			console.warn("rouge element detected and removed");
 		}
-		if(this.localuser.channelfocus && this.localuser.channelfocus.myhtml){
-			this.localuser.channelfocus.myhtml.classList.remove("viewChannel");
-		}
-		if(this.myhtml){
-			this.myhtml.classList.add("viewChannel");
-		}
-		this.guild.prevchannel = this;
-		this.guild.perminfo.prevchannel = this.id;
+		const div=document.getElementById("sideDiv") as HTMLDivElement;
+		div.innerHTML="";
+		const float=new Float("");
+		const options=float.options;
+		//@ts-ignore weird hack, ik, but the user here does have that information
+		//TODO make an extention of the user class with these aditional properties
+		//TODO make a popup for `nsfw_allowed==null` to input age
+		if(this.localuser.user.nsfw_allowed){
+			options.addTitle("This is a NSFW channel, do you wish to proceed?");
+			const buttons=options.addOptions("",{ltr:true});
+			buttons.addButtonInput("","Yes",()=>{
+				this.perminfo.nsfwOk=true;
 				this.localuser.userinfo.updateLocal();
-		this.localuser.channelfocus = this;
-		const prom = this.infinite.delete();
+				this.getHTML();
+			});
+			buttons.addButtonInput("","No",()=>{
+				window.history.back();
+			})
+		}else{
+			options.addTitle("You are not allowed in this channel.");
+		}
+		const html=float.generateHTML();
+		html.classList.add("messagecontainer")
+		messages.append(html);
+
+	}
+	async getHTML(addstate=true){
+
 		if(addstate){
 			history.pushState([this.guild_id,this.id], "", "/channels/" + this.guild_id + "/" + this.id);
 		}
@@ -819,6 +844,30 @@ class Channel extends SnowFlake{
 			).makeHTML());
 			channelTopic.removeAttribute("hidden");
 		}else channelTopic.setAttribute("hidden", "");
+		if(this.guild !== this.localuser.lookingguild){
+			this.guild.loadGuild();
+		}
+		if(this.localuser.channelfocus && this.localuser.channelfocus.myhtml){
+			this.localuser.channelfocus.myhtml.classList.remove("viewChannel");
+		}
+		if(this.myhtml){
+			this.myhtml.classList.add("viewChannel");
+		}
+		const id = ++Channel.genid;
+		if(this.localuser.channelfocus){
+			this.localuser.channelfocus.infinite.delete();
+		}
+		this.guild.prevchannel = this;
+		this.guild.perminfo.prevchannel = this.id;
+		this.localuser.userinfo.updateLocal();
+		this.localuser.channelfocus = this;
+		//@ts-ignore another hack
+		if(this.nsfw&&(!this.perminfo.nsfwOk||!this.localuser.user.nsfw_allowed)){
+			this.nsfwPannel();
+			return;
+		}
+
+		const prom = this.infinite.delete();
 
 		const loading = document.getElementById("loadingdiv") as HTMLDivElement;
 		Channel.regenLoadingMessages();

src/webpage/icons/announcensfw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m152 14 21 37V3Zm21 94-46 1-5 32 51 30z"/><path fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.8" d="m122 141 5-32h-23l-4 22 8 2z"/><path fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.8" d="m122 141-14-8-8-2-3 21-62-11 3-21-22-4-7 44 107 17z"/><path fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.8" d="m38 120 5-30-21-3h-2l-4 29z"/><path fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m100 131 4-22c-28-1-52-3-53-6-2-3 12-29 28-57L11 60v55l5 1 4-29h2l21 3-5 30z"/><path fill="red" d="M128 0c-5 0-56 86-54 91 3 4 103 6 106 1 2-4-47-91-52-92Zm-6 22h11v43h-11Zm6 51a7 7 0 0 1 7 7 7 7 0 0 1-7 6 7 7 0 0 1-7-6 7 7 0 0 1 7-7z"/></svg>

src/webpage/icons/channelnsfw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><g fill="red"><path d="M134 100h-24l-5 64a12 12 0 0 0 11 13 12 12 0 0 0 13-11zm-69-4-2-1 3-9 1-11H43l-8 89a12 12 0 0 0 11 13 12 12 0 0 0 13-11zm4-46 3-32A12 12 0 0 0 61 5a12 12 0 0 0-13 11l-3 34h12zm-2 25h5l7-12H68Zm1-12h11l6-13H69Z"/><path d="m68 63 1-13H57l-1 13zm-1 12 1-12H56l-1 12Z"/><path d="M56 63H44l-1 12h12zm1-13H45l-1 13h12z"/><path d="m43 75 1-12 1-13H20A12 12 0 0 0 8 63a12 12 0 0 0 12 12Z"/><path stroke="red" stroke-linecap="round" stroke-width="24.2" d="M160 128H12"/><path d="m65 96 1-10-3 9 2 1zm63-99c-5 0-59 91-57 96 3 5 109 6 111 1 3-4-48-97-54-97zm-6 23h12v46h-12Zm6 54a7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7z"/></g></svg>

src/webpage/icons/voicensfw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="red" d="M5 51h21l28-26h17v130H54l-28-25-21 1Z"/><path fill="red" fill-rule="evenodd" d="m131 112-27-1c-4 6-8 10-14 14a13 13 0 0 0-4 17 13 13 0 0 0 17 4 68 68 0 0 0 28-34zm41-1-26 1a74 74 0 0 1-36 47 13 13 0 0 0-4 17 13 13 0 0 0 17 5c15-9 28-22 38-38 6-10 10-21 11-32z"/><path fill="red" d="M125 0c-5 0-59 90-56 95s108 6 110 1c3-5-48-96-54-96Zm-6 23h12v45h-12zm6 53a7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7z"/></svg>

src/webpage/style.css

@@ -269,6 +269,16 @@ textarea {
 .svg-addfriend{
 	mask: url(/icons/addfriend.svg);
 }
+
+.svg-channelnsfw {
+	mask: url(/icons/channelnsfw.svg);
+}
+.svg-announcensfw {
+	mask: url(/icons/announcensfw.svg);
+}
+.svg-voicensfw{
+	mask: url(/icons/voicensfw.svg);
+}
 .svgicon {
 	display: block;
 	height: 100%;