From e7cea28b08817bdf84685af1302513f7cdff6415 Mon Sep 17 00:00:00 2001
From: luoliwoshang <2643523683@qq.com>
Date: Wed, 7 Feb 2024 18:05:53 +0800
Subject: [PATCH] feat(gui):modify the active logic of sprite-card

---
 .../components/sprite-list/SpriteEditBtn.vue  |   5 +-
 .../src/components/sprite-list/SpriteList.vue |  48 +++---
 .../components/spx-stage/BackdropLayer.vue    |  31 ----
 spx-gui/src/components/spx-stage/Costume.vue  | 140 ------------------
 spx-gui/src/components/spx-stage/Sprite.vue   |  70 ---------
 .../src/components/spx-stage/SpriteLayer.vue  |  40 -----
 spx-gui/src/components/spx-stage/SpxStage.vue |   4 +-
 .../src/components/spx-stage/StageViewer.vue  |  59 --------
 spx-gui/src/components/spx-stage/calf-0.png   | Bin 24443 -> 0 bytes
 .../stage-viewer-demo/StageViewerDemo.vue     |   4 +-
 .../components/stage-viewer/SpriteLayer.vue   |   4 +-
 spx-gui/src/components/stage-viewer/index.ts  |   2 +-
 12 files changed, 38 insertions(+), 369 deletions(-)
 delete mode 100644 spx-gui/src/components/spx-stage/BackdropLayer.vue
 delete mode 100644 spx-gui/src/components/spx-stage/Costume.vue
 delete mode 100644 spx-gui/src/components/spx-stage/Sprite.vue
 delete mode 100644 spx-gui/src/components/spx-stage/SpriteLayer.vue
 delete mode 100644 spx-gui/src/components/spx-stage/StageViewer.vue
 delete mode 100644 spx-gui/src/components/spx-stage/calf-0.png

diff --git a/spx-gui/src/components/sprite-list/SpriteEditBtn.vue b/spx-gui/src/components/sprite-list/SpriteEditBtn.vue
index 758ce756c..25e31c9c7 100644
--- a/spx-gui/src/components/sprite-list/SpriteEditBtn.vue
+++ b/spx-gui/src/components/sprite-list/SpriteEditBtn.vue
@@ -2,7 +2,7 @@
  * @Author: Xu Ning
  * @Date: 2024-01-18 17:09:35
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 17:23:47
+ * @LastEditTime: 2024-02-07 17:43:33
  * @FilePath: /spx-gui/src/components/sprite-list/SpriteEditBtn.vue
  * @Description: 
 -->
@@ -62,8 +62,7 @@ import { useSpriteStore } from '@/store/modules/sprite'
 const spriteStore = useSpriteStore()
 
 // ----------data related -----------------------------------
-// Ref about show sprite state
-const isSpriteShow = ref<boolean>(true)
+
 
 const x = computed(() => (spriteStore.current ? spriteStore.current.config.x : 0))
 const y = computed(() => (spriteStore.current ? spriteStore.current.config.y : 0))
diff --git a/spx-gui/src/components/sprite-list/SpriteList.vue b/spx-gui/src/components/sprite-list/SpriteList.vue
index ac846fbc5..60b7797f8 100644
--- a/spx-gui/src/components/sprite-list/SpriteList.vue
+++ b/spx-gui/src/components/sprite-list/SpriteList.vue
@@ -1,9 +1,9 @@
 <!--
  * @Author: Xu Ning
  * @Date: 2024-01-17 18:11:17
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-02-05 16:51:53
- * @FilePath: /builder/spx-gui/src/components/sprite-list/SpriteList.vue
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-07 17:53:50
+ * @FilePath: /spx-gui/src/components/sprite-list/SpriteList.vue
  * @Description: 
 -->
 <template>
@@ -11,7 +11,7 @@
     <div class="asset-library-edit-button">Edit</div>
     <n-grid cols="4" item-responsive responsive="screen">
       <!-- S Layout Sprite List -->
-      <n-grid-item  class="asset-library-left" span="3">
+      <n-grid-item class="asset-library-left" span="3">
         <!-- S Component SpriteEditBtn -->
         <SpriteEditBtn />
         <!-- E Component SpriteEditBtn -->
@@ -21,14 +21,8 @@
             <SpriteAddBtn :type="'sprite'" />
             <!-- E Component Add Button type second step -->
             <!-- S Component ImageCardCom -->
-            <ImageCardCom
-              v-for="asset in spriteAssets"
-              :key="asset.name"
-              :type="'sprite'"
-              :asset="asset"
-              :style="getImageCardStyle(asset.name)"
-              @click="toggleCodeById(asset.name)"
-            />
+            <ImageCardCom v-for="asset in spriteAssets" :key="asset.name" :type="'sprite'" :asset="asset"
+              :style="getImageCardStyle(asset.name)" @click="toggleCodeById(asset.name)" />
             <!-- E Component ImageCardCom -->
           </n-flex>
         </div>
@@ -45,7 +39,7 @@
 
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import { type ComputedRef, computed,ref } from "vue";
+import { type ComputedRef, computed, ref, watch } from "vue";
 import { NGrid, NGridItem, NFlex } from "naive-ui";
 import { useSpriteStore } from '@/store/modules/sprite';
 import BackdropList from "@/components/sprite-list/BackdropList.vue";
@@ -53,10 +47,11 @@ import SpriteEditBtn from "@/components/sprite-list/SpriteEditBtn.vue";
 import ImageCardCom from "@/components/sprite-list/ImageCardCom.vue";
 import SpriteAddBtn from "@/components/sprite-list/SpriteAddBtn.vue";
 import { Sprite } from "@/class/sprite";
+import { watchEffect } from "vue";
 
 // ----------props & emit------------------------------------
 const currentActiveName = ref('');
-const spriteStore = useSpriteStore(); 
+const spriteStore = useSpriteStore();
 const { setCurrentByName } = spriteStore;
 
 // ----------computed properties-----------------------------
