blob: 899c7fdb9d50b5d2be392f568e0afc853139e198 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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 "./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>
`;
}
}
|
