Fully rewritten

Abourass · Jul 29, 2024 · 35152ca · 35152ca
1 parent 757a9e3
commit 35152ca
Show file tree

Hide file tree

Showing 51 changed files with 522 additions and 391 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+	"files.exclude": {
+		"**/.git": true,
+		"**/.svn": true,
+		"**/.hg": true,
+		"**/CVS": true,
+		"**/.DS_Store": true,
+		"**/Thumbs.db": true,
+		"**/.*": true,
+		"eslint*.*": true,
+		"**/tmp/**": true,
+		"**/node_modules/**": true,
+		"**/.git/objects/**": true
+	},
+	"explorerExclude.backup": {}
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];
diff --git a/public/index.html b/public/index.html
diff --git a/src/app.css b/src/app.css
@@ -1,107 +1,73 @@
-@import '@fontsource/fira-mono';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-:root {
-	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Fira Mono', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
-	--color-theme-1: #ff3e00;
-	--color-theme-2: #4075a6;
-	--color-text: rgba(0, 0, 0, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
-	font-family: var(--font-body);
-	color: var(--color-text);
+:global(.times32) {
+	font-family: 'Times Pixelated 32', 'Times New Roman', serif;
 }
 
-body {
-	min-height: 100vh;
-	margin: 0;
-	background-attachment: fixed;
-	background-color: var(--color-bg-1);
-	background-size: 100vw 100vh;
-	background-image: radial-gradient(
-			50% 50% at 50% 50%,
-			rgba(255, 255, 255, 0.75) 0%,
-			rgba(255, 255, 255, 0) 100%
-		),
-		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
+:global(button),
+:global(h1),
+:global(.arial16) {
+	font-family: 'Arial Pixelated 16', 'Arial' !important;
 }
 
-h1,
-h2,
-p {
-	font-weight: 400;
+:global(.times24) {
+	font-family: 'Times Pixelated 24', 'Times New Roman', serif !important;
 }
 
-p {
-	line-height: 1.5;
+:global(span),
+:global(p),
+:global(input),
+:global(li),
+:global(.times16) {
+	font-family: 'Times Pixelated 16', 'Times New Roman', serif;
 }
 
-a {
-	color: var(--color-theme-1);
-	text-decoration: none;
+@font-face {
+	font-family: "Arial Pixelated 16";
+	src: url(/fonts/ARIAL.TTF-16-Regular.woff) format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap
 }
 
-a:hover {
-	text-decoration: underline;
+@font-face {
+	font-family: "Times Pixelated 16";
+	src: url(/fonts/TIMES.TTF-16-Regular.woff) format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap
 }
 
-h1 {
-	font-size: 2rem;
-	text-align: center;
+@font-face {
+	font-family: "Times Pixelated 16";
+	src: url(/fonts/TIMESI.TTF-16-Italic.woff) format("woff");
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap
 }
 
-h2 {
-	font-size: 1rem;
+@font-face {
+	font-family: "Times Pixelated 16";
+	src: url(/fonts/TIMESBD.TTF-16-Bold.woff) format("woff");
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap
 }
 
-pre {
-	font-size: 16px;
-	font-family: var(--font-mono);
-	background-color: rgba(255, 255, 255, 0.45);
-	border-radius: 3px;
-	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-	padding: 0.5em;
-	overflow-x: auto;
-	color: var(--color-text);
+@font-face {
+	font-family: "Times Pixelated 24";
+	src: url(/fonts/TIMES.TTF-24-Regular.woff) format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap
 }
 
-.text-column {
-	display: flex;
-	max-width: 48rem;
-	flex: 0.6;
-	flex-direction: column;
-	justify-content: center;
-	margin: 0 auto;
-}
-
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
-}
-
-button:focus:not(:focus-visible) {
-	outline: none;
-}
-
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
-}
-
-.visually-hidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: auto;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	white-space: nowrap;
+@font-face {
+	font-family: "Times Pixelated 32";
+	src: url(/fonts/TIMES.TTF-32-Regular.woff) format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap
 }
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,22 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+	<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+	<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+	<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+	<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#1f6a32" />
+	<meta name="msapplication-TileColor" content="#000000" />
+	<meta name="theme-color" content="#ffffff" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="description" content="If you're here, you know why" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
diff --git a/src/components/Decrypting.svelte b/src/components/Decrypting.svelte
@@ -3,7 +3,6 @@
   export let onFinish;
 </script>
 
-
 <Typewriter interval={80} on:done={onFinish}>
   <h3 class="text-2xl times24">Files decrypting...</h3>
 </Typewriter>
diff --git a/src/components/LogInForm.svelte b/src/components/LogInForm.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Agents from '../Agents';
   import {user} from '../stores/user';
   import {password} from '../stores/user';
@@ -7,18 +7,18 @@
 
   export let loggedIn = false;
 
-  const login = (event) => {
+  const login = (event: Event) => {
     event.preventDefault();
     const records = Agents.filter((agent) => (agent.user === $user && agent.password === $password));
     if (records.length === 1) loggedIn = true;
   };
 </script>
 
-<form class="w-full mt-8 px-8 pt-10 pb-6 rounded-md bg-gray-900 flex flex-col justify-center" on:submit={login}>
-  <TextInput type="text" label="User" bind:value={$user}/>
+<form class="w-full mt-8 px-8 pt-10 pb-6 rounded-md flex flex-col justify-center" on:submit={login}>
+  <TextInput label="User" bind:value={$user} labelClasses="mb-1" inputClasses="bg-zinc-900"/>
   <Password bind:value={$password} />
   <button
     type="submit"
-    class="rounded bg-gray-800 mt-3 w-20 mx-auto text-xl border-2 border-light-blue-500 border-opacity-25"
+    class="rounded bg-slate-700 mt-3 w-20 mx-auto text-xl border-2 border-blue-300 border-opacity-25 hover:border-delta-green"
   >Log In</button>
 </form>
diff --git a/src/components/Navigation.svelte b/src/components/Navigation.svelte
@@ -6,7 +6,15 @@
   <div class="flex flex-row justify-around items-center h-full">
     <button
       type="button"
-      class="rounded bg-gray-700 text-xl p-2 border border-light-blue-500 border-opacity-25"
+      class="
+      rounded
+      bg-slate-700
+      text-xl
+      p-2
+      border
+      border-blue-300
+      border-opacity-25
+    hover:border-delta-green"
       on:click={correspondenceFn}
     >
       Pinned Correspondence
@@ -15,10 +23,18 @@
 
     <button
       type="button"
-      class="rounded bg-gray-700 text-xl p-2 border border-light-blue-500 border-opacity-25"
+      class="
+      rounded
+      bg-slate-700
+      text-xl
+      p-2
+      border
+      border-blue-300
+      border-opacity-25
+    hover:border-delta-green"
     >
       Private Messages
-      <span class="text-md text-gray-500">(0)</span>
+      <span class="text-md bg-opacity-100">(0)</span>
     </button>
   </div>
 </div>
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
@@ -23,6 +23,6 @@
 <div class="flex content-center">
   <label class="flex flex-row justify-between w-full times24">
     <span>{label}</span>
-    <input type="password" bind:value={value} class="w-44">
+    <input type="password" bind:value={value} class="w-44 bg-zinc-900">
   </label>
 </div>
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
@@ -1,6 +1,8 @@
 <script type="ts">
   export let value = '';
   export let label = '';
+  export let inputClasses = '';
+  export let labelClasses = '';
 </script>
 
 <style>
@@ -21,8 +23,8 @@
 </style>
 
 <div class="flex content-center">
-  <label class="flex flex-row justify-between w-full times24">
+  <label class={labelClasses + " flex flex-row justify-between w-full times24"}>
     <span>{label}</span>
-    <input type="text" bind:value={value} class="w-44">
+    <input type="text" bind:value={value} class={inputClasses + " w-44"} />
   </label>
 </div>