everything works

5 files changed, 137 insertions, 106 deletions

diff --git a/src/components/Form.astro b/src/components/Form.astro
index 417b569..540a4d4 100644
--- a/src/components/Form.astro
+++ b/src/components/Form.astro
@@ -1,7 +1,11 @@
 ---
-import '../styles/blackbox.css';
 import { sha256 } from 'js-sha256';
 
+export interface Props {
+  board: string;
+  tid?: string
+}
+
 const { board, tid } = Astro.props;
 const iphash = sha256(Astro.clientAddress);
 ---
@@ -31,6 +35,7 @@ const iphash = sha256(Astro.clientAddress);
         if(r.status == 200) {
           alert('Thread Successfuly Posted');
           let id = await r.text();
+          if(id == 'close') window.top.close();
           window.location.assign(`/board/${board}/${id}`);
         }
         else alert('An Error has Accured');
diff --git a/src/components/Image.astro b/src/components/Image.astro
new file mode 100644
index 0000000..07dbadf
--- /dev/null
+++ b/src/components/Image.astro
@@ -0,0 +1,21 @@
+---
+export interface Props {
+  image: string;
+  fileType: string;
+}
+
+const { image, fileType } = Astro.props;
+---
+
+{(image!= null) && (
+  (fileType == 'image') ? (
+    <a href={image} target="_blank" rel="noopener noreferrer">
+      <img src={image} alt={image} height="300px" width="300px"> <br>
+    </a>
+  ) : (
+  (fileType == 'image') && (
+    <video width="320" height="240" controls muted>
+      <source src={image}>
+    </video>
+  ))
+)}
\ No newline at end of file
diff --git a/src/components/Post.astro b/src/components/Post.astro
new file mode 100644
index 0000000..6805846
--- /dev/null
+++ b/src/components/Post.astro
@@ -0,0 +1,28 @@
+---
+import { creatorColor, formatTime } from '../lib/util';
+
+export interface Props {
+  id: string;
+  date: number;
+  creator: string;
+  box: string;
+  board: string
+}
+
+const { id, date, creator, box, board = '' } = Astro.props;
+---
+<div class={box} id={id}>
+  <span style="line-height: 2rem;">
+    {(board != '') ? (
+      <a href=`/board/${board}/${id}` style="font-family: mono">{id}</a>
+    ) : (
+      <span style="font=family: mono">{id}</span>
+    )}
+
+    at {formatTime(date)} <br>
+    ->  <span style=`${creatorColor(creator)}; font-family: mono`>
+      {creator}
+    </span> <br>
+  </span> <hr>
+  <slot />
+</div>
diff --git a/src/components/Thread.astro b/src/components/Thread.astro
new file mode 100644
index 0000000..6fae3de
--- /dev/null
+++ b/src/components/Thread.astro
@@ -0,0 +1,82 @@
+---
+import type Thread from '../models/Thread';
+import Post from './Post.astro';
+import Image from './Image.astro';
+
+export interface Props {
+  thread: Thread;
+  board: string;
+  comments: boolean;
+}
+
+const { thread, board, comments = false } = Astro.props;
+
+let replies: string[] = [];
+const listReplies = (id: string, getReplies: boolean = false): any => {
+  if(getReplies) return replies;
+
+  replies = [];
+  thread.comments.forEach(comment => {
+    if(comment.commentText.includes(id))
+      replies.push(comment.id);
+  })
+
+  if(replies.length <= 0) return false;
+  return true;
+}
+---
+
+{(thread.id != "rules") && ( <>
+  <Post id={thread.id} date={thread.creationDate} creator={thread.threadCreator} box="threadbox" board={(!comments) ? board : ''}>
+
+    {comments && (listReplies(thread.id) && (
+      <span class="small-mono">
+        {listReplies(thread.id, true).map((id) => ( <>
+          <a href=`/board/${board}/${thread.id}#${id}` onmouseover=`onMouseOver('${id}')` onmouseleave=`onMouseLeave('${id}')`>>>{id}</a>&#65279;
+        </> ))}
+      </span> <hr>
+    ))}
+
+
+    <h3>{thread.threadName}</h3>
+    <Image image={thread.imageId} fileType={thread.fileType} />
+    <p set:html={thread.threadText} />
+
+    {comments && ( <>
+      {thread.comments.map((comment) => ( <>
+        <Post id={comment.id} date={comment.creationDate} creator={comment.commentCreator} box="commentbox">
+
+          {listReplies(comment.id) && (
+            <span class="small-mono">
+              {listReplies(comment.id, true).map((id) => ( <>
+                <a href=`/board/${board}/${thread.id}#${id}` onmouseover=`onMouseOver('${id}')` onmouseleave=`onMouseLeave('${id}')`>>>{id}</a>&#65279;
+              </> ))}
+            </span> <hr>
+          )}
+
+          <Image image={comment.imageId} fileType={comment.fileType} />
+          <p set:html={comment.commentText} />
+
+        </Post>
+      </> ))}
+    </> )}
+
+  </Post>
+</> )}
+
+{comments && ( <>
+  <script is:inline>
+    function onMouseOver(id) {
+      document.getElementById(id).classList.add('targeted');
+    }
+    function onMouseLeave(id) {
+      document.getElementById(id).classList.remove('targeted');
+    }
+  </script>
+
+  <style is:inline>
+    .small-mono {
+      display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;
+    }
+  </style>
+</> )}
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
deleted file mode 100644
index 0321b8d..0000000
--- a/src/components/Thread.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-  import { creatorColor, formatTime} from '../lib/util';
-  import type Thread from '../models/Thread';
-
-  export let thread: Thread;
-  export let board: string;
-  export let comments: boolean = false;
-
-  let replies: string[] = [];
-  const listReplies = (id: string, getReplies: boolean = false): any => {
-    if(getReplies) return replies;
-
-    replies = [];
-    thread.comments.forEach(comment => {
-      if(comment.commentText.includes(id))
-        replies.push(comment.id);
-    })
-
-    if(replies.length <= 0) return false;
-    return true
-  }
-
-</script>
-
-{#if thread.id != "rules"}
-  <div class="threadbox" id="{thread.id}">
-    <span style="line-height: 2rem;">
-      <a href="/board/{board}/{thread.id}" style="font-family: mono">{thread.id}</a>
-      at {formatTime(thread.creationDate)} <br>
-
-      ->  <span style="{creatorColor(thread.threadCreator )}; font-family: mono">
-        {thread.threadCreator}
-      </span > <br>
-      <hr>
-
-      {#if comments}
-        {#if listReplies(thread.id) }
-          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
-            {#each listReplies(thread.id, true) as id}
-              <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
-            {/each}
-          </span> <hr>
-        {/if}
-      {/if}
-
-    </span>
-
-    <h3>{thread.threadName}</h3>
-
-    {#if thread.imageId!= null && thread.imageId != undefined}
-      {#if thread.fileType == 'image'}
-        <a href="{thread.imageId}" target="_blank" rel="noopener noreferrer">
-          <img src="{thread.imageId}" alt="{thread.imageId}" height="300px" width="300px"> <br>
-        </a>
-      {:else if thread.fileType == 'video'}
-        <video width="320" height="240" controls muted>
-          <source src="{thread.imageId}">
-        </video>
-      {/if}
-    {/if}
-
-<p>{@html thread.threadText}</p>
-
-{#if comments}
-  {#each thread.comments as comment}
-    <div class="commentbox" id="{comment.id}">
-      <span style="line-height: 2rem;">
-        <span style="font-family: mono">{comment.id}</span>
-        at {formatTime(comment.creationDate)} <br>
-
-        ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">
-          {comment.commentCreator}
-        </span> <br>
-        <hr>
-
-        {#if listReplies(comment.id)}
-          <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
-            {#each listReplies(comment.id, true) as id}
-              <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
-            {/each}
-          </span> <hr>
-        {/if}
-
-      </span>
-
-      {#if comment.imageId!= null && comment.imageId != undefined}
-        {#if comment.fileType == 'image'}
-          <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
-            <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
-          </a>
-        {:else if comment.fileType == 'video'}
-          <video width="320" height="240" controls muted>
-            <source src="{comment.imageId}">
-          </video>
-        {/if}
-      {/if}
-
-<p>{@html comment.commentText}</p>
-
-    </div>
-  {/each}
-{/if}
-
-  </div>
-{/if}