Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: lint issues

Browse Source
This commit is contained in:
Calum H.
2025-06-24 21:30:54 +01:00
parent 6d1bdec453
commit df62b2e63f
9 changed files with 74 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app-frontend/src/components/ui/AccountsCard.vue
View File

@@ -56,10 +56,7 @@
<div v-if="displayAccounts.length > 0" class="account-group">
<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
<Button class="option account" @click="setAccount(account)">
<Avatar
:src="getAccountAvatarUrl(account)"
class="icon"
/>
<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
<p>{{ account.profile.name }}</p>
</Button>
<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
@@ -78,7 +75,7 @@
<script setup>
import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
import { Avatar, Button, Card } from '@modrinth/ui'
import {ref, computed, onMounted, onBeforeUnmount, onUnmounted, watch} from 'vue'
import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
import {
users,
remove_user,
@@ -160,7 +157,10 @@ const avatarUrl = computed(() => {
})
function getAccountAvatarUrl(account) {
if (account.profile.id === selectedAccount.value?.profile?.id && equippedSkin.value?.texture_key) {
if (
account.profile.id === selectedAccount.value?.profile?.id &&
equippedSkin.value?.texture_key
) {
const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
if (cachedUrl) {
return cachedUrl

5
apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
View File

@@ -59,10 +59,7 @@ watch(
<div class="mt-4 flex items-center justify-between">
<div>
<h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
<p class="m-0 mt-1">
Disables the nametag above your player on the skins page.
page.
</p>
<p class="m-0 mt-1">Disables the nametag above your player on the skins page. page.</p>
</div>
<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
</div>

9
apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
View File

@@ -108,7 +108,6 @@ import {
CapeButton,
CapeLikeTextButton,
ButtonStyled,
NewModal,
} from '@modrinth/ui'
import {
add_and_equip_custom_skin,
@@ -128,8 +127,8 @@ import {
ChevronRightIcon,
SpinnerIcon,
} from '@modrinth/assets'
import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
import UploadSkinModal from "@/components/ui/skin/UploadSkinModal.vue";
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
const modal = useTemplateRef('modal')
const selectCapeModal = useTemplateRef('selectCapeModal')
@@ -346,7 +345,7 @@ function restoreModal() {
const fakeEvent = new MouseEvent('click')
modal.value?.show(fakeEvent)
shouldRestoreModal.value = false
}, 500);
}, 500)
}
}
@@ -407,6 +406,6 @@ defineExpose({
restoreWithNewTexture,
hide,
shouldRestoreModal,
restoreModal
restoreModal,
})
</script>

2
apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
View File

@@ -9,7 +9,7 @@ import {
SkinPreviewRenderer,
} from '@modrinth/ui'
import { CheckIcon, XIcon } from '@modrinth/assets'
import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
const modal = useTemplateRef('modal')

6
apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
View File

@@ -32,7 +32,7 @@ import { UploadIcon } from '@modrinth/assets'
import { useNotifications } from '@/store/state'
import { getCurrentWebview } from '@tauri-apps/api/webview'
import { readFile } from '@tauri-apps/plugin-fs'
import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
const notifications = useNotifications()
@@ -110,7 +110,7 @@ async function setupDragDropListener() {
const filePath = event.payload.paths[0]
try {
const data = await readFile(filePath);
const data = await readFile(filePath)
const fileName = filePath.split('/').pop() || filePath.split('\\').pop() || 'skin.png'
const fileBlob = new Blob([data], { type: 'image/png' })
@@ -118,7 +118,7 @@ async function setupDragDropListener() {
await processFile(file)
} catch (error) {
console.error(error);
console.error(error)
notifications.addNotification({
title: 'Error processing file',
text: 'Failed to read the dropped file.',

92
apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts
View File

@@ -155,101 +155,97 @@ export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
}
}
export async function generatePlayerHeadBlob(
skinUrl: string,
size: number = 64
): Promise<Blob> {
export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64): Promise<Blob> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
try {
const sourceCanvas = document.createElement('canvas');
const sourceCtx = sourceCanvas.getContext('2d');
const sourceCanvas = document.createElement('canvas')
const sourceCtx = sourceCanvas.getContext('2d')
if (!sourceCtx) {
throw new Error('Could not get 2D context from source canvas');
throw new Error('Could not get 2D context from source canvas')
}
sourceCanvas.width = img.width;
sourceCanvas.height = img.height;
sourceCanvas.width = img.width
sourceCanvas.height = img.height
sourceCtx.drawImage(img, 0, 0);
sourceCtx.drawImage(img, 0, 0)
const outputCanvas = document.createElement('canvas');
const outputCtx = outputCanvas.getContext('2d');
const outputCanvas = document.createElement('canvas')
const outputCtx = outputCanvas.getContext('2d')
if (!outputCtx) {
throw new Error('Could not get 2D context from output canvas');
throw new Error('Could not get 2D context from output canvas')
}
outputCanvas.width = size;
outputCanvas.height = size;
outputCanvas.width = size
outputCanvas.height = size
outputCtx.imageSmoothingEnabled = false;
outputCtx.imageSmoothingEnabled = false
const headImageData = sourceCtx.getImageData(8, 8, 8, 8);
const headImageData = sourceCtx.getImageData(8, 8, 8, 8)
const headCanvas = document.createElement('canvas');
const headCtx = headCanvas.getContext('2d');
const headCanvas = document.createElement('canvas')
const headCtx = headCanvas.getContext('2d')
if (!headCtx) {
throw new Error('Could not get 2D context from head canvas');
throw new Error('Could not get 2D context from head canvas')
}
headCanvas.width = 8;
headCanvas.height = 8;
headCtx.putImageData(headImageData, 0, 0);
headCanvas.width = 8
headCanvas.height = 8
headCtx.putImageData(headImageData, 0, 0)
outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size);
outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size)
const hatImageData = sourceCtx.getImageData(40, 8, 8, 8);
const hatImageData = sourceCtx.getImageData(40, 8, 8, 8)
const hatCanvas = document.createElement('canvas');
const hatCtx = hatCanvas.getContext('2d');
const hatCanvas = document.createElement('canvas')
const hatCtx = hatCanvas.getContext('2d')
if (!hatCtx) {
throw new Error('Could not get 2D context from hat canvas');
throw new Error('Could not get 2D context from hat canvas')
}
hatCanvas.width = 8;
hatCanvas.height = 8;
hatCtx.putImageData(hatImageData, 0, 0);
hatCanvas.width = 8
hatCanvas.height = 8
hatCtx.putImageData(hatImageData, 0, 0)
const hatPixels = hatImageData.data;
let hasHat = false;
const hatPixels = hatImageData.data
let hasHat = false
for (let i = 3; i < hatPixels.length; i += 4) {
if (hatPixels[i] > 0) {
hasHat = true;
break;
hasHat = true
break
}
}
if (hasHat) {
outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size);
outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
}
outputCanvas.toBlob((blob) => {
if (blob) {
resolve(blob);
resolve(blob)
} else {
reject(new Error('Failed to create blob from canvas'));
reject(new Error('Failed to create blob from canvas'))
}
}, 'image/png');
}, 'image/png')
} catch (error) {
reject(error);
reject(error)
}
};
}
img.onerror = () => {
reject(new Error('Failed to load skin texture image'));
};
reject(new Error('Failed to load skin texture image'))
}
img.src = skinUrl;
});
img.src = skinUrl
})
}
async function generateHeadRender(skin: Skin): Promise<string> {

5
apps/app-frontend/src/pages/Skins.vue
View File

@@ -252,7 +252,7 @@ function onSkinFileUploaded(file: File) {
}
function onUploadCanceled() {
console.log("fuck fuck fuck")
console.log('fuck fuck fuck')
editSkinModal.value?.restoreModal()
}
@@ -378,8 +378,9 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
<Button
color="green"
aria-label="Edit skin"
class="pointer-events-auto"
@click.stop="(e) => editSkinModal?.show(e, skin)"
class="pointer-events-auto">
>
<EditIcon /> Edit
</Button>
<Button

6
packages/ui/src/components/skin/SkinLikeTextButton.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue'
const props = withDefaults(
withDefaults(
defineProps<{
selected?: boolean
tooltip?: string
@@ -56,8 +56,8 @@ const pressed = ref(false)
var(--color-brand) -76.68%,
rgba(27, 217, 106, 0.534) -38.61%,
rgba(12, 89, 44, 0.6) 100.4%
),
var(--color-bg);
),
var(--color-bg);
}
.skin-btn-bg.selected:hover,

14
packages/ui/src/components/skin/SkinPreviewRenderer.vue
View File

@@ -29,12 +29,12 @@
toneMapping: THREE.NoToneMapping,
toneMappingExposure: 10.0,
}"
class="transition-opacity duration-500"
:class="{ 'opacity-0': !isReady, 'opacity-100': isReady }"
@pointerdown="onPointerDown"
@pointermove="onPointerMove"
@pointerup="onPointerUp"
@pointerleave="onPointerUp"
class="transition-opacity duration-500"
:class="{'opacity-0': !isReady, 'opacity-100': isReady}"
>
<Suspense>
<Group>
@@ -90,7 +90,7 @@
<div
v-if="!isReady"
class="w-full h-full flex items-center justify-center transition-opacity duration-500"
:class="{'opacity-100': !isReady, 'opacity-0': isReady}"
:class="{ 'opacity-100': !isReady, 'opacity-0': isReady }"
>
<div class="text-primary">Loading...</div>
</div>
@@ -653,8 +653,12 @@ onUnmounted(() => {
<style scoped lang="scss">
.nametag-bg {
background: linear-gradient(308.68deg, rgba(50, 50, 50, 0.2) -52.46%, rgba(100, 100, 100, 0.2) 94.75%),
rgba(0, 0, 0, 0.2);
background: linear-gradient(
308.68deg,
rgba(50, 50, 50, 0.2) -52.46%,
rgba(100, 100, 100, 0.2) 94.75%
),
rgba(0, 0, 0, 0.2);
box-shadow:
inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);