<template>
  <div class="enginedebug__container">
    <pre class="enginedebug__json">{{ userJson }}</pre>
    <pre class="enginedebug__json">{{ engineJson }}</pre>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserinfoStore } from "@/stores/UserinfoStore"
import { useEngineStore } from "@/stores/EngineStore"

const user = useUserinfoStore()
const engine = useEngineStore()
const userJson = computed(() => JSON.stringify(user.userInfo, null, 2))
const engineJson = computed(() => JSON.stringify(engine.json, null, 2))
</script>

<style lang="scss">
@import '~/assets/css/components';

.enginedebug {
  &__container {
    width: 100%;
    max-height: 100%;
    border: $debug-border;
    background-color: $debug-background-color;
    overflow: auto;
  }

  &__json {
    padding: 0 0 0 1em;
    color: $debug-text-color;
    font-size: 10px;
  }
}
</style>