@@ -73,7 +68,7 @@ const spriteAssets: ComputedRef<Sprite[]> = computed(
  * @Date: 2024-02-01 10:51:23
  */
 const toggleCodeById = (name: string) => {
-  console.log('name',name)
+  console.log('name', name)
   currentActiveName.value = name;
   setCurrentByName(name);
 };
@@ -83,10 +78,19 @@ const getImageCardStyle = (name: string) => {
     ? { marginBottom: '26px', boxShadow: '0px 0px 0px 4px #FF81A7' }
     : { marginBottom: '26px' };
 };
+
+watchEffect(() => {
+  if (spriteStore.current) {
+    currentActiveName.value = spriteStore.current.name;
+  } else {
+    currentActiveName.value = '';
+  }
+})
 </script>
 
 <style scoped lang="scss">
 @import "@/assets/theme.scss";
+
 .asset-library {
   // TODO: Delete the background, it is just for check the position.
   // background:#f0f0f0;
@@ -98,6 +102,7 @@ const getImageCardStyle = (name: string) => {
   margin: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+
   .asset-library-edit-button {
     background: rgba(255, 170, 0, 0.5);
     width: 80px;
@@ -105,36 +110,41 @@ const getImageCardStyle = (name: string) => {
     text-align: center;
     position: absolute;
     top: -2px;
-    left:8px;
+    left: 8px;
     font-size: 18px;
     border: 2px solid #00142970;
     border-radius: 0 0 10px 10px;
     z-index: 2;
   }
+
   .asset-library-right {
     max-height: calc(60vh - 60px - 24px);
     overflow: scroll;
   }
-  .asset-library-left{
-    margin-top:30px;
+
+  .asset-library-left {
+    margin-top: 30px;
     max-height: calc(60vh - 60px - 24px - 40px);
     overflow: scroll;
-    padding:10px;
+    padding: 10px;
   }
 }
 </style>
 
 <style lang="scss">
 @import "@/assets/theme.scss";
+
 // ! no scoped, it will change global style
 .n-card {
   width: 80vw;
   border-radius: 25px;
+
   .n-card-header {
     border-radius: 25px 25px 0 0;
     background: $asset-library-card-title-1;
     text-align: center;
   }
+
   .n-card__content {
     padding: 0 !important;
   }
diff --git a/spx-gui/src/components/spx-stage/BackdropLayer.vue b/spx-gui/src/components/spx-stage/BackdropLayer.vue
deleted file mode 100644
index a933b26c9..000000000
--- a/spx-gui/src/components/spx-stage/BackdropLayer.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <v-layer>
-    <v-image
-      v-if="imageRef"
-      :config="{
-        image: imageRef,
-      }"
-    />
-  </v-layer>
-</template>
-<script setup lang="ts">
-import { useBackdropStore } from "@/store/modules/backdrop";
-import { watchEffect } from "vue";
-import { ref } from "vue";
-
-const backdropStore = useBackdropStore();
-const imageRef = ref<HTMLImageElement | null>(null);
-
-watchEffect(() => {
-  const src = backdropStore.backdrop.files[0]?.url;
-  if (!src) {
-    imageRef.value = null;
-    return;
-  }
-  const image = new Image();
-  image.src = src;
-  image.onload = () => {
-    imageRef.value = image;
-  };
-});
-</script>
diff --git a/spx-gui/src/components/spx-stage/Costume.vue b/spx-gui/src/components/spx-stage/Costume.vue
deleted file mode 100644
index 7cc0f9c9c..000000000
--- a/spx-gui/src/components/spx-stage/Costume.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 14:19:57
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-01-26 17:04:41
- * @FilePath: /spx-gui/src/components/spx-stage/Costume.vue
- * @Description: 
--->
-<template>
-    <v-image @dragend="handleDragEnd" :config="{
-        image: image,
-        draggable: true,
-        x: SpritePosition.x,
-        y: SpritePosition.y,
-        rotation: SpriteRotation,
-        offsetX: props.costume_config.x,
-        offsetY: props.costume_config.y,
-        scaleX:props.sprite_config.size,
-        scaleY:props.sprite_config.size
-    }" />
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import { defineProps, onMounted, ref, computed, watchEffect, onUnmounted } from "vue"
-import Calf from "./calf-0.png"
-
-
-
-// ----------props & emit------------------------------------
-const props = defineProps<{
-    sprite_config: {
-        x: number,
-        y: number,
-        heading: number,
-        size:number
-    },
-    costume_config: {
-        x: number,
-        y: number,
-        url: string
-    }
-}>()
-// define the emits
-const emits = defineEmits<{
-    // when ths costume dragend,emit the sprite position
-    (e: 'onDragEnd', spirte: { x: number, y: number; }): void
-}>()
-
-
-
-
-// ----------data related -----------------------------------
-// TODO use the spx's costume image
-const image = ref<HTMLImageElement>()
-
-// ----------computed properties-----------------------------
-// Computed spx's sprite position to konva's relative position by about changing sprite postion
-const SpritePosition = computed(() => {
-    return getRelativePosition(
-        props.sprite_config.x,
-        props.sprite_config.y
-    );
-})
-
-// Computed spx's sprite heading to konva's rotation by about changing sprite heading
-const SpriteRotation = computed(() => {
-    return getRotation(props.sprite_config.heading);
-})
-
-// watch the url change to change the image
-const stop = watchEffect(() => {
-    
-    const _image = new window.Image();
-    _image.src = props.costume_config.url;
-    _image.onload = () => {
-        image.value = _image;
-        console.log(_image.width, _image.height)
-    };
-})
-
-// ----------lifecycle hooks---------------------------------
-
-// TODO:use the costume image
-onUnmounted(() => stop())
-
-// ----------methods-----------------------------------------
-/**
- * @description: map spx's sprite position to konva's relative position
- * @param {*} x
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 14:52:50
- */
-const getRelativePosition = (x: number, y: number): { x: number; y: number; } => {
-    // 返回计算后的位置  stage.width / 2 + x ，stage.height / 2 + y
-    return {
-        x: 500 / 2 + x,
-        y: 300 / 2 - y,
-    };
-};
-
-/**
- * @description: map spx's sprite heading to konva's rotation
- * @param {*} heading
- * @return {*}
- */
-const getRotation = (heading: number): number => {
-    return heading - 90
-};
-
-
-/**
- * @description: map konva's relative postion to spx's position
- * @param {*} x
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:28:36
- */
-const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
-    return {
-        x: x - 500 / 2,
-        y: 300 / 2 - y,
-    }
-}
-
-/**
- * @description: when ths costume dragend,map and emit the sprite position
- * @param {*} event
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:44:18
- */
-const handleDragEnd = (event) => {
-    console.log(getSpxPostion(event.target.attrs.x, event.target.attrs.y))
-    emits('onDragEnd', { ...getSpxPostion(event.target.attrs.x, event.target.attrs.y) })
-}
-
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/Sprite.vue b/spx-gui/src/components/spx-stage/Sprite.vue
deleted file mode 100644
index fee25b2df..000000000
--- a/spx-gui/src/components/spx-stage/Sprite.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-24 15:48:38
- * @LastEditors: xuning 453594138@qq.com
- * @LastEditTime: 2024-02-06 12:56:22
- * @FilePath: /spx-gui/src/components/spx-stage/Sprite.vue
- * @Description: 
--->
-<template>
-  <Costume
-    @on-drag-end="onDragEnd"
-    :sprite_config="{
-      x: currentCostume.sx as number,
-      y: currentCostume.sy as number,
-      heading: currentCostume.heading,
-      size: currentCostume.size
-    }"
-    :costume_config="{
-      x: currentCostume.cx as number,
-      y: currentCostume.cy as number,
-      url: currentCostume.url as string
-    }"
-  ></Costume>
-</template>
-<script lang="ts" setup>
-// TODO:use the interface from filemanager
-import type { SpriteConfig, Costume as CostumeConfig } from '@/interface/file'
-// import SpriteType from '@/class/sprite'
-//TODO xn 
-import Costume from './Costume.vue'
-import { defineProps, onMounted, computed, defineEmits, type ComputedRef } from 'vue'
-
-// ----------props & emit------------------------------------
-// const props = defineProps<{
-//   config: SpriteType
-// }>()
-const props = defineProps<{
-  config: any
-}>()
-
-// when ths costume dragend,emit the sprite position
-const emits = defineEmits<{
-  (e: 'onDragEnd', spirte: { x: number; y: number }): void
-}>()
-
-// ----------computed properties-----------------------------
-// computed the current costume with current image
-const currentCostume: ComputedRef<CostumeConfig & SpriteConfig> = computed(() => {
-  console.log(props.config)
-  return props.config.currentCostumeConfig
-})
-
-onMounted(() => {
-  console.log(props.config)
-})
-
-// ----------methods-----------------------------------------
-
-/**
- * @description: function about the costume is dragged
- * @param {*} e
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:39:27
- */
-const onDragEnd = (e: { x: number; y: number }) => {
-  emits('onDragEnd', e)
-}
-</script>
diff --git a/spx-gui/src/components/spx-stage/SpriteLayer.vue b/spx-gui/src/components/spx-stage/SpriteLayer.vue
deleted file mode 100644
index 5398b0915..000000000
--- a/spx-gui/src/components/spx-stage/SpriteLayer.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 16:13:37
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-02-05 11:16:22
- * @FilePath: /spx-gui/src/components/spx-stage/SpriteLayer.vue
- * @Description: 
--->
-<template>
-    <v-layer>
-        <Sprite v-if="spriteStore.current" @on-drag-end="onSpriteDragEnd"  :config="spriteStore.current" />
-    </v-layer>
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import Sprite from "./Sprite.vue"
-import { ref, computed,onMounted } from "vue"
-// todo:use the filemanager's interface of spirteConfig
-// import { useSpriteStore } from "@/store";
-// const spriteStore = useSpriteStore()
-const spriteStore = {current:''}
-
-onMounted(()=>{
-    console.log(spriteStore.current)
-})
-// ----------methods-----------------------------------------
-
-/**
- * @todo set to store
- * @description: When the sprite is dragged, update the sprite's position to the store
- * @param {*} e
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:47:53
- */
-const onSpriteDragEnd = (e: { x: number, y: number }) => {
-    // spriteStore.current?.setSx(e.x)
-    // spriteStore.current?.setSy(e.y)
-}
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/SpxStage.vue b/spx-gui/src/components/spx-stage/SpxStage.vue
index 1eade491c..cb07c5257 100644
--- a/spx-gui/src/components/spx-stage/SpxStage.vue
+++ b/spx-gui/src/components/spx-stage/SpxStage.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang zhiyang
  * @Date: 2024-01-15 14:56:59
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 17:17:11
+ * @LastEditTime: 2024-02-07 18:02:21
  * @FilePath: /spx-gui/src/components/spx-stage/SpxStage.vue
  * @Description: 
 -->
