typo

spx-gui/src/components/editor/panels/sprite/SpriteBasicConfig.vue

@@ -1,27 +1,16 @@
 <template>
   <div class="line">
-    <NInput
-      v-model:value="name"
-      @blur="handleNameUpdate"
-    >
+    <NInput v-model:value="name" @blur="handleNameUpdate">
       <template #prefix> {{ _t({ en: 'Name', zh: '名字' }) }}: </template>
     </NInput>
   </div>
   <div class="line">
-    <NInputNumber
-      type="number"
-      :value="sprite.x"
-      @update:value="(x) => sprite.setX(x ?? 0)"
-    >
+    <NInputNumber type="number" :value="sprite.x" @update:value="(x) => sprite.setX(x ?? 0)">
       <template #prefix> X: </template>
     </NInputNumber>
   </div>
   <div class="line">
-    <NInputNumber
-      type="number"
-      :value="sprite.y"
-      @update:value="(y) => sprite.setY(y ?? 0)"
-    >
+    <NInputNumber type="number" :value="sprite.y" @update:value="(y) => sprite.setY(y ?? 0)">
       <template #prefix> Y: </template>
     </NInputNumber>
   </div>
@@ -49,7 +38,7 @@
       :min="-180"
       :max="180"
       :value="sprite.heading"
-      @update:value="h => sprite.setHeading(h ?? 0)"
+      @update:value="(h) => sprite.setHeading(h ?? 0)"
     >
       <template #prefix> {{ $t('stage.direction') }}: </template>
     </NInputNumber>
@@ -79,9 +68,12 @@ const { t } = useI18n()
 
 const name = ref(props.sprite.name)
 
-watch(() => props.sprite.name, newName => {
-  name.value = newName
-})
+watch(
+  () => props.sprite.name,
+  (newName) => {
+    name.value = newName
+  }
+)
 
 function handleNameUpdate() {
   if (name.value === props.sprite.name) return

spx-gui/src/components/editor/panels/sprite/SpriteItem.vue

@@ -27,7 +27,6 @@ effect(async () => {
 })
 
 const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSrc.value}")` })
-
 </script>
 
 <style lang="scss" scoped>
@@ -65,4 +64,4 @@ const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSr
   top: -5px;
   right: -5px;
 }
-</style>
+</style>

spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue

@@ -112,11 +112,11 @@ function handleAddOption(key: string) {
 }
 
 .header {
-  padding: .5em 1em;
+  padding: 0.5em 1em;
 }
 
 .add {
-  margin-left: .5em;
+  margin-left: 0.5em;
   padding: 0 4px;
   cursor: pointer;
 }
