Update frontend

12 files changed, 369 insertions, 133 deletions

diff --git a/fig-frontend/client/src/blueprint.jpg b/fig-frontend/client/src/assets/blueprint.jpg
index 6efe89d..6efe89d 100644
--- a/fig-frontend/client/src/blueprint.jpg
+++ b/fig-frontend/client/src/assets/blueprint.jpg
diff --git a/fig-frontend/client/src/components/backdrop.ts b/fig-frontend/client/src/components/backdrop.ts
new file mode 100644
index 0000000..d35d205
--- /dev/null
+++ b/fig-frontend/client/src/components/backdrop.ts
@@ -0,0 +1,41 @@
+import { html, css, LitElement, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import * as Config from "../config";
+
+import blueprint from "../assets/blueprint.jpg";
+
+@customElement("fig-backdrop")
+export class Backdrop extends LitElement {
+  static styles = css`
+#backdrop {
+  z-index: -2;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-image: url("${unsafeCSS(new URL(blueprint, Config.SCRIPT_URL))}");
+}
+#blur {
+  z-index: -1;
+  backdrop-filter: blur(3px);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100px 100px;
+  background-position: -20px -20px;
+  background-image:
+      linear-gradient(to right, lightgrey 1px, transparent 1px),
+      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
+}
+`;
+  render() {
+    return html`
+<div id="backdrop"></div>
+<div id="blur"></div>
+`;
+  }
+}
diff --git a/fig-frontend/client/src/components/footer.ts b/fig-frontend/client/src/components/footer.ts
new file mode 100644
index 0000000..64e35ae
--- /dev/null
+++ b/fig-frontend/client/src/components/footer.ts
@@ -0,0 +1,72 @@
+import { html, css, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import * as Config from "../config";
+import * as State from "../state";
+import * as Twitch from "../twitch";
+
+@customElement("fig-footer")
+export class Footer extends LitElement {
+  private global = State.global;
+  static styles = css`
+#footer {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  height: 4ex;
+  background: linear-gradient(0deg, rgba(79,39,0,1) 0%, rgba(212,151,113,1) 50%, rgba(213,139,45,1) 100%);
+}
+button {
+  font-family: "Rubik Maps";
+  height: 100%;
+  color: black;
+  border-style: none;
+  background: linear-gradient(0deg, rgba(79,39,0,1) 0%, rgba(212,151,113,1) 50%, rgba(213,139,45,1) 100%);
+  filter: brightness(125%);
+}
+button:hover {
+  filter: brightness(150%);
+}
+button:active {
+  filter: brightness(75%);
+}
+`;
+
+  // twitch login
+  login() {
+    Twitch.startTwitchAuth();
+  }
+  async check() {
+    const resp = await fetch(`${Config.API_URL}/check`);
+    console.log(await resp.text());
+  }
+  button_login() {
+    const token = Twitch.getAuthToken();
+    console.log(token);
+    if (token) {
+      return html`
+<button @click=${this.check}>CHECK</button>
+`;
+    } else {
+      return html`
+<button @click=${this.login}>LOGIN</button>
+`;
+    }
+  }
+
+  // toggle gizmo pane
+  toggle_gizmo() {
+    console.log(this.global.gizmo_active);
+    this.global.toggle_gizmo();
+  }
+
+  render() {
+    return html`
+<div id="footer">
+  ${this.button_login()}
+  <button @click=${this.toggle_gizmo}>GIZMO</button>
+</div>
+`;
+  }
+}
diff --git a/fig-frontend/client/src/components/gizmo.ts b/fig-frontend/client/src/components/gizmo.ts
new file mode 100644
index 0000000..bd1285c
--- /dev/null
+++ b/fig-frontend/client/src/components/gizmo.ts
@@ -0,0 +1,34 @@
+import { MobxLitElement } from "@adobe/lit-mobx";
+import { html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import * as State from "../state";
+
+@customElement("fig-gizmo")
+export class Gizmo extends MobxLitElement {
+  private global = State.global;
+
+  static style = css`
+`;
+
+  static get(id: string): Gizmo | null {
+    const e = document.getElementById(id);
+    if (e instanceof Gizmo) return e;
+    return null;
+  }
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    console.log("render", this.global.gizmo_active);
+    if (this.global.gizmo_active) {
+      return html`
+<fig-window>
+<h1>hi</h1>
+</fig-window>
+`;
+    }
+  }
+}
diff --git a/fig-frontend/client/src/components/globals.d.ts b/fig-frontend/client/src/components/globals.d.ts
new file mode 100644
index 0000000..65e20c0
--- /dev/null
+++ b/fig-frontend/client/src/components/globals.d.ts
@@ -0,0 +1,2 @@
+declare module "*.png";
+declare module "*.jpg";
diff --git a/fig-frontend/client/src/components/header.ts b/fig-frontend/client/src/components/header.ts
new file mode 100644
index 0000000..c4c709f
--- /dev/null
+++ b/fig-frontend/client/src/components/header.ts
@@ -0,0 +1,34 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("fig-header")
+export class Header extends LitElement {
+  static styles = css`
+#header {
+  position: absolute;
+  text-align: center;
+  border-radius: 100px;
+  border-style: solid;
+  border-color: silver;
+  border-width: 5px;
+  background: linear-gradient(0deg, rgba(89,89,89,1) 35%, rgba(158,158,158,1) 100%);
+  top: 1em;
+  left: 33vw;
+  width: 33vw;
+}
+#header:hover {
+  filter: brightness(150%);
+}
+h1 {
+  color: #b5a642;
+  font-family: "Rubik Maps";
+}
+`;
+  render() {
+    return html`
+<div id="header">
+  <h1>"The JunkYard"</h1>
+</div>
+`;
+  }
+}
diff --git a/fig-frontend/client/src/components/login.ts b/fig-frontend/client/src/components/login.ts
new file mode 100644
index 0000000..195c97f
--- /dev/null
+++ b/fig-frontend/client/src/components/login.ts
@@ -0,0 +1,34 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import * as Config from "../config";
+import * as Twitch from "../twitch";
+
+@customElement("fig-login")
+export class Login extends LitElement {
+  static styles = css`
+  `;
+
+  login() {
+    Twitch.startTwitchAuth();
+  }
+
+  async check() {
+    const resp = await fetch(`${Config.API_URL}/check`);
+    console.log(await resp.text());
+  }
+
+  render() {
+    const token = Twitch.getAuthToken();
+    console.log(token);
+    if (token) {
+      return html`
+<button @click=${this.check}>check token</button>
+`;
+    } else {
+      return html`
+<button @click=${this.login}>login</button>
+`;
+    }
+  }
+}
diff --git a/fig-frontend/client/src/components/window.ts b/fig-frontend/client/src/components/window.ts
new file mode 100644
index 0000000..9a8f93a
--- /dev/null
+++ b/fig-frontend/client/src/components/window.ts
@@ -0,0 +1,130 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import interact from "interactjs";
+
+@customElement("fig-window")
+export class Window extends LitElement {
+  static z: number = 0;
+  
+  x: number;
+  y: number;
+
+  @property()
+  title: string;
+
+  @property()
+  hidden: boolean;
+
+  static styles = css`
+#windowcontainer {
+  z-index: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: 4ex 1fr;
+  user-select: none;
+}
+#title {
+  font-family: "Rubik Maps";
+  font-size: 150%;
+  color: black;
+  grid-column: 1;
+  grid-row: 1;
+  height: 2.2ex;
+  overflow: hidden;
+  z-index: 2;
+  margin-bottom: -1ex;
+  background: linear-gradient(0deg, rgba(89,89,89,1) 35%, rgba(158,158,158,1) 100%);
+  border-radius: 100px;
+  border-style: solid;
+  border-color: silver;
+  border-width: 5px;
+  text-align: center;
+}
+#window {
+  overflow: hidden;
+  grid-column: 1;
+  grid-row-start: 2;
+  grid-row-end: 2;
+  z-index: 1;
+  background-color: white;
+  border-radius: 5ex;
+  border-style: solid;
+  border-color: black;
+  border-width: 2px;
+  border-top-width: 0px;
+  padding-top: 1ex;
+  padding-left: 2ex;
+  padding-right: 2ex;
+}
+`;
+
+  static get(id: string): Window | null {
+    const e = document.getElementById(id);
+    if (e instanceof Window) return e;
+    return null;
+  }
+
+  constructor() {
+    super();
+    this.x = 0;
+    this.y = 0;
+    this.style.left = `${this.x}px`
+    this.style.top = `${this.y}px`
+    this.style.width = "300px"
+    this.style.height = "300px"
+    interact(this).draggable({
+      allowFrom: "#title",
+      modifiers: [
+        interact.modifiers.restrict({
+          restriction: "body",
+          endOnly: true
+        })
+      ],
+      listeners: {
+        move(event) {
+          event.target.x += event.dx
+          event.target.y += event.dy
+          event.target.style.left = `${event.target.x}px`
+          event.target.style.top = `${event.target.y}px`
+        },
+      }
+    }).resizable({
+      edges: { top: false, bottom: true, left: true, right: true },
+      listeners: {
+        move(event) {
+          event.target.x += event.deltaRect.left
+          event.target.y += event.deltaRect.top
+          event.target.style.left = `${event.target.x}px`
+          event.target.style.top = `${event.target.y}px`
+          event.target.style.width = `${Math.max(event.rect.width, 300)}px`
+          event.target.style.height = `${Math.max(event.rect.height, 300)}px`
+        },
+      },
+    });
+  }
+
+  toggle() {
+    this.hidden = !this.hidden;
+  }
+
+  click() {
+    this.style.zIndex = `${++Window.z}`;
+  }
+
+  render() {
+    if (!this.hidden) {
+      return html`
+<div id="windowcontainer" @pointerdown=${this.click}>
+  <div id="title">${this.title}</slot></div>
+  <div id="window">
+    <slot></slot>
+  </div>
+</div>
+`;
+    }
+  }
+}
diff --git a/fig-frontend/client/src/config.ts b/fig-frontend/client/src/config.ts
index 5498e16..e001107 100644
--- a/fig-frontend/client/src/config.ts
+++ b/fig-frontend/client/src/config.ts
@@ -1,3 +1,4 @@
 export const URL = "http://localhost:8000";
-export const API_URL = "http://localhost:8000/api";
+export const API_URL = `${URL}/api/`;
+export const SCRIPT_URL = `${URL}/js/`;
 export const CLIENT_ID = "q486jugzn2my4iw6l181o006ugye4j";
diff --git a/fig-frontend/client/src/index.css b/fig-frontend/client/src/index.css
index 891c5fd..b1c8427 100644
--- a/fig-frontend/client/src/index.css
+++ b/fig-frontend/client/src/index.css
@@ -5,26 +5,10 @@ body {
     top: 0px;
     width: 100vw;
     height: 100vh;
+    overflow: hidden;
 }
 
 fig-window {
     display: block;
     position: absolute;
 }
-
-fig-header {
-    position: absolute;
-    text-align: center;
-    border-radius: 100px;
-    border-style: solid;
-    border-color: silver;
-    border-width: 5px;
-    background: linear-gradient(0deg, rgba(89,89,89,1) 35%, rgba(158,158,158,1) 100%);
-    top: 1em;
-    left: 33vw;
-    width: 33vw;
-}
-
-fig-header:hover {
-  filter: brightness(150%);
-}
diff --git a/fig-frontend/client/src/index.ts b/fig-frontend/client/src/index.ts
index 899c7fd..be0b0c5 100644
--- a/fig-frontend/client/src/index.ts
+++ b/fig-frontend/client/src/index.ts
@@ -1,119 +1,10 @@
-import { html, css, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import interact from "interactjs";
-
-import * as Config from "./config";
-import * as Twitch from "./twitch";
+import "./components/backdrop";
+import "./components/header";
+import "./components/footer";
+import "./components/login";
+import "./components/window";
+import "./components/gizmo";
 
 import "./index.css";
 
 console.log("welcome to \"the junkyard\"");
-
-@customElement("fig-window")
-export class Window extends LitElement {
-  x: number;
-  y: number;
-
-  constructor() {
-    super();
-    this.x = 0;
-    this.y = 0;
-    interact(this).draggable({
-      listeners: {
-        move(event) {
-          event.target.x += event.dx
-          event.target.y += event.dy
-          event.target.style.left = `${event.target.x}px`
-          event.target.style.top = `${event.target.y}px`
-        },
-      }
-    });
-  }
-
-  render() {
-    console.log("render");
-    return html`
-<slot></slot>
-`;
-  }
-}
-
-@customElement("fig-backdrop")
-export class Backdrop extends LitElement {
-  static styles = css`
-#backdrop {
-  z-index: -2;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 100vw;
-  height: 100vh;
-  background-image: url("blueprint.jpg");
-}
-#blur {
-  z-index: -1;
-  backdrop-filter: blur(3px);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 100vw;
-  height: 100vh;
-  background-size: 100px 100px;
-  background-position: -20px -20px;
-  background-image:
-      linear-gradient(to right, lightgrey 1px, transparent 1px),
-      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-}
-`;
-  render() {
-    return html`
-<div id="backdrop"></div>
-<div id="blur"></div>
-`;
-  }
-}
-
-@customElement("fig-login")
-export class Login extends LitElement {
-  static styles = css`
-  `;
-
-  login() {
-    Twitch.startTwitchAuth();
-  }
-
-  async check() {
-    const resp = await fetch(`${Config.API_URL}/check`);
-    console.log(await resp.text());
-  }
-
-  render() {
-    const token = Twitch.getAuthToken();
-    console.log(token);
-    if (token) {
-      return html`
-<button @click=${this.check}>check token</button>
-`;
-    } else {
-      return html`
-<button @click=${this.login}>login</button>
-`;
-    }
-  }
-}
-
-@customElement("fig-header")
-export class Header extends LitElement {
-  static styles = css`
-h1 {
-  color: #b5a642;
-  font-family: "Rubik Maps";
-}
-`;
-  render() {
-    return html`
-<h1>Welcome To "The JunkYard"</h1>
-`;
-  }
-}
diff --git a/fig-frontend/client/src/state.ts b/fig-frontend/client/src/state.ts
new file mode 100644
index 0000000..19bc5d9
--- /dev/null
+++ b/fig-frontend/client/src/state.ts
@@ -0,0 +1,13 @@
+import { observable, action } from 'mobx';
+
+class Global {
+  @observable
+  public gizmo_active: boolean = true;
+
+  @action
+  public toggle_gizmo() {
+    this.gizmo_active = !this.gizmo_active;
+  }
+}
+
+export const global = new Global();