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>
|
<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>garf</title>
|
<title></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
@ -12,8 +12,11 @@
|
||||||
"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"
|
||||||
|
|
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">
|
<script lang="ts">
|
||||||
import { authorize } from "./lib/discord.js";
|
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";
|
import { user } from "./lib/stores.js";
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
|
if (import.meta.env.DEV) return;
|
||||||
const auth = await authorize();
|
const auth = await authorize();
|
||||||
user.set(auth.user);
|
user.set(auth.user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
user.set({
|
||||||
|
id: "223004006299992064",
|
||||||
|
username: "cirroskais",
|
||||||
|
discriminator: "",
|
||||||
|
public_flags: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
main();
|
main();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
{#if $user}
|
||||||
{#if $user}
|
<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>
|
|
||||||
{:else}
|
|
||||||
<p>garf is finding you...</p>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
|
|
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 } from "@discord/embedded-app-sdk";
|
||||||
import { DiscordSDK, Events, type Types } from "@discord/embedded-app-sdk";
|
export const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);
|
||||||
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();
|
||||||
|
|
||||||
|
@ -9,7 +7,7 @@ export async function authorize() {
|
||||||
await discordSdk.ready();
|
await discordSdk.ready();
|
||||||
|
|
||||||
const { code } = await discordSdk.commands.authorize({
|
const { code } = await discordSdk.commands.authorize({
|
||||||
client_id: CLIENT_ID,
|
client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
|
||||||
response_type: "code",
|
response_type: "code",
|
||||||
state: "",
|
state: "",
|
||||||
prompt: "none",
|
prompt: "none",
|
||||||
|
@ -25,27 +23,5 @@ export async function authorize() {
|
||||||
const { access_token } = 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 });
|
||||||
|
|
||||||
await discordSdk.commands.getInstanceConnectedParticipants();
|
|
||||||
|
|
||||||
return auth;
|
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";
|
import { writable, type Writable } from "svelte/store";
|
||||||
|
|
||||||
interface AuthenticatedUser {
|
interface AuthenticatedUser {
|
||||||
|
@ -11,4 +10,3 @@ interface AuthenticatedUser {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const user: Writable<AuthenticatedUser> = writable();
|
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.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;
|
||||||
|
|
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 { 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