feat: overhaul

package.json

@@ -1,42 +1,39 @@
 {
   "type": "module",
   "name": "mallsoft",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "start": "node build/index.js",
     "dev": "vite dev",
     "build": "vite build",
     "package": "vite package",
     "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@playwright/test": "^1.19.1",
-    "@sveltejs/adapter-node": "^1.0.0-next.96",
-    "@sveltejs/kit": "^1.0.0-next.324",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "matter-js": "^0.18.0",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.46.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.1",
-    "tslib": "^2.3.1",
-    "typescript": "~4.5.4",
-    "vite": "^3.1.0"
-  },
-  "dependencies": {
     "@fontsource/space-grotesk": "^4.5.5",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@notionhq/client": "^2.2.3",
+    "@sveltejs/adapter-node": "^1.2.2",
+    "@sveltejs/kit": "^1.5.0",
+    "@types/cookie": "^0.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "aksel": "^1.1.0",
     "bowser": "^2.11.0",
-    "browser": "^0.2.6"
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "matter-js": "^0.19.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
   }
 }

src/lib/components/announcement/messages.ts

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { confett } from '../visuals/Confettu.svelte';
 
 function logToast(icon, title, description) {
   console.info(
@@ -14,13 +15,20 @@ function logToast(icon, title, description) {
   );
 }
 
+function confettiIfAchivement(title) {
+  if (title.startsWith('Achievement!')) {
+    confett();
+  }
+}
+
 function createAnnouncementsStore(maxLength = 4) {
   const { subscribe, set, update } = writable([]);
   return {
     set,
     subscribe,
     add: (icon, title, description, ttl = 3000) => {
       logToast(icon, title, description);
+      confettiIfAchivement(title);
       return update((m) => {
         m.length >= maxLength && m.shift();
         return [...m, { icon, title, description, ttl: ttl + Date.now() }];

src/lib/components/visuals/Confettu.svelte

@@ -0,0 +1,35 @@
+<script context="module">
+  import { writable } from 'svelte/store';
+  import { tick } from 'svelte';
+
+  const confetting = writable(false);
+
+  export async function confett() {
+    confetting.set(false);
+    await tick();
+    confetting.set(true);
+  }
+</script>
+
+<script>
+  import { confetti } from '@neoconfetti/svelte';
+</script>
+
+{#if $confetting}
+  <div use:confetti={{ stageHeight: window.innerHeight, stageWidth: window.innerWidth }} />
+{/if}
+
+<style>
+  div {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    pointer-events: none;
+  }
+</style>

src/lib/components/visuals/Snowy.svelte

@@ -4,8 +4,8 @@
   import { Vec } from '$lib/components/visuals/casting';
 
   let canvasElement: HTMLCanvasElement;
-  let innerWidth, innerHeight;
-  let frame = null;
+  let innerWidth: number, innerHeight: number;
+  let frame: number | null = null;
   let flakes: SnowFlake[] = [];
 
   const throttledResize = new Throttle(() => {

src/lib/components/visuals/suggestions/SuggestionLoader.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { scribblesEnabled } from './suggestionStore';
@@ -11,7 +11,7 @@
     '/achievements': './svgs/achievements.svg'
   }[$page.url.pathname];
 
-  function formattedSvg(str) {
+  function formattedSvg(str: string) {
     return str
       .replaceAll(/fill=\"#\w+\"/g, 'class="f"')
       .replaceAll(/stroke=\"#\w+\"/g, 'class="s"');

src/lib/components/visuals/suggestions/Toggle.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { messages } from '$lib/components/announcement/messages';
   import { scribblesEnabled } from './suggestionStore';
 </script>

src/lib/components/visuals/terminus/commands.ts

@@ -2,6 +2,8 @@ import { goto } from '$app/navigation';
 import { get } from 'svelte/store';
 import { history, lines } from './terminus';
 
+import { confett } from '$lib/components/visuals/Confettu.svelte';
+
 class Command {
   constructor(
     public name: string,
@@ -13,7 +15,7 @@ class Command {
   ) {
     Command.commands.push(this);
   }
-  static commands = [];
+  static commands: Command[] = [];
 }
 
 export const commands = Command.commands;
@@ -128,6 +130,19 @@ new Command(
   },
   {
     short: 'Request info',
-    long: ['Request timing and (os/platform/client/adress) info']
+    long: ['Client request timing and (os/platform/client/adress) info']
+  }
+);
+
+new Command(
+  'confetti',
+  () => {
+    confett();
+    lines.write('Confetti time! 🎊');
+    return true;
+  },
+  {
+    short: 'confetti   ¯\\_(ツ)_/¯',
+    long: [`Sprinkles happy`]
   }
 );

src/lib/utils.ts

@@ -1,6 +1,8 @@
-import { browser } from '$app/environment';
+import { browser, dev } from '$app/environment';
 import { crossfade } from 'svelte/transition';
 import { messages } from '$lib/components/announcement/messages';
+import type { RequestEvent } from '@sveltejs/kit';
+import b from 'bowser';
 
 export function getLeafNodes() {
   const nodes = document.querySelectorAll(
@@ -112,7 +114,7 @@ export function isLocalStorageAvailable() {
   }
 }
 
-export function say(text, opts) {
+export function say(text: string, opts: { cb?: any; rate?: number; pitch?: number }) {
   const utterance = new SpeechSynthesisUtterance(text);
 
   utterance.onend = opts?.cb;
@@ -143,3 +145,20 @@ export function rand(min, max) {
 export function clamp(x, min, max) {
   return Math.min(Math.max(x, min), max);
 }
+
+export function getRequestInfos(event: RequestEvent) {
+  const ip = dev ? event.getClientAddress() : event.request.headers.get('Fly-Client-IP');
+
+  const ua = event.request.headers.get('user-agent');
+  const parsed = b.getParser(ua || '');
+  const agent = parsed.getBrowserName();
+  const os = parsed.getOSName();
+  const platform = parsed.getPlatformType();
+
+  return {
+    ip,
+    agent,
+    os,
+    platform
+  };
+}

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 
   import { isLocalStorageAvailable } from '$lib/utils';
   import Terminus from '$lib/components/visuals/terminus/Terminus.svelte';
+  import Confettu from '$lib/components/visuals/Confettu.svelte';
 </script>
 
 <Meta />
@@ -30,3 +31,5 @@
 {/if}
 
 <Terminus />
+
+<Confettu />

src/routes/+page.svelte

@@ -1,6 +1,5 @@
-<script>
+<script lang="ts">
   import { navRoutes } from '$lib/content';
-  import Snowy from '$lib/components/visuals/Snowy.svelte';
   import { onMount } from 'svelte';
   import SuggestionLoader from '$lib/components/visuals/suggestions/SuggestionLoader.svelte';
 
@@ -13,7 +12,7 @@
     }
   });
 
-  let current = null;
+  let current: number | null = null;
 </script>
 
 <svelte:head>
@@ -52,11 +51,6 @@
   <SuggestionLoader />
 </article>
 
-<!-- dec, jan, feb -->
-{#if [11, 0, 1].includes(new Date().getMonth())}
-  <Snowy />
-{/if}
-
 <style>
   h1 span {
     display: inline-block;

src/routes/api/info/+server.ts

@@ -1,6 +1,5 @@
-import { dev } from '$app/environment';
 import { json } from '@sveltejs/kit';
-import b from 'bowser';
+import { getRequestInfos } from '$lib/utils';
 
 let lastReq = null;
 
@@ -11,14 +10,7 @@ export function GET(event) {
   const last = lastReq || Date.now();
   lastReq = Date.now();
 
-  const ua = request.headers.get('user-agent');
-  const browser = b.getParser(ua);
-
-  const agent = browser.getBrowserName();
-  const os = browser.getOSName();
-  const platform = browser.getPlatformType();
-
-  const ip = dev ? event.getClientAddress() : request.headers.get('Fly-Client-IP');
+  const { ip, agent, os, platform } = getRequestInfos(event);
 
   return json({
     ip,

src/routes/contact/+page.svelte

@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import GRay from '$lib/components/visuals/GRay.svelte';
   import { me } from '$lib/content';
   import SuggestionLoader from '$lib/components/visuals/suggestions/SuggestionLoader.svelte';
   import { onMount } from 'svelte';
 
-  let showAchievements;
+  let showAchievements = false;
   onMount(() => {
     showAchievements = true;
   });

svelte.config.js

@@ -1,9 +1,10 @@
 import adapter from '@sveltejs/adapter-node';
-import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: preprocess(),
+  preprocess: vitePreprocess(),
+
   kit: {
     adapter: adapter()
   }

tsconfig.json

@@ -1,37 +1,17 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
-    "moduleResolution": "node",
-    "module": "es2020",
-    "lib": ["es2020", "DOM", "DOM.Iterable"],
-    "target": "es2020",
-    /**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-		*/
-    "importsNotUsedAsValues": "error",
-    /**
-			TypeScript doesn't know about import usages in the template because it only sees the
-			script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
-		*/
-    "preserveValueImports": true,
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    /**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-		*/
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "allowJs": true,
     "checkJs": true,
-    "paths": {
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"]
-    }
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"],
-  "extends": "./.svelte-kit/tsconfig.json"
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }