Big bang

1 files changed, 74 insertions, 0 deletions

diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
new file mode 100644
index 0000000..8e07c9f
--- /dev/null
+++ b/src/components/Thread.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { creatorColor, formatTime } from '../lib/util';
+  import type Thread from '../models/Thread';
+  export let thread: Thread;
+  export let board: string;
+
+  let replies: string[] = [];
+  const listReplies = (id: string): boolean => {
+    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}">{thread.id}</a>
+      at {formatTime(thread.creationDate)} <br>
+
+      ->  <span style="{creatorColor(thread.threadCreator )}">
+        {thread.threadCreator}
+      </span > <br>
+
+      {#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}
+
+    </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>
+
+<slot />
+
+  </div>
+{/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>