@@ -35,7 +35,7 @@ const backdropStore = useBackdropStore();
 const projectStore = useProjectStore();
 const spriteStore = useSpriteStore();
 
-const currentSpriteNames = ref<String[]>([])
+const currentSpriteNames = ref<string[]>([])
 
 const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
   spriteStore.setCurrentByName(e.targets[0].sprite.name)
diff --git a/spx-gui/src/components/spx-stage/StageViewer.vue b/spx-gui/src/components/spx-stage/StageViewer.vue
deleted file mode 100644
index 03f7f4c28..000000000
--- a/spx-gui/src/components/spx-stage/StageViewer.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-24 15:33:08
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-01-25 17:50:19
- * @FilePath: /builder/spx-gui/src/components/spx-stage/StageViewer.vue
- * @Description: 
--->
-<template>
-    <!-- <div style="position:absolute;right: 0; display: flex;justify-content: end;align-items: center;flex-direction: column;">
-        <div>spriteX:<n-input-number v-model:value="sprite.x"></n-input-number></div>
-        <div>spriteY:<n-input-number v-model:value="sprite.y"></n-input-number></div>
-        <div>heading: <n-input-number :min="-180" :max="180" placeholder="请输入角度"
-                v-model:value="sprite.heading"></n-input-number></div>
-        <div>costumeIndex: <n-input-number :min="0" :max="sprite.costumes.length - 1"
-                v-model:value="sprite.costumeIndex"></n-input-number></div>
-        <div>costumeX:<n-input-number v-model:value="currentCostume.x"></n-input-number></div>
-        <div>costumeY:<n-input-number v-model:value="currentCostume.y"></n-input-number></div>
-    </div> -->
-    <div id="stage-viewer">
-        <div class="stage-viewer-wrapper" :style="{ width: stageConfig.width, height: stageConfig.height }">
-            <v-stage :config="stageConfig">
-                <BackdropLayer />
-                <SpriteLayer />
-            </v-stage>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import { computed } from "vue"
-import { useStageStore } from "@/store"
-import SpriteLayer from "./SpriteLayer.vue"
-import BackdropLayer from "./BackdropLayer.vue"
-
-// ----------props & emit------------------------------------
-const stageStore = useStageStore()
-
-// ----------computed properties-----------------------------
-
-const stageConfig = computed(() => {
-    return {
-        ...stageStore.stageConfig
-    }
-})
-
-
-</script>
-<style>
-#stage-viewer {
-    height: 300px;
-    display: flex;
-    justify-content: center;
-}
-
-.stage-viewer-wrapper {
-    border: 1px solid black;
-}
-</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/calf-0.png b/spx-gui/src/components/spx-stage/calf-0.png
deleted file mode 100644
index 24147724234e7147be07e9a0b85c1cc8bbdef976..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 24443
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

diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index 429d931f4..a1fc77356 100644
--- a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+++ b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 16:13:43
+ * @LastEditTime: 2024-02-07 16:40:21
  * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
@@ -83,7 +83,7 @@ const projectId = computed(() => project.value.title)
 
 const currentSprite = ref<Sprite | null>(null);
 
-const currentSpriteNames = ref<String[]>([])
+const currentSpriteNames = ref<string[]>([])
 
 
 const sprites: ComputedRef<StageSprite[]> = computed(() => {
diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
index 79ef1fdc8..bdae5a169 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 15:31:49
+ * @LastEditTime: 2024-02-07 16:40:01
  * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
  * @Description: 
 -->
@@ -30,7 +30,7 @@ const props = defineProps<{
     offsetConfig: { offsetX: number, offsetY: number },
     mapConfig: MapConfig
     sprites: StageSprite[]
-    currentSpriteNames: String[]
+    currentSpriteNames: string[]
 }>()
 
 const isVisibleInStage = (sprite: StageSprite) => {
diff --git a/spx-gui/src/components/stage-viewer/index.ts b/spx-gui/src/components/stage-viewer/index.ts
index 7051acbfe..d433cc039 100644
--- a/spx-gui/src/components/stage-viewer/index.ts
+++ b/spx-gui/src/components/stage-viewer/index.ts
@@ -71,7 +71,7 @@ export interface StageViewerProps {
     mapConfig?: MapConfig // some spx project havent this config,the stage size will depend on the SceneSize
     sprites: StageSprite[] // sprite list
     backdrop?: StageBackdrop // backdrop 
-    currentSpriteNames: String[]
+    currentSpriteNames: string[]
 }