Frontend updates and changes

- Remove items/runes separate pages, put everything into a "build" page.
- Show summoner spells.
- Add a build variant selector, that for now only selects runes

frontend/components/item/Tree.vue

@@ -71,7 +71,6 @@ onUnmounted(() => {
 })
 
 function drawArrow(start: Element, end: Element) {
-  // console.log("drawArrow(", start, ", ", end, ")")
   if (start == null || end == null) return
 
   const arrow = new svgdomarrowsLinePath({
@@ -89,10 +88,14 @@ function drawArrow(start: Element, end: Element) {
         left: 0
       }
     },
-    style: 'stroke:var(--color-on-surface);stroke-width:3;fill:transparent;',
+    style: 'stroke:var(--color-on-surface);stroke-width:2;fill:transparent;',
     appendTo: document.body
   })
   arrows.push(arrow)
+  // Redraw immediately after creation to ensure correct position
+  requestAnimationFrame(() => {
+    arrow.redraw()
+  })
 }
 
 function refreshArrows() {
@@ -123,30 +126,19 @@ function handleRefresh() {
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <div
-      v-if="tree.data != undefined && tree.data != null"
-      style="width: fit-content; height: fit-content"
-    >
+  <div class="item-tree-container">
+    <div v-if="tree.data != undefined && tree.data != null" class="item-tree-node">
       <img
         ref="start"
-        class="item-img"
-        width="64"
-        height="64"
+        class="item-tree-img"
         :alt="tree.data.toString()"
         :src="getItemIconPath(tree.data)"
       />
-      <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
-        {{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%
-      </h3>
+      <span class="item-tree-pickrate">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</span>
     </div>
 
-    <div style="margin-left: 30px">
-      <div
-        v-for="child in tree.children"
-        :key="child.data"
-        style="width: fit-content; height: fit-content"
-      >
+    <div class="item-tree-children">
+      <div v-for="child in tree.children" :key="child.data" class="item-tree-child">
         <ItemTree
           :tree="child"
           :parent-count="tree.count"
@@ -157,3 +149,51 @@ function handleRefresh() {
     </div>
   </div>
 </template>
+
+<style>
+.item-tree-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.item-tree-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+
+.item-tree-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  border: 1px solid var(--color-on-surface);
+}
+
+.item-tree-pickrate {
+  font-size: 0.65rem;
+  color: var(--color-on-surface);
+  opacity: 0.6;
+  margin-top: 2px;
+}
+
+.item-tree-children {
+  margin-left: 32px;
+}
+
+.item-tree-child {
+  width: fit-content;
+}
+
+@media only screen and (max-width: 900px) {
+  .item-tree-img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .item-tree-children {
+    margin-left: 20px;
+  }
+}
+</style>