104 lines
3.0 KiB
JavaScript
104 lines
3.0 KiB
JavaScript
import './ForumPanel.js'
|
|
|
|
css(`
|
|
forum- {
|
|
font-family: 'Bona';
|
|
}
|
|
|
|
forum- input::placeholder {
|
|
font-family: 'Bona Nova';
|
|
font-size: 0.9em;
|
|
color: var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none; /* remove default style */
|
|
-webkit-appearance: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--red);
|
|
}
|
|
`)
|
|
|
|
class Forum extends Shadow {
|
|
|
|
selectedForum = "HY"
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
HStack(() => {
|
|
VStack(() => {
|
|
img("/_/icons/logo.svg", "2em")
|
|
.padding(0.8, em)
|
|
.borderRadius(12, px)
|
|
.marginHorizontal(1, em)
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--darkbrown)"
|
|
} else {
|
|
this.style.background = ""
|
|
}
|
|
})
|
|
.opacity(0)
|
|
|
|
img("/_/icons/place/austin.svg", "2em")
|
|
.padding(0.8, em)
|
|
.borderRadius(12, px)
|
|
.marginHorizontal(1, em)
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--darkbrown)"
|
|
} else {
|
|
this.style.background = ""
|
|
}
|
|
})
|
|
.opacity(0)
|
|
|
|
})
|
|
.height(100, vh)
|
|
.paddingLeft(2, em)
|
|
.paddingRight(2, em)
|
|
.gap(1, em)
|
|
.marginTop(20, vh)
|
|
|
|
VStack(() => {
|
|
|
|
ForumPanel()
|
|
|
|
input("Message Hyperia", "98%")
|
|
.paddingVertical(1, em)
|
|
.paddingLeft(2, pct)
|
|
.color("var(--accent)")
|
|
.background("var(--darkbrown)")
|
|
.marginBottom(6, em)
|
|
.border("none")
|
|
.fontSize(1, em)
|
|
.onKeyDown(function (e) {
|
|
if (e.key === "Enter") {
|
|
window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
|
|
this.value = ""
|
|
}
|
|
})
|
|
})
|
|
.gap(0.5, em)
|
|
.width(100, pct)
|
|
.height(100, vh)
|
|
.alignHorizontal("center")
|
|
.alignVertical("end")
|
|
})
|
|
.width(100, "%")
|
|
.height(87, vh)
|
|
.x(0).y(0, vh)
|
|
})
|
|
.width(100, pct)
|
|
.height(100, pct)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
register(Forum) |