From 03ebc87aa523cde4c9fefac9928af1d8e9373be1 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 9 Jun 2022 09:01:30 +0200
Subject: [PATCH] Prepare rendering of basic element tree

---
 .../PlayerUiPanels/PlayerDetectionPanel.vue   | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
index d9ae7fb..a8afbaf 100644
--- a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
@@ -19,7 +19,31 @@
 
           <div class="element-tree">
             <div class="html-element-boxes">
-
+              <div
+                v-for="(element, index) of elementStack"
+                :key="index"
+                class="element-row"
+              >
+                <div class="status">
+                </div>
+                <div class="element-data">
+                  <div class="tag">
+                    {{element.tagName}}
+                  </div>
+                  <div v-if="element.id" class="id">
+                    {{element.id}}
+                  </div>
+                  <div v-if="element.classList" id="class-list">
+                    {{element.classList}}
+                  </div>
+                  <div class="dimensions">
+                    {{element.width}} x {{element.height}}
+                  </div>
+                </div>
+                <div class="css-fixes">
+                  <!-- todo: generate buttons with some of the common css lines I always end up adding -->
+                </div>
+              </div>
             </div>
             <div class="element-config">
             </div>
@@ -38,7 +62,7 @@ export default({
   },
   data() {
     return {
-
+      elementStack: []
     };
   },
   mixins: [],
@@ -48,12 +72,18 @@ export default({
     'eventBus',
     'site'
   ],
+  created() {
+    this.eventBus.subscribe('uw-player-tree', {function: (elementStack) => this.handleElementStack(elementStack)});
+  },
   mounted() {
-
+    this.eventBus.sendToTunnel('get-player-tree');  // TODO: implement this in PlayerData
   },
   computed: {},
   methods: {
-
+    handleElementStack(elementStack) {
+      this.elementStack = elementStack;
+      this.$nextTick( () => this.$forceUpdate() );
+    }
   }
 })
 </script>