Compare commits
10 commits
e4d23c193b
...
95af5f434d
| Author | SHA1 | Date | |
|---|---|---|---|
| 95af5f434d | |||
| 6fda1392a2 | |||
| fcb4085ca1 | |||
| a9dae84539 | |||
| c0bf53fdcd | |||
| 2aed9f566b | |||
| f4b8c79a2c | |||
| 66ba279feb | |||
| 6e4f80d07e | |||
| caf619a872 |
15 changed files with 779 additions and 162 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -22,3 +22,4 @@ dist-ssr
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.env
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>garf</title>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,11 @@
|
|||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.36",
|
||||
"svelte": "^4.2.12",
|
||||
"svelte-check": "^3.6.6",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.6"
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,20 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { authorize } from "./lib/discord.js";
|
||||
import { fetchConfiguration, connect } from "./lib/api";
|
||||
import { user } from "./lib/stores.js";
|
||||
|
||||
async function main() {
|
||||
const auth = await authorize();
|
||||
user.set(auth.user);
|
||||
import UserCardShort from "./lib/components/UserCardShort.svelte";
|
||||
import UserCardShortScaffold from "./lib/components/scaffolds/UserCardShortScaffold.svelte";
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
user.set({
|
||||
id: "223004006299992064",
|
||||
username: "cirroskais",
|
||||
discriminator: "",
|
||||
public_flags: 0,
|
||||
});
|
||||
}
|
||||
|
||||
main();
|
||||
fetchConfiguration().then((config) => authorize(config).then(() => connect()));
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#if $user.avatar}
|
||||
<img src={`https://cdn.discordapp.com/avatars/${$user.id}/${$user.avatar}.png?size=256`} alt="" />
|
||||
{:else}
|
||||
<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>
|
||||
{#if $user}
|
||||
<UserCardShort user={$user} />
|
||||
{:else}
|
||||
<UserCardShortScaffold />
|
||||
{/if}
|
||||
|
|
|
|||
13
src/app.css
13
src/app.css
|
|
@ -0,0 +1,13 @@
|
|||
@tailwind utilities;
|
||||
@tailwind components;
|
||||
@tailwind base;
|
||||
|
||||
html {
|
||||
@apply bg-neutral-900;
|
||||
@apply text-neutral-200;
|
||||
}
|
||||
|
||||
strong {
|
||||
@apply text-white;
|
||||
@apply font-bold;
|
||||
}
|
||||
25
src/lib/api.ts
Normal file
25
src/lib/api.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
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);
|
||||
};
|
||||
}
|
||||
21
src/lib/components/UserCardShort.svelte
Normal file
21
src/lib/components/UserCardShort.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<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,15 +1,17 @@
|
|||
const CLIENT_ID = "869016244613951539";
|
||||
import { DiscordSDK, Events, type Types } from "@discord/embedded-app-sdk";
|
||||
export const discordSdk = new DiscordSDK(CLIENT_ID);
|
||||
import { participants as partz } from "./stores";
|
||||
import { DiscordSDK } from "@discord/embedded-app-sdk";
|
||||
import type { Configuration } from "./api";
|
||||
import { identity as identityStore, user } from "./stores";
|
||||
|
||||
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();
|
||||
|
||||
const { code } = await discordSdk.commands.authorize({
|
||||
client_id: CLIENT_ID,
|
||||
client_id: config.DISCORD_CLIENT_ID,
|
||||
response_type: "code",
|
||||
state: "",
|
||||
prompt: "none",
|
||||
|
|
@ -22,27 +24,13 @@ export async function authorize() {
|
|||
body: JSON.stringify({ code }),
|
||||
});
|
||||
|
||||
const { access_token } = await response.json();
|
||||
const { access_token, identity } = await response.json();
|
||||
const auth = await discordSdk.commands.authenticate({ access_token });
|
||||
|
||||
console.log(identity);
|
||||
|
||||
user.set(auth.user);
|
||||
identityStore.set(identity);
|
||||
|
||||
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,4 +1,3 @@
|
|||
import type { Types } from "@discord/embedded-app-sdk";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
|
||||
interface AuthenticatedUser {
|
||||
|
|
@ -10,5 +9,10 @@ interface AuthenticatedUser {
|
|||
global_name?: string | null | undefined;
|
||||
}
|
||||
|
||||
interface Identity {
|
||||
id: string;
|
||||
iv: string;
|
||||
}
|
||||
|
||||
export const user: Writable<AuthenticatedUser> = writable();
|
||||
export const participants: Writable<Types.GetActivityInstanceConnectedParticipantsResponse> = writable();
|
||||
export const identity: Writable<Identity> = writable();
|
||||
|
|
|
|||
10
src/main.ts
10
src/main.ts
|
|
@ -1,8 +1,8 @@
|
|||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
import "./app.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
target: document.getElementById("app")!,
|
||||
});
|
||||
|
||||
export default app
|
||||
export default app;
|
||||
|
|
|
|||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @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 { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { defineConfig } from "vite";
|
||||
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
})
|
||||
plugins: [svelte()],
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue