Merge pull request #54 from ansxor/modules

Module Messages

src/Views/page.js

@@ -309,9 +309,44 @@ class PageView extends BaseView {
 			}
 		} else { // non-empty
 			// create/edit message
-			Req.send_message(data).do = (resp, err)=>{
-				if (err)
-					alert("Posting failed")
+			const commandCheck = data.text.match(/^\/([^\s]+)\s*(.*)$/);
+			// it would be unexpected if this happened while it was editing
+
+			if (!this.editing && commandCheck) {
+				if (commandCheck[1] === 'help') {
+					Req.search_modules().do = (resp, err) => {
+						if (err) {
+							alert("Searching for modules failed")
+							return
+						}
+						// let's build up a list of commands to present
+						let outputMessage = "⚙️ Commands Available:\n"
+						resp.forEach(command => {
+							Object.entries(command.subcommands).forEach(([subname, subcommand]) => {
+								outputMessage += `/${command.name} `
+								if (subname) {
+									outputMessage += subname + " "
+								}
+								outputMessage += subcommand.arguments.map(argument => `<${argument.name}>`).join(" ")
+								if (subcommand['description']) {
+									outputMessage += " - " + subcommand.description
+								}
+								outputMessage += "\n"
+							})
+						})
+						Sidebar.print(outputMessage)
+					}
+				} else {
+					Req.send_module_message(commandCheck[1], data.contentId, commandCheck[2]).do = (resp, err) => {
+						if (err)
+							alert("Posting module failed")
+					}
+				}
+			} else {
+				Req.send_message(data).do = (resp, err)=>{
+					if (err)
+						alert("Posting failed")
+				}
 			}
 		}
 		// reset input

src/entity.js

@@ -46,7 +46,7 @@ class Author {
 		this.nickname = valid(n) ? Author.filter_nickname(n) : null
 		this.bigAvatar = valid(big) ? String(big) : null
 		this.avatar_pixel = apx ?? false
-		this.merge_hash = `${message.contentId},${message.createUserId},${this.avatar},${this.bigAvatar||""},${this.avatar_pixel||""},${this.username} ${this.nickname||""}`
+		this.merge_hash = `${message.module||""},${message.contentId},${message.createUserId},${this.avatar},${this.bigAvatar||""},${this.avatar_pixel||""},${this.username} ${this.nickname||""}`
 		this.date = new Date(message.createDate)
 		if (content)
 			this.page_name = content.name2
@@ -62,7 +62,7 @@ Object.assign(Author.prototype, {
 	bridge: false,
 	bigAvatar: null,
 	avatar_pixel: false,
-	merge_hash: "0,0,0,,missingno. ",
+	merge_hash: "0,0,0,0,,missingno. ",
 	page_name: "somewhere?",
 	date: new Date(NaN),
 	//			content_name: "", todo, store page title, for listing in sidebar?
@@ -110,6 +110,10 @@ for (let name in ABOUT.details.types) {
 			value: Object.freeze(Object.create(Author.prototype)),
 			writable: true,
 		}
+		proto_desc.LinkedUsers = {
+			value: Object.freeze([]),
+			writable: true,
+		}
 	}
 	if (name == 'watch') {
 		// FIXME: this could possibly happen before it's defined
@@ -249,12 +253,10 @@ const Entity = NAMESPACE({
 
 	// link user data with comments
 	link_comments({message, user, content}) {
-		if (content)
-			for (let m of message)
-				m.Author = new Author(m, user[~m.createUserId], content[~m.contentId])
-		else
-			for (let m of message)
-				m.Author = new Author(m, user[~m.createUserId])
+		for (let m of message) {
+			m.Author = new Author(m, user[~m.createUserId], content?.[~m.contentId])
+			m.LinkedUsers = m.uidsInText.map(uid => user[~uid]).filter(v => v)
+		}
 	},
 
 	fake_category(id) {

src/messages.js

@@ -66,6 +66,10 @@ class MessageList {
 		e.dataset.id = msg.id
 		if (msg.edited)
 			e.className += " edited"
+		if (msg.module !== null && msg.uidsInText.length > 0)
+			msg.LinkedUsers.forEach(user => {
+				msg.text = msg.text.replace(new RegExp(`%${user.id}%`, "g"), user.username)
+			})
 		Markup.convert_lang(msg.text, msg.values.m, e, {intersection_observer: View.observer})
 		return e
 	}
@@ -342,35 +346,53 @@ MessageList.draw_block = function(comment, part) {
 	let e = this.block()
 
 	let author = comment.Author
+	const module = comment.module
 
 	e.dataset.uid = comment.createUserId
-	/** @type {HTMLImageElement} */	
-	let avatar = e.firstChild
-	avatar.src = Draw.avatar_url(author)
+	if (module === null) {
+		/** @type {HTMLImageElement} */	
+		const avatar = this.avatar()
+		e.prepend(avatar)
+		avatar.src = Draw.avatar_url(author)
 
-	if (author.bigAvatar) {
-		avatar.className = "bigAvatar"
-		// for now we don't support both
-	} else {
-		if (author.avatar_pixel) {
-			avatar.classList.add("apx")
-			if (Settings.values.pixel_art=='on') {
-				// TODO: what if setting is turned off while image is loading?
-				if (avatar.naturalWidth) {
-					recalc_image_scale(avatar)
-				} else {
-					avatar.decode().then(ok=>{
+		if (author.bigAvatar) {
+			avatar.className = "bigAvatar"
+			// for now we don't support both
+		} else {
+			if (author.avatar_pixel) {
+				avatar.classList.add("apx")
+				if (Settings.values.pixel_art=='on') {
+					// TODO: what if setting is turned off while image is loading?
+					if (avatar.naturalWidth) {
 						recalc_image_scale(avatar)
-					})
+					} else {
+						avatar.decode().then(ok=>{
+							recalc_image_scale(avatar)
+						})
+					}
 				}
 			}
 		}
+	} else {
+		e.classList.add("module")
+		const module_name = this.module_name()
+		module_name.textContent = comment.module
+		e.prepend(module_name)
 	}
 
-	let header = avatar.nextSibling
+	let header = e.firstChild.nextSibling
 
 	let name = header.firstChild
-	if (author.nickname == null) {
+	if (module !== null) {
+		name.firstChild.textContent = module
+		name.firstChild.classList.add('module-name')
+		const module_elem = this.module()
+		const module_avatar = module_elem.lastChild.firstElementChild
+		const module_user = module_elem.lastChild.lastElementChild
+		module_avatar.src = Draw.avatar_url(author)
+		module_user.textContent = author.username
+		name.appendChild(module_elem)
+	} else if (author.nickname == null) {
 		name.firstChild.textContent = author.username
 	} else {
 		name.firstChild.textContent = author.nickname
@@ -394,7 +416,6 @@ MessageList.draw_block = function(comment, part) {
 }.bind({
 	block: 𐀶`
 <message-block>
-	<img class='avatar' width=50 height=50 alt="----">
 	<message-header>
 		<span><b class='pre'></b>:</span>
 		<span role=time></span>
@@ -403,6 +424,9 @@ MessageList.draw_block = function(comment, part) {
 </message-block>`,
 	nickname: 𐀶` <i>(<span class='pre'></span>)</i>`,
 	bridge: 𐀶` <i>[discord bridge]</i>`,
+	module: 𐀶` <i><img class='avatar module-avatar' width=50 height=50> <span class='pre'></span></i>`,
+	avatar: 𐀶`<img class='avatar' width=50 height=50 alt="----">`,
+	module_name: 𐀶`<span class='module-name'></span>`,
 })
 
 MessageList.init()

src/request.js

@@ -96,7 +96,7 @@ class ApiRequest extends XMLHttpRequest {
 
 			switch (this.status) {
 			// === Success ===
-			case 200:
+			case 200: case 204:
 				if (this.proc)
 					resp = this.proc(resp)
 				return this.ok(resp)
@@ -110,7 +110,7 @@ class ApiRequest extends XMLHttpRequest {
 				// todo: maybe have some way to trigger a retry here?
 			case 502:
 				return this.retry(5000, 'bad gateway')
-			case 408: case 204: case 524:
+			case 408: case 524:
 				return this.retry(0, 'timeout')
 			case 429: {
 				let after = +(this.getResponseHeader('Retry-After') || 1)
@@ -250,6 +250,14 @@ const Req = { // this stuff can all be static methods on ApiRequest maybe?
 	send_message(message) {
 		return this.request('Write/message', null, message)
 	},
+
+	send_module_message(name, pid, content) {
+		return this.request(`Module/${name}/${pid}`, null, content)
+	},
+
+	search_modules() {
+		return new ApiRequest(`Module/search`, 'GET', null, null)
+	},
 
 	upload_file(file, params) {
 		let form = new FormData()

src/style.css

@@ -624,6 +624,10 @@ message-block {
 	padding-bottom: 1px;
 }
 
+message-block.module {
+	color: var(--chat-dim-color);
+}
+
 message-block > img {
 	position: absolute;
 	z-index: -1;
@@ -636,6 +640,29 @@ message-block > img.avatar {
 	/*background-color: #AAB*/
 	border: 1px solid #777;
 }
+message-block img.module-avatar {
+	width: 1em;
+	height: 1em;
+	margin: 0;
+	margin-top: 0.2em;
+	margin-left: 0.5em;
+	border: 1px solid #777;
+}
+message-block .module-name {
+	font-style: italic;
+	font-weight: bold;
+}
+message-block > span.module-name {
+	position: absolute;
+	z-index: -1;
+	width: var(--chat-avatar-size);
+	height: var(--chat-avatar-size);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: 0.5rem;
+	margin-top: var(--chat-message-gap);
+}
 message-block > .avatar.pixelAvatar {
 	box-sizing: content-box;
 	margin-left: calc(var(--chat-avatar-size) - 2px - var(--avatar-width) + 0.5rem);
@@ -656,6 +683,9 @@ message-header {
 	margin-bottom: 1px;
 	line-height: 1.2;
 }
+message-block.module message-header {
+	margin-left: 0.5rem;
+}
 message-header > [role="time"] {
 	margin-left: auto; /* expanding margin, pushes element to the right */
 	/* If the username/timestamp line wraps, this negative margin means */
@@ -689,6 +719,15 @@ message-part {
 	-webkit-background-clip: padding-box !important;
 	background-clip: padding-box !important;
 }
+message-block.module > div > message-part {
+	color: var(--chat-dim-color);
+	font-weight: bold;
+	border-left: 0.25rem solid var(--chat-dim-color);
+	margin-left: 0.5rem;
+
+	padding-left: 0.5rem;
+}
+
 message-part.edited {
 	box-shadow: 10px 0 5px -10px inset var(--T-edit-color);
 }