@@ -134,7 +134,7 @@ function handleAddOption(key: string) {
 
 .sprite-edit {
   flex: 0 0 auto;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
 }
 
 .sprites-overview {

spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue

@@ -457,4 +457,3 @@ const beforeSoundUpload = (data: { file: UploadFileInfo; fileList: UploadFileInf
   }
 }
 </style>
-@/models/common/asset

spx-gui/src/components/editor/sprite/SpriteEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sprite-editor">
-    <SpxCodeEditor :value="sprite.code" @change="v => sprite.setCode(v)"/>
+    <SpxCodeEditor :value="sprite.code" @change="(v) => sprite.setCode(v)" />
   </div>
 </template>
 
@@ -13,6 +13,4 @@ defineProps<{
 }>()
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

spx-gui/src/components/library/AssetAdd.vue

@@ -94,4 +94,3 @@ function validateName(name: string): ValidationResult {
 </script>
 
 <style scoped lang="scss"></style>
-@/models/common/asset@/models/common/asset

spx-gui/src/components/library/AssetLibrary.vue

@@ -165,4 +165,3 @@ function isAdded(asset: AssetData) {
   cursor: pointer;
 }
 </style>
-@/models/common/asset

spx-gui/src/components/library/LoadFromScratch.vue

@@ -344,4 +344,3 @@ const showImportSuccessMessage = () => {
   }
 }
 </style>
-@/models/common/asset

spx-gui/src/models/common/asset.ts

@@ -8,60 +8,60 @@ import { getFiles, uploadFiles } from './cloud'
 import type { Project } from '../project'
 import type { Stage } from '../stage'
 
-export type PartialAssetData = Pick<AssetData, 'displayName' | 'assetType' | 'files'>;
+export type PartialAssetData = Pick<AssetData, 'displayName' | 'assetType' | 'files'>
 
 export async function sprite2Asset(sprite: Sprite): Promise<PartialAssetData> {
-  const fileUrls = await uploadFiles(sprite.export());
+  const fileUrls = await uploadFiles(sprite.export())
   return {
     displayName: sprite.name,
     assetType: AssetType.Sprite,
     files: fileUrls
-  };
+  }
 }
 
 export async function asset2Sprite(assetData: PartialAssetData) {
-  const files = getFiles(assetData.files);
-  const sprites = await Sprite.loadAll(files);
-  if (sprites.length === 0) throw new Error('no sprite loaded');
-  return sprites[0];
+  const files = getFiles(assetData.files)
+  const sprites = await Sprite.loadAll(files)
+  if (sprites.length === 0) throw new Error('no sprite loaded')
+  return sprites[0]
 }
 // Config for backdrop is not a standalone file in a project, but part of config for the project (`assets/index.json`).
 // To save config for backdrop in asset data, we make a virtual file which contains the backdrop's config only.
-const virtualBackdropConfigFileName = 'assets/__backdrop__.json';
+const virtualBackdropConfigFileName = 'assets/__backdrop__.json'
 
 export async function backdrop2Asset(backdrop: Backdrop): Promise<PartialAssetData> {
-  const [config, files] = backdrop.export();
-  files[virtualBackdropConfigFileName] = fromConfig(virtualBackdropConfigFileName, config);
-  const fileUrls = await uploadFiles(files);
+  const [config, files] = backdrop.export()
+  files[virtualBackdropConfigFileName] = fromConfig(virtualBackdropConfigFileName, config)
+  const fileUrls = await uploadFiles(files)
   return {
     displayName: backdrop.name,
     assetType: AssetType.Backdrop,
     files: fileUrls
-  };
+  }
 }
 
 export async function asset2Backdrop(assetData: PartialAssetData) {
-  const files = getFiles(assetData.files);
-  const configFile = files[virtualBackdropConfigFileName];
-  if (configFile == null) throw new Error('no config file found');
-  const config = (await toConfig(configFile)) as BackdropInits;
-  return Backdrop.load(config, files);
+  const files = getFiles(assetData.files)
+  const configFile = files[virtualBackdropConfigFileName]
+  if (configFile == null) throw new Error('no config file found')
+  const config = (await toConfig(configFile)) as BackdropInits
+  return Backdrop.load(config, files)
 }
 
 export async function sound2Asset(sound: Sound): Promise<PartialAssetData> {
-  const fileUrls = await uploadFiles(sound.export());
+  const fileUrls = await uploadFiles(sound.export())
   return {
     displayName: sound.name,
     assetType: AssetType.Sound,
     files: fileUrls
-  };
+  }
 }
 
 export async function asset2Sound(assetData: PartialAssetData) {
-  const files = getFiles(assetData.files);
-  const sounds = await Sound.loadAll(files);
-  if (sounds.length === 0) throw new Error('no sound loaded');
-  return sounds[0];
+  const files = getFiles(assetData.files)
+  const sounds = await Sound.loadAll(files)
+  if (sounds.length === 0) throw new Error('no sound loaded')
+  return sounds[0]
 }
 
 function validateAssetName(name: string) {
@@ -77,15 +77,18 @@ export function validateSpriteName(name: string, project: Project | null) {
   const err = validateAssetName(name)
   if (err != null) return err
   if (project != null) {
-    if (project.sprites.find(s => s.name === name)) return { en: `Sprite with name ${name} already exists`, zh: '存在同名的精灵' }
-    if (project.sounds.find(s => s.name === name)) return { en: `Sound with name ${name} already exists`, zh: '存在同名的声音' }
+    if (project.sprites.find((s) => s.name === name))
+      return { en: `Sprite with name ${name} already exists`, zh: '存在同名的精灵' }
+    if (project.sounds.find((s) => s.name === name))
+      return { en: `Sound with name ${name} already exists`, zh: '存在同名的声音' }
   }
 }
 
 export function validateCostumeName(name: string, sprite: Sprite | null) {
   const err = validateAssetName(name)
   if (err != null) return err
-  if (sprite != null && sprite.costumes.find(c => c.name === name)) return { en: `Costume with name ${name} already exists`, zh: '存在同名的造型' }
+  if (sprite != null && sprite.costumes.find((c) => c.name === name))
+    return { en: `Costume with name ${name} already exists`, zh: '存在同名的造型' }
 }
 
 export function validateSoundName(name: string, project: Project | null) {
@@ -96,7 +99,8 @@ export function validateSoundName(name: string, project: Project | null) {
 export function validateBackdropName(name: string, stage: Stage | null) {
   const err = validateAssetName(name)
   if (err != null) return err
-  if (stage != null && stage.backdrops.find(b => b.name === name)) return { en: `Backdrop with name ${name} already exists`, zh: '存在同名的背景' }
+  if (stage != null && stage.backdrops.find((b) => b.name === name))
+    return { en: `Backdrop with name ${name} already exists`, zh: '存在同名的背景' }
 }
 
 function upFirst(str: string) {
@@ -110,7 +114,7 @@ export function normalizeName(src: string, cas: 'camel' | 'pascal') {
     .replace(/([A-Z])/g, '_$1')
     .toLowerCase()
     .replace(/^[^a-zA-Z]+/, '') // remove invalid starting such as numbers
-  const parts = src.split('_').filter(p => !!p)
+  const parts = src.split('_').filter((p) => !!p)
   if (parts.length === 0) return ''
   const [firstpart, ...otherParts] = parts
   const result = [
@@ -131,20 +135,20 @@ function getValidName(base: string, isValid: (name: string) => boolean) {
 
 export function getSpriteName(project: Project, base = '') {
   base = normalizeName(base, 'pascal') || 'Sprite'
-  return getValidName(base, n => validateSpriteName(n, project) == null)
+  return getValidName(base, (n) => validateSpriteName(n, project) == null)
 }
 
 export function getCostumeName(sprite: Sprite, base = '') {
   base = normalizeName(base, 'camel') || 'costume'
-  return getValidName(base, n => validateCostumeName(n, sprite) == null)
+  return getValidName(base, (n) => validateCostumeName(n, sprite) == null)
 }
 
 export function getSoundName(project: Project, base = '') {
   base = normalizeName(base, 'camel') || 'sound'
-  return getValidName(base, n => validateSoundName(n, project) == null)
+  return getValidName(base, (n) => validateSoundName(n, project) == null)
 }
 
 export function getBackdropName(stage: Stage, base = '') {
   base = normalizeName(base, 'camel') || 'backdrop'
-  return getValidName(base, n => validateBackdropName(n, stage) == null)
+  return getValidName(base, (n) => validateBackdropName(n, stage) == null)
 }

spx-gui/src/utils/file.ts

@@ -61,6 +61,6 @@ export function selectFiles(options?: Omit<FileSelectOptions, 'multiple'>) {
 
 /** Let the user select multiple images */
 export function selectImgs() {
-  const accept = imgExts.map(ext => `.${ext}`).join(',')
+  const accept = imgExts.map((ext) => `.${ext}`).join(',')
   return selectFiles({ accept })
 }