root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Format code

Browse Source
This commit is contained in:
root
2026-01-01 18:46:46 +01:00
parent 221dcb7072
commit 65bdc2974f
17 changed files with 561 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/layout/Navbar.vue
View File

@@ -5,7 +5,7 @@
<!-- Left Side: Logo & Navigation -->
<div class="flex items-center gap-8">
<NavbarLogo />
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center">
<NavbarLinks />
@@ -16,22 +16,16 @@
<div class="hidden md:flex items-center gap-5">
<!-- Auth & Projects -->
<template v-if="authStore.user">
<NavbarProjectActions
@open-save-modal="openSaveModal"
@open-new-project-modal="isNewProjectModalOpen = true"
@open-project-list="isProjectListOpen = true"
/>
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
<NavbarProjectActions @open-save-modal="openSaveModal" @open-new-project-modal="isNewProjectModalOpen = true" @open-project-list="isProjectListOpen = true" />
<!-- User Dropdown -->
<NavbarUserMenu @open-auth-modal="isAuthModalOpen = true" />
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
<!-- User Dropdown -->
<NavbarUserMenu @open-auth-modal="isAuthModalOpen = true" />
</template>
<div v-else>
<button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm shadow-indigo-500/20 shadow-lg">
Login / Register
</button>
<button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm shadow-indigo-500/20 shadow-lg">Login / Register</button>
</div>
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
@@ -50,36 +44,16 @@
</div>
<!-- Mobile Menu -->
<NavbarMobileMenu
:is-open="isMobileMenuOpen"
@close="isMobileMenuOpen = false"
@open-help="$emit('open-help')"
/>
<NavbarMobileMenu :is-open="isMobileMenuOpen" @close="isMobileMenuOpen = false" @open-help="$emit('open-help')" />
</nav>
<AuthModal
:is-open="isAuthModalOpen"
@close="isAuthModalOpen = false"
/>
<ProjectList
:is-open="isProjectListOpen"
@close="isProjectListOpen = false"
@open-project="handleOpenProject"
/>
<SaveProjectModal
:is-open="isSaveProjectModalOpen"
:initial-name="projectStore.currentProject?.name"
@close="isSaveProjectModalOpen = false"
@save="handleSaveProject"
/>
<NewProjectModal
:is-open="isNewProjectModalOpen"
@close="isNewProjectModalOpen = false"
@create="handleCreateNewProject"
/>
<AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" />
<ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" />
<SaveProjectModal :is-open="isSaveProjectModalOpen" :initial-name="projectStore.currentProject?.name" @close="isSaveProjectModalOpen = false" @save="handleSaveProject" />
<NewProjectModal :is-open="isNewProjectModalOpen" @close="isNewProjectModalOpen = false" @create="handleCreateNewProject" />
</template>
<script setup lang="ts">
import { ref, toRef } from 'vue';
import { ref } from 'vue';
import DarkModeToggle from '../utilities/DarkModeToggle.vue';
import { useAuthStore } from '@/stores/useAuthStore';
import AuthModal from '@/components/auth/AuthModal.vue';
@@ -87,9 +61,7 @@
import SaveProjectModal from '@/components/project/SaveProjectModal.vue';
import NewProjectModal from '@/components/project/NewProjectModal.vue';
import { useProjectStore, type Project } from '@/stores/useProjectStore';
import { useSettingsStore } from '@/stores/useSettingsStore';
import { useExportLayers } from '@/composables/useExportLayers';
import { useLayers, createEmptyLayer } from '@/composables/useLayers';
import { useProjectManager } from '@/composables/useProjectManager';
// Sub-components
import NavbarLogo from './navbar/NavbarLogo.vue';
@@ -99,7 +71,7 @@
import NavbarSocials from './navbar/NavbarSocials.vue';
import NavbarMobileMenu from './navbar/NavbarMobileMenu.vue';
defineEmits(['open-help']);
defineEmits(['open-help']);
const isMobileMenuOpen = ref(false);
const isAuthModalOpen = ref(false);
@@ -109,66 +81,25 @@
const authStore = useAuthStore();
const projectStore = useProjectStore();
const settingsStore = useSettingsStore();
const { layers, columns, activeLayerId } = useLayers();
const { generateProjectJSON, loadProjectData } = useExportLayers(
layers,
columns,
toRef(settingsStore, 'negativeSpacingEnabled'),
activeLayerId,
toRef(settingsStore, 'backgroundColor'),
toRef(settingsStore, 'manualCellSizeEnabled'),
toRef(settingsStore, 'manualCellWidth'),
toRef(settingsStore, 'manualCellHeight')
);
const { createProject, openProject, saveProject } = useProjectManager();
const handleOpenProject = async (project: Project) => {
try {
if (project.data) {
await loadProjectData(project.data);
}
projectStore.currentProject = project;
} catch (e) {
console.error("Failed to open project", e);
alert("Failed to open project data");
}
await openProject(project);
};
const openSaveModal = () => {
isSaveProjectModalOpen.value = true;
}
isSaveProjectModalOpen.value = true;
};
const handleSaveProject = async (name: string) => {
try {
const data = await generateProjectJSON();
if (projectStore.currentProject && projectStore.currentProject.name === name) {
await projectStore.updateProject(projectStore.currentProject.id, data);
} else {
await projectStore.createProject(name, data);
}
} catch (e) {
console.error(e);
alert("Failed to save project");
}
try {
await saveProject(name);
} catch {
// Error handled in composable
}
};
const handleCreateNewProject = (config: { width: number; height: number; columns: number; rows: number }) => {
// 1. Reset Settings
settingsStore.setManualCellSize(config.width, config.height);
settingsStore.manualCellSizeEnabled = true;
// 2. Reset Layers
const newLayer = createEmptyLayer('Base');
layers.value = [newLayer];
activeLayerId.value = newLayer.id;
// 3. Set Columns
columns.value = config.columns;
// 4. Reset Project Store
projectStore.currentProject = null;
createProject(config);
};
</script>