From aad36ee95374459434c644dee8c71e1b895e4ac8 Mon Sep 17 00:00:00 2001
From: yequari <yequari@32bit.cafe>
Date: Sat, 30 Sep 2023 14:53:08 -0700
Subject: [PATCH] add placeholders for toy entries

---
 css/style.css  | 25 +++++++++++++++++++++++++
 index.html     | 16 ++++++++--------
 js/elements.js | 22 +++++++++++++---------
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/css/style.css b/css/style.css
index b48ee6f..3893912 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,3 +53,28 @@ shop-counter {
     position: relative;
     z-index: 2;
 }
+
+toy-shelf ul {
+    position: absolute;
+    z-index: 3;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    vertical-align: bottom;
+}
+
+toy-shelf li {
+    display: inline-block;
+    width: 70px;
+    height: 70px;
+    margin: 5px 8px;
+    padding: 5px;
+    background-color: black;
+    color: red;
+    font-size: 10px;
+    vertical-align: bottom;
+    position: relative;
+    top: 5px;
+    left: 2px;
+    text-align: center;
+}
diff --git a/index.html b/index.html
index 3f5f8b7..e3fc12f 100644
--- a/index.html
+++ b/index.html
@@ -18,14 +18,14 @@
                     <div class="shelf-group">
                         <h2>Featured</h2>
                         <toy-shelf>
-                            <ul>
-                            <li>Armada Megatron</li>
-                            <li>Leo Prime</li>
-                                <li>Coronation Starscream</li>
+                            <ul slot="toy-list">
+                                <li slot="toy-item">Armada Megatron</li>
+                                <li slot="toy-item">Leo Prime</li>
+                                <li slot="toy-item">Coronation Starscream</li>
                             </ul>
                         </toy-shelf>
                         <toy-shelf>
-                            <ul>
+                            <ul slot="toy-list">
                                 <li>Armada Starscream</li>
                                 <li>Leo Nemesis Prime</li>
                                 <li>Optimus Prime</li>
@@ -37,14 +37,14 @@
                     <div class="shelf-group">
                         <h2>New Arrivals</h2>
                         <toy-shelf>
-                            <ul>
+                            <ul slot="toy-list">
                                 <li>Armada Megatron</li>
                                 <li>Leo Prime</li>
                                 <li>Coronation Starscream</li>
                             </ul>
                         </toy-shelf>
-                        <toy-shelf>
-                            <ul>
+                        <toy-shelf> 
+                            <ul slot="toy-list">
                                 <li>Armada Starscream</li>
                                 <li>Leo Nemesis Prime</li>
                                 <li>Optimus Prime</li>
diff --git a/js/elements.js b/js/elements.js
index 1854a2b..a6b95c6 100644
--- a/js/elements.js
+++ b/js/elements.js
@@ -128,18 +128,22 @@ class ToyShelf extends Rect {
         this.height = 100;
         this.depth = 100;
 
-        let style = document.createElement("style");
-/*        style.textContent = `
-        
-            .rect {
-                transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
-            }
-        `*/
-
         const rect = this.createRect();
 
+        shadow.innerHTML = `
+            <div id="toy-list"><slot name="toy-list"></slot></div>
+        `
+        
+        // TODO: change slot items to render on shelf
+        shadow.firstElementChild.addEventListener('slotchange', e => {
+            let slot = e.target;
+            if (slot.name == 'toy-list') {
+                this.items = slot.assignedElements().map(elem => elem.textContent);
+                console.log("Items: " + this.items);
+            }
+        });      
+
         shadow.appendChild(rect);
-        shadow.appendChild(style);
     }
 }