Compare commits
20 Commits
7f4a9a8b18
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
07b42ccbc3 | ||
|
|
f1c7c340f9 | ||
|
|
f8861666dd | ||
|
|
cd5f92b55f | ||
|
|
8d57a507d1 | ||
|
|
9567e4e284 | ||
|
|
5b564fbfb3 | ||
|
|
279be987a4 | ||
|
|
9a1aa55297 | ||
|
|
be155ae913 | ||
|
|
9d43362cae | ||
|
|
5d59cf8e50 | ||
|
|
bc1a3ccf75 | ||
|
|
daa4182778 | ||
|
|
fcf0b4b08a | ||
|
|
eca1354e94 | ||
|
|
9e87364147 | ||
|
|
dc9b106439 | ||
|
|
cf9edc066a | ||
|
|
89702efa3a |
9
.gitignore
vendored
9
.gitignore
vendored
@@ -1,9 +1,8 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
package-lock.json
|
package-lock.json
|
||||||
node_modules
|
node_modules
|
||||||
_/build
|
|
||||||
content
|
|
||||||
server/.env
|
|
||||||
abetaccredited.html
|
|
||||||
qrCodes/qr_codes
|
|
||||||
.env
|
.env
|
||||||
|
|
||||||
|
content
|
||||||
|
db/db.json
|
||||||
|
qrCodes/qr_codes
|
||||||
323
db/db.json
323
db/db.json
@@ -1,323 +0,0 @@
|
|||||||
{
|
|
||||||
"nodes": {
|
|
||||||
"HY-1": {
|
|
||||||
"fullName": "Founder"
|
|
||||||
},
|
|
||||||
"MEMBER-samrussell99@pm.me": {
|
|
||||||
"email": "samrussell99@pm.me",
|
|
||||||
"firstName": "Sam",
|
|
||||||
"lastName": "Russell",
|
|
||||||
"password": "$argon2id$v=19$m=65536,t=3,p=4$PDu5qx47zzY0dX0/4iQuqw$JxePLouwOEi2Q0wA4JHQQ4GwvqAvxqWhj7n9aC8HZIk",
|
|
||||||
"address": {
|
|
||||||
"address1": "2014 E 9th St",
|
|
||||||
"address2": "Unit A",
|
|
||||||
"zip": "78702",
|
|
||||||
"state": "Texas",
|
|
||||||
"city": "Austin"
|
|
||||||
},
|
|
||||||
"tokenUsed": "810387b6-851e-4883-b9a3-c59703dc0fc9",
|
|
||||||
"joined": "11.24.2025-12:54:360784am"
|
|
||||||
},
|
|
||||||
"TOKEN-810387b6-851e-4883-b9a3-c59703dc0fc9": {
|
|
||||||
"index": 1,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "810387b6-851e-4883-b9a3-c59703dc0fc9",
|
|
||||||
"used": true
|
|
||||||
},
|
|
||||||
"TOKEN-d0b417c4-d69a-4958-9e1d-0658176d2710": {
|
|
||||||
"index": 2,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "d0b417c4-d69a-4958-9e1d-0658176d2710",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-1719b6d8-9b13-4720-ab94-9af5cbe42137": {
|
|
||||||
"index": 3,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "1719b6d8-9b13-4720-ab94-9af5cbe42137",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-16659e04-afbb-4192-9195-90f2f49277b2": {
|
|
||||||
"index": 4,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "16659e04-afbb-4192-9195-90f2f49277b2",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-88abc4b3-8416-4499-9fa7-6778841e4b23": {
|
|
||||||
"index": 5,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "88abc4b3-8416-4499-9fa7-6778841e4b23",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-e3342dd5-a214-4280-9488-f48f91e728ce": {
|
|
||||||
"index": 6,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "e3342dd5-a214-4280-9488-f48f91e728ce",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-a8176432-4e72-42b7-ac9a-2d799039f729": {
|
|
||||||
"index": 7,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "a8176432-4e72-42b7-ac9a-2d799039f729",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-1d57b6e0-e6c3-4ab6-808f-72b64b8303ee": {
|
|
||||||
"index": 8,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "1d57b6e0-e6c3-4ab6-808f-72b64b8303ee",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-67264f06-c4b1-4334-8ba8-0e5e045021df": {
|
|
||||||
"index": 9,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "67264f06-c4b1-4334-8ba8-0e5e045021df",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-e9fa5701-d90f-45d0-8e2b-7c3ef9022362": {
|
|
||||||
"index": 10,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "e9fa5701-d90f-45d0-8e2b-7c3ef9022362",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-c082880a-f12c-4eb0-b136-e11df9e6bde8": {
|
|
||||||
"index": 11,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "c082880a-f12c-4eb0-b136-e11df9e6bde8",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-083a18f5-6491-4dbf-9a28-2b22b6b4a5bd": {
|
|
||||||
"index": 12,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "083a18f5-6491-4dbf-9a28-2b22b6b4a5bd",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-af94443c-a0c5-4c58-a2e5-16a8c6d573c8": {
|
|
||||||
"index": 13,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "af94443c-a0c5-4c58-a2e5-16a8c6d573c8",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-5673dd07-25b1-441f-abbc-89b5e5a2b3e9": {
|
|
||||||
"index": 14,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "5673dd07-25b1-441f-abbc-89b5e5a2b3e9",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-f2b30979-1ece-41e1-87ec-6a102a21e809": {
|
|
||||||
"index": 15,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "f2b30979-1ece-41e1-87ec-6a102a21e809",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-d52c1bcc-8b97-4535-8395-dfdab4ee543a": {
|
|
||||||
"index": 16,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "d52c1bcc-8b97-4535-8395-dfdab4ee543a",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-7fed8604-1801-4500-8615-2ac8eb50c896": {
|
|
||||||
"index": 17,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "7fed8604-1801-4500-8615-2ac8eb50c896",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-e312c854-8df7-4c68-9f3f-1822b718b092": {
|
|
||||||
"index": 18,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "e312c854-8df7-4c68-9f3f-1822b718b092",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-5979853c-1755-4403-bea5-3b111384ffb3": {
|
|
||||||
"index": 19,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "5979853c-1755-4403-bea5-3b111384ffb3",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-d93307e4-a0a0-4b4a-86d0-897ca5382cdd": {
|
|
||||||
"index": 20,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "d93307e4-a0a0-4b4a-86d0-897ca5382cdd",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-b73b803a-c49d-4ea9-b8ed-f04be0373157": {
|
|
||||||
"index": 21,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "b73b803a-c49d-4ea9-b8ed-f04be0373157",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-5a0a7a8c-f080-4708-a2e1-fcd2d613adb1": {
|
|
||||||
"index": 22,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "5a0a7a8c-f080-4708-a2e1-fcd2d613adb1",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-99c547fe-1ec1-4ddc-bfcb-b95d73fdd907": {
|
|
||||||
"index": 23,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "99c547fe-1ec1-4ddc-bfcb-b95d73fdd907",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-6da35b58-81ea-478f-9ef5-8a70b407bfcf": {
|
|
||||||
"index": 24,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "6da35b58-81ea-478f-9ef5-8a70b407bfcf",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6": {
|
|
||||||
"index": 25,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-04afd891-1250-4a6d-b239-3bdd06082c71": {
|
|
||||||
"index": 26,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "04afd891-1250-4a6d-b239-3bdd06082c71",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-c807c67f-2d8d-4f54-b657-8cb3aaf19b28": {
|
|
||||||
"index": 27,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "c807c67f-2d8d-4f54-b657-8cb3aaf19b28",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-5cf7639e-22b3-4469-8155-d490cc164367": {
|
|
||||||
"index": 28,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "5cf7639e-22b3-4469-8155-d490cc164367",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-90e82173-c7f8-47d9-9619-b333e032d1af": {
|
|
||||||
"index": 29,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "90e82173-c7f8-47d9-9619-b333e032d1af",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-5eed9d33-81ea-420f-834b-a71b01eb6f54": {
|
|
||||||
"index": 30,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "5eed9d33-81ea-420f-834b-a71b01eb6f54",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-2e96ecaa-bf8e-403c-89f3-8b2924788df3": {
|
|
||||||
"index": 31,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "2e96ecaa-bf8e-403c-89f3-8b2924788df3",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-7edb52b1-35ce-42c6-8cd0-341f3ee38f4c": {
|
|
||||||
"index": 32,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "7edb52b1-35ce-42c6-8cd0-341f3ee38f4c",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-ad5f483d-338f-4efc-936d-8253854b38a5": {
|
|
||||||
"index": 33,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "ad5f483d-338f-4efc-936d-8253854b38a5",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69": {
|
|
||||||
"index": 34,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-382a7ffd-9227-4edc-8bc6-8c3ae82ccf14": {
|
|
||||||
"index": 35,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "382a7ffd-9227-4edc-8bc6-8c3ae82ccf14",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-27762835-f211-4c72-8187-b3f87ccb846c": {
|
|
||||||
"index": 36,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "27762835-f211-4c72-8187-b3f87ccb846c",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-7344f7ce-2609-46f4-b2cb-28dafc547270": {
|
|
||||||
"index": 37,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "7344f7ce-2609-46f4-b2cb-28dafc547270",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-fd23ce26-d78a-49fc-b198-1a73071a2db4": {
|
|
||||||
"index": 38,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "fd23ce26-d78a-49fc-b198-1a73071a2db4",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-869227be-1c80-421f-a17e-e052929c43e3": {
|
|
||||||
"index": 39,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "869227be-1c80-421f-a17e-e052929c43e3",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-3ac9b048-a132-4fad-bb2d-9bb1820592c8": {
|
|
||||||
"index": 40,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "3ac9b048-a132-4fad-bb2d-9bb1820592c8",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-7d9c71ac-646b-4a6b-b758-f55f632cec6f": {
|
|
||||||
"index": 41,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "7d9c71ac-646b-4a6b-b758-f55f632cec6f",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-6ad3a682-14fa-48d7-96bd-fd61b2b314dd": {
|
|
||||||
"index": 42,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "6ad3a682-14fa-48d7-96bd-fd61b2b314dd",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-c02ae012-089a-4c3b-bd28-8d7cedc2df0d": {
|
|
||||||
"index": 43,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "c02ae012-089a-4c3b-bd28-8d7cedc2df0d",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-df82c2b6-bd8c-4b69-bc8c-a1d7df53727c": {
|
|
||||||
"index": 44,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "df82c2b6-bd8c-4b69-bc8c-a1d7df53727c",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-1444c46c-4985-4e52-8cbf-f6d77795deae": {
|
|
||||||
"index": 45,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "1444c46c-4985-4e52-8cbf-f6d77795deae",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-38954160-0865-4f55-b190-e2a5a2268df1": {
|
|
||||||
"index": 46,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "38954160-0865-4f55-b190-e2a5a2268df1",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-0e88166f-936a-4156-a89d-e71e825db36e": {
|
|
||||||
"index": 47,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "0e88166f-936a-4156-a89d-e71e825db36e",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-a94aee8f-c47d-4606-a734-69355dfc642e": {
|
|
||||||
"index": 48,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "a94aee8f-c47d-4606-a734-69355dfc642e",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-de407269-9e31-485b-a857-5ba5d1a5ca5b": {
|
|
||||||
"index": 49,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "de407269-9e31-485b-a857-5ba5d1a5ca5b",
|
|
||||||
"used": false
|
|
||||||
},
|
|
||||||
"TOKEN-f2016b40-a179-47ec-a415-84caa7da8521": {
|
|
||||||
"index": 50,
|
|
||||||
"url": "https://hyperia.so/signup?token=",
|
|
||||||
"uuid": "f2016b40-a179-47ec-a415-84caa7da8521",
|
|
||||||
"used": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"edges": {}
|
|
||||||
}
|
|
||||||
15
main.js
15
main.js
@@ -2,15 +2,16 @@
|
|||||||
const { app, BrowserWindow, nativeImage } = require('electron');
|
const { app, BrowserWindow, nativeImage } = require('electron');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
|
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
|
||||||
|
|
||||||
function createWindow() {
|
function createWindow() {
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
show: false, // window is hidden
|
show: false, // window is hidden
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 800,
|
height: 800,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
contextIsolation: false,
|
contextIsolation: false
|
||||||
icon: path.join(__dirname, '_', 'fabric.png')
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
win.loadFile(path.join(__dirname, 'index.html'));
|
win.loadFile(path.join(__dirname, 'index.html'));
|
||||||
|
|||||||
@@ -12,8 +12,10 @@
|
|||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"dotenv": "^17.2.3",
|
"dotenv": "^17.2.3",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
|
"express-useragent": "^2.0.2",
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
|
"stripe": "^20.0.0",
|
||||||
"ws": "^8.18.3",
|
"ws": "^8.18.3",
|
||||||
"zod": "^4.1.12"
|
"zod": "^4.1.12"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -28,6 +28,21 @@ export default class AuthHandler {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getProfile(req, res) {
|
||||||
|
const token = req.cookies.auth_token;
|
||||||
|
if (!token) return res.status(401).send({ error: "No auth token" });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = jwt.verify(token, process.env.JWT_SECRET);
|
||||||
|
const email = payload.email;
|
||||||
|
|
||||||
|
const user = db.members.getByEmail(email);
|
||||||
|
res.send({ email: user.email, name: user.firstName + " " + user.lastName });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(401).send({ error: "Invalid token" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async login(req, res) {
|
async login(req, res) {
|
||||||
const { email, password } = req.body;
|
const { email, password } = req.body;
|
||||||
let foundUser = global.db.members.getByEmail(email)
|
let foundUser = global.db.members.getByEmail(email)
|
||||||
@@ -40,7 +55,8 @@ export default class AuthHandler {
|
|||||||
if (!valid) {
|
if (!valid) {
|
||||||
res.status(400).json({ error: 'Incorrect password.' });
|
res.status(400).json({ error: 'Incorrect password.' });
|
||||||
} else {
|
} else {
|
||||||
const payload = { id: foundUser.id };
|
const payload = { email: foundUser.email };
|
||||||
|
console.log(payload)
|
||||||
const secret = process.env.JWT_SECRET;
|
const secret = process.env.JWT_SECRET;
|
||||||
const options = { expiresIn: "2h" };
|
const options = { expiresIn: "2h" };
|
||||||
const token = jwt.sign(payload, secret, options);
|
const token = jwt.sign(payload, secret, options);
|
||||||
|
|||||||
@@ -5,16 +5,28 @@ import QuillDB from "../_/quilldb.js"
|
|||||||
import Titles from "./model/Titles.js"
|
import Titles from "./model/Titles.js"
|
||||||
import Members from './model/Members.js'
|
import Members from './model/Members.js'
|
||||||
import Tokens from './model/Tokens.js'
|
import Tokens from './model/Tokens.js'
|
||||||
|
import Payments from "./model/Payments.js"
|
||||||
|
import Posts from "./model/Forum/Posts.js"
|
||||||
|
import Conversations from "./model/Messages/Conversations.js"
|
||||||
|
import Messages from "./model/Messages/Messages.js"
|
||||||
|
|
||||||
export default class Database {
|
export default class Database {
|
||||||
titles = new Titles()
|
titles = new Titles()
|
||||||
members = new Members()
|
members = new Members()
|
||||||
tokens = new Tokens()
|
tokens = new Tokens()
|
||||||
|
payments = new Payments()
|
||||||
|
posts = new Posts()
|
||||||
|
conversations = new Conversations()
|
||||||
|
messages = new Messages()
|
||||||
|
|
||||||
fromID = {
|
fromID = {
|
||||||
"HY": this.titles,
|
"HY": this.titles,
|
||||||
"MEMBER": this.members,
|
"MEMBER": this.members,
|
||||||
"TOKEN": this.tokens
|
"TOKEN": this.tokens,
|
||||||
|
"PAYMENT": this.payments,
|
||||||
|
"POST": this.posts,
|
||||||
|
"CONVERSATION": this.conversations,
|
||||||
|
"DM": this.messages
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -39,7 +51,7 @@ export default class Database {
|
|||||||
try {
|
try {
|
||||||
let collection = this.fromID[type]
|
let collection = this.fromID[type]
|
||||||
if(collection) {
|
if(collection) {
|
||||||
collection.save(node)
|
collection.save(node, id)
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Type does not exist for node: ", id)
|
throw new Error("Type does not exist for node: ", id)
|
||||||
}
|
}
|
||||||
@@ -48,7 +60,11 @@ export default class Database {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
this.saveData()
|
|
||||||
|
setInterval(() => {
|
||||||
|
console.log("saving db")
|
||||||
|
global.db.saveData()
|
||||||
|
}, 5000)
|
||||||
}
|
}
|
||||||
|
|
||||||
async saveData() {
|
async saveData() {
|
||||||
@@ -63,12 +79,20 @@ export default class Database {
|
|||||||
let arrs = [
|
let arrs = [
|
||||||
this.titles.entries,
|
this.titles.entries,
|
||||||
this.members.entries,
|
this.members.entries,
|
||||||
this.tokens.entries
|
this.tokens.entries,
|
||||||
|
this.posts.entries,
|
||||||
|
this.conversations.entries,
|
||||||
|
this.messages.entries,
|
||||||
|
this.payments.entries,
|
||||||
]
|
]
|
||||||
let ids = [
|
let ids = [
|
||||||
Object.entries(this.titles.ids),
|
Object.entries(this.titles.ids),
|
||||||
Object.entries(this.members.ids),
|
Object.entries(this.members.ids),
|
||||||
Object.entries(this.tokens.ids),
|
Object.entries(this.tokens.ids),
|
||||||
|
Object.entries(this.posts.ids),
|
||||||
|
Object.entries(this.conversations.ids),
|
||||||
|
Object.entries(this.messages.ids),
|
||||||
|
Object.entries(this.payments.ids),
|
||||||
]
|
]
|
||||||
for(let i=0; i<arrs.length; i++) {
|
for(let i=0; i<arrs.length; i++) {
|
||||||
let arr = arrs[i]
|
let arr = arrs[i]
|
||||||
|
|||||||
56
server/db/model/Forum/Posts.js
Normal file
56
server/db/model/Forum/Posts.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import OrderedObject from "../OrderedObject.js"
|
||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
export default class Posts extends OrderedObject {
|
||||||
|
schema = z.object({
|
||||||
|
text: z.string(),
|
||||||
|
time: z.string(),
|
||||||
|
sentBy: z.string()
|
||||||
|
})
|
||||||
|
|
||||||
|
makeID(forum, number) {
|
||||||
|
return `POST-${forum}-${number}`
|
||||||
|
}
|
||||||
|
|
||||||
|
save(post, id) {
|
||||||
|
let result = this.schema.safeParse(post)
|
||||||
|
if(result.success) {
|
||||||
|
try {
|
||||||
|
super.add(id, post)
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e)
|
||||||
|
throw e
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error("Failed parsing member: ", result.error)
|
||||||
|
throw new global.ServerError(400, "Invalid Member Data!: ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get(forum, number) {
|
||||||
|
let result = []
|
||||||
|
let limit = Math.min(number, this.entries.length)
|
||||||
|
for(let i=1; i<=limit; i++) {
|
||||||
|
let id = this.makeID(forum, i)
|
||||||
|
let post = this.entries[this.ids[id]]
|
||||||
|
let {firstName, lastName} = global.db.members.get(post.sentBy)
|
||||||
|
let seededObj = {
|
||||||
|
...post
|
||||||
|
}
|
||||||
|
seededObj.sentByID = post.sentBy
|
||||||
|
seededObj.sentBy = firstName + " " + lastName
|
||||||
|
result.push(seededObj)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
async add(text, forum, userEmail) {
|
||||||
|
let newPost = {}
|
||||||
|
newPost.text = text
|
||||||
|
newPost.sentBy = db.members.getIDFromEmail(userEmail)
|
||||||
|
newPost.time = global.currentTime()
|
||||||
|
|
||||||
|
let idNumber = this.entries.length+1
|
||||||
|
super.add(this.makeID(forum, idNumber), newPost)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@ export default class Members extends OrderedObject {
|
|||||||
city: z.string()
|
city: z.string()
|
||||||
})
|
})
|
||||||
schema = z.object({
|
schema = z.object({
|
||||||
|
id: z.number(),
|
||||||
email: z.string().email(),
|
email: z.string().email(),
|
||||||
firstName: z.string(),
|
firstName: z.string(),
|
||||||
lastName: z.string(),
|
lastName: z.string(),
|
||||||
@@ -26,7 +27,7 @@ export default class Members extends OrderedObject {
|
|||||||
isHashed = (s) => {return s.startsWith("$argon2")}
|
isHashed = (s) => {return s.startsWith("$argon2")}
|
||||||
|
|
||||||
save(member) {
|
save(member) {
|
||||||
let id = `MEMBER-${member.email}`
|
let id = `MEMBER-${member.id}`
|
||||||
let result = this.schema.safeParse(member)
|
let result = this.schema.safeParse(member)
|
||||||
if(result.success) {
|
if(result.success) {
|
||||||
try {
|
try {
|
||||||
@@ -45,29 +46,32 @@ export default class Members extends OrderedObject {
|
|||||||
newMember.tokenUsed = tokenID
|
newMember.tokenUsed = tokenID
|
||||||
const hash = await argon2.hash(newMember.password);
|
const hash = await argon2.hash(newMember.password);
|
||||||
newMember.password = hash
|
newMember.password = hash
|
||||||
newMember.joined = this.currentTime()
|
newMember.joined = global.currentTime()
|
||||||
|
newMember.id = this.entries.length+1
|
||||||
this.save(newMember)
|
this.save(newMember)
|
||||||
}
|
}
|
||||||
|
|
||||||
getByEmail(email) {
|
get(id) {
|
||||||
return super.get(`MEMBER-${email}`)
|
return this.entries[this.ids[id]]
|
||||||
}
|
}
|
||||||
|
|
||||||
currentTime() {
|
getByEmail(email) {
|
||||||
const now = new Date();
|
for(let i=0; i<this.entries.length; i++) {
|
||||||
|
if(this.entries[i].email === email) {
|
||||||
|
return this.entries[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
const month = String(now.getMonth() + 1).padStart(2, "0");
|
getIDFromEmail(email) {
|
||||||
const day = String(now.getDate()).padStart(2, "0");
|
let index = 0
|
||||||
const year = now.getFullYear();
|
for(let i=0; i<this.entries.length; i++) {
|
||||||
|
if(this.entries[i].email === email) {
|
||||||
let hours = now.getHours();
|
index = i
|
||||||
const ampm = hours >= 12 ? "pm" : "am";
|
break
|
||||||
hours = hours % 12 || 12; // convert to 12-hour format
|
}
|
||||||
|
}
|
||||||
const minutes = String(now.getMinutes()).padStart(2, "0");
|
return Object.entries(this.ids)[index][0]
|
||||||
const seconds = String(now.getSeconds()).padStart(2, "0");
|
|
||||||
const ms = String(now.getMilliseconds()).padStart(4, "0"); // 4-digit like "5838"
|
|
||||||
|
|
||||||
return `${month}.${day}.${year}-${hours}:${minutes}:${seconds}${ms}${ampm}`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
62
server/db/model/Messages/Conversations.js
Normal file
62
server/db/model/Messages/Conversations.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import OrderedObject from "../OrderedObject.js"
|
||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
export default class Conversations extends OrderedObject {
|
||||||
|
|
||||||
|
schema = z.object({
|
||||||
|
id: z.number(),
|
||||||
|
between: z.array(z.string()),
|
||||||
|
lastUpdated: z.string()
|
||||||
|
}).strict()
|
||||||
|
|
||||||
|
save(convo) {
|
||||||
|
let id = `CONVERSATION-${convo.id}`
|
||||||
|
let result = this.schema.safeParse(convo)
|
||||||
|
if(result.success) {
|
||||||
|
try {
|
||||||
|
super.add(id, convo)
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e)
|
||||||
|
throw e
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(result.error)
|
||||||
|
throw new global.ServerError(400, "Invalid Conversation Data!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get(convoID) {
|
||||||
|
console.log("convo getting, ", convoID)
|
||||||
|
return this.entries[this.ids[convoID]]
|
||||||
|
}
|
||||||
|
|
||||||
|
getByMember(userID) {
|
||||||
|
let convos = []
|
||||||
|
|
||||||
|
function populateMemberProfilesFromIDs(ids) {
|
||||||
|
let result = []
|
||||||
|
for(let i=0; i<ids.length; i++) {
|
||||||
|
result[i] = global.db.members.get(ids[i])
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i=0; i<this.entries.length; i++) {
|
||||||
|
let convo = this.entries[i]
|
||||||
|
console.log(convo, userID)
|
||||||
|
if(convo.between.includes(userID)) {
|
||||||
|
|
||||||
|
console.log("found user convo: ", convo.id)
|
||||||
|
let messages = global.db.messages.getByConversation(`CONVERSATION-${convo.id}`)
|
||||||
|
let result = {
|
||||||
|
...convo,
|
||||||
|
messages,
|
||||||
|
}
|
||||||
|
result.between = populateMemberProfilesFromIDs(convo.between)
|
||||||
|
|
||||||
|
convos.push(result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return convos
|
||||||
|
}
|
||||||
|
}
|
||||||
57
server/db/model/Messages/Messages.js
Normal file
57
server/db/model/Messages/Messages.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import OrderedObject from "../OrderedObject.js"
|
||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
export default class Messages extends OrderedObject {
|
||||||
|
|
||||||
|
schema = z.object({
|
||||||
|
id: z.number(),
|
||||||
|
conversation: z.string(),
|
||||||
|
from: z.string(),
|
||||||
|
text: z.string(),
|
||||||
|
time: z.string()
|
||||||
|
}).strict()
|
||||||
|
|
||||||
|
save(msg) {
|
||||||
|
let id = `DM-${msg.id}`
|
||||||
|
let result = this.schema.safeParse(msg)
|
||||||
|
if(result.success) {
|
||||||
|
try {
|
||||||
|
super.add(id, msg)
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e)
|
||||||
|
throw e
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(result.error)
|
||||||
|
throw new global.ServerError(400, "Invalid Conversation Data!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
add(convo, text, userID) {
|
||||||
|
let newMessage = {}
|
||||||
|
newMessage.time = global.currentTime()
|
||||||
|
newMessage.from = userID
|
||||||
|
newMessage.conversation = convo
|
||||||
|
newMessage.text = text
|
||||||
|
newMessage.id = this.entries.length+1
|
||||||
|
console.log(newMessage)
|
||||||
|
this.save(newMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
getByConversation(convoID) {
|
||||||
|
let result = []
|
||||||
|
for(let i=0; i<this.entries.length; i++) {
|
||||||
|
let entry = this.entries[i]
|
||||||
|
if(entry.conversation = convoID) {
|
||||||
|
let userID = entry.from
|
||||||
|
let fromUser = global.db.members.get(userID)
|
||||||
|
let newObj = {
|
||||||
|
...entry
|
||||||
|
}
|
||||||
|
newObj.from = fromUser
|
||||||
|
result.push(newObj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,9 +1,10 @@
|
|||||||
export default class OrderedObject {
|
export default class OrderedObject {
|
||||||
entries = []
|
entries = []
|
||||||
ids = {}
|
ids = {}
|
||||||
|
indexes = []
|
||||||
|
|
||||||
add(id, data) {
|
add(id, data) {
|
||||||
if(this.get(id)) {
|
if(this.ids[id]) {
|
||||||
console.error(`Can't add item ${id}: id already exists`)
|
console.error(`Can't add item ${id}: id already exists`)
|
||||||
throw new global.ServerError(400, `Member with this email already exists`)
|
throw new global.ServerError(400, `Member with this email already exists`)
|
||||||
}
|
}
|
||||||
@@ -23,12 +24,4 @@ export default class OrderedObject {
|
|||||||
return this.entries[this.ids[key]]
|
return this.entries[this.ids[key]]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get(key) {
|
|
||||||
if (typeof key === "number") {
|
|
||||||
return this.entries[key]
|
|
||||||
} else {
|
|
||||||
return this.entries[this.ids[key]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
42
server/db/model/Payments.js
Normal file
42
server/db/model/Payments.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import OrderedObject from "./OrderedObject.js"
|
||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
export default class Payments extends OrderedObject {
|
||||||
|
|
||||||
|
schema = z.object({
|
||||||
|
id: z.number(),
|
||||||
|
name: z.string(),
|
||||||
|
email: z.string(),
|
||||||
|
time: z.string(),
|
||||||
|
amount: z.number(),
|
||||||
|
product: z.string(),
|
||||||
|
})
|
||||||
|
|
||||||
|
save(payment) {
|
||||||
|
let id = `PAYMENT-${payment.id}`
|
||||||
|
let result = this.schema.safeParse(payment)
|
||||||
|
if(result.success) {
|
||||||
|
try {
|
||||||
|
super.add(id, payment)
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e)
|
||||||
|
throw e
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(result.error)
|
||||||
|
throw new global.ServerError(400, "Invalid Member Data!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
add(paymentObj) {
|
||||||
|
let toSave = {
|
||||||
|
id: this.entries.length+1,
|
||||||
|
...paymentObj
|
||||||
|
}
|
||||||
|
this.save(toSave)
|
||||||
|
}
|
||||||
|
|
||||||
|
get(id) {
|
||||||
|
return this.entries[this.ids[`PAYMENT-${id}`]]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,7 +4,6 @@ export default class Titles extends OrderedObject {
|
|||||||
|
|
||||||
save(newTitle) {
|
save(newTitle) {
|
||||||
let id = `HY-${this.entries.length+1}`
|
let id = `HY-${this.entries.length+1}`
|
||||||
console.log(id)
|
|
||||||
if(this.validate(id, newTitle)) {
|
if(this.validate(id, newTitle)) {
|
||||||
try {
|
try {
|
||||||
super.add(id, newTitle)
|
super.add(id, newTitle)
|
||||||
|
|||||||
@@ -36,6 +36,6 @@ export default class Tokens extends OrderedObject {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get(uuid) {
|
get(uuid) {
|
||||||
return super.get(`TOKEN-${uuid}`)
|
return this.entries[this.ids[`TOKEN-${uuid}`]]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import { broadcast } from './ws.js';
|
|
||||||
|
|
||||||
const handlers = {
|
|
||||||
updateLocation(req, res) {
|
|
||||||
const { name, latitude, longitude, timestamp } = req.body;
|
|
||||||
console.log(`Received location: (${name}, ${latitude}, ${longitude}) at ${timestamp}`);
|
|
||||||
broadcast("update-location", { name, latitude, longitude, timestamp });
|
|
||||||
res.json({ success: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default handlers;
|
|
||||||
@@ -6,11 +6,13 @@ const fs = require('fs');
|
|||||||
const chalk = require('chalk');
|
const chalk = require('chalk');
|
||||||
const moment = require('moment');
|
const moment = require('moment');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const useragent = require("express-useragent");
|
||||||
|
|
||||||
import { initWebSocket } from './ws.js'
|
import "./util.js"
|
||||||
|
import Socket from './ws/ws.js'
|
||||||
import Database from "./db/db.js"
|
import Database from "./db/db.js"
|
||||||
import AuthHandler from './auth.js';
|
import AuthHandler from './auth.js';
|
||||||
import handlers from "./handlers.js";
|
import PaymentsHandler from "./payments.js"
|
||||||
|
|
||||||
class Server {
|
class Server {
|
||||||
db;
|
db;
|
||||||
@@ -19,9 +21,16 @@ class Server {
|
|||||||
DBPath = path.join(__dirname, './db')
|
DBPath = path.join(__dirname, './db')
|
||||||
|
|
||||||
registerRoutes(router) {
|
registerRoutes(router) {
|
||||||
// router.post('/api/location', handlers.updateLocation)
|
/* Stripe */
|
||||||
|
router.post("/create-checkout-session", PaymentsHandler.danceTicket)
|
||||||
|
router.post("/webhook", express.raw({ type: "application/json" }), PaymentsHandler.webhook)
|
||||||
|
|
||||||
|
/* Auth */
|
||||||
router.post('/login', this.auth.login)
|
router.post('/login', this.auth.login)
|
||||||
|
router.get('/profile', this.auth.getProfile)
|
||||||
router.get('/signout', this.auth.logout)
|
router.get('/signout', this.auth.logout)
|
||||||
|
|
||||||
|
/* Site */
|
||||||
router.get('/signup', this.verifyToken, this.get)
|
router.get('/signup', this.verifyToken, this.get)
|
||||||
router.post('/signup', this.verifyToken, this.newUserSubmission)
|
router.post('/signup', this.verifyToken, this.newUserSubmission)
|
||||||
router.get('/db/images/*', this.getUserImage)
|
router.get('/db/images/*', this.getUserImage)
|
||||||
@@ -111,12 +120,13 @@ class Server {
|
|||||||
|
|
||||||
let privateSite = () => {
|
let privateSite = () => {
|
||||||
let filePath;
|
let filePath;
|
||||||
|
let platformFolder = req.useragent.isMobile ? "mobile" : "desktop"
|
||||||
if(url.startsWith("/_")) {
|
if(url.startsWith("/_")) {
|
||||||
filePath = path.join(this.UIPath, url);
|
filePath = path.join(this.UIPath, url);
|
||||||
} else if(url.includes("75820185")) {
|
} else if(url.includes("75820185")) {
|
||||||
filePath = path.join(this.UIPath, "site", url.split("75820185")[1]);
|
filePath = path.join(this.UIPath, platformFolder, url.split("75820185")[1]);
|
||||||
} else {
|
} else {
|
||||||
filePath = path.join(this.UIPath, "site", "index.html");
|
filePath = path.join(this.UIPath, platformFolder, "index.html");
|
||||||
}
|
}
|
||||||
|
|
||||||
res.sendFile(filePath);
|
res.sendFile(filePath);
|
||||||
@@ -133,10 +143,10 @@ class Server {
|
|||||||
const formattedDate = moment().format('M.D');
|
const formattedDate = moment().format('M.D');
|
||||||
const formattedTime = moment().format('h:mma');
|
const formattedTime = moment().format('h:mma');
|
||||||
if(req.url.includes("/api/")) {
|
if(req.url.includes("/api/")) {
|
||||||
console.logclean(chalk.blue(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
|
console.log(chalk.blue(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
|
||||||
} else {
|
} else {
|
||||||
if(req.url === "/")
|
if(req.url === "/")
|
||||||
console.logclean(chalk.gray(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
|
console.log(chalk.gray(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
|
||||||
}
|
}
|
||||||
next();
|
next();
|
||||||
}
|
}
|
||||||
@@ -145,9 +155,9 @@ class Server {
|
|||||||
const originalSend = res.send;
|
const originalSend = res.send;
|
||||||
res.send = function (body) {
|
res.send = function (body) {
|
||||||
if(res.statusCode >= 400) {
|
if(res.statusCode >= 400) {
|
||||||
console.logclean(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
|
console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
|
||||||
} else {
|
} else {
|
||||||
console.logclean(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
|
console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
|
||||||
}
|
}
|
||||||
originalSend.call(this, body);
|
originalSend.call(this, body);
|
||||||
};
|
};
|
||||||
@@ -159,10 +169,12 @@ class Server {
|
|||||||
global.db = this.db
|
global.db = this.db
|
||||||
this.auth = new AuthHandler()
|
this.auth = new AuthHandler()
|
||||||
const app = express();
|
const app = express();
|
||||||
|
app.post("/webhook", express.raw({ type: "application/json" }), PaymentsHandler.webhook)
|
||||||
app.use(cors({ origin: '*' }));
|
app.use(cors({ origin: '*' }));
|
||||||
app.use(express.json());
|
app.use(express.json());
|
||||||
app.use(express.urlencoded({ extended: true }));
|
app.use(express.urlencoded({ extended: true }));
|
||||||
app.use(cookieParser());
|
app.use(cookieParser());
|
||||||
|
app.use(useragent.express());
|
||||||
|
|
||||||
app.use(this.logRequest);
|
app.use(this.logRequest);
|
||||||
app.use(this.logResponse);
|
app.use(this.logResponse);
|
||||||
@@ -172,19 +184,19 @@ class Server {
|
|||||||
app.use('/', router);
|
app.use('/', router);
|
||||||
|
|
||||||
const server = http.createServer(app);
|
const server = http.createServer(app);
|
||||||
initWebSocket(server);
|
global.Socket = new Socket(server);
|
||||||
const PORT = 3003;
|
const PORT = 3003;
|
||||||
server.listen(PORT, () => {
|
server.listen(PORT, () => {
|
||||||
console.logclean("\n")
|
console.log("\n")
|
||||||
console.logclean(chalk.yellow("*************** Hyperia ***************"))
|
console.log(chalk.yellow("*************** Hyperia ***************"))
|
||||||
console.logclean(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
|
console.log(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
|
||||||
console.logclean(chalk.yellow("***************************************"))
|
console.log(chalk.yellow("***************************************"))
|
||||||
console.logclean("\n")
|
console.log("\n")
|
||||||
});
|
});
|
||||||
|
|
||||||
process.on('SIGINT', async () => {
|
process.on('SIGINT', async () => {
|
||||||
console.logclean(chalk.red('Closing server...'));
|
console.log(chalk.red('Closing server...'));
|
||||||
console.logclean(chalk.green('Database connection closed.'));
|
console.log(chalk.green('Database connection closed.'));
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -192,38 +204,4 @@ class Server {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const _log = console.log;
|
|
||||||
|
|
||||||
console.logclean = function (...args) {
|
|
||||||
_log.call(console, ...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log = function (...args) {
|
|
||||||
// // Get the caller location
|
|
||||||
// const stack = new Error().stack.split("\n")[2];
|
|
||||||
// const match = stack.match(/(\/.*:\d+:\d+)/);
|
|
||||||
// let location = match ? match[1] : "unknown";
|
|
||||||
|
|
||||||
// // Remove CWD prefix
|
|
||||||
// while (location.startsWith("/")) {
|
|
||||||
// location = location.slice(1);
|
|
||||||
// }
|
|
||||||
// location = "/" + location
|
|
||||||
|
|
||||||
// let cwd = process.cwd();
|
|
||||||
// if (location.startsWith(cwd)) {
|
|
||||||
// location = location.slice(cwd.length);
|
|
||||||
// if (location.startsWith("/")) location = location.slice(1);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// _log.call(console, `[${location}]`, ...args);
|
|
||||||
// };
|
|
||||||
|
|
||||||
global.ServerError = class extends Error {
|
|
||||||
constructor(status, msg) {
|
|
||||||
super(msg);
|
|
||||||
this.status = status;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const server = new Server()
|
const server = new Server()
|
||||||
68
server/payments.js
Normal file
68
server/payments.js
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
const Stripe = require("stripe")
|
||||||
|
const dotenv = require("dotenv")
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const stripe = new Stripe(process.env.STRIPE_SECRET);
|
||||||
|
|
||||||
|
export default class PaymentsHandler {
|
||||||
|
|
||||||
|
static async danceTicket(req, res) {
|
||||||
|
try {
|
||||||
|
const session = await stripe.checkout.sessions.create({
|
||||||
|
mode: "payment",
|
||||||
|
payment_method_types: ["card"],
|
||||||
|
metadata: {
|
||||||
|
productId: "austin_winter_ball_2025_ticket"
|
||||||
|
},
|
||||||
|
line_items: [
|
||||||
|
{
|
||||||
|
price_data: {
|
||||||
|
currency: "usd",
|
||||||
|
product_data: {
|
||||||
|
name: "Hyperia Winter Ball"
|
||||||
|
},
|
||||||
|
unit_amount: 3500
|
||||||
|
},
|
||||||
|
quantity: 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
success_url: `${process.env.PROTOCOL + process.env.BASE_URL}/success`,
|
||||||
|
cancel_url: `${process.env.PROTOCOL + process.env.BASE_URL}/events`
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({ url: session.url });
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
res.status(500).json({ error: "Something went wrong." });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static webhook = (req, res) => {
|
||||||
|
const sig = req.headers["stripe-signature"];
|
||||||
|
|
||||||
|
try {
|
||||||
|
const event = stripe.webhooks.constructEvent(
|
||||||
|
req.body,
|
||||||
|
sig,
|
||||||
|
process.env.WEBHOOK_SECRET
|
||||||
|
);
|
||||||
|
|
||||||
|
if (event.type === "checkout.session.completed") {
|
||||||
|
const session = event.data.object;
|
||||||
|
let toStore = {
|
||||||
|
"product": session.metadata.productId,
|
||||||
|
"email": session.customer_details.email,
|
||||||
|
"name": session.customer_details.name,
|
||||||
|
"time": global.currentTime(),
|
||||||
|
"amount": session.amount_total,
|
||||||
|
}
|
||||||
|
global.db.payments.add(toStore)
|
||||||
|
}
|
||||||
|
|
||||||
|
res.sendStatus(200);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
res.sendStatus(400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
server/util.js
Normal file
24
server/util.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
global.ServerError = class extends Error {
|
||||||
|
constructor(status, msg) {
|
||||||
|
super(msg);
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
global.currentTime = function () {
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(now.getDate()).padStart(2, "0");
|
||||||
|
const year = now.getFullYear();
|
||||||
|
|
||||||
|
let hours = now.getHours();
|
||||||
|
const ampm = hours >= 12 ? "pm" : "am";
|
||||||
|
hours = hours % 12 || 12; // convert to 12-hour format
|
||||||
|
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, "0");
|
||||||
|
const seconds = String(now.getSeconds()).padStart(2, "0");
|
||||||
|
const ms = String(now.getMilliseconds()).padStart(4, "0"); // 4-digit like "5838"
|
||||||
|
|
||||||
|
return `${month}.${day}.${year}-${hours}:${minutes}:${seconds}${ms}${ampm}`;
|
||||||
|
}
|
||||||
31
server/ws.js
31
server/ws.js
@@ -1,31 +0,0 @@
|
|||||||
const { WebSocket, WebSocketServer } = require('ws');
|
|
||||||
|
|
||||||
let wss;
|
|
||||||
|
|
||||||
export function initWebSocket(server) {
|
|
||||||
wss = new WebSocketServer({ server });
|
|
||||||
|
|
||||||
wss.on('connection', (ws, req) => {
|
|
||||||
console.log('✅ New WebSocket client connected');
|
|
||||||
|
|
||||||
ws.on('close', () => {
|
|
||||||
console.log('Client disconnected');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('WebSocket server initialized');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Broadcast a message to all connected clients
|
|
||||||
export function broadcast(reqType, data) {
|
|
||||||
if (!wss) return;
|
|
||||||
|
|
||||||
const payload = typeof data === 'string' ? data : JSON.stringify(data);
|
|
||||||
const message = `${reqType}|${payload}`;
|
|
||||||
|
|
||||||
wss.clients.forEach(client => {
|
|
||||||
if (client.readyState === WebSocket.OPEN) {
|
|
||||||
client.send(message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
43
server/ws/handlers/ForumHandler.js
Normal file
43
server/ws/handlers/ForumHandler.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
const sendSchema = z.object({
|
||||||
|
forum: z.string(),
|
||||||
|
text: z.string(),
|
||||||
|
})
|
||||||
|
.strict()
|
||||||
|
|
||||||
|
const getSchema = z.object({
|
||||||
|
forum: z.string(),
|
||||||
|
number: z.number()
|
||||||
|
})
|
||||||
|
.strict()
|
||||||
|
|
||||||
|
|
||||||
|
export default class ForumHandler {
|
||||||
|
static handleSend(msg, ws) {
|
||||||
|
try {
|
||||||
|
global.db.posts.add(msg.text, msg.forum, ws.userEmail)
|
||||||
|
global.Socket.broadcast({event: "new-post", app: "FORUM", forum: msg.forum, msg: this.handleGet({forum: msg.forum, number: 100})})
|
||||||
|
return {success: true}
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static handleGet(msg) {
|
||||||
|
let data = global.db.posts.get(msg.forum, msg.number)
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
static handle(operation, msg, ws) {
|
||||||
|
switch(operation) {
|
||||||
|
case "SEND":
|
||||||
|
if(!sendSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
|
||||||
|
return this.handleSend(msg, ws)
|
||||||
|
case "GET":
|
||||||
|
if(!getSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
|
||||||
|
return this.handleGet(msg)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
40
server/ws/handlers/MessagesHandler.js
Normal file
40
server/ws/handlers/MessagesHandler.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
const { z } = require("zod")
|
||||||
|
|
||||||
|
const sendSchema = z.object({
|
||||||
|
conversation: z.string(),
|
||||||
|
text: z.string(),
|
||||||
|
})
|
||||||
|
.strict()
|
||||||
|
|
||||||
|
export default class MessagesHandler {
|
||||||
|
|
||||||
|
static handleSend(msg, ws) {
|
||||||
|
let user = global.db.members.getByEmail(ws.userEmail)
|
||||||
|
let convo = global.db.conversations.get(msg.conversation)
|
||||||
|
if(convo.between.includes(`MEMBER-${user.id}`)) {
|
||||||
|
global.db.messages.add(msg.conversation, msg.text, `MEMBER-${user.id}`)
|
||||||
|
global.Socket.broadcast({event: "new-message", app: "MESSAGES", msg: {conversationID: convo.id, messages: global.db.messages.getByConversation(`CONVERSATION-${msg.conversation}`)}})
|
||||||
|
|
||||||
|
} else {
|
||||||
|
throw new Error("Can't add to a conversation user is not a part of!")
|
||||||
|
}
|
||||||
|
return {success: true}
|
||||||
|
}
|
||||||
|
|
||||||
|
static handleGet(ws) {
|
||||||
|
let user = global.db.members.getByEmail(ws.userEmail)
|
||||||
|
let data = global.db.conversations.getByMember(`MEMBER-${user.id}`)
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
static handle(operation, msg, ws) {
|
||||||
|
switch(operation) {
|
||||||
|
case "GET":
|
||||||
|
return this.handleGet(ws)
|
||||||
|
case "SEND":
|
||||||
|
if(!sendSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
|
||||||
|
return this.handleSend(msg, ws)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
108
server/ws/ws.js
Normal file
108
server/ws/ws.js
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
const { WebSocket, WebSocketServer } = require('ws');
|
||||||
|
const { z } = require("zod")
|
||||||
|
const jwt = require('jsonwebtoken');
|
||||||
|
import ForumHandler from "./handlers/ForumHandler.js"
|
||||||
|
import MessagesHandler from "./handlers/MessagesHandler.js"
|
||||||
|
|
||||||
|
export default class Socket {
|
||||||
|
wss;
|
||||||
|
messageSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
app: z.string(),
|
||||||
|
operation: z.string().optional(),
|
||||||
|
msg: z.union([
|
||||||
|
z.object({}).passthrough(), // allows any object
|
||||||
|
z.array(z.any()) // allows any array
|
||||||
|
]).optional()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => {
|
||||||
|
if (data.operation !== "GET" && data.msg === undefined) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
path: ["msg"],
|
||||||
|
message: "msg is required when operation is not GET"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.strict()
|
||||||
|
|
||||||
|
constructor(server) {
|
||||||
|
this.wss = new WebSocketServer({ server });
|
||||||
|
|
||||||
|
this.wss.on('connection', (ws, req) => {
|
||||||
|
console.log('✅ New WebSocket client connected');
|
||||||
|
|
||||||
|
function parseCookies(cookieHeader = "") {
|
||||||
|
return Object.fromEntries(
|
||||||
|
cookieHeader.split(";").map(c => {
|
||||||
|
const [key, ...v] = c.trim().split("=");
|
||||||
|
return [key, decodeURIComponent(v.join("="))];
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cookies = parseCookies(req.headers.cookie);
|
||||||
|
const token = cookies.auth_token;
|
||||||
|
if (!token) throw new Error("No auth token");
|
||||||
|
const payload = jwt.verify(token, process.env.JWT_SECRET);
|
||||||
|
ws.userEmail = payload.email;
|
||||||
|
|
||||||
|
ws.on('message', (msg) => {
|
||||||
|
this.handleMessage(msg, ws);
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.on('close', () => {
|
||||||
|
console.log('Client disconnected');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('WebSocket server initialized');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build a system where the ws obj is updated every time on navigate, so it already has context
|
||||||
|
// this way, we can only send broadcast messages to clients that actually have that app / subapp open
|
||||||
|
handleMessage = (msg, ws) => {
|
||||||
|
try {
|
||||||
|
const text = msg.toString();
|
||||||
|
const req = JSON.parse(text);
|
||||||
|
if(!this.messageSchema.safeParse(req).success) throw new Error("Socket.handleMessage: Incoming ws message has incorrect format!")
|
||||||
|
|
||||||
|
let responseData;
|
||||||
|
switch (req.app) {
|
||||||
|
case "FORUM":
|
||||||
|
responseData = ForumHandler.handle(req.operation, req.msg, ws)
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "MESSAGES":
|
||||||
|
responseData = MessagesHandler.handle(req.operation, req.msg, ws)
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
console.error("unknown ws message")
|
||||||
|
}
|
||||||
|
|
||||||
|
let response = {
|
||||||
|
...req
|
||||||
|
}
|
||||||
|
response.msg = responseData
|
||||||
|
|
||||||
|
if(!this.messageSchema.safeParse(response).success) throw new Error("Socket.handleMessage: Outgoing ws message has incorrect format!")
|
||||||
|
ws.send(JSON.stringify(response))
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Invalid WS message:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
broadcast(event) {
|
||||||
|
if (!this.wss) return;
|
||||||
|
|
||||||
|
let message = JSON.stringify(event)
|
||||||
|
|
||||||
|
this.wss.clients.forEach(ws => {
|
||||||
|
if (ws.readyState === WebSocket.OPEN) {
|
||||||
|
ws.send(message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,12 @@
|
|||||||
/*
|
/*
|
||||||
Sam Russell
|
Sam Russell
|
||||||
Captured Sun
|
Captured Sun
|
||||||
|
12.26.25 - State for arrays, nested objects. State for stacks (Shadow-only)
|
||||||
|
12.17.25 - [Hyperia] - adding width, height functions. adding "e" to onClick. adding the non-window $$ funcs.
|
||||||
|
12.16.25 - [comalyr] - State
|
||||||
|
11.25.25.1 - Added minHeight and minWidth to be counted as numerical styles
|
||||||
|
11.25.25 - Added onChange for check boxes, added setQuery / onQueryChanged for easy filtering
|
||||||
|
11.24.25 - Fixing onClick because it was reversed, adding event to onHover params
|
||||||
11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
|
11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
|
||||||
11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
|
11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
|
||||||
11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
|
11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
|
||||||
@@ -28,6 +34,23 @@ window.addEventListener('popstate', () => {
|
|||||||
window.dispatchEvent(new Event('navigate'));
|
window.dispatchEvent(new Event('navigate'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.setQuery = function(key, value) {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
const params = url.searchParams;
|
||||||
|
|
||||||
|
if (value === null || value === undefined) {
|
||||||
|
params.delete(key);
|
||||||
|
} else {
|
||||||
|
params.set(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const newUrl = url.toString();
|
||||||
|
history.replaceState(null, "", newUrl);
|
||||||
|
window.dispatchEvent(new Event('query-changed'));
|
||||||
|
|
||||||
|
return newUrl;
|
||||||
|
};
|
||||||
|
|
||||||
window.navigateTo = function(url) {
|
window.navigateTo = function(url) {
|
||||||
window.dispatchEvent(new Event('navigate'));
|
window.dispatchEvent(new Event('navigate'));
|
||||||
window.history.pushState({}, '', url);
|
window.history.pushState({}, '', url);
|
||||||
@@ -48,6 +71,12 @@ window.$ = function(selector, el = document) {
|
|||||||
window.$$ = function(selector, el = document) {
|
window.$$ = function(selector, el = document) {
|
||||||
return Array.from(el.querySelectorAll(selector))
|
return Array.from(el.querySelectorAll(selector))
|
||||||
}
|
}
|
||||||
|
HTMLElement.prototype.$$ = function(selector) {
|
||||||
|
return window.$$(selector, this)
|
||||||
|
}
|
||||||
|
DocumentFragment.prototype.$$ = function(selector) {
|
||||||
|
return window.$$(selector, this)
|
||||||
|
}
|
||||||
|
|
||||||
/* CONSOLE */
|
/* CONSOLE */
|
||||||
|
|
||||||
@@ -143,6 +172,7 @@ Object.defineProperty(Array.prototype, 'last', {
|
|||||||
|
|
||||||
window.quill = {
|
window.quill = {
|
||||||
rendering: [],
|
rendering: [],
|
||||||
|
lastState: null,
|
||||||
|
|
||||||
render: (el) => {
|
render: (el) => {
|
||||||
if(el instanceof Shadow) {
|
if(el instanceof Shadow) {
|
||||||
@@ -173,19 +203,6 @@ window.quill = {
|
|||||||
quill.rendering.pop()
|
quill.rendering.pop()
|
||||||
},
|
},
|
||||||
|
|
||||||
loadPage: () => {
|
|
||||||
let URL = window.location.pathname
|
|
||||||
if(!window.routes[URL]) {
|
|
||||||
throw new Error("No URL for this route: ", URL)
|
|
||||||
}
|
|
||||||
|
|
||||||
let pageClass = window[routes[URL]]
|
|
||||||
document.title = pageClass.title ?? document.title
|
|
||||||
document.body.innerHTML = ""
|
|
||||||
let page = new pageClass()
|
|
||||||
quill.render(page)
|
|
||||||
},
|
|
||||||
|
|
||||||
isStack: (el) => {
|
isStack: (el) => {
|
||||||
return el.classList.contains("HStack") || el.classList.contains("ZStack") || el.classList.contains("VStack")
|
return el.classList.contains("HStack") || el.classList.contains("ZStack") || el.classList.contains("VStack")
|
||||||
},
|
},
|
||||||
@@ -196,6 +213,7 @@ window.Shadow = class extends HTMLElement {
|
|||||||
super()
|
super()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.register = (el, tagname) => {
|
window.register = (el, tagname) => {
|
||||||
if (typeof el.prototype.render !== 'function') {
|
if (typeof el.prototype.render !== 'function') {
|
||||||
throw new Error("Element must have a render: " + el.prototype.constructor.name)
|
throw new Error("Element must have a render: " + el.prototype.constructor.name)
|
||||||
@@ -210,6 +228,75 @@ window.register = (el, tagname) => {
|
|||||||
|
|
||||||
window[el.prototype.constructor.name] = function (...params) {
|
window[el.prototype.constructor.name] = function (...params) {
|
||||||
let instance = new el(...params)
|
let instance = new el(...params)
|
||||||
|
if(instance.state) {
|
||||||
|
const proxyCache = new WeakMap();
|
||||||
|
|
||||||
|
function reactive(value, path=[]) {
|
||||||
|
if (value && typeof value === "object") {
|
||||||
|
if (proxyCache.has(value)) return proxyCache.get(value);
|
||||||
|
|
||||||
|
const p = new Proxy(value, createHandlers(path));
|
||||||
|
proxyCache.set(value, p);
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isNumericKey(prop) {
|
||||||
|
return typeof prop === "string" && prop !== "" && String(+prop) === prop;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createHandlers(path) {
|
||||||
|
return {
|
||||||
|
get(target, prop, receiver) {
|
||||||
|
if (typeof prop === "symbol") {
|
||||||
|
return Reflect.get(target, prop, receiver);
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextPath = (Array.isArray(target) && !isNumericKey(prop)) ? path : path.concat(prop) // To filter out arr.length, arr.map, arr.forEach, etc.
|
||||||
|
quill.lastState = nextPath.join(".");
|
||||||
|
|
||||||
|
const v = Reflect.get(target, prop, receiver);
|
||||||
|
return reactive(v, nextPath);
|
||||||
|
},
|
||||||
|
|
||||||
|
set(target, prop, value, receiver) {
|
||||||
|
const oldLength = Array.isArray(target) ? target.length : undefined;
|
||||||
|
const oldValue = target[prop];
|
||||||
|
if (oldValue === value) return true;
|
||||||
|
|
||||||
|
const result = Reflect.set(target, prop, value, receiver);
|
||||||
|
|
||||||
|
let changedPath = (Array.isArray(target) && (!isNumericKey(prop) || target.length !== oldLength)) ? path : path.concat(prop).join("."); // To filter out arr.length, arr.map, arr.forEach, and also a push/pop/unshift.
|
||||||
|
const watchers = instance.stateWatchers[changedPath];
|
||||||
|
|
||||||
|
if (watchers) {
|
||||||
|
watchers.forEach(cb => cb());
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let proxy = reactive(instance.state)
|
||||||
|
|
||||||
|
Object.defineProperty(instance, "state", {
|
||||||
|
value: proxy,
|
||||||
|
writable: false,
|
||||||
|
configurable: false,
|
||||||
|
enumerable: true
|
||||||
|
});
|
||||||
|
|
||||||
|
let stateWatchers = {}
|
||||||
|
Object.keys(instance.state).forEach((key) => stateWatchers[key] = [])
|
||||||
|
Object.defineProperty(instance, "stateWatchers", {
|
||||||
|
value: stateWatchers,
|
||||||
|
writable: false,
|
||||||
|
configurable: false,
|
||||||
|
enumerable: true
|
||||||
|
});
|
||||||
|
}
|
||||||
quill.render(instance)
|
quill.render(instance)
|
||||||
return instance
|
return instance
|
||||||
}
|
}
|
||||||
@@ -273,6 +360,8 @@ function extendHTMLElementWithStyleSetters() {
|
|||||||
case "height":
|
case "height":
|
||||||
case "maxWidth":
|
case "maxWidth":
|
||||||
case "maxHeight":
|
case "maxHeight":
|
||||||
|
case "minWidth":
|
||||||
|
case "minHeight":
|
||||||
|
|
||||||
case "left":
|
case "left":
|
||||||
case "top":
|
case "top":
|
||||||
@@ -292,6 +381,7 @@ function extendHTMLElementWithStyleSetters() {
|
|||||||
case "marginRight":
|
case "marginRight":
|
||||||
|
|
||||||
case "textUnderlineOffset":
|
case "textUnderlineOffset":
|
||||||
|
case "letterSpacing":
|
||||||
|
|
||||||
return "unit-number"
|
return "unit-number"
|
||||||
|
|
||||||
@@ -311,24 +401,27 @@ function extendHTMLElementWithStyleSetters() {
|
|||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "unit-number":
|
case "unit-number":
|
||||||
HTMLElement.prototype[prop] = function(value, unit = "px") {
|
HTMLElement.prototype[prop] = StyleFunction(function(value, unit = "px") {
|
||||||
if ((typeof value !== "number" || isNaN(value)) && value !== "auto") {
|
|
||||||
throw new Error(`Invalid value for ${prop}: ${value}. Expected a number.`);
|
|
||||||
}
|
|
||||||
if(value === "auto") {
|
if(value === "auto") {
|
||||||
this.style[prop] = value
|
this.style[prop] = value
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
this.style[prop] = value + unit;
|
this.style[prop] = value + unit;
|
||||||
|
if (value !== "" && this.style[prop] === "") {
|
||||||
|
throw new Error(`Invalid CSS value for ${prop}: ` + value + unit);
|
||||||
|
}
|
||||||
return this;
|
return this;
|
||||||
};
|
});
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "string":
|
case "string":
|
||||||
HTMLElement.prototype[prop] = function(value) {
|
HTMLElement.prototype[prop] = StyleFunction(function(value) {
|
||||||
this.style[prop] = value;
|
this.style[prop] = value;
|
||||||
|
if (value !== "" && this.style[prop] === "") {
|
||||||
|
throw new Error(`Invalid CSS value for ${prop}: ` + value);
|
||||||
|
}
|
||||||
return this;
|
return this;
|
||||||
};
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -336,46 +429,86 @@ function extendHTMLElementWithStyleSetters() {
|
|||||||
|
|
||||||
extendHTMLElementWithStyleSetters();
|
extendHTMLElementWithStyleSetters();
|
||||||
|
|
||||||
|
HTMLElement.prototype.addStateWatcher = function(field, cb) {
|
||||||
|
let parent = this
|
||||||
|
while(!(parent instanceof Shadow)) {
|
||||||
|
parent = parent.parentNode
|
||||||
|
}
|
||||||
|
parent.stateWatchers[field].push(cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Currently only works for one state variable in the function
|
||||||
|
// Could probably be fixed by just making lastState an array and clearing it out every function call?
|
||||||
|
HTMLElement.prototype.setUpState = function(styleFunc, cb) {
|
||||||
|
let format = (value) => {return Array.isArray(value) ? value : [value]}
|
||||||
|
|
||||||
|
// 1. Run the callback to get the style argument and also update lastState
|
||||||
|
let styleArgs = format(cb())
|
||||||
|
|
||||||
|
// 2. Check if lastState has really been updated. If not, the user-provided cb did not access valid state
|
||||||
|
if(!quill.lastState) {
|
||||||
|
throw new Error("Quill: style state function does not access valid state")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Construct function to run when state changes
|
||||||
|
let onStateChange = () => {
|
||||||
|
styleFunc.call(this, ...format(cb()))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Now listen for the state to change
|
||||||
|
this.addStateWatcher(quill.lastState, onStateChange)
|
||||||
|
|
||||||
|
// 5. Run the original function again, this time with the actual arguments
|
||||||
|
quill.lastState = null
|
||||||
|
styleFunc.call(this, ...styleArgs)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StyleFunction(func) {
|
||||||
|
let styleFunction = function(value, unit = "px") {
|
||||||
|
if(typeof value === 'function') {
|
||||||
|
this.setUpState(styleFunction, value)
|
||||||
|
return this
|
||||||
|
} else {
|
||||||
|
func.call(this, value, unit); // ".call" ensures that "this" is correct
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return styleFunction
|
||||||
|
}
|
||||||
|
|
||||||
HTMLElement.prototype.styles = function(cb) {
|
HTMLElement.prototype.styles = function(cb) {
|
||||||
cb.call(this, this)
|
cb.call(this, this)
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
|
/* Type 1 */
|
||||||
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
|
||||||
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
HTMLElement.prototype.paddingVertical = StyleFunction(function(value, unit = "px") {
|
||||||
this.style.paddingTop = value + unit
|
this.style.paddingTop = value + unit
|
||||||
this.style.paddingBottom = value + unit
|
this.style.paddingBottom = value + unit
|
||||||
return this
|
return this
|
||||||
}
|
})
|
||||||
|
|
||||||
HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
|
HTMLElement.prototype.paddingHorizontal = StyleFunction(function(value, unit = "px") {
|
||||||
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
|
||||||
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
|
||||||
this.style.paddingRight = value + unit
|
this.style.paddingRight = value + unit
|
||||||
this.style.paddingLeft = value + unit
|
this.style.paddingLeft = value + unit
|
||||||
return this
|
return this
|
||||||
}
|
})
|
||||||
|
|
||||||
HTMLElement.prototype.marginVertical = function(value, unit = "px") {
|
HTMLElement.prototype.marginVertical = StyleFunction(function(value, unit = "px") {
|
||||||
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
|
||||||
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
|
||||||
this.style.marginTop = value + unit
|
this.style.marginTop = value + unit
|
||||||
this.style.marginBottom = value + unit
|
this.style.marginBottom = value + unit
|
||||||
return this
|
return this
|
||||||
}
|
})
|
||||||
|
|
||||||
HTMLElement.prototype.marginHorizontal = function(value, unit = "px") {
|
HTMLElement.prototype.marginHorizontal = StyleFunction(function(value, unit = "px") {
|
||||||
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
|
||||||
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
|
||||||
this.style.marginRight = value + unit
|
this.style.marginRight = value + unit
|
||||||
this.style.marginLeft = value + unit
|
this.style.marginLeft = value + unit
|
||||||
return this
|
return this
|
||||||
}
|
})
|
||||||
|
|
||||||
HTMLElement.prototype.fontSize = function(value, unit = "px") {
|
HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
|
||||||
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
|
||||||
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
|
||||||
|
|
||||||
switch(value) {
|
switch(value) {
|
||||||
case "6xl":
|
case "6xl":
|
||||||
@@ -419,6 +552,27 @@ HTMLElement.prototype.fontSize = function(value, unit = "px") {
|
|||||||
}
|
}
|
||||||
this.style.fontSize = value + unit
|
this.style.fontSize = value + unit
|
||||||
return this
|
return this
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
HTMLElement.prototype.width = function(value, unit = "px") {
|
||||||
|
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
||||||
|
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
||||||
|
this.style.width = value + unit
|
||||||
|
if(window.getComputedStyle(this).display === "inline") {
|
||||||
|
this.style.display = "block"
|
||||||
|
}
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
HTMLElement.prototype.height = function(value, unit = "px") {
|
||||||
|
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
|
||||||
|
throw new Error(`Invalid value: ${value}. Expected a number.`);
|
||||||
|
this.style.height = value + unit
|
||||||
|
if(window.getComputedStyle(this).display === "inline") {
|
||||||
|
this.style.display = "block"
|
||||||
|
}
|
||||||
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkPositionType(el) {
|
function checkPositionType(el) {
|
||||||
@@ -496,7 +650,6 @@ HTMLElement.prototype.alignVertical = function (value) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (direction === "column" || direction === "column-reverse") {
|
if (direction === "column" || direction === "column-reverse") {
|
||||||
console.log("using justify")
|
|
||||||
this.style.justifyContent = value;
|
this.style.justifyContent = value;
|
||||||
} else {
|
} else {
|
||||||
this.style.alignItems = value;
|
this.style.alignItems = value;
|
||||||
@@ -640,7 +793,7 @@ window.form = function(cb) {
|
|||||||
return el
|
return el
|
||||||
}
|
}
|
||||||
|
|
||||||
window.input = function(placeholder, width, height) {
|
window.input = function(placeholder = "", width, height) {
|
||||||
let el = document.createElement("input")
|
let el = document.createElement("input")
|
||||||
el.placeholder = placeholder
|
el.placeholder = placeholder
|
||||||
el.style.width = width
|
el.style.width = width
|
||||||
@@ -649,14 +802,18 @@ window.input = function(placeholder, width, height) {
|
|||||||
return el
|
return el
|
||||||
}
|
}
|
||||||
|
|
||||||
window.label = function(text) {
|
window.label = function(inside) {
|
||||||
let el = document.createElement("label")
|
let el = document.createElement("label")
|
||||||
el.innerText = text
|
if(typeof inside === "string") {
|
||||||
|
el.innerText = inside
|
||||||
|
} else {
|
||||||
|
el.render = inside
|
||||||
|
}
|
||||||
quill.render(el)
|
quill.render(el)
|
||||||
return el
|
return el
|
||||||
}
|
}
|
||||||
|
|
||||||
window.textarea = function(placeholder) {
|
window.textarea = function(placeholder = "") {
|
||||||
let el = document.createElement("textarea")
|
let el = document.createElement("textarea")
|
||||||
el.placeholder = placeholder
|
el.placeholder = placeholder
|
||||||
quill.render(el)
|
quill.render(el)
|
||||||
@@ -666,61 +823,47 @@ window.textarea = function(placeholder) {
|
|||||||
|
|
||||||
/* STACKS */
|
/* STACKS */
|
||||||
|
|
||||||
window.VStack = function (cb = () => {}) {
|
handleStack = function(cb, name, styles="") {
|
||||||
let styles = `
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`
|
|
||||||
let nowRendering = quill.rendering[quill.rendering.length-1]
|
let nowRendering = quill.rendering[quill.rendering.length-1]
|
||||||
if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
|
if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
|
||||||
nowRendering.style.cssText += styles
|
nowRendering.style.cssText += styles
|
||||||
nowRendering.classList.add("VStack")
|
nowRendering.classList.add(name)
|
||||||
cb()
|
cb()
|
||||||
|
if(quill.lastState) {
|
||||||
|
nowRendering.addStateWatcher(quill.lastState, () => {
|
||||||
|
nowRendering.innerHTML = ""
|
||||||
|
cb()
|
||||||
|
})
|
||||||
|
}
|
||||||
return nowRendering
|
return nowRendering
|
||||||
|
} else {
|
||||||
|
let div = document.createElement("div")
|
||||||
|
div.classList.add(name)
|
||||||
|
div.style.cssText += styles
|
||||||
|
div.render = cb
|
||||||
|
quill.render(div)
|
||||||
|
return div
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let div = document.createElement("div")
|
window.VStack = function (cb = () => {}) {
|
||||||
div.classList.add("VStack")
|
let styles = `
|
||||||
div.style.cssText += styles
|
display: flex;
|
||||||
div.render = cb
|
flex-direction: column;
|
||||||
quill.render(div)
|
`
|
||||||
return div
|
return handleStack(cb, "VStack", styles)
|
||||||
}
|
}
|
||||||
|
|
||||||
window.HStack = function (cb = () => {}) {
|
window.HStack = function (cb = () => {}) {
|
||||||
let styles = `
|
let styles = `
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
`;
|
`;
|
||||||
let nowRendering = quill.rendering[quill.rendering.length - 1];
|
return handleStack(cb, "HStack", styles)
|
||||||
if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
|
|
||||||
nowRendering.style.cssText += styles;
|
|
||||||
nowRendering.classList.add("HStack")
|
|
||||||
cb();
|
|
||||||
return nowRendering;
|
|
||||||
}
|
|
||||||
|
|
||||||
let div = document.createElement("div");
|
|
||||||
div.classList.add("HStack");
|
|
||||||
div.style.cssText += styles;
|
|
||||||
div.render = cb;
|
|
||||||
quill.render(div);
|
|
||||||
return div;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
window.ZStack = function (cb = () => {}) {
|
window.ZStack = function (cb = () => {}) {
|
||||||
let nowRendering = quill.rendering[quill.rendering.length - 1];
|
return handleStack(cb, "ZStack")
|
||||||
if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
|
|
||||||
nowRendering.classList.add("ZStack")
|
|
||||||
cb();
|
|
||||||
return nowRendering;
|
|
||||||
}
|
|
||||||
|
|
||||||
let div = document.createElement("div");
|
|
||||||
div.classList.add("ZStack");
|
|
||||||
div.render = cb;
|
|
||||||
quill.render(div);
|
|
||||||
return div;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/* SHAPES */
|
/* SHAPES */
|
||||||
@@ -824,8 +967,8 @@ HTMLElement.prototype.onAppear = function(func) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
HTMLElement.prototype.onClick = function(func) {
|
HTMLElement.prototype.onClick = function(func) {
|
||||||
const onMouseDown = () => func.call(this, true);
|
const onMouseDown = (e) => func.call(this, false, e);
|
||||||
const onMouseUp = () => func.call(this, false);
|
const onMouseUp = (e) => func.call(this, true, e);
|
||||||
this._storeListener("mousedown", onMouseDown);
|
this._storeListener("mousedown", onMouseDown);
|
||||||
this._storeListener("mouseup", onMouseUp);
|
this._storeListener("mouseup", onMouseUp);
|
||||||
return this;
|
return this;
|
||||||
@@ -847,8 +990,8 @@ HTMLElement.prototype.onRightClick = function(func) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
HTMLElement.prototype.onHover = function(cb) {
|
HTMLElement.prototype.onHover = function(cb) {
|
||||||
const onEnter = () => cb.call(this, true);
|
const onEnter = (e) => cb.call(this, true, e);
|
||||||
const onLeave = () => cb.call(this, false);
|
const onLeave = (e) => cb.call(this, false, e);
|
||||||
this._storeListener("mouseover", onEnter);
|
this._storeListener("mouseover", onEnter);
|
||||||
this._storeListener("mouseleave", onLeave);
|
this._storeListener("mouseleave", onLeave);
|
||||||
return this;
|
return this;
|
||||||
@@ -877,6 +1020,14 @@ HTMLElement.prototype.onInput = function(cb) {
|
|||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
HTMLElement.prototype.onChange = function(cb) {
|
||||||
|
if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
|
||||||
|
throw new Error("Can't put input event on non-input element!")
|
||||||
|
this._storeListener("change", cb);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
HTMLElement.prototype.onSubmit = function(cb) {
|
HTMLElement.prototype.onSubmit = function(cb) {
|
||||||
if(!this.matches('form'))
|
if(!this.matches('form'))
|
||||||
throw new Error("Can't put form event on non-form element!")
|
throw new Error("Can't put form event on non-form element!")
|
||||||
@@ -900,17 +1051,48 @@ HTMLElement.prototype.onTap = function(cb) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/* WHY THIS LISTENER IS THE WAY IT IS:
|
/* WHY THIS LISTENER IS THE WAY IT IS:
|
||||||
- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
|
- We can't just put a listener on the element, because a window "navigate" event won't trigger it
|
||||||
- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
|
- We can't just put a listener on the window, because the "this" variable will only refer to the window
|
||||||
- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
|
- And, if we try to re-add that scope using bind(), it makes the return value of .toString() unreadable, which means we cannot detect duplicate listeners.
|
||||||
- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
|
- Therefore, we attach a global navigate event to the window, and each navigate event in this array, and manually trigger each event when the global one fires.
|
||||||
*/
|
*/
|
||||||
navigateListeners = []
|
navigateListeners = []
|
||||||
|
window.addEventListener("navigate", () => {
|
||||||
|
for(entry of navigateListeners) {
|
||||||
|
entry.el.dispatchEvent(new CustomEvent("navigate"))
|
||||||
|
}
|
||||||
|
})
|
||||||
HTMLElement.prototype.onNavigate = function(cb) {
|
HTMLElement.prototype.onNavigate = function(cb) {
|
||||||
this._storeListener("navigate", cb);
|
this._storeListener("navigate", cb);
|
||||||
|
|
||||||
let found = false
|
let found = false
|
||||||
|
let elementIndex = Array.from(this.parentNode.children).indexOf(this)
|
||||||
for(entry of navigateListeners) {
|
for(entry of navigateListeners) {
|
||||||
|
if(
|
||||||
|
entry.cb.toString() === cb.toString()
|
||||||
|
&& entry.index === elementIndex
|
||||||
|
&& this.nodeName === entry.el.nodeName
|
||||||
|
) {
|
||||||
|
found = true
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(found === false) {
|
||||||
|
navigateListeners.push({el: this, cb: cb, index: elementIndex})
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Same principle applies
|
||||||
|
*/
|
||||||
|
queryListeners = []
|
||||||
|
HTMLElement.prototype.onQueryChanged = function(cb) {
|
||||||
|
this._storeListener("query-changed", cb);
|
||||||
|
|
||||||
|
let found = false
|
||||||
|
for(entry of queryListeners) {
|
||||||
if(entry.cb.toString() === cb.toString() &&
|
if(entry.cb.toString() === cb.toString() &&
|
||||||
this.nodeName === entry.el.nodeName) {
|
this.nodeName === entry.el.nodeName) {
|
||||||
found = true
|
found = true
|
||||||
@@ -918,14 +1100,14 @@ HTMLElement.prototype.onNavigate = function(cb) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(found === false) {
|
if(found === false) {
|
||||||
navigateListeners.push({el: this, cb: cb})
|
queryListeners.push({el: this, cb: cb})
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
window.addEventListener("navigate", () => {
|
window.addEventListener("query-changed", () => {
|
||||||
for(entry of navigateListeners) {
|
for(entry of queryListeners) {
|
||||||
entry.el.dispatchEvent(new CustomEvent("navigate"))
|
entry.el.dispatchEvent(new CustomEvent("query-changed"))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -4,13 +4,11 @@
|
|||||||
|
|
||||||
--tan: #FFDFB4;
|
--tan: #FFDFB4;
|
||||||
--gold: #F2B36F;
|
--gold: #F2B36F;
|
||||||
--purple: #251D44;
|
--divider: #bb7c36;
|
||||||
--green: #0857265c;
|
--green: #0857265c;
|
||||||
--red: #BC1C02;
|
--red: #BC1C02;
|
||||||
--brown: #812A18;
|
--brown: #812A18;
|
||||||
--darkbrown: #3f0808;
|
--darkbrown: #3f0808;
|
||||||
--orange: #FE9201;
|
|
||||||
--periwinkle: #655BAF;
|
|
||||||
|
|
||||||
--accent2: var(--green);
|
--accent2: var(--green);
|
||||||
}
|
}
|
||||||
@@ -19,7 +17,6 @@
|
|||||||
:root {
|
:root {
|
||||||
--main: var(--brown);
|
--main: var(--brown);
|
||||||
--accent: var(--gold);
|
--accent: var(--gold);
|
||||||
--dividerColor: var(--gold);
|
|
||||||
--accent2: var(--gold);
|
--accent2: var(--gold);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -46,12 +43,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0px;
|
||||||
font-family: 'Bona Nova', sans-serif;
|
font-family: 'Bona Nova', sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
background-color: var(--main);
|
background-color: var(--main);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
body, html{
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
|
|||||||
62
ui/_/code/ws/Connection.js
Normal file
62
ui/_/code/ws/Connection.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
class Connection {
|
||||||
|
connectionTries = 0
|
||||||
|
ws;
|
||||||
|
linkCreated;
|
||||||
|
wsStatus;
|
||||||
|
|
||||||
|
constructor(receiveCB) {
|
||||||
|
this.init()
|
||||||
|
this.receiveCB = receiveCB
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
if(window.location.hostname.includes("local")) {
|
||||||
|
this.ws = new WebSocket("ws://" + window.location.host)
|
||||||
|
} else {
|
||||||
|
this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
|
||||||
|
}
|
||||||
|
this.ws.addEventListener('open', () => {
|
||||||
|
this.connectionTries = 0
|
||||||
|
console.log("Websocket connection established.");
|
||||||
|
this.ws.addEventListener('message', this.receiveCB)
|
||||||
|
});
|
||||||
|
this.ws.addEventListener("close", () => {
|
||||||
|
this.checkOpen();
|
||||||
|
console.log('Websocket Closed')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async checkOpen() {
|
||||||
|
if (this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
|
||||||
|
this.connectionTries++
|
||||||
|
console.log('Reestablishing connection')
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sleep = (time) => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(resolve, time);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
send = (msg) => {
|
||||||
|
console.log("sending")
|
||||||
|
if (this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
this.ws.send(msg);
|
||||||
|
}
|
||||||
|
else if(this.connectionTries === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.send(msg)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('No websocket connection: Cannot send message');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connection
|
||||||
45
ui/_/code/ws/Socket.js
Normal file
45
ui/_/code/ws/Socket.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import Connection from "./Connection.js";
|
||||||
|
|
||||||
|
export default class Socket {
|
||||||
|
connection;
|
||||||
|
disabled = true;
|
||||||
|
requestID = 1;
|
||||||
|
pending = new Map();
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.connection = new Connection(this.receive);
|
||||||
|
}
|
||||||
|
|
||||||
|
isOpen() {
|
||||||
|
if(this.connection.checkOpen()) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
send(msg) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const id = (++this.requestID).toString();
|
||||||
|
this.pending.set(id, resolve);
|
||||||
|
this.connection.send(JSON.stringify({ id, ...msg }));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
receive = (event) => {
|
||||||
|
const msg = JSON.parse(event.data);
|
||||||
|
if (msg.id && this.pending.has(msg.id)) {
|
||||||
|
this.pending.get(msg.id)(msg);
|
||||||
|
this.pending.delete(msg.id);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.onBroadcast(msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onBroadcast(msg) {
|
||||||
|
window.dispatchEvent(new CustomEvent(msg.event, {
|
||||||
|
detail: msg.msg
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
8
ui/_/code/zod.js
Normal file
8
ui/_/code/zod.js
Normal file
File diff suppressed because one or more lines are too long
4
ui/_/icons/Column.svg
Normal file
4
ui/_/icons/Column.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.52366 0.0493342C4.88415 0.328928 1.12711 1.09781 0.253382 1.93659L0 2.18124V3.45688V4.73253L0.244645 4.9597C0.541713 5.23929 0.917417 5.43152 1.69504 5.69363C2.42023 5.94702 2.60372 5.96449 2.44645 5.77227C1.99211 5.22182 3.27649 4.584 5.7142 4.16461C8.0558 3.75395 9.35765 3.67532 13.5428 3.67532C17.728 3.67532 19.0299 3.75395 21.3715 4.16461C23.8354 4.584 25.0935 5.22182 24.6305 5.78974C24.5169 5.9208 24.5344 5.92954 24.7877 5.87712C25.3382 5.77227 26.4915 5.26551 26.7886 5.01212L27.0856 4.75001V3.45688V2.16376L26.7886 1.90164C25.9498 1.16771 22.8743 0.4862 18.7852 0.136707C17.3523 0.00564766 11.1401 -0.0467762 9.52366 0.0493342Z" fill="black"/>
|
||||||
|
<path d="M10.6246 5.30045C8.06453 5.44899 5.65304 5.82469 4.49971 6.26156C3.80073 6.52367 3.49492 6.83822 3.49492 7.27508V7.62458L4.0978 7.61584C4.63077 7.6071 4.73562 7.63331 4.93658 7.82553C5.06764 7.94786 5.20743 8.11386 5.25986 8.20997C5.31228 8.31482 5.33849 11.3292 5.32976 16.79L5.32102 25.2128H5.76662H6.20349V16.423C6.20349 6.60231 6.16854 7.15276 6.79762 6.89064C7.18207 6.73337 7.75873 6.80327 8.06453 7.03918C8.58877 7.45857 8.56256 6.82948 8.56256 18.1268V28.4456H9.17417H9.78578V17.8734C9.78578 11.4428 9.81199 7.24013 9.86442 7.14402C10.0741 6.75958 10.3974 6.56736 10.9216 6.53241C11.5158 6.48873 11.9526 6.68968 12.1361 7.0916C12.2148 7.26635 12.241 10.1671 12.2322 19.4549V31.591H13.5865H14.9408V19.4636C14.9408 7.59836 14.9408 7.33624 15.1155 7.06539C15.6136 6.24408 16.9853 6.34893 17.3436 7.24013C17.4571 7.52846 17.4746 8.89148 17.4746 18.0132V28.4543L18.0687 28.4281L18.6541 28.4019L18.6279 18.2229C18.6017 11.2069 18.6279 7.94786 18.6891 7.7469C18.9774 6.82948 20.2443 6.48873 20.7861 7.18771C20.9695 7.41488 20.9695 7.4673 20.9695 16.3095V25.2128H21.4064H21.8433V16.8424C21.8433 8.708 21.852 8.47209 22.018 8.20124C22.2714 7.77311 22.5597 7.63331 23.1189 7.64205H23.6169L23.5645 7.2314C23.5296 6.94307 23.4597 6.76832 23.2937 6.63726C22.1403 5.63247 16.0155 4.99465 10.6246 5.30045Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
2
ui/_/icons/creditcards/amex.svg
Normal file
2
ui/_/icons/creditcards/amex.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
2
ui/_/icons/creditcards/discover.svg
Normal file
2
ui/_/icons/creditcards/discover.svg
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="780" height="500" fill="#FFF" stroke-width="15px" stroke="#000000"/><path d="m409.41 197.26c30.938 0 56.02 23.58 56.02 52.709v0.033c0 29.129-25.082 52.742-56.02 52.742-30.941 0-56.022-23.613-56.022-52.742v-0.033c0-29.129 25.081-52.709 56.022-52.709z" fill="#F47216"/><path d="m321.43 197.94c8.836 0 16.247 1.785 25.27 6.09v22.753c-8.544-7.863-15.955-11.154-25.757-11.154-19.265 0-34.413 15.015-34.413 34.051 0 20.074 14.681 34.195 35.368 34.195 9.312 0 16.586-3.12 24.802-10.856v22.764c-9.343 4.142-16.912 5.775-25.757 5.775-31.277 0-55.581-22.597-55.581-51.736-2e-3 -28.83 24.949-51.882 56.068-51.882zm-97.113 0.626c11.546 0 22.109 3.721 30.942 10.994l-10.748 13.248c-5.351-5.646-10.411-8.027-16.563-8.027-8.854 0-15.301 4.744-15.301 10.988 0 5.354 3.618 8.188 15.944 12.481 23.364 8.043 30.289 15.176 30.289 30.926 0 19.193-14.976 32.554-36.319 32.554-15.631 0-26.993-5.795-36.457-18.871l13.268-12.03c4.73 8.608 12.622 13.223 22.42 13.223 9.163 0 15.947-5.95 15.947-13.983 0-4.164-2.056-7.733-6.158-10.258-2.066-1.195-6.158-2.978-14.199-5.646-19.292-6.538-25.91-13.527-25.91-27.186-1e-3 -16.227 14.213-28.413 32.845-28.413zm234.72 1.729h22.436l28.084 66.592 28.447-66.592h22.267l-45.493 101.69h-11.054l-44.687-101.69zm-301.21 0.152h20.541v99.143h-20.541v-99.143zm411.73 0h58.253v16.799h-37.726v22.006h36.336v16.791h-36.336v26.762h37.726v16.785h-58.253v-99.143zm115.59 57.377c15.471-2.965 23.983-12.926 23.983-28.105 0-18.562-13.575-29.271-37.266-29.271h-30.454v99.144h20.516v-39.83h2.681l28.43 39.828h25.26l-33.15-41.766zm-17.218-11.736h-6.002v-30.025h6.326c12.791 0 19.744 5.049 19.744 14.697 2e-3 9.967-6.951 15.328-20.068 15.328zm-576.09-45.641h-30.149v99.143h29.992c15.946 0 27.465-3.543 37.573-11.445 12.014-9.359 19.117-23.467 19.117-38.057 1e-3 -29.259-23.221-49.641-56.533-49.641zm23.997 74.479c-6.454 5.484-14.837 7.879-28.108 7.879h-5.514v-65.559h5.513c13.271 0 21.323 2.238 28.108 8.018 7.104 5.956 11.377 15.184 11.377 24.682 1e-3 9.513-4.273 19.024-11.376 24.98z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
7
ui/_/icons/creditcards/mastercard.svg
Normal file
7
ui/_/icons/creditcards/mastercard.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 -9 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" y="0.5" width="57" height="39" rx="3.5" fill="white" stroke="#F3F3F3"/>
|
||||||
|
<path d="M34.3102 28.9765H23.9591V10.5122H34.3102V28.9765Z" fill="#FF5F00"/>
|
||||||
|
<path d="M24.6223 19.7429C24.6223 15.9973 26.3891 12.6608 29.1406 10.5107C27.1285 8.93843 24.5892 7.99998 21.8294 7.99998C15.2961 7.99998 10 13.2574 10 19.7429C10 26.2283 15.2961 31.4857 21.8294 31.4857C24.5892 31.4857 27.1285 30.5473 29.1406 28.975C26.3891 26.8249 24.6223 23.4884 24.6223 19.7429" fill="#EB001B"/>
|
||||||
|
<path d="M48.2706 19.7429C48.2706 26.2283 42.9745 31.4857 36.4412 31.4857C33.6814 31.4857 31.1421 30.5473 29.1293 28.975C31.8815 26.8249 33.6483 23.4884 33.6483 19.7429C33.6483 15.9973 31.8815 12.6608 29.1293 10.5107C31.1421 8.93843 33.6814 7.99998 36.4412 7.99998C42.9745 7.99998 48.2706 13.2574 48.2706 19.7429" fill="#F79E1B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
2
ui/_/icons/creditcards/visa.svg
Normal file
2
ui/_/icons/creditcards/visa.svg
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40 C0,17.909,17.909,0,40,0z" fill="#0E4595"/><path d="m293.2 348.73l33.361-195.76h53.36l-33.385 195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725 0-89.865 26.55-90.18 64.603-0.299 28.13 26.514 43.822 46.752 53.186 20.771 9.595 27.752 15.714 27.654 24.283-0.131 13.121-16.586 19.116-31.922 19.116-21.357 0-32.703-2.967-50.227-10.276l-6.876-3.11-7.489 43.823c12.463 5.464 35.51 10.198 59.438 10.443 56.09 0 92.5-26.246 92.916-66.882 0.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268 0-8.137 9.668-16.839 30.557-16.839 17.449-0.27 30.09 3.535 39.938 7.5l4.781 2.26 7.232-42.429m137.31-4.223h-41.232c-12.773 0-22.332 3.487-27.941 16.234l-79.244 179.4h56.031s9.16-24.123 11.232-29.418c6.125 0 60.555 0.084 68.338 0.084 1.596 6.853 6.49 29.334 6.49 29.334h49.514l-43.188-195.64zm-65.418 126.41c4.412-11.279 21.26-54.723 21.26-54.723-0.316 0.522 4.379-11.334 7.074-18.684l3.605 16.879s10.219 46.729 12.354 56.528h-44.293zm-363.3-126.41l-52.24 133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766 171.2 56.456-0.064 84.004-195.39h-56.521" fill="#ffffff"/><path d="m146.92 152.96h-86.041l-0.681 4.073c66.938 16.204 111.23 55.363 129.62 102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527" fill="#F2AE14"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
5
ui/_/icons/jobs.svg
Normal file
5
ui/_/icons/jobs.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
4
ui/_/icons/letter.svg
Normal file
4
ui/_/icons/letter.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
|
||||||
|
<path d="M0 0 C33 0 66 0 100 0 C100 23.76 100 47.52 100 72 C67 72 34 72 0 72 C0 48.24 0 24.48 0 0 Z M4 4 C3.46383745 8.70053019 3.46383745 8.70053019 5.30664062 10.5546875 C5.91701172 10.99039062 6.52738281 11.42609375 7.15625 11.875 C7.84114502 12.37870117 8.52604004 12.88240234 9.23168945 13.40136719 C9.98023193 13.92891602 10.72877441 14.45646484 11.5 15 C13.06813799 16.14868129 14.63450237 17.29978719 16.19921875 18.453125 C17.40070557 19.33194336 17.40070557 19.33194336 18.62646484 20.22851562 C22.28176453 22.95664302 25.79456149 25.84835522 29.3125 28.75 C31.2591282 30.33484221 33.20813973 31.91671841 35.15722656 33.49853516 C36.36876709 34.48568066 37.57657813 35.4774244 38.78027344 36.47412109 C40.40268905 37.81286849 42.04179632 39.1275644 43.6875 40.4375 C44.59886719 41.17871094 45.51023438 41.91992188 46.44921875 42.68359375 C48.88630843 44.26660079 48.88630843 44.26660079 51.37890625 43.5859375 C54.95082046 41.42468986 58.06328957 38.87595616 61.25 36.1875 C67.05660886 31.37582668 72.93368091 26.68843648 78.9375 22.125 C80.0061731 21.30745239 80.0061731 21.30745239 81.09643555 20.47338867 C84.06177854 18.20933035 87.03509444 15.97490703 90.0703125 13.8046875 C91.30394531 12.91136719 91.30394531 12.91136719 92.5625 12 C93.24441406 11.525625 93.92632812 11.05125 94.62890625 10.5625 C96.54964019 8.72009187 96.54964019 8.72009187 96 4 C65.64 4 35.28 4 4 4 Z M4 15 C4 32.49 4 49.98 4 68 C34.36 68 64.72 68 96 68 C96 50.51 96 33.02 96 15 C91.10723979 18.66957016 86.23777639 22.33985116 81.4375 26.125 C80.5556604 26.81843506 80.5556604 26.81843506 79.65600586 27.52587891 C76.42735841 30.06945531 73.21156659 32.62826175 70.0078125 35.203125 C69.01890015 35.99759033 69.01890015 35.99759033 68.01000977 36.80810547 C66.75119369 37.82090246 65.49376977 38.83543328 64.23803711 39.85205078 C63.07629198 40.7874235 61.90867537 41.71555794 60.73486328 42.63574219 C59.54616335 43.57050931 58.37318371 44.52551784 57.21435547 45.49707031 C54.26370419 47.84496996 52.75924576 48.97890984 48.90625 49.0859375 C45.41094599 47.77989648 43.28715117 46.10681719 40.5 43.625 C39.44697905 42.70771873 38.39222174 41.79242782 37.3359375 40.87890625 C36.7903418 40.40340332 36.24474609 39.92790039 35.68261719 39.43798828 C32.89861809 37.05874355 30.01440497 34.81161154 27.125 32.5625 C26.54911133 32.11293945 25.97322266 31.66337891 25.37988281 31.20019531 C24.19857561 30.27805578 23.01693136 29.35634787 21.83496094 28.43505859 C19.90812651 26.92814897 17.98846374 25.41247563 16.0703125 23.89453125 C15.43077637 23.38913818 14.79124023 22.88374512 14.13232422 22.36303711 C12.90121746 21.38980809 11.671035 20.41540842 10.44189453 19.43969727 C7.37045638 16.99238729 7.37045638 16.99238729 4 15 Z " fill="#000000" transform="translate(0,14)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
6
ui/_/icons/place/austin.svg
Normal file
6
ui/_/icons/place/austin.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 102 KiB |
BIN
ui/_/images/fabric.webp
Normal file
BIN
ui/_/images/fabric.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
ui/_/images/knight.webp
Normal file
BIN
ui/_/images/knight.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
104
ui/desktop/apps/Forum/Forum.js
Normal file
104
ui/desktop/apps/Forum/Forum.js
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
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)
|
||||||
90
ui/desktop/apps/Forum/ForumPanel.js
Normal file
90
ui/desktop/apps/Forum/ForumPanel.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
import "../../components/LoadingCircle.js"
|
||||||
|
|
||||||
|
class ForumPanel extends Shadow {
|
||||||
|
forums = [
|
||||||
|
"HY"
|
||||||
|
]
|
||||||
|
messages = []
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
if(this.messages.length > 0) {
|
||||||
|
|
||||||
|
let previousDate = null
|
||||||
|
|
||||||
|
for(let i=0; i<this.messages.length; i++) {
|
||||||
|
let message = this.messages[i]
|
||||||
|
const dateParts = this.parseDate(message.time);
|
||||||
|
const { date, time } = dateParts;
|
||||||
|
|
||||||
|
if (previousDate !== date) {
|
||||||
|
previousDate = date;
|
||||||
|
|
||||||
|
p(date)
|
||||||
|
.textAlign("center")
|
||||||
|
.opacity(0.5)
|
||||||
|
.marginVertical(1, em)
|
||||||
|
.color("var(--divider)")
|
||||||
|
}
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
p(message.sentBy)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.3, em)
|
||||||
|
|
||||||
|
p(util.formatTime(message.time))
|
||||||
|
.opacity(0.2)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
})
|
||||||
|
p(message.text)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
LoadingCircle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.position("relative")
|
||||||
|
.overflow("scroll")
|
||||||
|
.height(100, pct)
|
||||||
|
.width(96, pct)
|
||||||
|
.paddingTop(5, em)
|
||||||
|
.paddingBottom(2, em)
|
||||||
|
.paddingLeft(4, pct)
|
||||||
|
.backgroundColor("var(--darkbrown)")
|
||||||
|
.onAppear(async () => {
|
||||||
|
console.log("appear")
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
this.scrollTop = this.scrollHeight
|
||||||
|
});
|
||||||
|
let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
|
||||||
|
if(!res) console.error("failed to get messages")
|
||||||
|
if(res.msg.length > 0 && this.messages.length === 0) {
|
||||||
|
console.log("rerendering", res.msg)
|
||||||
|
this.messages = res.msg
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
window.addEventListener("new-post", (e) => {
|
||||||
|
this.messages = e.detail
|
||||||
|
if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
parseDate(str) {
|
||||||
|
// Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
|
||||||
|
const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
|
||||||
|
if (!match) return null;
|
||||||
|
|
||||||
|
const [, mm, dd, yyyy, hh, min, ampm] = match;
|
||||||
|
const date = `${mm}/${dd}/${yyyy}`;
|
||||||
|
const time = `${hh}:${min}${ampm.toLowerCase()}`;
|
||||||
|
|
||||||
|
return { date, time };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(ForumPanel)
|
||||||
@@ -47,41 +47,28 @@ class Jobs extends Shadow {
|
|||||||
.x(0).y(13, vh)
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input("Search jobs...", "45vw")
|
input("Search jobs... (Coming Soon!)", "45vw")
|
||||||
.attr({
|
.attr({
|
||||||
"type": "text"
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
})
|
})
|
||||||
.fontSize(1.1, em)
|
.fontSize(1.1, em)
|
||||||
.paddingLeft(1.3, em)
|
.paddingLeft(1.3, em)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--accent2)")
|
.border("0.5px solid var(--divider)")
|
||||||
.outline("none")
|
.outline("none")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
button("Search")
|
.cursor("not-allowed")
|
||||||
.marginLeft(2, em)
|
|
||||||
.borderRadius(10, px)
|
|
||||||
.background("transparent")
|
|
||||||
.border("1px solid var(--accent2)")
|
|
||||||
.color("var(--accent)")
|
|
||||||
.fontFamily("Bona Nova")
|
|
||||||
.onHover(function (hovering) {
|
|
||||||
if(hovering) {
|
|
||||||
this.style.background = "var(--green)"
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.style.background = "transparent"
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
button("+ Add Job")
|
button("+ Add Job")
|
||||||
.width(7, em)
|
.width(7, em)
|
||||||
.marginLeft(1, em)
|
.marginLeft(1, em)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--accent2)")
|
.border("0.3px solid var(--accent2)")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.fontFamily("Bona Nova")
|
.fontFamily("Bona Nova")
|
||||||
.onHover(function (hovering) {
|
.onHover(function (hovering) {
|
||||||
@@ -37,8 +37,8 @@ class JobsGrid extends Shadow {
|
|||||||
p(this.boldUntilFirstSpace(this.jobs[i].salary))
|
p(this.boldUntilFirstSpace(this.jobs[i].salary))
|
||||||
})
|
})
|
||||||
.padding(1, em)
|
.padding(1, em)
|
||||||
.border("1px solid var(--accent2)")
|
|
||||||
.borderRadius(5, "px")
|
.borderRadius(5, "px")
|
||||||
|
.background("var(--darkbrown)")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.display("grid")
|
.display("grid")
|
||||||
@@ -35,7 +35,8 @@ class Market extends Shadow {
|
|||||||
price: "$12",
|
price: "$12",
|
||||||
company: "Hyperia",
|
company: "Hyperia",
|
||||||
type: "new",
|
type: "new",
|
||||||
image: "/db/images/1"
|
image: "/db/images/1",
|
||||||
|
madeIn: "America"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -50,34 +51,21 @@ class Market extends Shadow {
|
|||||||
.x(0).y(13, vh)
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input("Search for products...", "45vw")
|
input("Search for products... (Coming Soon!)", "45vw")
|
||||||
.attr({
|
.attr({
|
||||||
"type": "text"
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
})
|
})
|
||||||
.fontSize(1.1, em)
|
.fontSize(1.1, em)
|
||||||
.paddingLeft(1.3, em)
|
.paddingLeft(1.3, em)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("0.5px solid var(--accent2)")
|
.border("0.5px solid var(--divider)")
|
||||||
.outline("none")
|
.outline("none")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
button("Search")
|
.cursor("not-allowed")
|
||||||
.marginLeft(2, em)
|
|
||||||
.borderRadius(10, px)
|
|
||||||
.background("transparent")
|
|
||||||
.border("0.5px solid var(--accent2)")
|
|
||||||
.color("var(--accent)")
|
|
||||||
.fontFamily("Bona Nova")
|
|
||||||
.onHover(function (hovering) {
|
|
||||||
if(hovering) {
|
|
||||||
this.style.background = "var(--green)"
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.style.background = "transparent"
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
button("+ Add Item")
|
button("+ Add Item")
|
||||||
.width(7, em)
|
.width(7, em)
|
||||||
@@ -29,24 +29,46 @@ class MarketGrid extends Shadow {
|
|||||||
ZStack(() => {
|
ZStack(() => {
|
||||||
// BuyModal()
|
// BuyModal()
|
||||||
|
|
||||||
for (let i = 0; i < this.listings.length; i++) {
|
let params = new URLSearchParams(window.location.search);
|
||||||
const rating = this.listings[i].stars
|
|
||||||
|
const hyperiaMade = params.get("hyperia-made") === "true";
|
||||||
|
const americaMade = params.get("america-made") === "true";
|
||||||
|
const newItem = params.get("new") === "true";
|
||||||
|
const usedItem = params.get("used") === "true";
|
||||||
|
|
||||||
|
|
||||||
|
let filtered = this.listings;
|
||||||
|
if (hyperiaMade) {
|
||||||
|
filtered = filtered.filter(item => item.madeIn === "Hyperia");
|
||||||
|
}
|
||||||
|
if (americaMade) {
|
||||||
|
filtered = filtered.filter(item => item.madeIn === "America");
|
||||||
|
}
|
||||||
|
if (newItem) {
|
||||||
|
filtered = filtered.filter(item => item.type === "new");
|
||||||
|
}
|
||||||
|
if (usedItem) {
|
||||||
|
filtered = filtered.filter(item => item.type === "used");
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < filtered.length; i++) {
|
||||||
|
const rating = filtered[i].stars
|
||||||
const percent = (rating / 5)
|
const percent = (rating / 5)
|
||||||
|
|
||||||
VStack(() => {
|
VStack(() => {
|
||||||
img(this.listings[i].image)
|
img(filtered[i].image)
|
||||||
.marginBottom(0.5, em)
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
p(this.listings[i].company)
|
p(filtered[i].company)
|
||||||
.marginBottom(0.5, em)
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
p(this.listings[i].title)
|
p(filtered[i].title)
|
||||||
.fontSize(1.2, em)
|
.fontSize(1.2, em)
|
||||||
.fontWeight("bold")
|
.fontWeight("bold")
|
||||||
.marginBottom(0.5, em)
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
p(this.listings[i].stars)
|
p(filtered[i].stars)
|
||||||
.marginRight(0.2, em)
|
.marginRight(0.2, em)
|
||||||
|
|
||||||
ZStack(() => {
|
ZStack(() => {
|
||||||
@@ -67,21 +89,28 @@ class MarketGrid extends Shadow {
|
|||||||
.fontSize(1.2, em)
|
.fontSize(1.2, em)
|
||||||
.lineHeight(1)
|
.lineHeight(1)
|
||||||
|
|
||||||
p(this.listings[i].reviews)
|
p(filtered[i].reviews)
|
||||||
.marginLeft(0.2, em)
|
.marginLeft(0.2, em)
|
||||||
})
|
})
|
||||||
.marginBottom(0.5, em)
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
p(this.listings[i].price)
|
p(filtered[i].price)
|
||||||
.fontSize(1.75, em)
|
.fontSize(1.75, em)
|
||||||
.marginBottom(0.5, em)
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
button("Buy Now")
|
button("Coming Soon!")
|
||||||
.onClick((finished) => {
|
.onClick((finished) => {
|
||||||
if(finished) {
|
if(finished) {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.backgroundColor = "var(--green)"
|
||||||
|
} else {
|
||||||
|
this.style.backgroundColor = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
.padding(1, em)
|
.padding(1, em)
|
||||||
@@ -96,6 +125,10 @@ class MarketGrid extends Shadow {
|
|||||||
p("No Listings!")
|
p("No Listings!")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.onQueryChanged(() => {
|
||||||
|
console.log("query did change yup")
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
.height(100, vh)
|
.height(100, vh)
|
||||||
.paddingLeft(2, em)
|
.paddingLeft(2, em)
|
||||||
.paddingRight(2, em)
|
.paddingRight(2, em)
|
||||||
@@ -1,12 +1,27 @@
|
|||||||
class MarketSidebar extends Shadow {
|
class MarketSidebar extends Shadow {
|
||||||
|
|
||||||
|
handleChecked(e) {
|
||||||
|
let checked = e.target.checked
|
||||||
|
let label = $(`label[for="${e.target.id}"]`).innerText
|
||||||
|
if(checked) {
|
||||||
|
window.setQuery(label.toLowerCase(), true)
|
||||||
|
} else {
|
||||||
|
window.setQuery(label.toLowerCase(), null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
VStack(() => {
|
VStack(() => {
|
||||||
|
|
||||||
|
p("Make")
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input()
|
input()
|
||||||
.attr({
|
.attr({
|
||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"id": "hyperia-check"
|
"id": "hyperia-check"
|
||||||
})
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
label("Hyperia-Made")
|
label("Hyperia-Made")
|
||||||
.attr({
|
.attr({
|
||||||
"for": "hyperia-check"
|
"for": "hyperia-check"
|
||||||
@@ -20,6 +35,7 @@ class MarketSidebar extends Shadow {
|
|||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"id": "america-check"
|
"id": "america-check"
|
||||||
})
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
label("America-Made")
|
label("America-Made")
|
||||||
.attr({
|
.attr({
|
||||||
"for": "america-check"
|
"for": "america-check"
|
||||||
@@ -27,12 +43,15 @@ class MarketSidebar extends Shadow {
|
|||||||
.marginLeft(0.5, em)
|
.marginLeft(0.5, em)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
p("Condition")
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input()
|
input()
|
||||||
.attr({
|
.attr({
|
||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"id": "new-check"
|
"id": "new-check"
|
||||||
})
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
label("New")
|
label("New")
|
||||||
.attr({
|
.attr({
|
||||||
"for": "new-check"
|
"for": "new-check"
|
||||||
@@ -46,6 +65,7 @@ class MarketSidebar extends Shadow {
|
|||||||
"type": "checkbox",
|
"type": "checkbox",
|
||||||
"id": "used-check"
|
"id": "used-check"
|
||||||
})
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
label("Used")
|
label("Used")
|
||||||
.attr({
|
.attr({
|
||||||
"for": "used-check"
|
"for": "used-check"
|
||||||
188
ui/desktop/apps/Messages/Messages.js
Normal file
188
ui/desktop/apps/Messages/Messages.js
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
import "./MessagesSidebar.js"
|
||||||
|
import "./MessagesPanel.js"
|
||||||
|
|
||||||
|
css(`
|
||||||
|
messages- {
|
||||||
|
font-family: 'Bona';
|
||||||
|
}
|
||||||
|
|
||||||
|
messages- 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 Messages extends Shadow {
|
||||||
|
conversations = []
|
||||||
|
selectedConvoID = null
|
||||||
|
onConversationSelect(i) {
|
||||||
|
console.log("convo selected: ", i)
|
||||||
|
this.selectedConvoID = i
|
||||||
|
this.$("messagessidebar-").rerender()
|
||||||
|
this.$("messagespanel-").rerender()
|
||||||
|
}
|
||||||
|
|
||||||
|
getConvoFromID(id) {
|
||||||
|
for(let i=0; i<this.conversations.length; i++) {
|
||||||
|
if(this.conversations[i].id === id) {
|
||||||
|
return this.conversations[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
if(this.getConvoFromID(this.selectedConvoID)) {
|
||||||
|
MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
|
||||||
|
} else {
|
||||||
|
MessagesPanel()
|
||||||
|
}
|
||||||
|
|
||||||
|
input("Send Message", "93%")
|
||||||
|
.paddingVertical(1, em)
|
||||||
|
.paddingHorizontal(2, em)
|
||||||
|
.color("var(--accent)")
|
||||||
|
.background("var(--darkbrown)")
|
||||||
|
.marginBottom(6, em)
|
||||||
|
.border("none")
|
||||||
|
.fontSize(1, em)
|
||||||
|
.onKeyDown((e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
|
||||||
|
e.target.value = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.width(100, pct)
|
||||||
|
.alignHorizontal("center")
|
||||||
|
.alignVertical("end")
|
||||||
|
})
|
||||||
|
.onAppear(async () => {
|
||||||
|
let res = await Socket.send({app: "MESSAGES", operation: "GET"})
|
||||||
|
if(!res) console.error("failed to get messages")
|
||||||
|
|
||||||
|
if(res.msg.length > 0 && this.conversations.length === 0) {
|
||||||
|
this.conversations = res.msg
|
||||||
|
this.selectedConvoID = this.conversations[0].id
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("new-message", (e) => {
|
||||||
|
let convoID = e.detail.conversationID
|
||||||
|
let messages = e.detail.messages
|
||||||
|
let convo = this.getConvoFromID(convoID)
|
||||||
|
convo.messages = messages
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(87, vh)
|
||||||
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
p("Add Message")
|
||||||
|
|
||||||
|
input("enter email...")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.onKeyDown(function (e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
window.Socket.send({app: "MESSAGES", operation: "ADDCONVERSATION", msg: {email: this.value }})
|
||||||
|
this.value = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
p("x")
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
this.parentElement.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.xRight(2, em).y(2, em)
|
||||||
|
.fontSize(1.4, em)
|
||||||
|
.cursor("pointer")
|
||||||
|
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.alignVertical("center")
|
||||||
|
.alignHorizontal("center")
|
||||||
|
.backgroundColor("black")
|
||||||
|
.border("1px solid var(--accent)")
|
||||||
|
.position("fixed")
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.center()
|
||||||
|
.width(60, vw)
|
||||||
|
.height(60, vh)
|
||||||
|
.display("none")
|
||||||
|
.attr({id: "addPanel"})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input("Search messages... (Coming Soon!)", "45vw")
|
||||||
|
.attr({
|
||||||
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
|
})
|
||||||
|
.fontSize(1.1, em)
|
||||||
|
.paddingLeft(1.3, em)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.outline("none")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
|
.cursor("not-allowed")
|
||||||
|
|
||||||
|
button("+ New Message")
|
||||||
|
.width(13, em)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.fontFamily("Bona Nova")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.background = "var(--green)"
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.style.background = "transparent"
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick((done) => {
|
||||||
|
console.log("click")
|
||||||
|
if(done) {
|
||||||
|
this.$("#addPanel").style.display = "flex"
|
||||||
|
}
|
||||||
|
console.log(this, "clicked")
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
.x(55, vw).y(4, vh)
|
||||||
|
.position("absolute")
|
||||||
|
.transform("translateX(-50%)")
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(100, "%")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Messages)
|
||||||
56
ui/desktop/apps/Messages/MessagesPanel.js
Normal file
56
ui/desktop/apps/Messages/MessagesPanel.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import "../../components/LoadingCircle.js"
|
||||||
|
|
||||||
|
class MessagesPanel extends Shadow {
|
||||||
|
messages
|
||||||
|
|
||||||
|
constructor(messages) {
|
||||||
|
super()
|
||||||
|
this.messages = messages
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
if(this.messages) {
|
||||||
|
for(let i=0; i<this.messages.length; i++) {
|
||||||
|
let message = this.messages[i]
|
||||||
|
let fromMe = window.profile.email === message.from.email
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
p(message.from.firstName + " " + message.from.lastName)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.3, em)
|
||||||
|
|
||||||
|
p(util.formatTime(message.time))
|
||||||
|
.opacity(0.2)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
})
|
||||||
|
p(message.text)
|
||||||
|
})
|
||||||
|
.paddingVertical(0.5, em)
|
||||||
|
.marginLeft(fromMe ? 70 : 0, pct)
|
||||||
|
.paddingRight(fromMe ? 10 : 0, pct)
|
||||||
|
.marginRight(fromMe ? 0 : 70, pct)
|
||||||
|
.paddingLeft(fromMe ? 5 : 10, pct)
|
||||||
|
.background(fromMe ? "var(--brown)" : "var(--green)")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
LoadingCircle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onAppear(async () => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
this.scrollTop = this.scrollHeight
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.position("relative")
|
||||||
|
.overflow("scroll")
|
||||||
|
.height(95, pct)
|
||||||
|
.width(100, pct)
|
||||||
|
.paddingTop(2, em)
|
||||||
|
.paddingBottom(2, em)
|
||||||
|
.backgroundColor("var(--darkbrown)")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MessagesPanel)
|
||||||
73
ui/desktop/apps/Messages/MessagesSidebar.js
Normal file
73
ui/desktop/apps/Messages/MessagesSidebar.js
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
class MessagesSidebar extends Shadow {
|
||||||
|
conversations = []
|
||||||
|
selectedConvoID
|
||||||
|
onSelect
|
||||||
|
|
||||||
|
constructor(conversations, selectedConvoID, onSelect) {
|
||||||
|
super()
|
||||||
|
this.conversations = conversations
|
||||||
|
this.selectedConvoID = selectedConvoID
|
||||||
|
this.onSelect = onSelect
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
this.conversations.forEach((convo, i) => {
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
|
||||||
|
p(this.makeConvoTitle(convo.between))
|
||||||
|
.textAlign("left")
|
||||||
|
.marginLeft(0.5, inches)
|
||||||
|
.paddingTop(0.2, inches)
|
||||||
|
.width(100, pct)
|
||||||
|
.marginTop(0)
|
||||||
|
.fontSize(1, em)
|
||||||
|
.fontWeight("bold")
|
||||||
|
|
||||||
|
p(util.formatTime(convo.messages.last.time))
|
||||||
|
.paddingTop(0.2, inches)
|
||||||
|
.fontSize(0.8, em)
|
||||||
|
.marginRight(0.1, inches)
|
||||||
|
.color("var(--divider")
|
||||||
|
})
|
||||||
|
.justifyContent("space-between")
|
||||||
|
.marginBottom(0)
|
||||||
|
|
||||||
|
p(convo.messages.last.text)
|
||||||
|
.fontSize(0.8, em)
|
||||||
|
.textAlign("left")
|
||||||
|
.marginLeft(0.5, inches)
|
||||||
|
.marginBottom(2, em)
|
||||||
|
.color("var(--divider)")
|
||||||
|
})
|
||||||
|
.background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
|
||||||
|
.onClick(() => {
|
||||||
|
this.onSelect(i)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.minWidth(15, vw)
|
||||||
|
.height(100, vh)
|
||||||
|
.gap(0, em)
|
||||||
|
}
|
||||||
|
|
||||||
|
makeConvoTitle(members) {
|
||||||
|
let membersString = ""
|
||||||
|
for(let i=0; i<members.length; i++) {
|
||||||
|
let member = members[i]
|
||||||
|
if(member.email === window.profile.email) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if(members.length > 2) {
|
||||||
|
membersString += member.firstName
|
||||||
|
} else {
|
||||||
|
membersString += member.firstName + " " + member.lastName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return membersString
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MessagesSidebar)
|
||||||
@@ -9,14 +9,13 @@ css(`
|
|||||||
app-menu.minimized {
|
app-menu.minimized {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
transform: translate(-50%, 65%);
|
transform: translate(-50%, 65%);
|
||||||
border: 1px solid var(--accent);
|
border: 0.2px solid var(--accent);
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
padding-bottom: 4em;
|
padding-bottom: 4em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-color: var(--green);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
app-menu p {
|
app-menu p {
|
||||||
25
ui/desktop/components/LoadingCircle.js
Normal file
25
ui/desktop/components/LoadingCircle.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
class LoadingCircle extends Shadow {
|
||||||
|
render() {
|
||||||
|
div()
|
||||||
|
.borderRadius(100, pct)
|
||||||
|
.width(2, em).height(2, em)
|
||||||
|
.x(45, pct).y(50, pct)
|
||||||
|
.center()
|
||||||
|
.backgroundColor("var(--accent")
|
||||||
|
.transition("transform 1.75s ease-in-out")
|
||||||
|
.onAppear(function () {
|
||||||
|
let growing = true;
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
if (growing) {
|
||||||
|
this.style.transform = "scale(1.5)";
|
||||||
|
} else {
|
||||||
|
this.style.transform = "scale(0.7)";
|
||||||
|
}
|
||||||
|
growing = !growing;
|
||||||
|
}, 750);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(LoadingCircle)
|
||||||
43
ui/desktop/components/ProfileButton.js
Normal file
43
ui/desktop/components/ProfileButton.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import "./ProfileMenu.js"
|
||||||
|
|
||||||
|
class ProfileButton extends Shadow {
|
||||||
|
|
||||||
|
async render() {
|
||||||
|
ZStack(async () => {
|
||||||
|
img("/_/icons/profile.svg", "1.5em", "1.5em")
|
||||||
|
.backgroundColor("var(--accent)")
|
||||||
|
.padding(0.2, em)
|
||||||
|
.borderRadius(5, px)
|
||||||
|
|
||||||
|
ProfileMenu()
|
||||||
|
|
||||||
|
})
|
||||||
|
.display("block")
|
||||||
|
.onAppear(() => {
|
||||||
|
window.addEventListener("mousedown", (e) => { // bad - adding every time it renders
|
||||||
|
if(!e.target.closest("profilebutton-")) {
|
||||||
|
this.$("profile-menu").style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.onHover((hovering, e) => {
|
||||||
|
console.log(hovering)
|
||||||
|
console.log(e.target)
|
||||||
|
if(hovering && !e.target.closest("profile-menu")) {
|
||||||
|
this.$("img").backgroundColor("var(--accent)")
|
||||||
|
this.$("img").style.outline = "1px solid black"
|
||||||
|
} else if(!e.target.closest("profile-menu")) {
|
||||||
|
this.$("img").backgroundColor("")
|
||||||
|
this.$("img").style.outline = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick((done) => {
|
||||||
|
console.log(done)
|
||||||
|
if(done) {
|
||||||
|
this.$("profile-menu").style.display = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(ProfileButton)
|
||||||
68
ui/desktop/components/ProfileMenu.js
Normal file
68
ui/desktop/components/ProfileMenu.js
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
class ProfileMenu extends Shadow {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
h2("Profile")
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
p("Email: ")
|
||||||
|
.fontWeight("bold")
|
||||||
|
|
||||||
|
p(window.profile?.email)
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
p("Name: ")
|
||||||
|
.fontWeight("bold")
|
||||||
|
|
||||||
|
p(window.profile?.name)
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
|
||||||
|
p("X")
|
||||||
|
.onClick(() => {
|
||||||
|
this.style.display = "none"
|
||||||
|
})
|
||||||
|
.xRight(2, em).y(1, em)
|
||||||
|
})
|
||||||
|
.paddingLeft(1, em)
|
||||||
|
.color("var(--accent)")
|
||||||
|
.position("fixed")
|
||||||
|
.border("1px solid var(--accent)")
|
||||||
|
.x(50, vw).y(47, vh)
|
||||||
|
.width(70, vw)
|
||||||
|
.height(70, vh)
|
||||||
|
.backgroundColor("black")
|
||||||
|
.center()
|
||||||
|
.display("none")
|
||||||
|
.onAppear(async () => {
|
||||||
|
if(!window.profile) {
|
||||||
|
window.profile = await this.fetchProfile()
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchProfile() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("/profile", {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error("Failed to fetch profile");
|
||||||
|
|
||||||
|
const profile = await res.json();
|
||||||
|
console.log(profile);
|
||||||
|
return profile
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(ProfileMenu, "profile-menu")
|
||||||
@@ -6,8 +6,9 @@
|
|||||||
<link rel="icon" href="/_/icons/logo.svg">
|
<link rel="icon" href="/_/icons/logo.svg">
|
||||||
<link rel="stylesheet" href="/_/code/shared.css">
|
<link rel="stylesheet" href="/_/code/shared.css">
|
||||||
<script src="/_/code/quill.js"></script>
|
<script src="/_/code/quill.js"></script>
|
||||||
|
<script src="/_/code/zod.js"></script>
|
||||||
<script type="module" src="75820185/index.js"></script>
|
<script type="module" src="75820185/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body style="margin: 0px">
|
<body>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
8
ui/desktop/index.js
Normal file
8
ui/desktop/index.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import Socket from "./ws/Socket.js"
|
||||||
|
import "./components/Home.js"
|
||||||
|
|
||||||
|
import util from "./util.js"
|
||||||
|
window.util = util
|
||||||
|
|
||||||
|
window.Socket = new Socket()
|
||||||
|
Home()
|
||||||
9
ui/desktop/util.js
Normal file
9
ui/desktop/util.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export default class util {
|
||||||
|
static formatTime(str) {
|
||||||
|
const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
|
||||||
|
if (!match) return null;
|
||||||
|
|
||||||
|
const [_, hourMin, ampm] = match;
|
||||||
|
return hourMin + ampm.toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
62
ui/desktop/ws/Connection.js
Normal file
62
ui/desktop/ws/Connection.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
class Connection {
|
||||||
|
connectionTries = 0
|
||||||
|
ws;
|
||||||
|
linkCreated;
|
||||||
|
wsStatus;
|
||||||
|
|
||||||
|
constructor(receiveCB) {
|
||||||
|
this.init()
|
||||||
|
this.receiveCB = receiveCB
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
if(window.location.hostname.includes("local")) {
|
||||||
|
this.ws = new WebSocket("ws://" + window.location.host)
|
||||||
|
} else {
|
||||||
|
this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
|
||||||
|
}
|
||||||
|
this.ws.addEventListener('open', () => {
|
||||||
|
this.connectionTries = 0
|
||||||
|
console.log("Websocket connection established.");
|
||||||
|
this.ws.addEventListener('message', this.receiveCB)
|
||||||
|
});
|
||||||
|
this.ws.addEventListener("close", () => {
|
||||||
|
this.checkOpen();
|
||||||
|
console.log('Websocket Closed')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async checkOpen() {
|
||||||
|
if (this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
|
||||||
|
this.connectionTries++
|
||||||
|
console.log('Reestablishing connection')
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sleep = (time) => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(resolve, time);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
send = (msg) => {
|
||||||
|
console.log("sending")
|
||||||
|
if (this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
this.ws.send(msg);
|
||||||
|
}
|
||||||
|
else if(this.connectionTries === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.send(msg)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('No websocket connection: Cannot send message');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connection
|
||||||
45
ui/desktop/ws/Socket.js
Normal file
45
ui/desktop/ws/Socket.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import Connection from "./Connection.js";
|
||||||
|
|
||||||
|
export default class Socket {
|
||||||
|
connection;
|
||||||
|
disabled = true;
|
||||||
|
requestID = 1;
|
||||||
|
pending = new Map();
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.connection = new Connection(this.receive);
|
||||||
|
}
|
||||||
|
|
||||||
|
isOpen() {
|
||||||
|
if(this.connection.checkOpen()) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
send(msg) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const id = (++this.requestID).toString();
|
||||||
|
this.pending.set(id, resolve);
|
||||||
|
this.connection.send(JSON.stringify({ id, ...msg }));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
receive = (event) => {
|
||||||
|
const msg = JSON.parse(event.data);
|
||||||
|
if (msg.id && this.pending.has(msg.id)) {
|
||||||
|
this.pending.get(msg.id)(msg);
|
||||||
|
this.pending.delete(msg.id);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.onBroadcast(msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onBroadcast(msg) {
|
||||||
|
window.dispatchEvent(new CustomEvent(msg.event, {
|
||||||
|
detail: msg.msg
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
66
ui/mobile/apps/Forum/Forum.js
Normal file
66
ui/mobile/apps/Forum/Forum.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
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(() => {
|
||||||
|
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")
|
||||||
|
})
|
||||||
|
.onAppear(() => document.body.style.backgroundColor = "var(--darkbrown)")
|
||||||
|
.width(100, pct)
|
||||||
|
.height(100, pct)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Forum)
|
||||||
88
ui/mobile/apps/Forum/ForumPanel.js
Normal file
88
ui/mobile/apps/Forum/ForumPanel.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import "../../components/LoadingCircle.js"
|
||||||
|
|
||||||
|
class ForumPanel extends Shadow {
|
||||||
|
forums = [
|
||||||
|
"HY"
|
||||||
|
]
|
||||||
|
messages = []
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
if(this.messages.length > 0) {
|
||||||
|
|
||||||
|
let previousDate = null
|
||||||
|
|
||||||
|
for(let i=0; i<this.messages.length; i++) {
|
||||||
|
let message = this.messages[i]
|
||||||
|
const dateParts = this.parseDate(message.time);
|
||||||
|
const { date, time } = dateParts;
|
||||||
|
|
||||||
|
if (previousDate !== date) {
|
||||||
|
previousDate = date;
|
||||||
|
|
||||||
|
p(date)
|
||||||
|
.textAlign("center")
|
||||||
|
.opacity(0.5)
|
||||||
|
.marginVertical(1, em)
|
||||||
|
.color("var(--divider)")
|
||||||
|
}
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
p(message.sentBy)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.3, em)
|
||||||
|
|
||||||
|
p(util.formatTime(message.time))
|
||||||
|
.opacity(0.2)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
})
|
||||||
|
p(message.text)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
LoadingCircle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.position("relative")
|
||||||
|
.overflow("scroll")
|
||||||
|
.height(100, pct)
|
||||||
|
.width(96, pct)
|
||||||
|
.paddingTop(5, em)
|
||||||
|
.paddingBottom(2, em)
|
||||||
|
.paddingLeft(4, pct)
|
||||||
|
.backgroundColor("var(--darkbrown)")
|
||||||
|
.onAppear(async () => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
this.scrollTop = this.scrollHeight
|
||||||
|
});
|
||||||
|
let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
|
||||||
|
if(!res) console.error("failed to get messages")
|
||||||
|
if(res.msg.length > 0 && this.messages.length === 0) {
|
||||||
|
this.messages = res.msg
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
window.addEventListener("new-post", (e) => {
|
||||||
|
this.messages = e.detail
|
||||||
|
if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
parseDate(str) {
|
||||||
|
// Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
|
||||||
|
const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
|
||||||
|
if (!match) return null;
|
||||||
|
|
||||||
|
const [, mm, dd, yyyy, hh, min, ampm] = match;
|
||||||
|
const date = `${mm}/${dd}/${yyyy}`;
|
||||||
|
const time = `${hh}:${min}${ampm.toLowerCase()}`;
|
||||||
|
|
||||||
|
return { date, time };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(ForumPanel)
|
||||||
101
ui/mobile/apps/Jobs/Jobs.js
Normal file
101
ui/mobile/apps/Jobs/Jobs.js
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
import "./JobsSidebar.js"
|
||||||
|
import "./JobsGrid.js"
|
||||||
|
|
||||||
|
css(`
|
||||||
|
jobs- {
|
||||||
|
font-family: 'Bona';
|
||||||
|
}
|
||||||
|
|
||||||
|
jobs- 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 Jobs extends Shadow {
|
||||||
|
jobs = [
|
||||||
|
{
|
||||||
|
title: "Austin Chapter Lead",
|
||||||
|
salary: "1% of Local Revenue",
|
||||||
|
company: "Hyperia",
|
||||||
|
city: "Austin",
|
||||||
|
state: "TX"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
JobsSidebar()
|
||||||
|
|
||||||
|
JobsGrid(this.jobs)
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input("Search jobs... (Coming Soon!)", "45vw")
|
||||||
|
.attr({
|
||||||
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
|
})
|
||||||
|
.fontSize(1.1, em)
|
||||||
|
.paddingLeft(1.3, em)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.outline("none")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
|
.cursor("not-allowed")
|
||||||
|
|
||||||
|
button("+ Add Job")
|
||||||
|
.width(7, em)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.3px solid var(--accent2)")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.fontFamily("Bona Nova")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.background = "var(--green)"
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.style.background = "transparent"
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick((clicking) => {
|
||||||
|
console.log(this, "clicked")
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
.x(55, vw).y(4, vh)
|
||||||
|
.position("absolute")
|
||||||
|
.transform("translateX(-50%)")
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(100, "%")
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
// Optional additional logic
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Jobs)
|
||||||
60
ui/mobile/apps/Jobs/JobsGrid.js
Normal file
60
ui/mobile/apps/Jobs/JobsGrid.js
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
class JobsGrid extends Shadow {
|
||||||
|
jobs;
|
||||||
|
|
||||||
|
constructor(jobs) {
|
||||||
|
super()
|
||||||
|
this.jobs = jobs
|
||||||
|
}
|
||||||
|
|
||||||
|
boldUntilFirstSpace(text) {
|
||||||
|
const index = text.indexOf(' ');
|
||||||
|
if (index === -1) {
|
||||||
|
// No spaces — bold the whole thing
|
||||||
|
return `<b>${text}</b>`;
|
||||||
|
}
|
||||||
|
return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
h3("Results")
|
||||||
|
.marginTop(0.1, em)
|
||||||
|
.marginBottom(1, em)
|
||||||
|
.marginLeft(0.4, em)
|
||||||
|
.color("var(--accent2)")
|
||||||
|
|
||||||
|
if (this.jobs.length > 0) {
|
||||||
|
ZStack(() => {
|
||||||
|
for (let i = 0; i < this.jobs.length; i++) {
|
||||||
|
VStack(() => {
|
||||||
|
p(this.jobs[i].title)
|
||||||
|
.fontSize(1.2, em)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
p(this.jobs[i].company)
|
||||||
|
p(this.jobs[i].city + ", " + this.jobs[i].state)
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
p(this.boldUntilFirstSpace(this.jobs[i].salary))
|
||||||
|
})
|
||||||
|
.padding(1, em)
|
||||||
|
.borderRadius(5, "px")
|
||||||
|
.background("var(--darkbrown)")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.display("grid")
|
||||||
|
.gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
|
||||||
|
.gap(1, em)
|
||||||
|
} else {
|
||||||
|
p("No Jobs!")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.height(100, vh)
|
||||||
|
.paddingLeft(2, em)
|
||||||
|
.paddingRight(2, em)
|
||||||
|
.paddingTop(2, em)
|
||||||
|
.gap(0, em)
|
||||||
|
.width(100, "%")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(JobsGrid)
|
||||||
26
ui/mobile/apps/Jobs/JobsSidebar.js
Normal file
26
ui/mobile/apps/Jobs/JobsSidebar.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
class JobsSidebar extends Shadow {
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
h3("Location")
|
||||||
|
.color("var(--accent2)")
|
||||||
|
.marginBottom(0, em)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input("Location", "100%")
|
||||||
|
.paddingLeft(3, em)
|
||||||
|
.paddingVertical(0.75, em)
|
||||||
|
.backgroundImage("/_/icons/locationPin.svg")
|
||||||
|
.backgroundRepeat("no-repeat")
|
||||||
|
.backgroundSize("18px 18px")
|
||||||
|
.backgroundPosition("10px center")
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.paddingTop(1, em)
|
||||||
|
.paddingLeft(3, em)
|
||||||
|
.paddingRight(3, em)
|
||||||
|
.gap(1, em)
|
||||||
|
.minWidth(10, vw)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(JobsSidebar)
|
||||||
105
ui/mobile/apps/Market/Market.js
Normal file
105
ui/mobile/apps/Market/Market.js
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import "./MarketSidebar.js"
|
||||||
|
import "./MarketGrid.js"
|
||||||
|
|
||||||
|
css(`
|
||||||
|
market- {
|
||||||
|
font-family: 'Bona';
|
||||||
|
}
|
||||||
|
|
||||||
|
market- 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 Market extends Shadow {
|
||||||
|
|
||||||
|
listings = [
|
||||||
|
{
|
||||||
|
title: "Shield Lapel Pin",
|
||||||
|
stars: "5",
|
||||||
|
reviews: 1,
|
||||||
|
price: "$12",
|
||||||
|
company: "Hyperia",
|
||||||
|
type: "new",
|
||||||
|
image: "/db/images/1",
|
||||||
|
madeIn: "America"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
MarketSidebar()
|
||||||
|
|
||||||
|
MarketGrid(this.listings)
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input("Search for products... (Coming Soon!)", "45vw")
|
||||||
|
.attr({
|
||||||
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
|
})
|
||||||
|
.fontSize(1.1, em)
|
||||||
|
.paddingLeft(1.3, em)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.outline("none")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
|
.cursor("not-allowed")
|
||||||
|
|
||||||
|
button("+ Add Item")
|
||||||
|
.width(7, em)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--accent2)")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.fontFamily("Bona Nova")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.background = "var(--green)"
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.style.background = "transparent"
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick((clicking) => {
|
||||||
|
console.log(this, "clicked")
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
.x(55, vw).y(4, vh)
|
||||||
|
.position("absolute")
|
||||||
|
.transform("translateX(-50%)")
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(100, "%")
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
// Optional additional logic
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Market)
|
||||||
140
ui/mobile/apps/Market/MarketGrid.js
Normal file
140
ui/mobile/apps/Market/MarketGrid.js
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
class MarketGrid extends Shadow {
|
||||||
|
listings;
|
||||||
|
|
||||||
|
constructor(listings) {
|
||||||
|
super()
|
||||||
|
this.listings = listings
|
||||||
|
}
|
||||||
|
|
||||||
|
boldUntilFirstSpace(text) {
|
||||||
|
if(!text) return
|
||||||
|
const index = text.indexOf(' ');
|
||||||
|
if (index === -1) {
|
||||||
|
// No spaces — bold the whole thing
|
||||||
|
return `<b>${text}</b>`;
|
||||||
|
}
|
||||||
|
return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
h3("Results")
|
||||||
|
.marginTop(0.1, em)
|
||||||
|
.marginBottom(1, em)
|
||||||
|
.marginLeft(0.4, em)
|
||||||
|
.color("var(--accent)")
|
||||||
|
.opacity(0.7)
|
||||||
|
|
||||||
|
if (this.listings.length > 0) {
|
||||||
|
ZStack(() => {
|
||||||
|
// BuyModal()
|
||||||
|
|
||||||
|
let params = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
const hyperiaMade = params.get("hyperia-made") === "true";
|
||||||
|
const americaMade = params.get("america-made") === "true";
|
||||||
|
const newItem = params.get("new") === "true";
|
||||||
|
const usedItem = params.get("used") === "true";
|
||||||
|
|
||||||
|
|
||||||
|
let filtered = this.listings;
|
||||||
|
if (hyperiaMade) {
|
||||||
|
filtered = filtered.filter(item => item.madeIn === "Hyperia");
|
||||||
|
}
|
||||||
|
if (americaMade) {
|
||||||
|
filtered = filtered.filter(item => item.madeIn === "America");
|
||||||
|
}
|
||||||
|
if (newItem) {
|
||||||
|
filtered = filtered.filter(item => item.type === "new");
|
||||||
|
}
|
||||||
|
if (usedItem) {
|
||||||
|
filtered = filtered.filter(item => item.type === "used");
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < filtered.length; i++) {
|
||||||
|
const rating = filtered[i].stars
|
||||||
|
const percent = (rating / 5)
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
img(filtered[i].image)
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
|
p(filtered[i].company)
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
|
p(filtered[i].title)
|
||||||
|
.fontSize(1.2, em)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
p(filtered[i].stars)
|
||||||
|
.marginRight(0.2, em)
|
||||||
|
|
||||||
|
ZStack(() => {
|
||||||
|
div("★★★★★") // Empty stars (background)
|
||||||
|
.color("#ccc")
|
||||||
|
|
||||||
|
div("★★★★★") // Filled stars (foreground, clipped by width)
|
||||||
|
.color("#ffa500")
|
||||||
|
.position("absolute")
|
||||||
|
.top(0)
|
||||||
|
.left(0)
|
||||||
|
.whiteSpace("nowrap")
|
||||||
|
.overflow("hidden")
|
||||||
|
.width(percent * 5, em)
|
||||||
|
})
|
||||||
|
.display("inline-block")
|
||||||
|
.position("relative")
|
||||||
|
.fontSize(1.2, em)
|
||||||
|
.lineHeight(1)
|
||||||
|
|
||||||
|
p(filtered[i].reviews)
|
||||||
|
.marginLeft(0.2, em)
|
||||||
|
})
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
|
p(filtered[i].price)
|
||||||
|
.fontSize(1.75, em)
|
||||||
|
.marginBottom(0.5, em)
|
||||||
|
|
||||||
|
button("Coming Soon!")
|
||||||
|
.onClick((finished) => {
|
||||||
|
if(finished) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.backgroundColor = "var(--green)"
|
||||||
|
} else {
|
||||||
|
this.style.backgroundColor = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
.padding(1, em)
|
||||||
|
.border("1px solid var(--accent2)")
|
||||||
|
.borderRadius(5, "px")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.display("grid")
|
||||||
|
.gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
|
||||||
|
.gap(1, em)
|
||||||
|
} else {
|
||||||
|
p("No Listings!")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onQueryChanged(() => {
|
||||||
|
console.log("query did change yup")
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
|
.height(100, vh)
|
||||||
|
.paddingLeft(2, em)
|
||||||
|
.paddingRight(2, em)
|
||||||
|
.gap(0, em)
|
||||||
|
.width(100, "%")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MarketGrid)
|
||||||
85
ui/mobile/apps/Market/MarketSidebar.js
Normal file
85
ui/mobile/apps/Market/MarketSidebar.js
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
class MarketSidebar extends Shadow {
|
||||||
|
|
||||||
|
handleChecked(e) {
|
||||||
|
let checked = e.target.checked
|
||||||
|
let label = $(`label[for="${e.target.id}"]`).innerText
|
||||||
|
if(checked) {
|
||||||
|
window.setQuery(label.toLowerCase(), true)
|
||||||
|
} else {
|
||||||
|
window.setQuery(label.toLowerCase(), null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
|
||||||
|
p("Make")
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "hyperia-check"
|
||||||
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
|
label("Hyperia-Made")
|
||||||
|
.attr({
|
||||||
|
"for": "hyperia-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "america-check"
|
||||||
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
|
label("America-Made")
|
||||||
|
.attr({
|
||||||
|
"for": "america-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
|
|
||||||
|
p("Condition")
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "new-check"
|
||||||
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
|
label("New")
|
||||||
|
.attr({
|
||||||
|
"for": "new-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "used-check"
|
||||||
|
})
|
||||||
|
.onChange(this.handleChecked)
|
||||||
|
label("Used")
|
||||||
|
.attr({
|
||||||
|
"for": "used-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.paddingTop(12, vh)
|
||||||
|
.paddingLeft(3, em)
|
||||||
|
.paddingRight(3, em)
|
||||||
|
.gap(1, em)
|
||||||
|
.minWidth(10, vw)
|
||||||
|
.userSelect('none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MarketSidebar)
|
||||||
188
ui/mobile/apps/Messages/Messages.js
Normal file
188
ui/mobile/apps/Messages/Messages.js
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
import "./MessagesSidebar.js"
|
||||||
|
import "./MessagesPanel.js"
|
||||||
|
|
||||||
|
css(`
|
||||||
|
messages- {
|
||||||
|
font-family: 'Bona';
|
||||||
|
}
|
||||||
|
|
||||||
|
messages- 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 Messages extends Shadow {
|
||||||
|
conversations = []
|
||||||
|
selectedConvoID = null
|
||||||
|
onConversationSelect(i) {
|
||||||
|
console.log("convo selected: ", i)
|
||||||
|
this.selectedConvoID = i
|
||||||
|
this.$("messagessidebar-").rerender()
|
||||||
|
this.$("messagespanel-").rerender()
|
||||||
|
}
|
||||||
|
|
||||||
|
getConvoFromID(id) {
|
||||||
|
for(let i=0; i<this.conversations.length; i++) {
|
||||||
|
if(this.conversations[i].id === id) {
|
||||||
|
return this.conversations[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
if(this.getConvoFromID(this.selectedConvoID)) {
|
||||||
|
MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
|
||||||
|
} else {
|
||||||
|
MessagesPanel()
|
||||||
|
}
|
||||||
|
|
||||||
|
input("Send Message", "93%")
|
||||||
|
.paddingVertical(1, em)
|
||||||
|
.paddingHorizontal(2, em)
|
||||||
|
.color("var(--accent)")
|
||||||
|
.background("var(--darkbrown)")
|
||||||
|
.marginBottom(6, em)
|
||||||
|
.border("none")
|
||||||
|
.fontSize(1, em)
|
||||||
|
.onKeyDown((e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
|
||||||
|
e.target.value = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.width(100, pct)
|
||||||
|
.alignHorizontal("center")
|
||||||
|
.alignVertical("end")
|
||||||
|
})
|
||||||
|
.onAppear(async () => {
|
||||||
|
let res = await Socket.send({app: "MESSAGES", operation: "GET"})
|
||||||
|
if(!res) console.error("failed to get messages")
|
||||||
|
|
||||||
|
if(res.msg.length > 0 && this.conversations.length === 0) {
|
||||||
|
this.conversations = res.msg
|
||||||
|
this.selectedConvoID = this.conversations[0].id
|
||||||
|
this.rerender()
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("new-message", (e) => {
|
||||||
|
let convoID = e.detail.conversationID
|
||||||
|
let messages = e.detail.messages
|
||||||
|
let convo = this.getConvoFromID(convoID)
|
||||||
|
convo.messages = messages
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(87, vh)
|
||||||
|
.x(0).y(13, vh)
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
p("Add Message")
|
||||||
|
|
||||||
|
input("enter email...")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.onKeyDown(function (e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
window.Socket.send({app: "MESSAGES", operation: "ADDCONVERSATION", msg: {email: this.value }})
|
||||||
|
this.value = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
p("x")
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
this.parentElement.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.xRight(2, em).y(2, em)
|
||||||
|
.fontSize(1.4, em)
|
||||||
|
.cursor("pointer")
|
||||||
|
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.alignVertical("center")
|
||||||
|
.alignHorizontal("center")
|
||||||
|
.backgroundColor("black")
|
||||||
|
.border("1px solid var(--accent)")
|
||||||
|
.position("fixed")
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.center()
|
||||||
|
.width(60, vw)
|
||||||
|
.height(60, vh)
|
||||||
|
.display("none")
|
||||||
|
.attr({id: "addPanel"})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input("Search messages... (Coming Soon!)", "45vw")
|
||||||
|
.attr({
|
||||||
|
"type": "text",
|
||||||
|
"disabled": "true"
|
||||||
|
})
|
||||||
|
.fontSize(1.1, em)
|
||||||
|
.paddingLeft(1.3, em)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.outline("none")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.opacity(0.5)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("grey")
|
||||||
|
.cursor("not-allowed")
|
||||||
|
|
||||||
|
button("+ New Message")
|
||||||
|
.width(13, em)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("transparent")
|
||||||
|
.border("0.5px solid var(--divider)")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.fontFamily("Bona Nova")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.background = "var(--green)"
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.style.background = "transparent"
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick((done) => {
|
||||||
|
console.log("click")
|
||||||
|
if(done) {
|
||||||
|
this.$("#addPanel").style.display = "flex"
|
||||||
|
}
|
||||||
|
console.log(this, "clicked")
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
.x(55, vw).y(4, vh)
|
||||||
|
.position("absolute")
|
||||||
|
.transform("translateX(-50%)")
|
||||||
|
})
|
||||||
|
.width(100, "%")
|
||||||
|
.height(100, "%")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Messages)
|
||||||
56
ui/mobile/apps/Messages/MessagesPanel.js
Normal file
56
ui/mobile/apps/Messages/MessagesPanel.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import "../../components/LoadingCircle.js"
|
||||||
|
|
||||||
|
class MessagesPanel extends Shadow {
|
||||||
|
messages
|
||||||
|
|
||||||
|
constructor(messages) {
|
||||||
|
super()
|
||||||
|
this.messages = messages
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
if(this.messages) {
|
||||||
|
for(let i=0; i<this.messages.length; i++) {
|
||||||
|
let message = this.messages[i]
|
||||||
|
let fromMe = window.profile.email === message.from.email
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
p(message.from.firstName + " " + message.from.lastName)
|
||||||
|
.fontWeight("bold")
|
||||||
|
.marginBottom(0.3, em)
|
||||||
|
|
||||||
|
p(util.formatTime(message.time))
|
||||||
|
.opacity(0.2)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
})
|
||||||
|
p(message.text)
|
||||||
|
})
|
||||||
|
.paddingVertical(0.5, em)
|
||||||
|
.marginLeft(fromMe ? 70 : 0, pct)
|
||||||
|
.paddingRight(fromMe ? 10 : 0, pct)
|
||||||
|
.marginRight(fromMe ? 0 : 70, pct)
|
||||||
|
.paddingLeft(fromMe ? 5 : 10, pct)
|
||||||
|
.background(fromMe ? "var(--brown)" : "var(--green)")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
LoadingCircle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onAppear(async () => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
this.scrollTop = this.scrollHeight
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.gap(1, em)
|
||||||
|
.position("relative")
|
||||||
|
.overflow("scroll")
|
||||||
|
.height(95, pct)
|
||||||
|
.width(100, pct)
|
||||||
|
.paddingTop(2, em)
|
||||||
|
.paddingBottom(2, em)
|
||||||
|
.backgroundColor("var(--darkbrown)")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MessagesPanel)
|
||||||
73
ui/mobile/apps/Messages/MessagesSidebar.js
Normal file
73
ui/mobile/apps/Messages/MessagesSidebar.js
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
class MessagesSidebar extends Shadow {
|
||||||
|
conversations = []
|
||||||
|
selectedConvoID
|
||||||
|
onSelect
|
||||||
|
|
||||||
|
constructor(conversations, selectedConvoID, onSelect) {
|
||||||
|
super()
|
||||||
|
this.conversations = conversations
|
||||||
|
this.selectedConvoID = selectedConvoID
|
||||||
|
this.onSelect = onSelect
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
VStack(() => {
|
||||||
|
this.conversations.forEach((convo, i) => {
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
HStack(() => {
|
||||||
|
|
||||||
|
p(this.makeConvoTitle(convo.between))
|
||||||
|
.textAlign("left")
|
||||||
|
.marginLeft(0.5, inches)
|
||||||
|
.paddingTop(0.2, inches)
|
||||||
|
.width(100, pct)
|
||||||
|
.marginTop(0)
|
||||||
|
.fontSize(1, em)
|
||||||
|
.fontWeight("bold")
|
||||||
|
|
||||||
|
p(util.formatTime(convo.messages.last.time))
|
||||||
|
.paddingTop(0.2, inches)
|
||||||
|
.fontSize(0.8, em)
|
||||||
|
.marginRight(0.1, inches)
|
||||||
|
.color("var(--divider")
|
||||||
|
})
|
||||||
|
.justifyContent("space-between")
|
||||||
|
.marginBottom(0)
|
||||||
|
|
||||||
|
p(convo.messages.last.text)
|
||||||
|
.fontSize(0.8, em)
|
||||||
|
.textAlign("left")
|
||||||
|
.marginLeft(0.5, inches)
|
||||||
|
.marginBottom(2, em)
|
||||||
|
.color("var(--divider)")
|
||||||
|
})
|
||||||
|
.background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
|
||||||
|
.onClick(() => {
|
||||||
|
this.onSelect(i)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.minWidth(15, vw)
|
||||||
|
.height(100, vh)
|
||||||
|
.gap(0, em)
|
||||||
|
}
|
||||||
|
|
||||||
|
makeConvoTitle(members) {
|
||||||
|
let membersString = ""
|
||||||
|
for(let i=0; i<members.length; i++) {
|
||||||
|
let member = members[i]
|
||||||
|
if(member.email === window.profile.email) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if(members.length > 2) {
|
||||||
|
membersString += member.firstName
|
||||||
|
} else {
|
||||||
|
membersString += member.firstName + " " + member.lastName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return membersString
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(MessagesSidebar)
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
css(`
|
css(`
|
||||||
messages- {
|
tasks- {
|
||||||
font-family: 'Bona';
|
font-family: 'Bona';
|
||||||
}
|
}
|
||||||
|
|
||||||
messages- input::placeholder {
|
tasks- input::placeholder {
|
||||||
font-family: 'Bona Nova';
|
font-family: 'Bona Nova';
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
@@ -22,25 +22,35 @@ css(`
|
|||||||
}
|
}
|
||||||
`)
|
`)
|
||||||
|
|
||||||
class Messages extends Shadow {
|
class Tasks extends Shadow {
|
||||||
friends = []
|
projects = [
|
||||||
conversations = []
|
{
|
||||||
|
"title": "Blockcatcher",
|
||||||
|
"tasks": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
columns = [
|
||||||
|
{
|
||||||
|
"title": "backlog",
|
||||||
|
"tasks": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
ZStack(() => {
|
ZStack(() => {
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
VStack(() => {
|
VStack(() => {
|
||||||
h3("Friends")
|
h3("Projects")
|
||||||
.marginTop(0)
|
.marginTop(0)
|
||||||
.marginBottom(1, em)
|
.marginBottom(1, em)
|
||||||
.marginLeft(0.4, em)
|
.marginLeft(0.4, em)
|
||||||
|
|
||||||
if (this.friends.length > 1) {
|
if (this.projects.length >= 1) {
|
||||||
for(let i = 0; i < this.friends.length; i++) {
|
for(let i = 0; i < this.projects.length; i++) {
|
||||||
p(this.friends[i].name)
|
p(this.projects[i].title)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
p("No Friends!")
|
p("No Projects!")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.height(100, vh)
|
.height(100, vh)
|
||||||
@@ -48,17 +58,12 @@ class Messages extends Shadow {
|
|||||||
.paddingRight(2, em)
|
.paddingRight(2, em)
|
||||||
.paddingTop(2, em)
|
.paddingTop(2, em)
|
||||||
.gap(0, em)
|
.gap(0, em)
|
||||||
.borderRight("1px solid var(--accent2)")
|
.borderRight("0.5px solid var(--accent2)")
|
||||||
|
|
||||||
VStack(() => {
|
HStack(() => {
|
||||||
h3("Conversations")
|
if (this.columns.length >= 1) {
|
||||||
.marginTop(0)
|
for(let i = 0; i < this.columns.length; i++) {
|
||||||
.marginBottom(1, em)
|
p(this.columns[i].name)
|
||||||
.marginLeft(0.4, em)
|
|
||||||
|
|
||||||
if (this.conversations.length > 1) {
|
|
||||||
for(let i = 0; i < this.conversations.length; i++) {
|
|
||||||
p(this.conversations[i].name)
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
p("No Conversations!")
|
p("No Conversations!")
|
||||||
@@ -69,11 +74,11 @@ class Messages extends Shadow {
|
|||||||
.paddingRight(2, em)
|
.paddingRight(2, em)
|
||||||
.paddingTop(2, em)
|
.paddingTop(2, em)
|
||||||
.gap(0, em)
|
.gap(0, em)
|
||||||
.borderRight("1px solid var(--accent2)")
|
.borderRight("0.5px solid var(--accent2)")
|
||||||
})
|
})
|
||||||
.width(100, "%")
|
.width(100, "%")
|
||||||
.x(0).y(13, vh)
|
.x(0).y(13, vh)
|
||||||
.borderTop("1px solid var(--accent2)")
|
.borderTop("0.5px solid var(--accent2)")
|
||||||
|
|
||||||
p("0 Items")
|
p("0 Items")
|
||||||
.position("absolute")
|
.position("absolute")
|
||||||
@@ -81,14 +86,14 @@ class Messages extends Shadow {
|
|||||||
.transform("translate(-50%, -50%)")
|
.transform("translate(-50%, -50%)")
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input("Search messages...", "45vw")
|
input("Search tasks...", "45vw")
|
||||||
.attr({
|
.attr({
|
||||||
"type": "text"
|
"type": "text"
|
||||||
})
|
})
|
||||||
.fontSize(1.1, em)
|
.fontSize(1.1, em)
|
||||||
.paddingLeft(1.3, em)
|
.paddingLeft(1.3, em)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--accent2)")
|
.border("0.5px solid var(--accent2)")
|
||||||
.outline("none")
|
.outline("none")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
@@ -97,7 +102,7 @@ class Messages extends Shadow {
|
|||||||
.marginLeft(2, em)
|
.marginLeft(2, em)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--accent2)")
|
.border("0.5px solid var(--accent2)")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.fontFamily("Bona Nova")
|
.fontFamily("Bona Nova")
|
||||||
.onHover(function (hovering) {
|
.onHover(function (hovering) {
|
||||||
@@ -110,12 +115,12 @@ class Messages extends Shadow {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
button("+ New Message")
|
button("+ New Task")
|
||||||
.width(13, em)
|
.width(9, em)
|
||||||
.marginLeft(1, em)
|
.marginLeft(1, em)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--accent2)")
|
.border("0.5px solid var(--accent2)")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.fontFamily("Bona Nova")
|
.fontFamily("Bona Nova")
|
||||||
.onHover(function (hovering) {
|
.onHover(function (hovering) {
|
||||||
@@ -140,39 +145,9 @@ class Messages extends Shadow {
|
|||||||
.height(100, "%")
|
.height(100, "%")
|
||||||
}
|
}
|
||||||
|
|
||||||
SidebarName(name) {
|
|
||||||
let firstLetter = name[0]
|
|
||||||
|
|
||||||
HStack(() => {
|
|
||||||
div(firstLetter)
|
|
||||||
.display("flex")
|
|
||||||
.justifyContent("center")
|
|
||||||
.alignItems("center")
|
|
||||||
.width(1.5, em)
|
|
||||||
.height(1.5, em)
|
|
||||||
.border("1px solid var(--accent2)")
|
|
||||||
.borderRadius(100, "%")
|
|
||||||
p(name)
|
|
||||||
.marginLeft(1, em)
|
|
||||||
})
|
|
||||||
.alignItems("center")
|
|
||||||
.padding(5, px)
|
|
||||||
.borderRadius(0.5, em)
|
|
||||||
.cursor("default")
|
|
||||||
.onHover(function (hovering) {
|
|
||||||
if(hovering) {
|
|
||||||
this.style.background = "var(--green)"
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.style.background = "transparent"
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
// Optional additional logic
|
// Optional additional logic
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
register(Messages)
|
register(Tasks)
|
||||||
77
ui/mobile/components/AppMenu.js
Normal file
77
ui/mobile/components/AppMenu.js
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
class AppMenu extends Shadow {
|
||||||
|
selected = ""
|
||||||
|
|
||||||
|
onNewSelection() {
|
||||||
|
this.$$("img").forEach((image) => {
|
||||||
|
image.style.background = ""
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
console.log("rendering")
|
||||||
|
HStack(() => {
|
||||||
|
img("/_/icons/Column.svg", "1.5em", "1.5em")
|
||||||
|
.attr({app: "forum"})
|
||||||
|
.padding(0.5, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.onAppear(function () {
|
||||||
|
this.style.border = "1px solid black"
|
||||||
|
})
|
||||||
|
.onClick((finished, e) => {
|
||||||
|
if(finished) {
|
||||||
|
this.onNewSelection()
|
||||||
|
}
|
||||||
|
e.target.style.background = "var(--accent)"
|
||||||
|
console.log(e.target, e.target.style.background)
|
||||||
|
if(finished) {
|
||||||
|
window.navigateTo("/")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
img("/_/icons/letter.svg", "1.5em", "1.5em")
|
||||||
|
.attr({app: "messages"})
|
||||||
|
.padding(0.5, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.onAppear(function () {
|
||||||
|
this.style.border = "1px solid black"
|
||||||
|
})
|
||||||
|
.onClick((finished, e) => {
|
||||||
|
if(finished) {
|
||||||
|
this.onNewSelection()
|
||||||
|
}
|
||||||
|
e.target.style.background = "rgb(112 150 114)"
|
||||||
|
if(finished) {
|
||||||
|
window.navigateTo("/messages")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
img("/_/icons/jobs.svg", "1.5em", "1.5em")
|
||||||
|
.attr({app: "jobs"})
|
||||||
|
.padding(0.5, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.onAppear(function () {
|
||||||
|
this.style.border = "1px solid black"
|
||||||
|
})
|
||||||
|
.onClick((finished, e) => {
|
||||||
|
if(finished) {
|
||||||
|
this.onNewSelection()
|
||||||
|
}
|
||||||
|
e.target.style.background = "#9392bb"
|
||||||
|
if(finished) {
|
||||||
|
window.navigateTo("/jobs")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.borderTop("1px solid black")
|
||||||
|
.height("auto")
|
||||||
|
.position('fixed')
|
||||||
|
.background("var(--main)")
|
||||||
|
.zIndex(1)
|
||||||
|
.x(0).yBottom(0)
|
||||||
|
.justifyContent("space-between")
|
||||||
|
.paddingHorizontal(4, em)
|
||||||
|
.paddingVertical(1, em)
|
||||||
|
.width(100, vw)
|
||||||
|
.boxSizing("border-box")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(AppMenu)
|
||||||
37
ui/mobile/components/Home.js
Normal file
37
ui/mobile/components/Home.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import "./AppMenu.js"
|
||||||
|
import "../apps/Forum/Forum.js"
|
||||||
|
import "../apps/Messages/Messages.js"
|
||||||
|
import "../apps/Jobs/Jobs.js"
|
||||||
|
|
||||||
|
class Home extends Shadow {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
|
||||||
|
ZStack(() => {
|
||||||
|
switch(window.location.pathname) {
|
||||||
|
case "/":
|
||||||
|
Forum()
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "/messages":
|
||||||
|
Messages()
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "/jobs":
|
||||||
|
Jobs()
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onNavigate(function () {
|
||||||
|
console.log("navigate")
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
|
|
||||||
|
AppMenu()
|
||||||
|
})
|
||||||
|
.overflowX("hidden")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Home)
|
||||||
25
ui/mobile/components/LoadingCircle.js
Normal file
25
ui/mobile/components/LoadingCircle.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
class LoadingCircle extends Shadow {
|
||||||
|
render() {
|
||||||
|
div()
|
||||||
|
.borderRadius(100, pct)
|
||||||
|
.width(2, em).height(2, em)
|
||||||
|
.x(45, pct).y(50, pct)
|
||||||
|
.center()
|
||||||
|
.backgroundColor("var(--accent")
|
||||||
|
.transition("transform 1.75s ease-in-out")
|
||||||
|
.onAppear(function () {
|
||||||
|
let growing = true;
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
if (growing) {
|
||||||
|
this.style.transform = "scale(1.5)";
|
||||||
|
} else {
|
||||||
|
this.style.transform = "scale(0.7)";
|
||||||
|
}
|
||||||
|
growing = !growing;
|
||||||
|
}, 750);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(LoadingCircle)
|
||||||
14
ui/mobile/index.html
Normal file
14
ui/mobile/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Hyperia</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" href="/_/icons/logo.svg">
|
||||||
|
<link rel="stylesheet" href="/_/code/shared.css">
|
||||||
|
<script src="/_/code/quill.js"></script>
|
||||||
|
<script src="/_/code/zod.js"></script>
|
||||||
|
<script type="module" src="75820185/index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
ui/mobile/index.js
Normal file
8
ui/mobile/index.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import Socket from "/_/code/ws/Socket.js"
|
||||||
|
import "./components/Home.js"
|
||||||
|
|
||||||
|
import util from "./util.js"
|
||||||
|
window.util = util
|
||||||
|
|
||||||
|
window.Socket = new Socket()
|
||||||
|
Home()
|
||||||
9
ui/mobile/util.js
Normal file
9
ui/mobile/util.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export default class util {
|
||||||
|
static formatTime(str) {
|
||||||
|
const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
|
||||||
|
if (!match) return null;
|
||||||
|
|
||||||
|
const [_, hourMin, ampm] = match;
|
||||||
|
return hourMin + ampm.toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,11 +5,25 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" href="/_/icons/logo.svg">
|
<link rel="icon" href="/_/icons/logo.svg">
|
||||||
<link rel="stylesheet" href="/_/code/shared.css">
|
<link rel="stylesheet" href="/_/code/shared.css">
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/_/fonts/BonaNova/BonaNova-Regular.woff"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin
|
||||||
|
>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/_/fonts/BonaNova/BonaNova-Bold.woff"
|
||||||
|
as="font"
|
||||||
|
type="font/woff"
|
||||||
|
crossorigin
|
||||||
|
>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
background-image: url("/_/images/fabric.png");
|
background-image: url("/_/images/fabric.webp");
|
||||||
background-size: 33vw auto; /* width height of each tile */
|
background-size: 33vw auto; /* width height of each tile */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ class Events extends Shadow {
|
|||||||
|
|
||||||
events = [
|
events = [
|
||||||
{
|
{
|
||||||
date: `January 2, 2025`,
|
date: `January 23, 2025`,
|
||||||
title: `Hyperia Winter Ball`,
|
title: `Hyperia Winter Ball`,
|
||||||
description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
|
description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
|
||||||
location: `Austin, TX`
|
location: `Austin, TX`
|
||||||
@@ -10,44 +10,316 @@ class Events extends Shadow {
|
|||||||
]
|
]
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
ZStack(() => {
|
||||||
|
VStack(() => {
|
||||||
|
|
||||||
|
h1("HYPERIA")
|
||||||
|
.marginBottom(0, em)
|
||||||
|
|
||||||
|
p("Public Events")
|
||||||
|
.fontSize(1.2, em)
|
||||||
|
.marginBottom(2, em)
|
||||||
|
|
||||||
|
const Stack = window.isMobile() ? VStack : HStack
|
||||||
|
Stack(() => {
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
p(`February 7, 2026`)
|
||||||
|
|
||||||
|
p(`Hyperia Winter Ball`)
|
||||||
|
.fontSize(1.2, em)
|
||||||
|
|
||||||
|
p(`Austin, TX`)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
p(`Join us in Austin, Texas for two-stepping and live music by Noah Kurtis. 21 and up.`)
|
||||||
|
.marginRight(4, em)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
img("/_/icons/creditcards/visa.svg")
|
||||||
|
img("/_/icons/creditcards/mastercard.svg")
|
||||||
|
img("/_/icons/creditcards/discover.svg")
|
||||||
|
img("/_/icons/creditcards/amex.svg")
|
||||||
|
})
|
||||||
|
.alignSelf("flex-start")
|
||||||
|
.height(2, em)
|
||||||
|
.maxWidth(40, vw)
|
||||||
|
|
||||||
|
button("RSVP")
|
||||||
|
.color("var(--darkbrown")
|
||||||
|
.border("1px solid #ab2f007d")
|
||||||
|
.background('var(--green)')
|
||||||
|
.marginLeft("auto")
|
||||||
|
.onClick(async function() {
|
||||||
|
window.open("https://partiful.com/e/XqnPwBKS9vUMd8GYX3xz?c=HLU81h69", "_blank", "noopener");
|
||||||
|
// this.innerText = "Loading..."
|
||||||
|
// const res = await fetch("/create-checkout-session", { method: "POST" });
|
||||||
|
// const data = await res.json();
|
||||||
|
// window.location = data.url;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.gap(3, em)
|
||||||
|
.color("var(--darkbrown)")
|
||||||
|
.background(`var(--accent)`)
|
||||||
|
.padding(1, em)
|
||||||
|
.borderRadius(12, px)
|
||||||
|
.border("2px solid #ab2f007d")
|
||||||
|
})
|
||||||
|
.marginLeft(window.isMobile() ? 0 : 15, vmax)
|
||||||
|
.marginRight(window.isMobile() ? 0 : 15, vmax)
|
||||||
|
.marginTop(10, vmax)
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
p("Privacy Policy")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.color = "var(--darkbrown)"
|
||||||
|
} else {
|
||||||
|
this.style.color = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick(() => {
|
||||||
|
this.$("#policyWindow").style.display = "flex"
|
||||||
|
})
|
||||||
|
p("Refund and Return Policy")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.color = "var(--darkbrown)"
|
||||||
|
} else {
|
||||||
|
this.style.color = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick(() => {
|
||||||
|
this.$("#refundWindow").style.display = "flex"
|
||||||
|
})
|
||||||
|
p("Contact Us")
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.color = "var(--darkbrown)"
|
||||||
|
} else {
|
||||||
|
this.style.color = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick(() => {
|
||||||
|
this.$("#contactWindow").style.display = "flex"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.x(50, vw).yBottom(0, vh)
|
||||||
|
.center()
|
||||||
|
.gap(2, em)
|
||||||
|
.opacity(0.5)
|
||||||
|
.cursor("default")
|
||||||
|
})
|
||||||
|
|
||||||
VStack(() => {
|
VStack(() => {
|
||||||
|
|
||||||
p("Public Events")
|
p("Privacy Policy")
|
||||||
.fontSize(1.2, em)
|
.fontSize(2, em)
|
||||||
.marginBottom(2, em)
|
.fontWeight(600)
|
||||||
|
.marginBottom(1, em)
|
||||||
|
|
||||||
const Stack = window.isMobile() ? VStack : HStack
|
p("We value your privacy. This Privacy Policy explains how we collect, use, store, and protect your information when you use our website or services.")
|
||||||
Stack(() => {
|
|
||||||
|
|
||||||
VStack(() => {
|
p("1. Information We Collect")
|
||||||
p(`January 2, 2025`)
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
p(`Hyperia Winter Ball`)
|
p("• Personal information you provide, such as your name, email address, or other contact details.")
|
||||||
.fontSize(1.2, em)
|
p("• Automatically collected data, including IP address, browser type, device information, and usage statistics.")
|
||||||
|
p("• Cookies or similar tracking technologies that help us improve the user experience.")
|
||||||
|
|
||||||
p(`Austin, TX`)
|
p("2. How We Use Your Information")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
})
|
p("• To operate and improve our website and services.")
|
||||||
|
p("• To communicate with you about updates, support requests, or account-related matters.")
|
||||||
|
p("• To maintain security, prevent fraud, and ensure proper functionality.")
|
||||||
|
|
||||||
p(`Join us in Austin, Texas for a great dance, with free drinks and live music by Boerne's own Noah Kurtis. <br><br>Admission: $50 for men, women are free.`)
|
p("3. How We Share Information")
|
||||||
.marginRight(4, em)
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("We do not sell your personal information. We may share data only with trusted service providers who help us operate the platform, or when required by law.")
|
||||||
|
|
||||||
|
p("4. Data Storage & Security")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("We use reasonable technical and administrative safeguards to protect your information. However, no system is completely secure, and we cannot guarantee absolute protection.")
|
||||||
|
|
||||||
|
p("5. Cookies")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("Our site may use cookies to remember preferences, analyze traffic, and enhance usability. You can disable cookies in your browser settings, but some features may stop working.")
|
||||||
|
|
||||||
|
p("6. Your Rights")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("Depending on your location, you may have rights to access, update, delete, or request a copy of your personal data. Contact us if you wish to exercise these rights.")
|
||||||
|
|
||||||
|
p("7. Third-Party Links")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("Our website may contain links to third-party sites. We are not responsible for their content or privacy practices.")
|
||||||
|
|
||||||
|
p("8. Changes to This Policy")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("We may update this Privacy Policy from time to time. Updated versions will be posted on this page with the effective date.")
|
||||||
|
|
||||||
|
p("9. Contact Us")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("If you have any questions about this Privacy Policy, feel free to contact us at info@hyperia.so.")
|
||||||
|
|
||||||
|
p("x")
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
this.parentElement.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.color("var(--red)")
|
||||||
|
.xRight(1, em).y(1, em)
|
||||||
|
.fontSize(2, em)
|
||||||
|
.cursor("pointer")
|
||||||
|
|
||||||
button("Tickets Available Soon")
|
|
||||||
.color("var(--darkbrown")
|
|
||||||
.border("1px solid #ab2f007d")
|
|
||||||
.background('var(--grey)')
|
|
||||||
.marginLeft("auto")
|
|
||||||
})
|
|
||||||
.gap(3, em)
|
|
||||||
.color("var(--darkbrown)")
|
|
||||||
.background(`var(--accent)`)
|
|
||||||
.padding(1, em)
|
|
||||||
.borderRadius(12, px)
|
|
||||||
.border("2px solid #ab2f007d")
|
|
||||||
})
|
})
|
||||||
.marginLeft(window.isMobile() ? 0 : 15, vmax)
|
.x(50, vw).y(50, vh)
|
||||||
.marginRight(window.isMobile() ? 0 : 15, vmax)
|
.width(70, vw).height(70, vh)
|
||||||
.marginTop(15, vmax)
|
.center()
|
||||||
|
.backgroundColor("var(--accent)")
|
||||||
|
.display("none")
|
||||||
|
.overflow("scroll")
|
||||||
|
.padding(1, em)
|
||||||
|
.border("3px solid black")
|
||||||
|
.color("var(--darkbrown)")
|
||||||
|
.attr({ id: "policyWindow" })
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
|
||||||
|
p("Refund & Return Policy")
|
||||||
|
.fontSize(2, em)
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginBottom(1, em)
|
||||||
|
|
||||||
|
p("1. Eligibility for Refunds")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("• Refund requests may be considered when submitted within 14 days of purchase.")
|
||||||
|
p("• To qualify, you must provide proof of purchase and a valid reason for the request.")
|
||||||
|
p("• Certain digital products or services may be non-refundable once accessed or downloaded.")
|
||||||
|
|
||||||
|
p("2. Non-Refundable Items")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("• Products or services that have already been delivered, downloaded, or accessed in full.")
|
||||||
|
p("• Custom work, personalized items, or one-time service fees.")
|
||||||
|
p("• Any promotional or discounted items, unless required by law.")
|
||||||
|
|
||||||
|
p("3. Returns (If Applicable)")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("• Physical items must be returned in their original condition.")
|
||||||
|
p("• You are responsible for return shipping costs unless the item was defective or incorrect.")
|
||||||
|
p("• Items damaged through misuse or neglect cannot be returned.")
|
||||||
|
|
||||||
|
p("4. Processing Refunds")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("• Approved refunds are issued to the original payment method.")
|
||||||
|
p("• Processing times may vary depending on your bank or payment provider.")
|
||||||
|
p("• We will notify you once your refund has been initiated.")
|
||||||
|
|
||||||
|
p("5. Cancellations")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("• Orders or subscriptions may be cancelled before fulfillment or renewal.")
|
||||||
|
p("• If Hyperia declare a cancellation of any product or event, a refund will be issued to all parties.")
|
||||||
|
|
||||||
|
p("6. Contact for Refund Requests")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("If you need to request a refund, return an item, or cancel an order, please contact us at info@hyperia.so. Include your order number and relevant details so we can assist you promptly.")
|
||||||
|
|
||||||
|
p("7. Policy Updates")
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginTop(1, em)
|
||||||
|
|
||||||
|
p("We may update this Refund & Return Policy from time to time. Any changes will be posted on this page with the effective date.")
|
||||||
|
|
||||||
|
p("x")
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
this.parentElement.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.color("var(--red)")
|
||||||
|
.xRight(1, em).y(1, em)
|
||||||
|
.fontSize(2, em)
|
||||||
|
.cursor("pointer")
|
||||||
|
|
||||||
|
})
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.width(70, vw).height(70, vh)
|
||||||
|
.center()
|
||||||
|
.backgroundColor("var(--accent)")
|
||||||
|
.display("none")
|
||||||
|
.overflow("scroll")
|
||||||
|
.padding(1, em)
|
||||||
|
.border("3px solid black")
|
||||||
|
.color("var(--darkbrown)")
|
||||||
|
.attr({ id: "refundWindow" })
|
||||||
|
|
||||||
|
|
||||||
|
VStack(() => {
|
||||||
|
|
||||||
|
p("Contact Us")
|
||||||
|
.fontSize(2, em)
|
||||||
|
.fontWeight(600)
|
||||||
|
.marginBottom(1, em)
|
||||||
|
|
||||||
|
p("Email: info@hyperia.so")
|
||||||
|
p("Phone: 813-373-9100")
|
||||||
|
p("Address: 2014 E 9th St, Unit A, Austin TX")
|
||||||
|
|
||||||
|
p("x")
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
this.parentElement.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.color("var(--red)")
|
||||||
|
.xRight(1, em).y(1, em)
|
||||||
|
.fontSize(2, em)
|
||||||
|
.cursor("pointer")
|
||||||
|
|
||||||
|
})
|
||||||
|
.gap(2, em)
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.width(50, vw).height(50, vh)
|
||||||
|
.center()
|
||||||
|
.backgroundColor("var(--accent)")
|
||||||
|
.display("none")
|
||||||
|
.overflow("scroll")
|
||||||
|
.padding(1, em)
|
||||||
|
.border("3px solid black")
|
||||||
|
.color("var(--darkbrown)")
|
||||||
|
.attr({ id: "contactWindow" })
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import "./Why.js"
|
|||||||
import "./Events.js"
|
import "./Events.js"
|
||||||
import "./Join.js"
|
import "./Join.js"
|
||||||
import "./SignIn.js"
|
import "./SignIn.js"
|
||||||
|
import "./Success.js"
|
||||||
|
|
||||||
class Home extends Shadow {
|
class Home extends Shadow {
|
||||||
render() {
|
render() {
|
||||||
@@ -24,27 +25,37 @@ class Home extends Shadow {
|
|||||||
|
|
||||||
switch(window.location.pathname) {
|
switch(window.location.pathname) {
|
||||||
case "/":
|
case "/":
|
||||||
img("/_/images/knight.png", "29vmax")
|
img("/_/images/knight.webp", "29vmax")
|
||||||
.position("absolute")
|
.position("absolute")
|
||||||
.left(50, vw).top(isMobile() ? 50 : 53, vh)
|
.left(50, vw).top(isMobile() ? 50 : 53, vh)
|
||||||
.center()
|
.center()
|
||||||
|
|
||||||
p("H Y P E R I A ")
|
if(!isMobile()) {
|
||||||
.x(50, vw).y(isMobile() ? 50 : 53, vh)
|
p("H Y P E R I A ")
|
||||||
.textAlign("center")
|
.x(50, vw).y(53, vh)
|
||||||
.center()
|
.textAlign("center")
|
||||||
.color("var(--gold)")
|
.center()
|
||||||
.fontSize(isMobile() ? 6 : 5, vw)
|
.color("var(--gold)")
|
||||||
.maxWidth(isMobile() ? 0.8 : 100, em)
|
.fontSize(5, vw)
|
||||||
|
.maxWidth(isMobile() ? 1000 : 100, em)
|
||||||
|
} else {
|
||||||
|
p("H Y P E R I A ")
|
||||||
|
.x(46, vw).y(isMobile() ? 50 : 53, vh)
|
||||||
|
.textAlign("center")
|
||||||
|
.color("var(--gold)")
|
||||||
|
.fontSize(5, vw)
|
||||||
|
}
|
||||||
|
|
||||||
let text = "A Classical Christian Association"
|
if(!isMobile()) {
|
||||||
p(isMobile() ? text : text.toUpperCase())
|
let text = "A Classical Christian Network"
|
||||||
.x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
|
p(isMobile() ? text : text.toUpperCase())
|
||||||
.center()
|
.x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
|
||||||
.letterSpacing(0.3, em)
|
.center()
|
||||||
.width(isMobile() ? 80 : 100, vw)
|
.letterSpacing(0.1, em)
|
||||||
.fontSize(isMobile() ? 0.8 : 1, em)
|
.width(isMobile() ? 80 : 100, vw)
|
||||||
.textAlign("center")
|
.fontSize(isMobile() ? 0.8 : 1, em)
|
||||||
|
.textAlign("center")
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case "/why":
|
case "/why":
|
||||||
Why()
|
Why()
|
||||||
@@ -55,6 +66,9 @@ class Home extends Shadow {
|
|||||||
case "/join":
|
case "/join":
|
||||||
Join()
|
Join()
|
||||||
break;
|
break;
|
||||||
|
case "/success":
|
||||||
|
Success()
|
||||||
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
if(window.location.pathname.startsWith("/signup")) {
|
if(window.location.pathname.startsWith("/signup")) {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
class SignIn extends Shadow {
|
class SignIn extends Shadow {
|
||||||
|
|
||||||
inputStyles(el) {
|
inputStyles(el) {
|
||||||
console.log(el)
|
|
||||||
return el
|
return el
|
||||||
.border("1px solid var(--accent)")
|
.color("var(--accent)")
|
||||||
|
.border("1px solid var(--accent)")
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
9
ui/public/pages/Success.js
Normal file
9
ui/public/pages/Success.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
class Success extends Shadow {
|
||||||
|
render() {
|
||||||
|
p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.center()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Success)
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
// Create the hover display element
|
|
||||||
const hoverBox = document.createElement('div');
|
|
||||||
hoverBox.style.id = "hoverBox"
|
|
||||||
hoverBox.style.position = 'fixed';
|
|
||||||
hoverBox.style.padding = '8px 12px';
|
|
||||||
hoverBox.style.backgroundColor = 'var(--green)';
|
|
||||||
hoverBox.style.border = '1px solid var(--tan)';
|
|
||||||
hoverBox.style.color = 'var(--tan)';
|
|
||||||
hoverBox.style.opacity = '80%';
|
|
||||||
hoverBox.style.pointerEvents = 'none';
|
|
||||||
hoverBox.style.zIndex = '9999';
|
|
||||||
hoverBox.style.fontFamily = 'sans-serif';
|
|
||||||
hoverBox.style.fontSize = '14px';
|
|
||||||
hoverBox.style.display = 'none';
|
|
||||||
document.body.appendChild(hoverBox);
|
|
||||||
let currentTarget = null;
|
|
||||||
|
|
||||||
function capitalizeWords(str) {
|
|
||||||
return str
|
|
||||||
.split('-')
|
|
||||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
||||||
.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseOver(e) {
|
|
||||||
const target = e.target;
|
|
||||||
let paintingName; let artistName;
|
|
||||||
if(target.id === "back") {
|
|
||||||
paintingName = "The Garden Terrace"
|
|
||||||
artistName = "Caspar David Friedrich"
|
|
||||||
} else if (target.tagName.toLowerCase() === 'img' && target.classList.contains('interactive')) {
|
|
||||||
const match = target.src.match(/([^\/]+)\.([a-z]{3,4})(\?.*)?$/i); // extract filename
|
|
||||||
if (!match) return;
|
|
||||||
|
|
||||||
const filename = match[1];
|
|
||||||
const parts = filename.split('_');
|
|
||||||
if (parts.length !== 2) return;
|
|
||||||
|
|
||||||
paintingName = capitalizeWords(parts[0]);
|
|
||||||
artistName = capitalizeWords(parts[1]);
|
|
||||||
} else {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
hoverBox.innerHTML = `<strong>${paintingName}</strong><br><span style="font-size: 12px;">${artistName}</span>`;
|
|
||||||
hoverBox.style.display = 'block';
|
|
||||||
currentTarget = target;
|
|
||||||
hoverBox.style.left = `${e.clientX + 15}px`;
|
|
||||||
hoverBox.style.top = `${e.clientY + 15}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseOut(e) {
|
|
||||||
if (e.target === currentTarget) {
|
|
||||||
hoverBox.style.display = 'none';
|
|
||||||
currentTarget = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseMove(e) {
|
|
||||||
if (hoverBox.style.display === 'block') {
|
|
||||||
hoverBox.style.left = `${e.clientX + 15}px`;
|
|
||||||
hoverBox.style.top = `${e.clientY + 15}px`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('mouseover', onMouseOver);
|
|
||||||
document.addEventListener('mouseout', onMouseOut);
|
|
||||||
document.addEventListener('mousemove', onMouseMove);
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
let treeOriginalTop = null;
|
|
||||||
let currentVelocity = 0;
|
|
||||||
let isAnimating = false;
|
|
||||||
|
|
||||||
window.addEventListener('wheel', (e) => {
|
|
||||||
if(window.innerWidth < 600) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add scroll delta to the velocity
|
|
||||||
currentVelocity += e.deltaY;
|
|
||||||
|
|
||||||
// Start animation loop if not running
|
|
||||||
if (!isAnimating) {
|
|
||||||
isAnimating = true;
|
|
||||||
requestAnimationFrame(animateScroll);
|
|
||||||
}
|
|
||||||
}, { passive: false });
|
|
||||||
|
|
||||||
function animateScroll() {
|
|
||||||
const tree = document.getElementById("tree");
|
|
||||||
|
|
||||||
if (!treeOriginalTop) {
|
|
||||||
treeOriginalTop = parseInt(getComputedStyle(tree).top);
|
|
||||||
}
|
|
||||||
|
|
||||||
const treeHeightPX = 0.83 * window.innerHeight;
|
|
||||||
let treeTopPX = parseInt(getComputedStyle(tree).top);
|
|
||||||
|
|
||||||
// Limit per-frame speed (but NOT total speed)
|
|
||||||
let multiplier = window.innerHeight / 2000;
|
|
||||||
let delta = Math.max(-100 * multiplier, Math.min(100 * multiplier, currentVelocity));
|
|
||||||
|
|
||||||
// Apply the scroll
|
|
||||||
let newTop = treeTopPX - delta;
|
|
||||||
|
|
||||||
// Clamp top/bottom bounds
|
|
||||||
const maxTop = treeOriginalTop;
|
|
||||||
const minTop = treeOriginalTop - treeHeightPX;
|
|
||||||
|
|
||||||
if (newTop > maxTop) newTop = maxTop;
|
|
||||||
if (newTop < minTop) newTop = minTop;
|
|
||||||
|
|
||||||
tree.style.top = `${newTop}px`;
|
|
||||||
|
|
||||||
// Slowly reduce velocity
|
|
||||||
currentVelocity *= 0.85;
|
|
||||||
|
|
||||||
// If velocity is small, stop
|
|
||||||
if (Math.abs(currentVelocity) > 0.5) {
|
|
||||||
requestAnimationFrame(animateScroll);
|
|
||||||
} else {
|
|
||||||
isAnimating = false;
|
|
||||||
currentVelocity = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
21
ui/readme.md
21
ui/readme.md
@@ -1,20 +1,5 @@
|
|||||||
See https://github.com/return-to-the-land/go-backend for instructions.
|
# Installs
|
||||||
|
|
||||||
# Style Guidelines
|
Stripe CLI
|
||||||
- Font size is defined in the index.html. Only use rem as a unit.
|
|
||||||
|
|
||||||
# Documentation
|
stripe listen --forward-to localhost:3003/webhook
|
||||||
```go install golang.org/x/tools/cmd/godoc@latest```
|
|
||||||
```$HOME/go/bin/godoc -http=:6060``` (to run on Mac)
|
|
||||||
|
|
||||||
|
|
||||||
Fix Redirect Issues:
|
|
||||||
|
|
||||||
Have the go server determine redirect, generate a random URL from it
|
|
||||||
When random url is accessed by frontend -> redirect to home
|
|
||||||
|
|
||||||
|
|
||||||
# Resources
|
|
||||||
|
|
||||||
Convert image to webp (so it's smaller)
|
|
||||||
https://www.freeconvert.com/jpg-to-webp/download
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
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 {
|
|
||||||
friends = []
|
|
||||||
conversations = []
|
|
||||||
|
|
||||||
render() {
|
|
||||||
ZStack(() => {
|
|
||||||
HStack(() => {
|
|
||||||
VStack(() => {
|
|
||||||
p("Hyperia")
|
|
||||||
.background("var(--darkbrown)")
|
|
||||||
.textAlign("center")
|
|
||||||
.paddingVertical(0.5, em)
|
|
||||||
.width(20, vh)
|
|
||||||
.marginTop(0)
|
|
||||||
.marginBottom(1, em)
|
|
||||||
.marginLeft(0.4, em)
|
|
||||||
})
|
|
||||||
.height(100, vh)
|
|
||||||
.paddingLeft(2, em)
|
|
||||||
.paddingRight(2, em)
|
|
||||||
.paddingTop(2, em)
|
|
||||||
.gap(0, em)
|
|
||||||
|
|
||||||
VStack(() => {
|
|
||||||
input("Message Hyperia", "80%")
|
|
||||||
.paddingVertical(1, em)
|
|
||||||
.color("var(--accent)")
|
|
||||||
.background("var(--darkbrown)")
|
|
||||||
.marginBottom(6, em)
|
|
||||||
.border("none")
|
|
||||||
})
|
|
||||||
.width(100, pct)
|
|
||||||
.alignHorizontal("center")
|
|
||||||
.alignVertical("end")
|
|
||||||
})
|
|
||||||
.width(100, "%")
|
|
||||||
.height(87, vh)
|
|
||||||
.x(0).y(13, vh)
|
|
||||||
|
|
||||||
HStack(() => {
|
|
||||||
input("Search...", "45vw")
|
|
||||||
.attr({
|
|
||||||
"type": "text"
|
|
||||||
})
|
|
||||||
.fontSize(1.1, em)
|
|
||||||
.paddingLeft(1.3, em)
|
|
||||||
.background("transparent")
|
|
||||||
.border("0.5px solid #bb7c36")
|
|
||||||
.outline("none")
|
|
||||||
.color("var(--accent)")
|
|
||||||
.borderRadius(10, px)
|
|
||||||
|
|
||||||
button("Search")
|
|
||||||
.marginLeft(2, em)
|
|
||||||
.borderRadius(10, px)
|
|
||||||
.background("transparent")
|
|
||||||
.border("0.5px solid #bb7c36")
|
|
||||||
.color("var(--accent)")
|
|
||||||
.fontFamily("Bona Nova")
|
|
||||||
.onHover(function (hovering) {
|
|
||||||
if(hovering) {
|
|
||||||
this.style.background = "var(--green)"
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.style.background = "transparent"
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
button("+ New Message")
|
|
||||||
.width(13, em)
|
|
||||||
.marginLeft(1, em)
|
|
||||||
.borderRadius(10, px)
|
|
||||||
.background("transparent")
|
|
||||||
.border("0.5px solid #bb7c36")
|
|
||||||
.color("var(--accent)")
|
|
||||||
.fontFamily("Bona Nova")
|
|
||||||
.onHover(function (hovering) {
|
|
||||||
if(hovering) {
|
|
||||||
this.style.background = "var(--green)"
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.style.background = "transparent"
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.onClick((clicking) => {
|
|
||||||
console.log(this, "clicked")
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
.x(55, vw).y(4, vh)
|
|
||||||
.position("absolute")
|
|
||||||
.transform("translateX(-50%)")
|
|
||||||
})
|
|
||||||
.width(100, pct)
|
|
||||||
.height(100, pct)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
register(Forum)
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import "./ProfileMenu.js"
|
|
||||||
|
|
||||||
class ProfileButton extends Shadow {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
ZStack(() => {
|
|
||||||
img("/_/icons/profile.svg", "1.5em", "1.5em")
|
|
||||||
.backgroundColor("var(--accent)")
|
|
||||||
.padding(0.2, em)
|
|
||||||
.borderRadius(5, px)
|
|
||||||
|
|
||||||
ProfileMenu()
|
|
||||||
})
|
|
||||||
.display("block")
|
|
||||||
.onHover((hovering) => {
|
|
||||||
console.log(hovering)
|
|
||||||
if(hovering) {
|
|
||||||
this.$("img").backgroundColor("var(--accent)")
|
|
||||||
this.$("img").border("1px solid black")
|
|
||||||
} else {
|
|
||||||
this.$("img").backgroundColor("")
|
|
||||||
this.$("img").border("")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// document.addEventListener("mousemove", (e) => {
|
|
||||||
// this.previousHovered = this.hovered
|
|
||||||
// if(e.target.closest("profile-button")) {
|
|
||||||
// this.hovered = true
|
|
||||||
// } else {
|
|
||||||
// this.hovered = false
|
|
||||||
// }
|
|
||||||
// if(this.hovered !== this.previousHovered) {
|
|
||||||
// if(this.hovered === true) {
|
|
||||||
// this.rerender()
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.querySelector("profile-menu").className = "open"
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// this.querySelector("profile-menu").className = "closed"
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.rerender()
|
|
||||||
// }, 140)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
register(ProfileButton)
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
css(`
|
|
||||||
profile-menu {
|
|
||||||
position: absolute;
|
|
||||||
right: -.5em;
|
|
||||||
top: -.3em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
background-color: rgba(255, 223, 180, 0.56);
|
|
||||||
color: black;
|
|
||||||
transition: width 0.2s, height 0.2s;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
profile-menu * {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
profile-menu.closed * {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
profile-menu.open {
|
|
||||||
width: 10em;
|
|
||||||
height: 15em;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
profile-menu.open * {
|
|
||||||
opacity: 100%;
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
class ProfileMenu extends Shadow {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
ZStack(() => {
|
|
||||||
if(this.classList.contains("open")) {
|
|
||||||
setTimeout(() => {
|
|
||||||
// this.innerHTML = /* html */`
|
|
||||||
// <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
|
|
||||||
// <p>Profile</p>
|
|
||||||
// `
|
|
||||||
}, 200)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
util.observeClassChange(this, (cl) => {
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
register(ProfileMenu, "profile-menu")
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import ConnectionHandler from "./ws/ConnectionHandler.js"
|
|
||||||
window.ConnectionHandler = new ConnectionHandler()
|
|
||||||
|
|
||||||
import "./components/Home.js"
|
|
||||||
Home()
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
class Connection {
|
|
||||||
connectionTries = 0
|
|
||||||
ws;
|
|
||||||
linkCreated;
|
|
||||||
wsStatus;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
if(window.location.hostname === "localhost") {
|
|
||||||
this.ws = new WebSocket("ws://" + "localhost:3003")
|
|
||||||
} else {
|
|
||||||
this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
|
|
||||||
}
|
|
||||||
this.ws.addEventListener('open', () => {
|
|
||||||
this.connectionTries = 0
|
|
||||||
console.log("Websocket connection established.");
|
|
||||||
this.ws.addEventListener('message', this.onMessage)
|
|
||||||
});
|
|
||||||
this.ws.addEventListener("close", () => {
|
|
||||||
this.checkOpen();
|
|
||||||
console.log('Websocket Closed')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMessage = (event) => {
|
|
||||||
let message = event.data;
|
|
||||||
let messageSplit = message.split('|');
|
|
||||||
|
|
||||||
switch(messageSplit[0]) {
|
|
||||||
case 'connected':
|
|
||||||
Forms.connected(messageSplit[1], messageSplit[2])
|
|
||||||
break;
|
|
||||||
case 'disconnected':
|
|
||||||
Forms.disconnected(messageSplit[1])
|
|
||||||
break;
|
|
||||||
case 'UPDATE-SIZE':
|
|
||||||
updateFileSize(messageSplit[1], messageSplit[2]);
|
|
||||||
break;
|
|
||||||
case 'URL-TITLE-RESPONSE':
|
|
||||||
this.updateLinkTitle(messageSplit[1]);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log('Websocket message:', message);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (messageSplit[1] == 'CSS-LINK') {
|
|
||||||
this.createCSSLink(message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async checkOpen() {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
return true
|
|
||||||
} else {
|
|
||||||
await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
|
|
||||||
this.connectionTries++
|
|
||||||
console.log('Reestablishing connection')
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sleep = (time) => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
setTimeout(resolve, time);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
sendMessage = (msg) => {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.send(msg);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log('No websocket connection: Cannot send message');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateCSS = async (updateStyle, newValue) => {
|
|
||||||
let currentSpace = window.wrapper.getAttribute("name").replace(/ /g,'%20')
|
|
||||||
let currentFolder = window.location.pathname;
|
|
||||||
//create the inital link
|
|
||||||
this.linkCreated = false;
|
|
||||||
let cssIncomingText = ""
|
|
||||||
Array.from(document.styleSheets).forEach(el => {
|
|
||||||
if(el?.href?.includes?.(`.${currentSpace}.css`)) {
|
|
||||||
this.linkCreated = true;
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let currentSpaceDataAttr = window.wrapper.getAttribute("name");
|
|
||||||
let cssInit = `parchment-page[name="${currentSpaceDataAttr}"] {background-color: #e9c9a0;} parchment-page[name="${currentSpaceDataAttr}"] > p.text {font-family: ${newValue};} parchment-page[name="${currentSpaceDataAttr}"] > file-::before, parchment-page[name="${currentSpaceDataAttr}"] > image-::before, parchment-page[name="${currentSpaceDataAttr}"] > parchment-page::before {font-family: ${newValue};font-weight: 400;} parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > file-::before, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > *, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > image-::before ,parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > parchment-page::before, parchment-page[name="${currentSpaceDataAttr}"] > a, parchment-page[name="${currentSpaceDataAttr}"] > input-box {font-family: ${newValue}; font-weight: 400;}`
|
|
||||||
cssIncomingText += cssInit
|
|
||||||
|
|
||||||
let CSSRawData = `REQUEST|update-css|${currentFolder}|${cssIncomingText}|`
|
|
||||||
await this.checkOpen()
|
|
||||||
this.ws.send(CSSRawData)
|
|
||||||
}
|
|
||||||
|
|
||||||
createCSSLink = (wsMessage) => {
|
|
||||||
let retrieveHref = wsMessage;
|
|
||||||
var link = document.createElement("link");
|
|
||||||
link.rel = "stylesheet";
|
|
||||||
link.id = window.wrapper.getAttribute('name')+"-css"
|
|
||||||
link.href = retrieveHref;
|
|
||||||
|
|
||||||
let retrieveStyleLinks = document.querySelectorAll(`[href='${retrieveHref}']`);
|
|
||||||
if (retrieveStyleLinks[0] !== undefined) {
|
|
||||||
retrieveStyleLinks[0].remove();
|
|
||||||
}
|
|
||||||
window.wrapper.prepend(link);
|
|
||||||
}
|
|
||||||
|
|
||||||
scrapeExternalHTMLTitle = async (href) => {
|
|
||||||
let req = `REQUEST|scrape-title|${href}|`
|
|
||||||
await this.checkOpen()
|
|
||||||
this.ws.send(req)
|
|
||||||
}
|
|
||||||
|
|
||||||
updateLinkTitle = (title) => {
|
|
||||||
let link = document.querySelectorAll('.convert-to-title')[0]
|
|
||||||
if (title !=="") {
|
|
||||||
link.innerHTML += title;
|
|
||||||
} else {
|
|
||||||
link.innerHTML += link.getAttribute('href')
|
|
||||||
}
|
|
||||||
link.classList.remove('convert-to-title')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Connection
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import Connection from "./Connection.js";
|
|
||||||
|
|
||||||
export default class ConnectionHandler {
|
|
||||||
connection;
|
|
||||||
disabled = true;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.connection = new Connection();
|
|
||||||
}
|
|
||||||
|
|
||||||
isOpen() {
|
|
||||||
if(this.connection.checkOpen()) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
send(msg) {
|
|
||||||
this.connection.sendMessage(msg)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user