Add new frontend

13 files changed, 0 insertions, 431 deletions

diff --git a/fig-frontend/client/src/assets/blueprint.jpg b/fig-frontend/client/src/assets/blueprint.jpg
deleted file mode 100644
index 6efe89d..0000000
--- a/fig-frontend/client/src/assets/blueprint.jpg
+++ /dev/null
diff --git a/fig-frontend/client/src/components/backdrop.ts b/fig-frontend/client/src/components/backdrop.ts
deleted file mode 100644
index d35d205..0000000
--- a/fig-frontend/client/src/components/backdrop.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 64e35ae..0000000
--- a/fig-frontend/client/src/components/footer.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-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
deleted file mode 100644
index bd1285c..0000000
--- a/fig-frontend/client/src/components/gizmo.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 65e20c0..0000000
--- a/fig-frontend/client/src/components/globals.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare module "*.png";
-declare module "*.jpg";
diff --git a/fig-frontend/client/src/components/header.ts b/fig-frontend/client/src/components/header.ts
deleted file mode 100644
index c4c709f..0000000
--- a/fig-frontend/client/src/components/header.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 195c97f..0000000
--- a/fig-frontend/client/src/components/login.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 9a8f93a..0000000
--- a/fig-frontend/client/src/components/window.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-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
deleted file mode 100644
index e001107..0000000
--- a/fig-frontend/client/src/config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const URL = "http://localhost:8000";
-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
deleted file mode 100644
index b1c8427..0000000
--- a/fig-frontend/client/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-    margin: 0px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-}
-
-fig-window {
-    display: block;
-    position: absolute;
-}
diff --git a/fig-frontend/client/src/index.ts b/fig-frontend/client/src/index.ts
deleted file mode 100644
index be0b0c5..0000000
--- a/fig-frontend/client/src/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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\"");
diff --git a/fig-frontend/client/src/state.ts b/fig-frontend/client/src/state.ts
deleted file mode 100644
index 19bc5d9..0000000
--- a/fig-frontend/client/src/state.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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();
diff --git a/fig-frontend/client/src/twitch.ts b/fig-frontend/client/src/twitch.ts
deleted file mode 100644
index 4c264be..0000000
--- a/fig-frontend/client/src/twitch.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as Config from "./config";
-
-function generateNonce(): string {
-  var arr = new Uint8Array(20);
-  window.crypto.getRandomValues(arr);
-  return Array.from(arr, b => b.toString(16).padStart(2, "0")).join("");
-}
-
-export function startTwitchAuth() {
-  const nonce = generateNonce();
-  document.cookie = `authnonce=${nonce}; path=/;`;
-  window.location.href =
-    `https://id.twitch.tv/oauth2/authorize?response_type=id_token`
-      + `&client_id=${Config.CLIENT_ID}`
-      + `&redirect_uri=${Config.URL}`
-      + `&scope=openid`
-      + `&nonce=${nonce}`
-      + `&claims=${{id_token: {preferred_username: null}}}`
-    ;
-}
-
-export function getFragmentQuery(): Map<string, string> {
-  let query = new Map();
-  const hashQuery = document.location.hash.slice(1).split("&");
-  for (let equals of hashQuery) {
-    const pair = equals.split("=");
-    query.set(decodeURIComponent(pair[0]), decodeURIComponent(pair[1]));
-  }
-  return query;
-}
-
-export function getAuthToken(): String | null {
-  const frag = getFragmentQuery();
-  const token = frag.get("id_token");
-  if (token) {
-    document.cookie = `id_token=${token}; path=/; SameSite=Strict`;
-  }
-  for (let c of document.cookie.split("; ")) {
-    const [k, v] = c.split("=");
-    if (k === "id_token") return v;
-  }
-  return null;
-}