Compare commits
No commits in common. "95af5f434d2bb21ec0bdfeb09202d23b542a0981" and "e4d23c193b8f427dc5c90a8de360ff3bc755bffe" have entirely different histories.
95af5f434d
...
e4d23c193b
15 changed files with 162 additions and 779 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -22,4 +22,3 @@ dist-ssr
|
||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
.env
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title></title>
|
<title>garf</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
@ -12,11 +12,8 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||||
"@tsconfig/svelte": "^5.0.2",
|
"@tsconfig/svelte": "^5.0.2",
|
||||||
"autoprefixer": "^10.4.18",
|
|
||||||
"postcss": "^8.4.36",
|
|
||||||
"svelte": "^4.2.12",
|
"svelte": "^4.2.12",
|
||||||
"svelte-check": "^3.6.6",
|
"svelte-check": "^3.6.6",
|
||||||
"tailwindcss": "^3.4.1",
|
|
||||||
"tslib": "^2.6.2",
|
"tslib": "^2.6.2",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^5.1.6"
|
"vite": "^5.1.6"
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
|
@ -1,25 +1,20 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { authorize } from "./lib/discord.js";
|
import { authorize } from "./lib/discord.js";
|
||||||
import { fetchConfiguration, connect } from "./lib/api";
|
|
||||||
import { user } from "./lib/stores.js";
|
import { user } from "./lib/stores.js";
|
||||||
|
|
||||||
import UserCardShort from "./lib/components/UserCardShort.svelte";
|
async function main() {
|
||||||
import UserCardShortScaffold from "./lib/components/scaffolds/UserCardShortScaffold.svelte";
|
const auth = await authorize();
|
||||||
|
user.set(auth.user);
|
||||||
if (import.meta.env.DEV) {
|
|
||||||
user.set({
|
|
||||||
id: "223004006299992064",
|
|
||||||
username: "cirroskais",
|
|
||||||
discriminator: "",
|
|
||||||
public_flags: 0,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchConfiguration().then((config) => authorize(config).then(() => connect()));
|
main();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $user}
|
<main>
|
||||||
<UserCardShort user={$user} />
|
{#if $user.avatar}
|
||||||
{:else}
|
<img src={`https://cdn.discordapp.com/avatars/${$user.id}/${$user.avatar}.png?size=256`} alt="" />
|
||||||
<UserCardShortScaffold />
|
{:else}
|
||||||
{/if}
|
<img src={`https://cdn.discordapp.com/embed/avatars/${Math.abs(Number($user.id) >> 22) % 6}.png`} alt="" />
|
||||||
|
{/if}
|
||||||
|
<p>Hello, <strong>{$user.username}</strong></p>
|
||||||
|
</main>
|
||||||
|
|
13
src/app.css
13
src/app.css
|
@ -1,13 +0,0 @@
|
||||||
@tailwind utilities;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind base;
|
|
||||||
|
|
||||||
html {
|
|
||||||
@apply bg-neutral-900;
|
|
||||||
@apply text-neutral-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
@apply text-white;
|
|
||||||
@apply font-bold;
|
|
||||||
}
|
|
|
@ -1,25 +0,0 @@
|
||||||
import { identity } from "./stores";
|
|
||||||
import { get } from "svelte/store";
|
|
||||||
|
|
||||||
export interface Configuration {
|
|
||||||
DISCORD_CLIENT_ID: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchConfiguration() {
|
|
||||||
const response = await fetch("/api");
|
|
||||||
const body: Promise<Configuration> = await response.json();
|
|
||||||
|
|
||||||
return body;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function connect() {
|
|
||||||
console.log(get(identity));
|
|
||||||
const searchParams = new URLSearchParams();
|
|
||||||
searchParams.set("id", get(identity).id);
|
|
||||||
searchParams.set("iv", get(identity).iv);
|
|
||||||
|
|
||||||
const socket = new WebSocket("/api/ws?" + searchParams.toString());
|
|
||||||
socket.onmessage = (event) => {
|
|
||||||
console.log(event);
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -1,21 +0,0 @@
|
||||||
<script>
|
|
||||||
// @ts-nocheck
|
|
||||||
export let user;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex">
|
|
||||||
{#if user.avatar}
|
|
||||||
<img
|
|
||||||
class="w-16 h-16 rounded-full"
|
|
||||||
src={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.png?size=256`}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<img
|
|
||||||
class="w-16 h-16 rounded-full"
|
|
||||||
src={`https://cdn.discordapp.com/embed/avatars/${Math.abs(Number(user?.id) >> 22) % 6}.png`}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<p class="text-2xl font-bold my-auto ml-2">{user?.username}</p>
|
|
||||||
</div>
|
|
|
@ -1,4 +0,0 @@
|
||||||
<div class="flex">
|
|
||||||
<div class="animate-pulse w-16 h-16 bg-neutral-500 rounded-full"></div>
|
|
||||||
<div class="animate-pulse w-48 h-6 bg-neutral-500 my-auto ml-2 rounded-full"></div>
|
|
||||||
</div>
|
|
|
@ -1,17 +1,15 @@
|
||||||
import { DiscordSDK } from "@discord/embedded-app-sdk";
|
const CLIENT_ID = "869016244613951539";
|
||||||
import type { Configuration } from "./api";
|
import { DiscordSDK, Events, type Types } from "@discord/embedded-app-sdk";
|
||||||
import { identity as identityStore, user } from "./stores";
|
export const discordSdk = new DiscordSDK(CLIENT_ID);
|
||||||
|
import { participants as partz } from "./stores";
|
||||||
|
|
||||||
export const ACTIVITY_STARTED = Date.now();
|
export const ACTIVITY_STARTED = Date.now();
|
||||||
export let discordSdk: DiscordSDK | null = null;
|
|
||||||
|
|
||||||
export async function authorize(config: Configuration) {
|
|
||||||
discordSdk = new DiscordSDK(config.DISCORD_CLIENT_ID);
|
|
||||||
|
|
||||||
|
export async function authorize() {
|
||||||
await discordSdk.ready();
|
await discordSdk.ready();
|
||||||
|
|
||||||
const { code } = await discordSdk.commands.authorize({
|
const { code } = await discordSdk.commands.authorize({
|
||||||
client_id: config.DISCORD_CLIENT_ID,
|
client_id: CLIENT_ID,
|
||||||
response_type: "code",
|
response_type: "code",
|
||||||
state: "",
|
state: "",
|
||||||
prompt: "none",
|
prompt: "none",
|
||||||
|
@ -24,13 +22,27 @@ export async function authorize(config: Configuration) {
|
||||||
body: JSON.stringify({ code }),
|
body: JSON.stringify({ code }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const { access_token, identity } = await response.json();
|
const { access_token } = await response.json();
|
||||||
const auth = await discordSdk.commands.authenticate({ access_token });
|
const auth = await discordSdk.commands.authenticate({ access_token });
|
||||||
|
|
||||||
console.log(identity);
|
|
||||||
|
|
||||||
user.set(auth.user);
|
|
||||||
identityStore.set(identity);
|
|
||||||
|
|
||||||
return auth;
|
return auth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
discordSdk.subscribe(Events.ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE, (data) => {
|
||||||
|
partz.set(data);
|
||||||
|
|
||||||
|
discordSdk.commands.setActivity({
|
||||||
|
activity: {
|
||||||
|
type: 3,
|
||||||
|
details: "garf",
|
||||||
|
state: "garfmaxxing",
|
||||||
|
assets: {
|
||||||
|
large_image: "embedded_cover",
|
||||||
|
large_text: "garf",
|
||||||
|
},
|
||||||
|
party: {
|
||||||
|
size: [data.participants.length, 5],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import type { Types } from "@discord/embedded-app-sdk";
|
||||||
import { writable, type Writable } from "svelte/store";
|
import { writable, type Writable } from "svelte/store";
|
||||||
|
|
||||||
interface AuthenticatedUser {
|
interface AuthenticatedUser {
|
||||||
|
@ -9,10 +10,5 @@ interface AuthenticatedUser {
|
||||||
global_name?: string | null | undefined;
|
global_name?: string | null | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Identity {
|
|
||||||
id: string;
|
|
||||||
iv: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const user: Writable<AuthenticatedUser> = writable();
|
export const user: Writable<AuthenticatedUser> = writable();
|
||||||
export const identity: Writable<Identity> = writable();
|
export const participants: Writable<Types.GetActivityInstanceConnectedParticipantsResponse> = writable();
|
||||||
|
|
10
src/main.ts
10
src/main.ts
|
@ -1,8 +1,8 @@
|
||||||
import "./app.css";
|
import './app.css'
|
||||||
import App from "./App.svelte";
|
import App from './App.svelte'
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.getElementById("app")!,
|
target: document.getElementById('app')!,
|
||||||
});
|
})
|
||||||
|
|
||||||
export default app;
|
export default app
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: ["./index.html", "./src/**/*.{js,ts,svelte,html}"],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from 'vite'
|
||||||
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [svelte()],
|
plugins: [svelte()],
|
||||||
});
|
})
|
||||||
|
|
Loading…
Reference in a new issue