noxious_client/src/components/utilities/assetManager/AssetManager.vue

<template>
  <div class="assets-container">
    <div class="asset-categories">

      <!-- Asset Categories -->
      <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'">
        <span class="category-name">Tiles</span>
      </a>
      <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'">
        <span class="category-name">Objects</span>
      </a>
      <a class="category">
        <span class="category-name">Weapons</span>
      </a>
      <a class="category">
        <span class="category-name">NPC's</span>
      </a>
    </div>
    <div class="divider categories"></div>

    <!-- Assets -->
    <div class="assets" :class="{ active: selectedCategory === 'tiles' }" ref="elementToScroll" @scroll="onScroll">
      <TileList />
    </div>
    <div class="assets" :class="{ active: selectedCategory === 'objects' }">
      <a class="asset selected">
        <span class="asset-name">Wall #1</span>
      </a>
    </div>
    <div class="assets">
      
    </div>
    <div class="assets">

    </div>
    <button class="back-to-top" v-show="hasScrolled" @click="toTop">
      <img src="/assets/icons/zoneEditor/chevron.svg" />
    </button>
    <div class="divider assets-list"></div>

    <div class="asset-info">

      <div class="image-container">
        <img src="/assets/placeholders/wall-1.png" />
      </div>
      <div class="modal-form asset-manager">
        <form class="form-fields">
          <div class="form-field name">
            <label for="name">Name</label>
            <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
          </div>

          <div class="submit">
            <button class="btn-cyan" type="submit">Save</button>
            <button class="btn-bordeaux" type="submit">Remove</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue'

const socket = useSocketStore()

const selectedCategory = ref('tiles')
const hasScrolled = ref(false)
const elementToScroll = ref() 

const onScroll = (e: Event) => {
  let scrollTop = (e.target as HTMLBodyElement).scrollTop

  if (scrollTop > 200) {
    hasScrolled.value = true
  } else if (scrollTop <= 200) {
    hasScrolled.value = false
  }
}

function toTop() {
  elementToScroll.value.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}
</script>

<style lang="scss">
@import '@/assets/scss/main';

.container {
  &.gm-panel {
    height: calc(100% - 20px);
    margin: 0!important;
  }
}
.assets-container {
  display: flex;
  height: calc(100% + 20px);
  width: 100%;
  position: relative;

  .divider {
    position: absolute;
    width: 1px;
    background-color: $dark-cyan;
    height: 100%;
    top: 0;
    &.categories {
      left: 15%; //width % of .asset-categories
    }
    &.assets-list {
      left: 50%; //width % of .asset-categories + .assets
    }
  }

  button.back-to-top {
    position: absolute;
    left: calc(50% - 60px);
    bottom: 10px;
    min-width: unset;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: rgba($cyan, 0.5); 
    padding: 0;
    img {
      position: absolute;
      filter: invert(100%);
      width: 30px;
      height: 30px;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%) rotateX(180deg);
    }

    &:hover {
      background-color: rgba($cyan, 0.8);
    }
  }
  
  .asset-categories {
    width: 15%;
    display: flex;
  }

  .assets {
    overflow:auto;
    height: 100%;
    width: 35%;
    display: none;
    &.active {
      display: flex;
    }
  }
  .asset-info {
    display: flex;
    width: 50%;
    &::after {
      display: none;
    }
    .image-container {
      text-align: center;
      img {
        height: 200px;
        padding-right: 10px;
        margin: 20px 0;
      }
    }
    .modal-form {
      &.asset-manager {
        margin: 10px;
        width: calc(100% - 20px);
        height: 100%;
        .form-fields {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;

          .form-field {
            width: calc(50% - 5px);
            &.name {
              width: 100%;
            }
          }
          .submit {
            width: 100%;
          }
        }
      }
    }
  }

  .asset-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    img {
      height: 28px;
    }
  }

  .category {
    &:hover {
      cursor: pointer;
    }
  }

  .asset-categories, .assets, .asset-info {
    flex-direction: column;
    position: relative;

    .category, .asset, .image-container {
      position: relative;
      padding: 10px;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: $dark-cyan;
      }
      &.selected {
        background-color: rgba($cyan, 0.8);
      }
      &.add-new {
        display: flex;
        align-items: center;
        gap: 10px 20px;
        flex-wrap: wrap;
        .asset-name {
          flex-shrink: 0;
        }
      }
      .search-field {
        border-radius: 5px;
        padding: 8px 10px;
        width: calc(100% - 20px);
      }
      .file-upload {
        background-color: rgba($cyan, 0.5);
        border: 1px solid $white;
        border-radius: 5px;
        text-shadow: 0 3px 6px rgba($black, 0.2);
        padding: 6px 15px;
        display: inline-flex;

        &:hover {
          background-color: $cyan;
          cursor: pointer;
        }
        input[type="file"] {
          display: none;
        }
      }
    }
  }
  
}
</style>