WOOO YEA
This commit is contained in:
parent
6e4f80d07e
commit
66ba279feb
16 changed files with 742 additions and 163 deletions
3
.env
Normal file
3
.env
Normal file
|
@ -0,0 +1,3 @@
|
|||
DISCORD_CLIENT_ID=869016244613951539
|
||||
|
||||
API_HOST=http://localhost:5174/api
|
3
.env.example
Normal file
3
.env.example
Normal file
|
@ -0,0 +1,3 @@
|
|||
VITE_DISCORD_CLIENT_ID=
|
||||
|
||||
API_HOST=
|
|
@ -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,24 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { authorize } from "./lib/discord.js";
|
||||
import UserCardShort from "./lib/components/UserCardShort.svelte";
|
||||
import UserCardShortScaffold from "./lib/components/scaffolds/UserCardShortScaffold.svelte";
|
||||
import { user } from "./lib/stores.js";
|
||||
|
||||
async function main() {
|
||||
if (import.meta.env.DEV) return;
|
||||
const auth = await authorize();
|
||||
user.set(auth.user);
|
||||
}
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
user.set({
|
||||
id: "223004006299992064",
|
||||
username: "cirroskais",
|
||||
discriminator: "",
|
||||
public_flags: 0,
|
||||
});
|
||||
}
|
||||
|
||||
main();
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#if $user}
|
||||
{#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>
|
||||
{:else}
|
||||
<p>garf is finding you...</p>
|
||||
{/if}
|
||||
</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;
|
||||
}
|
0
src/lib/api.ts
Normal file
0
src/lib/api.ts
Normal file
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,7 +1,5 @@
|
|||
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";
|
||||
export const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);
|
||||
|
||||
export const ACTIVITY_STARTED = Date.now();
|
||||
|
||||
|
@ -9,7 +7,7 @@ export async function authorize() {
|
|||
await discordSdk.ready();
|
||||
|
||||
const { code } = await discordSdk.commands.authorize({
|
||||
client_id: CLIENT_ID,
|
||||
client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
|
||||
response_type: "code",
|
||||
state: "",
|
||||
prompt: "none",
|
||||
|
@ -25,27 +23,5 @@ export async function authorize() {
|
|||
const { access_token } = await response.json();
|
||||
const auth = await discordSdk.commands.authenticate({ access_token });
|
||||
|
||||
await discordSdk.commands.getInstanceConnectedParticipants();
|
||||
|
||||
return auth;
|
||||
}
|
||||
|
||||
discordSdk.subscribe(Events.ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE, async (data) => {
|
||||
partz.set(data);
|
||||
|
||||
await discordSdk.commands.setActivity({
|
||||
activity: {
|
||||
type: 3,
|
||||
details: "garf",
|
||||
state: "garfmaxxing",
|
||||
assets: {
|
||||
large_image: "embedded_cover",
|
||||
large_text: "garf",
|
||||
},
|
||||
party: {
|
||||
id: discordSdk.instanceId,
|
||||
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 {
|
||||
|
@ -11,4 +10,3 @@ interface AuthenticatedUser {
|
|||
}
|
||||
|
||||
export const user: Writable<AuthenticatedUser> = 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 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()],
|
||||
})
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue