forked from olcxjas-softworks/LarpixClient
add blahs for whole ui
This commit is contained in:
parent
9ad5bc99cc
commit
7ca3832286
14 changed files with 646 additions and 438 deletions
186
webroot/main.js
186
webroot/main.js
|
|
@ -24,6 +24,9 @@ var url = `${prot}//${window.location.hostname}/_larpix`;
|
|||
var params = new URLSearchParams(window.location.search);
|
||||
|
||||
try {
|
||||
var loadingScreen = document.querySelector("loading");
|
||||
var mainScreen = document.querySelector("main");
|
||||
|
||||
var loadingStatus = document.getElementById("loadingstatus");
|
||||
|
||||
var collapseDmsBtn = document.getElementById("collapse-dms");
|
||||
|
|
@ -62,7 +65,7 @@ try {
|
|||
var sidebarInboxButton = sidebarInbox.children.item(1);
|
||||
var sidebarInboxIndicator = sidebarInbox.children.item(0);
|
||||
|
||||
|
||||
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
|
|
@ -256,7 +259,6 @@ async function decryptString(base64Text, passphrase) {
|
|||
async function fetchPost(url, value) {
|
||||
let response = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: value,
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
|
|
@ -270,7 +272,6 @@ async function fetchPostEnc(url, value) {
|
|||
let nonce = await getNonce(username, passwordHash);
|
||||
let response = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: await encryptWithNonce(value, passwordHash, nonce),
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, nonce)
|
||||
|
|
@ -283,7 +284,6 @@ async function fetchPostEnc(url, value) {
|
|||
async function fetchAsync(url) {
|
||||
let response = await fetch(url, {
|
||||
method: "GET",
|
||||
credentials: "omit"
|
||||
});
|
||||
|
||||
let data = await response.text();
|
||||
|
|
@ -293,7 +293,6 @@ async function fetchAsync(url) {
|
|||
async function fetchAsyncWAuth(url) {
|
||||
let response = await fetch(url, {
|
||||
method: "GET",
|
||||
credentials: "omit",
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
}
|
||||
|
|
@ -312,7 +311,6 @@ async function Auth(username, password) {
|
|||
let passwordHash = await hashSHA3_512(password);
|
||||
let response = await fetch(`${url}/auth?u=${username}`, {
|
||||
method: "GET",
|
||||
credentials: "omit",
|
||||
headers: {
|
||||
"secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash))
|
||||
}
|
||||
|
|
@ -330,7 +328,6 @@ async function fetchEncrypted(request, body) {
|
|||
|
||||
let response = await fetch(`${url}/encryptedrequest?u=${username}`, {
|
||||
method: "POST",
|
||||
credentials: "omit",
|
||||
body: await encryptWithNonce(
|
||||
JSON.stringify({
|
||||
string1: request,
|
||||
|
|
@ -532,8 +529,6 @@ function updateLoadingStatus(message) {
|
|||
}
|
||||
|
||||
async function loadingFadeOut() {
|
||||
let loadingScreen = document.querySelector("loading");
|
||||
let mainScreen = document.querySelector("main");
|
||||
|
||||
mainScreen.style.transform = "scale(0.85)";
|
||||
mainScreen.style.opacity = "0";
|
||||
|
|
@ -546,8 +541,20 @@ async function loadingFadeOut() {
|
|||
await delay(200);
|
||||
mainScreen.style.transform = "";
|
||||
mainScreen.style.opacity = "";
|
||||
|
||||
}
|
||||
async function loadingFadeIn() {
|
||||
|
||||
loadingScreen.style.transform = "scale(0.85)";
|
||||
loadingScreen.style.opacity = "0";
|
||||
|
||||
mainScreen.style.transform = "scale(0.85)";
|
||||
mainScreen.style.opacity = "0";
|
||||
await delay(200);
|
||||
mainScreen.style.display = "none";
|
||||
loadingScreen.style.display = "";
|
||||
await delay(200);
|
||||
loadingScreen.style.transform = "";
|
||||
loadingScreen.style.opacity = "";
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -565,6 +572,25 @@ async function initBlahs() {
|
|||
res = await fetchAsync(`${path}blah/en-us.json`);
|
||||
}
|
||||
blah = JSON.parse(res);
|
||||
|
||||
let blahTags = document.getElementsByTagName("blah");
|
||||
for (let i = 0; i < blahTags.length; i++) {
|
||||
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
|
||||
}
|
||||
blahTags = document.getElementsByClassName("blah");
|
||||
for (let i = 0; i < blahTags.length; i++) {
|
||||
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
|
||||
}
|
||||
|
||||
let placeholders = document.querySelectorAll("[placeholder]");
|
||||
for (let i = 0; i < placeholders.length; i++) {
|
||||
if (placeholders[i].placeholder.startsWith("{blah("))
|
||||
{
|
||||
let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
|
||||
placeholders[i].placeholder = processBlah(value);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function processBlah(blahmessage) {
|
||||
|
|
@ -634,65 +660,69 @@ collapseGroupsBtn.addEventListener("click", () => {
|
|||
collapseGroupsBtn.classList.toggle("collapsed");
|
||||
});
|
||||
|
||||
addDmBtn.addEventListener("click", async () => {
|
||||
|
||||
//Invite to dm, addDmScreen, false
|
||||
async function switchRoomContent(title, content, showRoomBar)
|
||||
{
|
||||
roomContentMain.style.transform = "scale(0.85)";
|
||||
roomContentMain.style.opacity = "0";
|
||||
await delay(200);
|
||||
|
||||
roomTopBar.innerHTML = processBlah(title);
|
||||
roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
|
||||
|
||||
//content blah parsing
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(content, "text/html");
|
||||
|
||||
let blahTags = doc.getElementsByTagName("blah");
|
||||
for (let i = 0; i < blahTags.length; i++) {
|
||||
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
|
||||
}
|
||||
blahTags = doc.getElementsByClassName("blah");
|
||||
for (let i = 0; i < blahTags.length; i++) {
|
||||
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
|
||||
}
|
||||
|
||||
let placeholders = doc.querySelectorAll("[placeholder]");
|
||||
for (let i = 0; i < placeholders.length; i++) {
|
||||
if (placeholders[i].placeholder.startsWith("{blah("))
|
||||
{
|
||||
let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
|
||||
placeholders[i].placeholder = processBlah(value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
roomContentMain.innerHTML = doc.body.innerHTML;
|
||||
|
||||
roomTopBar.innerHTML = "Invite to dm";
|
||||
roomDetailsBar.style.display = "none";
|
||||
|
||||
roomContentMain.innerHTML =
|
||||
`
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/></svg>
|
||||
<herotitle>Add Chat</herotitle>
|
||||
<p>Add a private, encrypted chat by entering a username</p>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<label for="addchat-username">Username</label>
|
||||
<input type="text" id="addchat-username" placeholder="username:serverhost" class="forminput">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button class="submit-button" onclick="addDm()">
|
||||
Add chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
roomContentMain.style.transform = "";
|
||||
roomContentMain.style.opacity = "";
|
||||
}
|
||||
|
||||
addDmBtn.addEventListener("click", async () => {
|
||||
switchRoomContent("title.create.dm", addDmScreen, false);
|
||||
});
|
||||
addGroupBtn.addEventListener("click", async () => {
|
||||
roomContentMain.style.transform = "scale(0.85)";
|
||||
roomContentMain.style.opacity = "0";
|
||||
await delay(200);
|
||||
|
||||
roomTopBar.innerHTML = "Create group";
|
||||
roomDetailsBar.style.display = "none";
|
||||
|
||||
roomContentMain.innerHTML =
|
||||
`
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M500-482q29-32 44.5-73t15.5-85q0-44-15.5-85T500-798q60 8 100 53t40 105q0 60-40 105t-100 53Zm220 322v-120q0-36-16-68.5T662-406q51 18 94.5 46.5T800-280v120h-80Zm80-280v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Zm-593-87q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM0-160v-112q0-34 17.5-62.5T64-378q62-31 126-46.5T320-440q66 0 130 15.5T576-378q29 15 46.5 43.5T640-272v112H0Zm320-400q33 0 56.5-23.5T400-640q0-33-23.5-56.5T320-720q-33 0-56.5 23.5T240-640q0 33 23.5 56.5T320-560ZM80-240h480v-32q0-11-5.5-20T540-306q-54-27-109-40.5T320-360q-56 0-111 13.5T100-306q-9 5-14.5 14T80-272v32Zm240-400Zm0 400Z"/></svg>
|
||||
<herotitle>Create Group</herotitle>
|
||||
<p>Create a private, encrypted group</p>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<label for="creategroup-name">Name</label>
|
||||
<input type="text" id="creategroup-name" placeholder="My group" class="forminput">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button class="submit-button" onclick="createGroup()">
|
||||
Create group
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
roomContentMain.style.transform = "";
|
||||
roomContentMain.style.opacity = "";
|
||||
switchRoomContent("title.create.group", createGroupScreen, false);
|
||||
});
|
||||
|
||||
function gotoSideProfilePopup() {
|
||||
|
||||
}
|
||||
function gotoInbox() {
|
||||
|
||||
}
|
||||
async function gotoCreateSpace() {
|
||||
switchRoomContent("title.create.space", createSpaceScreen, false);
|
||||
}
|
||||
function gotoHome() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* replaced with css
|
||||
sidebarHomeButton.addEventListener("mouseenter", () => {
|
||||
sidebarHomeIndicator.classList.add("hover");
|
||||
|
|
@ -721,42 +751,4 @@ sidebarInboxButton.addEventListener("mouseenter", () => {
|
|||
sidebarInboxButton.addEventListener("mouseleave", () => {
|
||||
sidebarInboxIndicator.classList.remove("hover");
|
||||
});
|
||||
*/
|
||||
|
||||
function gotoSideProfilePopup() {
|
||||
|
||||
}
|
||||
function gotoInbox() {
|
||||
|
||||
}
|
||||
async function gotoCreateSpace() {
|
||||
roomContentMain.style.transform = "scale(0.85)";
|
||||
roomContentMain.style.opacity = "0";
|
||||
await delay(200);
|
||||
|
||||
roomTopBar.innerHTML = "Create space";
|
||||
roomDetailsBar.style.display = "none";
|
||||
roomContentMain.innerHTML =
|
||||
`
|
||||
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
|
||||
<herotitle>Create Space</herotitle>
|
||||
<p>Create a space for your community</p>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<label for="addgroup-name">Name</label>
|
||||
<input type="text" id="createspace-name" placeholder="My space" class="forminput">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button class="submit-button" onclick="createGroup()">
|
||||
Create space
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
roomContentMain.style.transform = "";
|
||||
roomContentMain.style.opacity = "";
|
||||
}
|
||||
function gotoHome() {
|
||||
|
||||
}
|
||||
*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue