1 files changed, 82 insertions, 0 deletions
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>
+</> )}