From 88e2726fc1fc6cec2b9e63526ce4c0a1a04a2e98 Mon Sep 17 00:00:00 2001 From: LLLL Colonq Date: Fri, 1 Mar 2024 18:39:11 -0500 Subject: Add new frontend --- fig-frontend/client/src/components/backdrop.ts | 41 -------- fig-frontend/client/src/components/footer.ts | 72 ------------- fig-frontend/client/src/components/gizmo.ts | 34 ------- fig-frontend/client/src/components/globals.d.ts | 2 - fig-frontend/client/src/components/header.ts | 34 ------- fig-frontend/client/src/components/login.ts | 34 ------- fig-frontend/client/src/components/window.ts | 130 ------------------------ 7 files changed, 347 deletions(-) delete mode 100644 fig-frontend/client/src/components/backdrop.ts delete mode 100644 fig-frontend/client/src/components/footer.ts delete mode 100644 fig-frontend/client/src/components/gizmo.ts delete mode 100644 fig-frontend/client/src/components/globals.d.ts delete mode 100644 fig-frontend/client/src/components/header.ts delete mode 100644 fig-frontend/client/src/components/login.ts delete mode 100644 fig-frontend/client/src/components/window.ts (limited to 'fig-frontend/client/src/components') 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` -
-
-`; - } -} 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` - -`; - } else { - return html` - -`; - } - } - - // toggle gizmo pane - toggle_gizmo() { - console.log(this.global.gizmo_active); - this.global.toggle_gizmo(); - } - - render() { - return html` - -`; - } -} 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` - -

hi

- -`; - } - } -} 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` - -`; - } -} 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` - -`; - } else { - return html` - -`; - } - } -} 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` -
-
${this.title}
-
- -
-
-`; - } - } -} -- cgit v1.2.3