Carbon/src/js/room-picker.js

import {q, ElemJS, ejs} from "./basic.js"

class ActiveGroupMarker extends ElemJS {
	constructor() {
		super(q("#c-group-marker"))
	}

	follow(group) {
		this.style("transform", `translateY(${group.element.offsetTop}px)`)
	}
}
const activeGroupMarker = new ActiveGroupMarker()

class Group extends ElemJS {
	constructor(groups, data) {
		super("div")

		this.groups = groups
		this.data = data
		this.active = false

		this.on("click", this.onClick.bind(this))

		this.class("c-group")
		this.child(
			(this.data.icon
			 ? ejs("img").class("c-group__icon").attribute("src", this.data.icon)
			 : ejs("div").class("c-group__icon")
			),
			ejs("div").class("c-group__name").text(this.data.name)
		)
	}

	setActive(active) {
		this.active = active
		this.element.classList[active ? "add" : "remove"]("c-group--active")
	}

	onClick() {
		this.groups.setGroup(this)
	}
}

class Room extends ElemJS {
	constructor(name) {
		super("div")

		this.name = name

		this.class("c-room")
		this.child(
			ejs("div").class("c-room__icon"),
			ejs("div").class("c-room__name").text(this.name)
		)
	}
}

class Rooms extends ElemJS {
	constructor() {
		super(q("#c-rooms"))

		this.rooms = []

		this.render()
	}

	setRooms(rooms) {
		this.rooms = rooms
		this.render()
	}

	render() {
		this.clearChildren()
		for (const room of this.rooms) {
			this.child(new Room(room.name))
		}
	}
}
const rooms = new Rooms()

class Groups extends ElemJS {
	constructor() {
		super(q("#c-groups-list"))
		this.groupData = [
			{name: "Directs", icon: "/static/directs.svg", rooms: [
				{name: "riley"},
				{name: "BadAtNames"},
				{name: "lynxano"},
				{name: "quarky"},
				{name: "lepton"},
				{name: "ash"},
				{name: "mewmew"},
				{name: "Toniob"},
				{name: "cockandball"}
			]},
			{name: "Channels", icon: "/static/channels.svg", rooms: [
				{name: "Carbon brainstorming"},
				{name: "Bibliogram"},
				{name: "Monsters Inc Debate Hall"},
				{name: "DRB clan"},
				{name: "mettaton simp zone"}
			]},
			{name: "Fediverse Drama Museum", rooms: [
				{name: "witches"},
				{name: "snouts"},
				{name: "monads"},
				{name: "radical"},
				{name: "blobcat"}
			]},
			{name: "Epicord", rooms: [
				{name: "main"},
				{name: "gaming"},
				{name: "inhalers"},
				{name: "minecraft"},
				{name: "osu"},
				{name: "covid"}
			]},
			{name: "Invidious", rooms: [
			]}
		]
		this.groups = []
		this.render()
		this.setGroup(this.children[0])
	}

	setGroup(group) {
		rooms.setRooms(group.data.rooms)
		this.groups.forEach(g => g.setActive(g === group))
		activeGroupMarker.follow(group)
	}

	render() {
		this.groups = this.groupData.map(data => new Group(this, data))
		for (const group of this.groups) {
			this.child(group)
		}
	}
}
const groups = new Groups()