noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Dennis Postma 2024-07-24 22:55:29 +02:00
parent ffe97312c9
commit 104e59f0a6
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -20,7 +20,7 @@
{{ image.name }} {{ image.name }}
<div class="ml-auto flex gap-2"> <div class="ml-auto flex gap-2">
<label for="upload-asset" class="text-sm bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-1.5 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer"> <label for="upload-asset" class="text-sm bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-1.5 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" /> <input class="hidden" id="upload-asset" type="file" accept="image/png" @change="(event) => handleImageUpload(event, image)" />
Set image Set image
</label> </label>
<button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteImages.splice(spriteImages.indexOf(image), 1)">Remove</button> <button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteImages.splice(spriteImages.indexOf(image), 1)">Remove</button>
@ -64,6 +64,10 @@
<option :value="true">Yes</option> <option :value="true">Yes</option>
</select> </select>
</div> </div>
<div v-if="image.base64">
<div class="w-full h-px bg-cyan-200"></div>
<img class="max-h-56" :src="`data:image/png;base64,${image.base64}`" />
</div>
</form> </form>
</template> </template>
</Accordion> </Accordion>
@ -84,7 +88,12 @@ const assetManagerStore = useAssetManagerStore()
const selectedSprite = computed(() => assetManagerStore.selectedSprite) const selectedSprite = computed(() => assetManagerStore.selectedSprite)
const spriteName = ref('') const spriteName = ref('')
const spriteImages = ref<SpriteImage[]>([])
type uploadSpriteImage = SpriteImage & {
base64?: string
}
const spriteImages = ref<uploadSpriteImage[]>([])
if (!selectedSprite.value) { if (!selectedSprite.value) {
console.error('No sprite selected') console.error('No sprite selected')
@ -95,6 +104,18 @@ if (selectedSprite.value) {
spriteImages.value = selectedSprite.value.spriteImages spriteImages.value = selectedSprite.value.spriteImages
} }
function handleImageUpload(event: Event, image: uploadSpriteImage) {
const file = (event.target as HTMLInputElement).files?.[0]
if (!file) return
const reader = new FileReader()
reader.onload = (e) => {
const base64String = e.target?.result as string
image.base64 = base64String.split(',')[1] // Remove the data:image/png;base64, prefix
}
reader.readAsDataURL(file)
}
function removeSprite() { function removeSprite() {
gameStore.connection?.emit('gm:sprite:remove', { sprite: selectedSprite.value?.id }, (response: boolean) => { gameStore.connection?.emit('gm:sprite:remove', { sprite: selectedSprite.value?.id }, (response: boolean) => {
if (!response) { if (!response) {