3 files changed, 108 insertions, 69 deletions
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
deleted file mode 100644
index bc53f4d..0000000
--- a/src/components/Comment.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { creatorColor, formatTime } from '../lib/util';
-  import type Comment from '../models/Thread';
-  export let comment: Comment;
-</script>
-
-
-<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>
-  </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>
-
-<style>
-  .commentbox {
-    width: 500px;
-    border: 5px solid green;
-    padding: 10px;
-    margin: 10px;
-    background-color: white;
-  }
-  :target, .targeted {
-    background-color: #ffa;
-  }
-</style>
diff --git a/src/components/Form.astro b/src/components/Form.astro
new file mode 100644
index 0000000..417b569
--- /dev/null
+++ b/src/components/Form.astro
@@ -0,0 +1,53 @@
+---
+import '../styles/blackbox.css';
+import { sha256 } from 'js-sha256';
+
+const { board, tid } = Astro.props;
+const iphash = sha256(Astro.clientAddress);
+---
+
+<div class="blackbox">
+  <slot />
+</div>
+
+<script define:vars={{ board, iphash, tid }}>
+  document.forms['form'].addEventListener('submit', async (event) => {
+    event.preventDefault();
+
+    let form = new FormData(event.target);
+    let reader = new FileReader();
+
+      reader.onload = (e) => {
+      form.append('image',
+                  (e != null) ? e.target.result.toString() : ''
+                 );
+    }
+
+    reader.onloadend = async () => {
+      await fetch(event.target.action, {
+        method: event.target.method,
+        body: new URLSearchParams(form)
+      }).then(async (r) => {
+        if(r.status == 200) {
+          alert('Thread Successfuly Posted');
+          let id = await r.text();
+          window.location.assign(`/board/${board}/${id}`);
+        }
+        else alert('An Error has Accured');
+      })
+    }
+
+    form.append('board', board);
+    form.append('iphash', iphash);
+    if(tid) form.append('tid', tid);
+
+    let image = document.getElementById("image").files[0];
+    if(image) {
+      reader.readAsDataURL(image);
+    } else {
+      reader.onload(null);
+      await reader.onloadend();
+    }
+
+  });
+</script>
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index fee1a78..0321b8d 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { creatorColor, formatTime } from '../lib/util';
+  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): boolean => {
+  const listReplies = (id: string, getReplies: boolean = false): any => {
+    if(getReplies) return replies;
+
     replies = [];
     thread.comments.forEach(comment => {
       if(comment.commentText.includes(id))
@@ -15,8 +19,8 @@
     if(replies.length <= 0) return false;
     return true
   }
-</script>
 
+</script>
 
 {#if thread.id != "rules"}
   <div class="threadbox" id="{thread.id}">
@@ -27,13 +31,16 @@
       ->  <span style="{creatorColor(thread.threadCreator )}; font-family: mono">
         {thread.threadCreator}
       </span > <br>
+      <hr>
 
-      {#if listReplies(thread.id)}
-        <hr> <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
-          {#each replies 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 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>
@@ -54,21 +61,45 @@
 
 <p>{@html thread.threadText}</p>
 
-<slot />
+{#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>
 
-  </div>
+        ->  <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}
 
-<style>
-  .threadbox {
-    width: 600px;
-    border: 10px solid green;
-    padding: 10px;
-    margin: 10px;
-    margin-left: 0px;
-    background-color: white;
-  }
-  :target, .targeted {
-    background-color: #ffa;
-  }
-</style>
+  </div>
+{/if}