Restructure repo

2025-12-06 05:33:40 -05:00 · 2024-08-02 15:26:59 +00:00 · 2024-08-02 15:26:59 +00:00 · ccdddb005d
commit ccdddb005d
parent 65ddf2c73d
21 changed files with 0 additions and 36 deletions
--- a/tiling-frontend/README.md
+++ b/tiling-frontend/README.md
@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```
--- a/tiling-frontend/bun.lockb
+++ b/tiling-frontend/bun.lockb
--- a/tiling-frontend/index.html
+++ b/tiling-frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/tiling-frontend/package.json
+++ b/tiling-frontend/package.json
@ -0,0 +1,29 @@
+{
+  "name": "onboard-plus-sfa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.40",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.1",
+    "tailwindcss": "^3.4.7",
+    "tslib": "^2.6.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },
+  "dependencies": {
+    "hls.js": "^1.5.13",
+    "unocss": "^0.61.3",
+    "vite-plugin-singlefile": "^2.0.2"
+  }
+}
--- a/tiling-frontend/postcss.config.js
+++ b/tiling-frontend/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/tiling-frontend/src/App.svelte
+++ b/tiling-frontend/src/App.svelte
@ -0,0 +1,212 @@
+<script lang="ts">
+  import hls from "hls.js";
+  import { onMount } from "svelte";
+  let videos: { [key: string]: HTMLVideoElement } = {};
+  let pathData:
+    | {
+        ready: boolean;
+        name: string;
+      }[]
+    | null = null;
+  $: activeStream = "";
+  $: oldActiveStream = "";
+  let newData: {
+    ready: boolean;
+    name: string;
+    isActive: boolean;
+  }[] = [];
+  let activePaths: string[] = [];
+  onMount(() => {
+    const fetchData = async () => {
+      try {
+        const activeStreamResponse = await fetch(
+          "http://localhost:8000/api/v1/active_stream",
+        );
+        activeStream = (await activeStreamResponse.text()).replaceAll('"', "");
+        // if (oldActiveStream !== null && oldActiveStream !== activeStream) {
+        //   window.location.reload();
+        // }
+        oldActiveStream = activeStream;
+        const pathListResponse = await (
+          await fetch("http://localhost:9997/v3/paths/list")
+        ).json();
+        console.log(pathListResponse);
+        newData = [];
+        for (let i = 0; i < pathListResponse["items"].length; i++) {
+          if (pathListResponse["items"][i]["ready"] === false) {
+          }
+          newData.push({
+            name: pathListResponse["items"][i]["name"],
+            ready: pathListResponse["items"][i]["ready"],
+            isActive: pathListResponse["items"][i]["name"] === activeStream,
+          });
+        }
+        console.log(newData);
+        videos = Object.fromEntries(
+          Object.entries(videos).filter(([_, v]) => v != null),
+        );
+        console.log(newData);
+        if (JSON.stringify(newData) !== JSON.stringify(pathData)) {
+          console.log("Data changed");
+          pathData = newData;
+          setTimeout(() => {
+            for (const video in videos) {
+              const hlsInstance = new hls({ progressive: false });
+              hlsInstance.loadSource(
+                `http://localhost:8888/${video}/index.m3u8`,
+              );
+              hlsInstance.attachMedia(videos[video]);
+            }
+          }, 5);
+        }
+      } catch (error) {
+        console.error("Error fetching JSON data:", error);
+      }
+    };
+
+    fetchData();
+
+    const interval = setInterval(fetchData, 2000);
+
+    return () => {
+      // clearInterval(interval);
+    };
+  });
+</script>
+
+<div
+  style="width: 100vw; height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0"
+>
+  <div class="gradient"></div>
+</div>
+<h2 class="text-4xl text-center mt-4">OnBoard Live Design Stream</h2>
+<img
+  class="absolute top-0 left-0 w-64"
+  src="https://assets.hackclub.com/flag-orpheus-left.svg"
+  alt="Hack Club"
+/>
+<div class="grid w-screen grid-rows-2 grid-cols-1 h-[90vh] justify-items-center bg-transparent mt-0">
+  {#if pathData?.map((path) => path.ready).includes(true)}
+    {#if activePaths.length == 1}
+      <!-- svelte-ignore a11y-media-has-caption -->
+      <video
+        controls
+        autoplay
+        id={activeStream}
+        bind:this={videos[activeStream]}
+        class="h-full w-auto"
+      ></video>
+    {:else}
+      <div class="flex justify-center items-center w-auto h-[65vh] mt-5">
+        {#each newData as path}
+          {#if path.ready && path.name === activeStream}
+            <!-- svelte-ignore a11y-media-has-caption -->
+            <video
+              controls
+              autoplay
+              id={path.name}
+              bind:this={videos[path.name]}
+              class="max-h-[65vh] w-auto bg-red-500"
+            ></video>
+          {/if}
+        {/each}
+      </div>
+
+      <div
+        class="flex items-center justify-center justify-items-center w-screen h-[25vh] bottom-12 absolute"
+      >
+        {#each newData as path}
+          {#if path.name !== activeStream && path.ready}
+            <!-- svelte-ignore a11y-media-has-caption -->
+            <video
+              controls
+              autoplay
+              muted
+              id={path.name}
+              bind:this={videos[path.name]}
+              class="max-h-[25vh] mx-10"
+            ></video>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  {:else}
+    <div class="text-center text-4xl absolute w-screen h-screen top-1/2">
+      <p>
+        No one is here yet!<br /> Check back later.
+      </p>
+    </div>
+  {/if}
+  <h2 class="absolute bottom-4 text-center w-screen text-3xl">
+    Join at <div
+      style="display: inline-block; color: #338eda; text-decoration-line: underline;"
+    >
+      https://hack.club/onboard-live
+    </div>
+  </h2>
+</div>
+
+<style>
+  :root{
+    overflow: hidden;
+  }
+  .gradient {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    transform-origin: center;
+    overflow: hidden;
+    z-index: -999;
+    background: linear-gradient(
+      45deg,
+      rgba(236, 55, 80, 1) 0%,
+      rgba(255, 140, 55, 1) 25%,
+      rgba(241, 196, 15, 1) 40%,
+      rgba(51, 214, 166, 1) 60%,
+      rgba(51, 142, 218, 1) 80%,
+      rgba(166, 51, 214, 1) 100%
+    );
+    animation: move-gradient ease-in-out 15s infinite;
+  }
+  @keyframes move-gradient {
+    0% {
+      transform: scale(1) rotate(0deg);
+    }
+    25% {
+      transform: scale(2) rotate(-35deg);
+    }
+    50% {
+      transform: scale(3) rotate(90deg);
+    }
+    75% {
+      transform: scale(2) rotate(-35deg);
+    }
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
+  /* .video {
+    width: 40vw;
+    height: 40vh;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .only-video {
+    width: 85vw;
+    height: 85vh;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .active {
+    width: 60% !important;
+    height: 60% !important;
+  }
+  .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+  } */
+</style>
--- a/tiling-frontend/src/app.css
+++ b/tiling-frontend/src/app.css
@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tiling-frontend/src/main.ts
+++ b/tiling-frontend/src/main.ts
@ -0,0 +1,8 @@
+import App from './App.svelte'
+import './app.css'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
--- a/tiling-frontend/src/vite-env.d.ts
+++ b/tiling-frontend/src/vite-env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/tiling-frontend/svelte.config.js
+++ b/tiling-frontend/svelte.config.js
@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/tiling-frontend/tailwind.config.js
+++ b/tiling-frontend/tailwind.config.js
@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+    fontFamily: {
+      'display': ['Inter'],
+      'sans': ['Inter'],
+      'body': ['Inter']
+    }
+  },
+  plugins: [],
+}
+
--- a/tiling-frontend/tsconfig.json
+++ b/tiling-frontend/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+}
--- a/tiling-frontend/tsconfig.node.json
+++ b/tiling-frontend/tsconfig.node.json
@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/tiling-frontend/vite.config.ts
+++ b/tiling-frontend/vite.config.ts
@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+
+export default defineConfig(({ command }) => ({
+	plugins: [
+		svelte({
+			/* plugin options */
+		}),
+		command === 'build' &&
+			viteSingleFile({
+				removeViteModuleLoader: true
+			})
+	],
+	build: {
+		minify: true
+	}
+}));