fix: start fixing
This commit is contained in:
@@ -1,15 +0,0 @@
|
|||||||
import { loadFonts } from "$lib/fonts";
|
|
||||||
import { loadImages } from "$lib/images";
|
|
||||||
import type { PageLoad } from "./$types";
|
|
||||||
|
|
||||||
export async function load(): Promise<PageLoad> {
|
|
||||||
let images = loadImages();
|
|
||||||
let fonts = loadFonts();
|
|
||||||
|
|
||||||
return {
|
|
||||||
images,
|
|
||||||
fonts,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const prerender = true;
|
|
||||||
+237
-126
@@ -1,126 +1,237 @@
|
|||||||
<script lang="ts">
|
|
||||||
// import { Stage, Layer, Image, Text } from "svelte-konva";
|
<script lang="ts">
|
||||||
import type { PageProps } from "./$types";
|
import { onMount } from "svelte";
|
||||||
import { onMount } from "svelte";
|
import { browser } from "$app/environment";
|
||||||
import { browser } from "$app/environment";
|
import { panelStore, createEmptyPanel } from "../stores/panelStore";
|
||||||
|
import { uiStore } from "../stores/uiStore";
|
||||||
let { data }: PageProps = $props();
|
import { panelStorage } from "../lib/utils/panelStorage";
|
||||||
|
import { exportService } from "../lib/services/exportService";
|
||||||
let Stage: any = $state(undefined);
|
import ImageUpload from "../components/ImageUpload.svelte";
|
||||||
let Layer: any = $state(undefined);
|
import ImageCropper from "../components/ImageCropper.svelte";
|
||||||
let Image: any = $state(undefined);
|
import TextManager from "../components/TextManager.svelte";
|
||||||
let Text: any = $state(undefined);
|
import PanelPreview from "../components/PanelPreview.svelte";
|
||||||
|
import PanelList from "../components/PanelList.svelte";
|
||||||
// svelte-ignore state_referenced_locally
|
import type { Panel } from "../lib/types/panel";
|
||||||
let images = data.images;
|
|
||||||
// svelte-ignore state_referenced_locally
|
let uploadedImage = $state<string | null>(null);
|
||||||
let fonts = data.fonts;
|
let croppedImage = $state<string | null>(null);
|
||||||
console.log(images);
|
let currentPanel = $state<Panel | null>(null);
|
||||||
console.log(fonts);
|
let errorMessage = $state<string | null>(null);
|
||||||
|
|
||||||
let fontsStyle = fonts
|
$effect(() => {
|
||||||
.map(({ name, url, file, format }: { name: string; url: string; file: string; format: string }) => {
|
currentPanel = $panelStore;
|
||||||
const result = `
|
});
|
||||||
@font-face {
|
|
||||||
font-family: '${name}';
|
onMount(() => {
|
||||||
src: url('${url}') format(${format});
|
// Загружаем сохраненные панели
|
||||||
|
const savedPanels = panelStorage.getAllPanels();
|
||||||
}
|
if (savedPanels.length > 0) {
|
||||||
`;
|
// Если есть сохраненные панели, можно загрузить последнюю
|
||||||
return result;
|
// panelStore.set(savedPanels[0]);
|
||||||
})
|
}
|
||||||
.join("");
|
});
|
||||||
|
|
||||||
let selectedImage = $state(0);
|
function handleImageUpload(image: string) {
|
||||||
let text = $state("текст");
|
uploadedImage = image;
|
||||||
let selectedFont = $state("");
|
errorMessage = null;
|
||||||
|
}
|
||||||
let image: HTMLImageElement | undefined = $state(undefined);
|
|
||||||
|
function handleCropComplete(croppedImage: string) {
|
||||||
$effect(() => {
|
croppedImage = croppedImage;
|
||||||
const img = document.createElement("img");
|
|
||||||
img.src = `./backgrounds/${images[selectedImage]}`;
|
// Создаем новую панель с обрезанным изображением
|
||||||
img.onload = () => (image = img);
|
const newPanel = createEmptyPanel();
|
||||||
});
|
newPanel.backgroundImage = croppedImage;
|
||||||
|
|
||||||
onMount(async () => {
|
panelStore.set(newPanel);
|
||||||
if (!browser) return;
|
currentPanel = newPanel;
|
||||||
|
|
||||||
const svelteKonva = await import("svelte-konva");
|
// Сохраняем панель
|
||||||
Stage = svelteKonva.Stage;
|
panelStorage.savePanel(newPanel);
|
||||||
Layer = svelteKonva.Layer;
|
|
||||||
Image = svelteKonva.Image;
|
uiStore.setCurrentStep("text");
|
||||||
Text = svelteKonva.Text;
|
}
|
||||||
});
|
|
||||||
|
function handleCropCancel() {
|
||||||
function download() {}
|
uploadedImage = null;
|
||||||
</script>
|
uiStore.setCurrentStep("upload");
|
||||||
|
}
|
||||||
<svelte:head>
|
|
||||||
{@html `
|
function handleTextUpdate(texts: Panel["texts"]) {
|
||||||
<style>
|
if (currentPanel) {
|
||||||
${fontsStyle}
|
const updatedPanel = {
|
||||||
</style>
|
...currentPanel,
|
||||||
`}
|
texts,
|
||||||
</svelte:head>
|
updatedAt: new Date(),
|
||||||
|
};
|
||||||
<div class="preview">
|
panelStore.set(updatedPanel);
|
||||||
<h1>Preview</h1>
|
panelStorage.savePanel(updatedPanel);
|
||||||
|
}
|
||||||
<Stage width={320} height={100}>
|
}
|
||||||
<Layer>
|
|
||||||
<Image
|
function handlePanelSelect(panel: Panel) {
|
||||||
{image}
|
panelStore.set(panel);
|
||||||
width="320"
|
currentPanel = panel;
|
||||||
height="100"
|
uiStore.setCurrentStep("preview");
|
||||||
crop={{
|
}
|
||||||
x: 0,
|
|
||||||
y: 0,
|
function handlePanelDelete(panelId: string) {
|
||||||
width: 320,
|
if (currentPanel?.id === panelId) {
|
||||||
height: 100,
|
panelStore.set(null);
|
||||||
}}
|
currentPanel = null;
|
||||||
/>
|
uiStore.setCurrentStep("upload");
|
||||||
<Text
|
}
|
||||||
{text}
|
}
|
||||||
fontSize={18}
|
|
||||||
fill="white"
|
async function handleDownload() {
|
||||||
fontFamily={selectedFont}
|
if (!currentPanel) {
|
||||||
align="center"
|
errorMessage = "Нет панели для скачивания";
|
||||||
verticalAlign="middle"
|
return;
|
||||||
width="320"
|
}
|
||||||
height="100"
|
|
||||||
/>
|
try {
|
||||||
</Layer>
|
uiStore.setLoading(true);
|
||||||
</Stage>
|
const result = await exportService.exportPanel(currentPanel);
|
||||||
</div>
|
|
||||||
|
if (!result.success) {
|
||||||
<label>
|
errorMessage = result.error || "Ошибка экспорта панели";
|
||||||
Введите текст:
|
}
|
||||||
<input type="text" bind:value={text} />
|
} catch (error) {
|
||||||
</label>
|
errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панели";
|
||||||
<label>
|
} finally {
|
||||||
Выберите шрифт:
|
uiStore.setLoading(false);
|
||||||
<select bind:value={selectedFont}>
|
}
|
||||||
{#each fonts as font}
|
}
|
||||||
<option value={font.name}>{font.name}</option>
|
|
||||||
{/each}
|
function handleNewPanel() {
|
||||||
</select>
|
panelStore.set(null);
|
||||||
</label>
|
currentPanel = null;
|
||||||
|
uploadedImage = null;
|
||||||
<button onclick={download}>Скачать</button>
|
croppedImage = null;
|
||||||
|
uiStore.setCurrentStep("upload");
|
||||||
<div class="img-selection">
|
}
|
||||||
{#each images as image, idx (image)}
|
</script>
|
||||||
<button class="img-select-button" onclick={() => (selectedImage = idx)}>
|
|
||||||
<img src={`./backgrounds/${image}`} alt="img selection" />
|
<div class="app-container">
|
||||||
</button>
|
<div class="app-header">
|
||||||
{/each}
|
<h1>Twitch Panels Creator</h1>
|
||||||
</div>
|
<button class="btn btn-primary" on:click={handleNewPanel}>Новая панель</button>
|
||||||
|
</div>
|
||||||
<style>
|
|
||||||
.img-select-button {
|
{#if errorMessage}
|
||||||
border: none;
|
<div class="error-message">
|
||||||
padding: 0;
|
{errorMessage}
|
||||||
margin: 8px;
|
</div>
|
||||||
}
|
{/if}
|
||||||
</style>
|
|
||||||
|
<div class="app-content">
|
||||||
|
<div class="main-section">
|
||||||
|
{#if $uiStore.currentStep === "upload"}
|
||||||
|
<ImageUpload onImageSelect={handleImageUpload} />
|
||||||
|
{:else if $uiStore.currentStep === "crop" && uploadedImage}
|
||||||
|
<ImageCropper
|
||||||
|
imageSrc={uploadedImage}
|
||||||
|
onCropComplete={handleCropComplete}
|
||||||
|
onCancel={handleCropCancel}
|
||||||
|
/>
|
||||||
|
{:else if $uiStore.currentStep === "text"}
|
||||||
|
<TextManager onTextUpdate={handleTextUpdate} />
|
||||||
|
{:else if $uiStore.currentStep === "preview"}
|
||||||
|
<PanelPreview onDownload={handleDownload} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar">
|
||||||
|
<PanelList
|
||||||
|
onPanelSelect={handlePanelSelect}
|
||||||
|
onPanelDelete={handlePanelDelete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 350px;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background: #ffebee;
|
||||||
|
color: #c62828;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #ffcdd2;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: white;
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.app-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
import type { PageLoad } from "./$types";
|
|
||||||
|
|
||||||
export function load(): PageLoad {
|
|
||||||
return {
|
|
||||||
images: imageFiles,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const prerender = true;
|
|
||||||
Reference in New Issue
Block a user