diff --git a/doc.md b/doc.md
new file mode 100644
index 0000000..67d11c3
--- /dev/null
+++ b/doc.md
@@ -0,0 +1,158 @@
+
+Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.
+
+### Getting Started:
+Take index.js and put it in your app. Typically as quill.js. Then import it in the head of the HTML.
+
+### Basic Overview:
+
+Quill uses components called Shadows. Each Shadow is a Custom HTML Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)
+```
+class Home extends Shadow {
+ render() {
+ }
+}
+
+register(Home)
+```
+
+Once created, it can be imported like
+```
+import "Home.js"
+```
+(Not how we are NOT importing the actual class object. If that happens, it will fail.)
+
+Here is an example of Hello World:
+
+```
+class Home extends Shadow {
+ render() {
+ p("Hello World")
+ .x(50, vw)
+ .y(50, vh)
+ }
+}
+
+register(Home)
+```
+
+This will render a paragraph tag in the middle of the screen.
+
+Here's what it will look like in HTML:
+
+```
+
+
+
Hello World
+
+
+```
+
+Note: .x() and .y() are quill-specific functions that were created simply for nice syntax. However, this would also be valid:
+```
+p("Hello World")
+ .top(50, vh)
+ .left(50, vw)
+```
+
+There are quill functions for every HTML style attribute. If they have units, they will follow the pattern directly above, where the first parameter is the amount and the second parameter is the unit.
+
+### Real Basic Example:
+
+First, you need your index.html. Here is one:
+
+```
+
+
+
+ Parchment
+
+
+
+
+
+
+
+
+
+```
+
+When starting, it is typical to make a "Home" shadow and import it in index.js. Here is an example:
+
+index.js:
+```
+import "./Home.js"
+Home()
+```
+
+Home.js:
+```
+import "../components/NavBar.js"
+import "./HomeContent.js"
+import "./Why.js"
+import "./Events.js"
+import "./Join.js"
+import "./SignIn.js"
+import "./Success.js"
+
+class Home extends Shadow {
+ render() {
+
+ ZStack(() => {
+
+ NavBar()
+
+ img("/_/icons/logo.svg", "2.5em")
+ .onClick((done) => {
+ if(!done) return
+ window.navigateTo("/")
+ })
+ .position("absolute")
+ .left(50, vw).top(4, em)
+ .center()
+ .transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
+
+ switch(window.location.pathname) {
+ case "/":
+ HomeContent()
+ break;
+ case "/why":
+ Why()
+ break;
+ case "/events":
+ Events()
+ break;
+ case "/join":
+ Join()
+ break;
+ case "/success":
+ Success()
+ break;
+ }
+
+ })
+ .onNavigate(() => {
+ this.rerender()
+ })
+
+ }
+}
+
+register(Home)
+
+```
+
+
+Success.js:
+
+```
+class Success extends Shadow {
+ render() {
+ p("Thanks for your purchase! You will receive a confirmation email shortly.
Keep that email; it will be checked at the door.")
+ .x(50, vw).y(50, vh)
+ .center()
+ }
+}
+
+register(Success)
+```
\ No newline at end of file
diff --git a/readme.md b/readme.md
index e1c6661..bed1d06 100644
--- a/readme.md
+++ b/readme.md
@@ -1,29 +1,26 @@
-## Created with Capacitor Create App
+### Run Web App
-This app was created using [`@capacitor/create-app`](https://github.com/ionic-team/create-capacitor-app),
-and comes with a very minimal shell for building an app.
+```npm run start```
-### Running this example
+### Build and Run iOS App
-To run the provided example, you can use `npm start` command.
-
-```bash
-npm start
-```
-
-### Background Color
-
-In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.
-
-### Running iOS
https://capacitorjs.com/docs/ios#adding-the-ios-platform
+To Install:
npm install @capacitor/ios
npx cap add ios
+
+To Open XCode:
npx cap open ios
To Rerun:
npm run build && npx cap copy ios
-### Note
-You need to be in mobile mode in order for the app to work, in the top right corner of dev tools.
+### Architecture
+
+In Development, API routes are routed using the vite.config.js.
+
+### Notes
+
+Background Color:
+In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.
\ No newline at end of file
diff --git a/src/Home/ConnectionError.js b/src/Home/ConnectionError.js
new file mode 100644
index 0000000..dea7068
--- /dev/null
+++ b/src/Home/ConnectionError.js
@@ -0,0 +1,23 @@
+class ConnectionError extends Shadow {
+
+ render() {
+ VStack(() => {
+ img("/_/icons/column.svg", window.isMobile() ? "5vmax" : "3vmax")
+ .position("absolute")
+ .top(2, em)
+ .left(2, em)
+ .onClick((done) => {
+ window.navigateTo("/")
+ })
+
+ p("Error connecting to server. Please try again later!")
+ })
+ .verticalAlign("center")
+ .paddingHorizontal(20, vw)
+ .backgroundColor("var(--main)")
+ .overflowX("hidden")
+ .height(100, vh)
+ }
+}
+
+register(ConnectionError)
\ No newline at end of file
diff --git a/src/Login.js b/src/Home/Login.js
similarity index 100%
rename from src/Login.js
rename to src/Home/Login.js
diff --git a/src/_/code/styles.css b/src/_/code/shared.css
similarity index 62%
rename from src/_/code/styles.css
rename to src/_/code/shared.css
index 93a2d00..e724abf 100644
--- a/src/_/code/styles.css
+++ b/src/_/code/shared.css
@@ -11,11 +11,22 @@
--quillred: #DE3F3F;
--brown: #812A18;
--darkbrown: #3f0808;
+
+ --column-src: /_/icons/column2.svg;
+ --nodes-src: /_/icons/nodes.svg;
+ --forum-src: /_/icons/forum.svg;
+ --people-src: /_/icons/people.svg;
}
@media (prefers-color-scheme: dark) {
:root {
+ --main: rgb(42, 20, 13);
+ --accent: rgb(106, 44, 28);
+ --column-src: /_/icons/column2.svg;
+ --nodes-src: /_/icons/nodes.svg;
+ --forum-src: /_/icons/forum.svg;
+ --people-src: /_/icons/people.svg;
}
}
diff --git a/src/apps/People/People.js b/src/apps/People/People.js
index c4610e1..f42f180 100644
--- a/src/apps/People/People.js
+++ b/src/apps/People/People.js
@@ -75,7 +75,6 @@ class People extends Shadow {
})
.position("relative")
.boxSizing("border-box")
- .background("var(--bone)")
.paddingVertical(1, em)
.height(100, pct)
.width(100, pct)
diff --git a/src/components/AppMenu.js b/src/components/AppMenu.js
index 2ebac47..f18d46e 100644
--- a/src/components/AppMenu.js
+++ b/src/components/AppMenu.js
@@ -1,53 +1,48 @@
class AppMenu extends Shadow {
selected = ""
+ images = {
+ "Dashboard": {src: "column-src"},
+ "Messages": {src: "letter-src"},
+ "People": {src: "people-src"},
+ }
+
onNewSelection() {
this.$$("img").forEach((image) => {
image.style.outline = ""
})
}
+ cssVariable(value) {
+ return getComputedStyle(document.documentElement)
+ .getPropertyValue("--" + value)
+ .trim();
+ }
+
render() {
HStack(() => {
- img("/_/icons/Column.svg", "1.5em", "1.5em")
- .attr({app: "forum"})
- .padding(0.5, em)
- .borderRadius(10, px)
- .outline(global.currentApp() === "Dashboard" ? "1px solid black" : "none")
- .onClick((finished, e) => {
- if(finished) {
- this.onNewSelection()
- e.target.style.outline = "1px solid black"
- global.openApp("Dashboard")
- }
- })
- img("/_/icons/letter.svg", "1.5em", "1.5em")
- .attr({app: "messages"})
- .padding(0.5, em)
- .borderRadius(10, px)
- .outline(global.currentApp() === "Messages" ? "1px solid black" : "none")
- .onClick((finished, e) => {
- if(finished) {
- this.onNewSelection()
- e.target.style.outline = "1px solid black"
- global.openApp("Messages")
- }
- })
- img("/_/icons/people.svg", "1.5em", "1.5em")
- .attr({app: "people"})
- .padding(0.5, em)
- .borderRadius(10, px)
- .outline(global.currentApp() === "People" ? "1px solid black" : "none")
- .onClick((finished, e) => {
- if(finished) {
- this.onNewSelection()
- e.target.style.outline = "1px solid black"
- global.openApp("People")
- }
- })
+ let currentNetwork = global.currentNetwork
+ for(let i = 0; i < currentNetwork.apps.length; i++) {
+ let app = currentNetwork.apps[i]
+ console.log(app)
+ img(this.cssVariable(this.images[app].src), this.images[app].size)
+ .attr({app: app})
+ .padding(0.5, em)
+ .borderRadius(10, px)
+ .outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
+ .onClick((done, e) => {
+ if(done) {
+ this.onNewSelection()
+ e.target.style.outline = "1px solid var(--accent)"
+ global.openApp(app)
+ }
+ })
+ }
+
+
})
- .borderTop("1px solid black")
+ .borderTop("1px solid var(--accent)")
.height("auto")
.background("var(--main)")
.zIndex(1)
diff --git a/src/index.html b/src/index.html
index 39e98bc..7cc9c86 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,8 +21,8 @@
-
-
+
+
diff --git a/src/index.js b/src/index.js
index f002471..859dc4f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
import Socket from "/_/code/ws/Socket.js"
import "./Home.js"
-import "./Login.js"
+import "./Home/Login.js"
+import "./Home/ConnectionError.js"
let Global = class {
Socket = new Socket()
@@ -133,9 +134,9 @@ let Global = class {
console.log("getProfile: ", profile);
this.profile = profile
return 200;
- } catch (err) {
+ } catch (err) { // Network error / Error reaching server
console.error(err);
- return 401;
+ return 500;
}
}
@@ -145,12 +146,15 @@ let Global = class {
this.getProfile().then(async (status) => {
if (status === 401) {
Login()
+ } else if(status === 500) {
+ ConnectionError()
} else {
+ console.log("else")
await this.Socket.init()
await this.onNavigate()
Home()
}
- });
+ })
}
}
diff --git a/src/_/code/quill.js b/src/public/_/code/quill.js
similarity index 100%
rename from src/_/code/quill.js
rename to src/public/_/code/quill.js