From 43b4e7c8e0aa4000e1295902846ce6e956b744f1 Mon Sep 17 00:00:00 2001
From: Tushar <tushar@100ms.live>
Date: Fri, 7 Oct 2022 09:04:22 +0530
Subject: [PATCH] feat: implement conference to loop over peers and render

---
 README.md                    |  6 +++++-
 src/routes/Conference.svelte | 41 +++++++++++++++++++++++++++++++++++-
 src/routes/Peer.svelte       |  7 ++++++
 svelte.config.js             |  3 +--
 4 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/Peer.svelte

diff --git a/README.md b/README.md
index 9b10bfb..8805ebd 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 A hello world app for Svelte + 100ms. Built with SvelteKit.
 
+Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/react-quickstart) for Svelte.
+
 ### Steps
 
 1. Svelte kit create, git init
@@ -27,4 +29,6 @@ A hello world app for Svelte + 100ms. Built with SvelteKit.
    2. Creating a few helper svelte store wrappers in hmsStores.ts for commonly used selectors
 8. Create a hmsStore.ts file with helper function to convert from hms to svelte store and create two stores for isConnected and peers in the room.
 9. Implement page.svelte, also add a leave on unload function for handling tab closing. Implement header with a logo and a leave button.
-10. Implement JoinForm, takes in name and token and calls join function
\ No newline at end of file
+10. Implement JoinForm, takes in name and token and calls join function
+11. Implement Conference, create a stub Peer.Svelte. Peer.svelte will use the Video.svelte file to render video and additionally show more details related to the peer.
+12. 
\ No newline at end of file
diff --git a/src/routes/Conference.svelte b/src/routes/Conference.svelte
index a8c5f63..56ff521 100644
--- a/src/routes/Conference.svelte
+++ b/src/routes/Conference.svelte
@@ -1 +1,40 @@
-<p>Conference</p>
\ No newline at end of file
+<script>
+    import {hmsPeers} from "./hmsStores.ts";
+    import Peer from "./Peer.svelte";
+</script>
+
+
+<section class="conference-section">
+    <h2>Conference</h2>
+
+    <div class="peers-container">
+        {#each $hmsPeers as peer}
+            <Peer {peer} />
+        {/each}
+    </div>
+</section>
+
+<style>
+    .conference-section {
+        max-width: 960px;
+
+        padding: 20px 30px;
+        margin: 0 auto;
+    }
+
+    .conference-section h2 {
+        text-align: center;
+        font-size: 32px;
+
+        padding-bottom: 10px;
+
+        border-bottom: 1px solid #546e7a;
+    }
+
+    .peers-container {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(min-content, 1fr));
+        place-items: center;
+        grid-gap: 10px;
+    }
+</style>
diff --git a/src/routes/Peer.svelte b/src/routes/Peer.svelte
new file mode 100644
index 0000000..30afbce
--- /dev/null
+++ b/src/routes/Peer.svelte
@@ -0,0 +1,7 @@
+<script>
+    export let peer;
+</script>
+
+<p>
+    Peer - {peer.name}
+</p>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index d918609..892f0c4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,8 +8,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter(),
-		prerender: { enabled: false }
+		adapter: adapter()
 	}
 };