Initial port to svelte

vnshed/src/lib/components/add_button.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { makeid } from "$lib/functions.js"
+    const { handler } = $props();
+    let id = makeid(8);
+</script>
+
+<button class="plus round" onclick={handler}>+</button>

vnshed/src/lib/components/calendar.svelte

@@ -0,0 +1,109 @@
+<script>
+    import { makeid } from "$lib/functions.js"
+    let id = makeid(8);
+    let current = 10;
+</script>
+
+<div class="calendar rounded">
+    <div class="month">
+        <ul>
+            <li class="prev">&#10094;</li>
+            <li class="next">&#10095;</li>
+            <li>Август 2025</li>
+        </ul>
+    </div>
+    <ul class="weekdays">
+        {#each ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"] as weekday}
+            <li>{weekday}</li>
+        {/each}
+    </ul>
+    <ul class="days">
+        {#each [...Array(31).keys()] as day}
+            <li>
+                {#if current == day+1}
+                    <span class="active">{day+1}</span>
+                {:else}
+                    {day+1}
+                {/if}
+            </li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    ul {list-style-type: none;}
+
+    .calendar * {
+        margin: 0;
+    }
+
+    .month {
+        width: 100%;
+        text-align: center;
+        align-content: center;
+    }
+
+    .month ul {
+        margin: 0;
+        padding: 0.5rem;
+    }
+
+    .month ul li {
+        display: inline;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+    }
+
+    .month .prev {
+        float: inline-start;
+        cursor: pointer;
+    }
+
+    .month .next {
+        float: inline-end;
+        cursor: pointer;
+    }
+
+    .weekdays {
+        padding: 10px 0 0 0;
+    }
+
+    .weekdays li {
+        display: inline-block;
+        width: 13.6%;
+        text-align: center;
+    }
+
+    .days {
+        padding: 10px 0;
+        margin: 0;
+    }
+
+    .days li {
+        list-style-type: none;
+        display: inline-block;
+        width: 13.6%;
+        text-align: center;
+        margin-bottom: 5px;
+        font-size: smaller;
+        cursor: pointer;
+    }
+
+    .days li .active {
+        padding: 5px;
+        border-radius: 30%;
+    }
+
+    @media screen and (max-width: 720px) {
+        .weekdays li, .days li {width: 13.1%;}
+    }
+
+    @media screen and (max-width: 420px) {
+        .weekdays li, .days li {width: 12.5%;}
+        .days li .active {padding: 2px;}
+    }
+
+    @media screen and (max-width: 290px) {
+        .weekdays li, .days li {width: 12.2%;}
+    }
+</style>

vnshed/src/lib/components/create_button.svelte

@@ -0,0 +1,4 @@
+<!-- Кнопка "Создать" -->
+<div class="create">
+    <button class="rounded" id="create">Создать</button>
+</div>

vnshed/src/lib/components/horisontal_bar.svelte

@@ -0,0 +1,47 @@
+<!-- class HorisontalBar {
+
+    html = undefined;
+    plus_id = undefined;
+    elements = [];
+
+    constructor(text, id) {
+        this.html = document.createElement('div');
+        this.html.classList.add("horisontal-bar");
+        this.html.classList.add("input");
+        this.html.classList.add("rounded");
+        let label = document.createElement('p');
+        label.appendChild(document.createTextNode(text))
+        this.html.appendChild(label);
+        const plus = new AddButton().addHadler(
+            () => this.append(new HorisontalItem('test'))
+        );
+        this.html.appendChild(plus.html);
+        this.plus_id = plus.id;
+    }
+
+    append(elem) {
+        this.elements.push(elem);
+        this.html.insertBefore(elem.html, document.getElementById(this.plus_id));
+        return this;
+    }
+
+    json() {
+        return JSON.stringify(this.elements, json_filter);
+    }
+} -->
+
+<script>
+    import AddButton from "./add_button.svelte";
+    import Image from "./image.svelte";
+    let { label = "", type = "text" } = $props();
+</script>
+
+<div class="horisontal-bar {type == "text" ? "input" : ""} rounded">
+    <p>{label}</p>
+    {#if type == "text"}
+        <AddButton handler={() => {}} />
+    {:else if type == "image"}
+        <Image />
+    {/if}
+    
+</div>

vnshed/src/lib/components/image.svelte

@@ -0,0 +1,11 @@
+<script>
+    import AddButton from "./add_button.svelte";
+    let { direction = "horisontal", input = true } = $props();
+</script>
+
+<div class="{direction} {input ? "input" : ""} image rounded">
+    <AddButton handler={() => {
+        // addImage(plus.id, this.id);
+        // document.getElementById("screenshots").appendChild(new HorisontalImage().html);
+    }}/>
+</div>

vnshed/src/lib/components/img_button.svelte

@@ -0,0 +1,37 @@
+<!-- class ImgButton {
+
+    html = undefined;
+    id = undefined;
+
+    constructor(name, img) {
+        this.html = document.createElement('div');
+        this.html.classList.add("imgbutton");
+        this.id = makeid(8);
+        this.html.id = this.id;
+
+        let btn_img = document.createElement('img');
+        btn_img.src = img;
+        btn_img.innerHTML = name;
+        this.html.appendChild(btn_img);
+    }
+
+    addHadler(func) {
+        this.html.addEventListener("click", func);
+        return this;
+    }
+
+    setCssClass(name) {
+        this.html.classList.add(name);
+    }
+
+} -->
+
+<script>
+    import { makeid } from "$lib/functions.js"
+    let id = makeid(8);
+    let { style, image, name } = $props();
+</script>
+
+<div class="imgbutton {style}">
+    <img src={image} alt={name}>
+</div>

vnshed/src/lib/components/queue_item.svelte

@@ -0,0 +1,15 @@
+<script>
+    import { makeid } from "$lib/functions.js"
+    import edit_btn from '$lib/assets/edit.svg';
+    import remove_btn from '$lib/assets/delete.svg';
+    import ImgButton from "./img_button.svelte";
+    let id = makeid(8);
+    let { date, name } = $props();
+</script>
+
+<div class="queue-item horisontal-bar rounded">
+    <p>{date}</p>
+    <p class="ellipsis">{name}</p>
+    <ImgButton style="edit" name="Изменить" image={edit_btn}/>
+    <ImgButton style="remove" name="Удалить" image={remove_btn}/>
+</div>

vnshed/src/lib/css/global.css

@@ -1,14 +1,6 @@
 @font-face {
     font-family: 'Inter';
-    src: url('../font/Inter-Light.woff2') format('woff2');
+    src: url('/font/Inter-Light.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Lobster';
-    src: url('../font/Lobster-Regular.ttf') format('ttf');
     font-weight: normal;
     font-style: normal;
     font-display: swap;

vnshed/src/lib/functions.js

@@ -0,0 +1,46 @@
+export function makeid(length) {
+    var result = '';
+    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < length; i++ ) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+
+// const imageTypes = {
+//   types: [
+//     {
+//       description: "Images",
+//       accept: {
+//         "image/*": [".png", ".gif", ".jpeg", ".jpg"],
+//       },
+//     },
+//   ],
+//   excludeAcceptAllOption: true,
+//   multiple: false,
+// };
+
+// let fileHandle;
+// export async function loadImage() {
+//   [fileHandle] = await window.showOpenFilePicker(imageTypes);
+//   return fileHandle;
+// }
+
+// export function addImage(initiator, target) {
+//     loadImage().then(async (result) => {
+//         let img = document.createElement("img");
+//         img.src = URL.createObjectURL(await result.getFile());
+//         document.getElementById(target).appendChild(img);
+//         initiator = document.getElementById(initiator);
+//         if (initiator) initiator.remove();
+//         //document.getElementById(target).addEventListener("click", addImage("", target));
+//     });
+// }
+
+// export function json_filter(key,value)
+// {
+//     if (key=="html") return undefined;
+//     //else if (key=="id") return undefined;
+//     else return value;
+// }

vnshed/src/routes/+layout.svelte

@@ -1,5 +1,10 @@
 <script>
 	import favicon from '$lib/assets/favicon.svg';
+	import Image from '$lib/components/image.svelte';
+	import HorisontalBar from '$lib/components/horisontal_bar.svelte';
+	import CreateButton from '$lib/components/create_button.svelte';
+    import Calendar from '$lib/components/calendar.svelte';
+    import QueueItem from '$lib/components/queue_item.svelte';
 
 	let { children } = $props();
 </script>
@@ -8,9 +13,55 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<body>
+<!-- Обложка -->
-	<p>lld</p>
+<div class="cover">
+	<Image direction="vertical"/>
+	<p>Обложка</p>
+</div>
 
-</body>
+<div class="fields rounded" id="fields">
+	<!-- Название -->
+	<input type="text" class="input rounded" placeholder="Название">
+
+	<!-- Описание -->
+	<textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
+
+	<!-- Время на чтение -->
+	<div class="horisontal-bar">
+		<p>Время на чтение</p>
+		<select class="input rounded" id="hours-count">
+			<option value="first">менее 2-х часов</option>
+			<option value="second">2-10 часов</option>
+			<option value="third">10-30 часов</option>
+			<option value="third">50+ часов</option>
+		</select>
+	</div>
+
+	<HorisontalBar label="Жанры"/>
+	<HorisontalBar label="Теги"/>
+	<HorisontalBar label="Баджи"/>
+
+	<p>Скриншоты</p>
+	<HorisontalBar type="image" />
+
+	<!-- Календарь с датой -->
+	<p>Дата публикации</p>
+	<Calendar />
+
+	<!-- Очередь публикации -->
+	<p>Очередь публикации</p>
+	<div class="input rounded" id="queue">
+		<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
+		<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
+	</div>
+
+</div>
+
+<CreateButton />
+
+<style>
+	@import '$lib/css/global.css';
+	@import '$lib/css/themes.css';
+</style>
 
 {@render children?.()}

vnshed/src/routes/+page.svelte

@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
+<!-- <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> -->

www/index.html

@@ -1,95 +0,0 @@
-<html>
-<head>
-    <title>Отложка</title>
-    <link rel="stylesheet" type="text/css" href="css/global.css">
-    <link rel="stylesheet" type="text/css" href="css/calendar.css">
-    <link rel="stylesheet" type="text/css" href="css/themes.css">
-    <link rel="preload" href="font/Inter-Light.woff2" as="font" type="font/ttf" crossorigin>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8" />
-</head>
-<body>
-    <script type="text/javascript" src="js/functions.js"></script>
-    <script type="text/javascript" src="js/types.js"></script>
-
-    <!-- Обложка -->
-    <div class="cover">
-        <div class="vertical image rounded" id="cover-div">
-            <button class="plus round" id="cover-plus">+</button>
-        </div>
-        <p>Обложка</p>
-    </div>
-
-    <div class="fields rounded" id="fields">
-        <!-- Название -->
-        <input type="text" class="input rounded" placeholder="Название"></input>
-
-        <!-- Описание -->
-        <textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
-
-        <!-- Время на чтение -->
-        <div class="horisontal-bar">
-            <p>Время на чтение</p>
-            <select class="input rounded" id="hours-count">
-                <option value="first">менее 2-х часов</option>
-                <option value="second">2-10 часов</option>
-                <option value="third">10-30 часов</option>
-                <option value="third">50+ часов</option>
-            </select>
-        </div>
-
-        <!-- Поле с жанрами -->
-        <script>
-            let genres = new HorisontalBar("Жанры", "genres");
-            document.getElementById("fields").appendChild(genres.html);
-        </script>
-
-        <!-- Поле с тегами -->
-        <script>
-            let tags = new HorisontalBar("Теги", "tags");
-            document.getElementById("fields").appendChild(tags.html);
-        </script>
-
-        <!-- Поле с баджами -->
-        <script>
-            let badges = new HorisontalBar("Баджи", "badges");
-            document.getElementById("fields").appendChild(badges.html);
-        </script>
-
-        <!-- Скриншоты -->
-        <p>Скриншоты</p>
-        <script>
-            let screenshots = new HorisontalImageBar("screenshots");
-            document.getElementById("fields").appendChild(screenshots.html);
-        </script>
-
-        <!-- Календарь с датой -->
-        <p>Дата публикации</p>
-        <script>
-            let calendar = new Calendar();
-            document.getElementById("fields").appendChild(calendar.html);
-        </script>
-        
-        <!-- Очередь публикации -->
-        <p>Очередь публикации</p>
-        <div class="input rounded" id="queue">
-            <script>
-                let queue1 = new QueueItem("28.11.24", "Fate/Stay Night (Судьба/Ночь схватки)");
-                document.getElementById("queue").appendChild(queue1.html);
-            </script>
-            <script>
-                let queue2 = new QueueItem("30.11.24", "Fate/Hollow Ataraxia (Судьба/Святая атараксия)");
-                document.getElementById("queue").appendChild(queue2.html);
-            </script>
-        </div>
-    </div>
-
-    <!-- Кнопка "Создать" -->
-    <div class="create">
-        <button class="rounded" id="create">Создать</button>
-    </div>
-
-    <script type="text/javascript" src="js/index.js"></script>
-    <script type="text/javascript" src="js/calendar.js"></script>
-</body>
-</html>

www/js/calendar.js

@@ -1,8 +0,0 @@
-
-document.getElementById("cal-prev").addEventListener("click", (event) => {
-    console.log("cal-prev");
-})
-
-document.getElementById("cal-next").addEventListener("click", (event) => {
-    console.log("cal-next");
-})

www/js/functions.js

@@ -1,46 +0,0 @@
-function makeid(length) {
-    var result = '';
-    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    var charactersLength = characters.length;
-    for ( var i = 0; i < length; i++ ) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-}
-
-const imageTypes = {
-  types: [
-    {
-      description: "Images",
-      accept: {
-        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
-      },
-    },
-  ],
-  excludeAcceptAllOption: true,
-  multiple: false,
-};
-
-let fileHandle;
-async function loadImage() {
-  [fileHandle] = await window.showOpenFilePicker(imageTypes);
-  return fileHandle;
-}
-
-function addImage(initiator, target) {
-    loadImage().then(async (result) => {
-        let img = document.createElement("img");
-        img.src = URL.createObjectURL(await result.getFile());
-        document.getElementById(target).appendChild(img);
-        initiator = document.getElementById(initiator);
-        if (initiator) initiator.remove();
-        //document.getElementById(target).addEventListener("click", addImage("", target));
-    });
-}
-
-function json_filter(key,value)
-{
-    if (key=="html") return undefined;
-    //else if (key=="id") return undefined;
-    else return value;
-}

www/js/index.js

@@ -1,12 +0,0 @@
-
-document.getElementById("cover-plus").addEventListener("click", (event) => {
-    addImage("cover-plus", "cover-div");
-})
-
-// document.getElementById("screen-plus").addEventListener("click", (event) => {
-//     addImage("screen-plus", "scr-1");
-// })
-
-document.getElementById("create").addEventListener("click", (event) => {
-    console.log("create");
-})

www/js/types.js

@@ -1,249 +0,0 @@
-class AddButton {
-
-    id = "";
-    html = undefined;
-
-    constructor() {
-        this.html = document.createElement('button');
-        this.html.classList.add("plus");
-        this.html.classList.add("round");
-        this.html.appendChild(document.createTextNode("+"));
-        this.id = makeid(8);
-        this.html.id = this.id;
-    }
-
-    addHadler(func) {
-        this.html.addEventListener("click", func);
-        return this;
-    }
-
-}
-
-class HorisontalItem {
-
-    id = undefined;
-    html = undefined;
-    text = undefined;
-    
-    constructor(text) {
-        this.text = text;
-        this.html = document.createElement('div');
-        this.html.classList.add("horisontal-item");
-        this.html.classList.add("rounded");
-        this.html.appendChild(document.createTextNode(text));
-        this.id = makeid(8);
-        this.html.id = this.id;
-        this.html.addEventListener("click", this.remove);
-    }
-
-    remove() {
-        document.getElementById(this.id).remove();
-    }
-}
-
-class HorisontalBar {
-
-    html = undefined;
-    plus_id = undefined;
-    elements = [];
-
-    constructor(text, id) {
-        this.html = document.createElement('div');
-        this.html.classList.add("horisontal-bar");
-        this.html.classList.add("input");
-        this.html.classList.add("rounded");
-        let label = document.createElement('p');
-        label.appendChild(document.createTextNode(text))
-        this.html.appendChild(label);
-        const plus = new AddButton().addHadler(
-            () => this.append(new HorisontalItem('test'))
-        );
-        this.html.appendChild(plus.html);
-        this.plus_id = plus.id;
-    }
-
-    append(elem) {
-        this.elements.push(elem);
-        this.html.insertBefore(elem.html, document.getElementById(this.plus_id));
-        return this;
-    }
-
-    json() {
-        return JSON.stringify(this.elements, json_filter);
-    }
-}
-
-class HorisontalImage {
-
-    id = undefined;
-    html = undefined;
-    
-    constructor() {
-        this.html = document.createElement('div');
-        this.html.classList.add("horisontal");
-        this.html.classList.add("image");
-        this.html.classList.add("input");
-        this.html.classList.add("rounded");
-        this.id = makeid(8);
-        this.html.id = this.id;
-
-        let plus = new AddButton();
-        plus.addHadler(() => {
-            addImage(plus.id, this.id);
-            document.getElementById("screenshots").appendChild(new HorisontalImage().html);
-        });
-        this.html.appendChild(plus.html);
-    }
-
-    remove() {
-        document.getElementById(this.id).remove();
-    }
-}
-
-class HorisontalImageBar {
-
-    html = undefined;
-    first_id = undefined;
-    elements = [];
-
-    constructor(id) {
-        this.html = document.createElement('div');
-        this.html.classList.add("horisontal-bar");
-        const first = new HorisontalImage();
-        this.html.appendChild(first.html);
-        this.first_id = first.id;
-    }
-
-    append(elem) {
-        this.elements.push(elem);
-        this.html.insertBefore(elem.html, document.getElementById(this.first_id));
-        return this;
-    }
-
-    json() {
-        return JSON.stringify(this.elements, json_filter);
-    }
-}
-
-class ImgButton {
-
-    html = undefined;
-    id = undefined;
-
-    constructor(name, img) {
-        this.html = document.createElement('div');
-        this.html.classList.add("imgbutton");
-        this.id = makeid(8);
-        this.html.id = this.id;
-
-        let btn_img = document.createElement('img');
-        btn_img.src = img;
-        btn_img.innerHTML = name;
-        this.html.appendChild(btn_img);
-    }
-
-    addHadler(func) {
-        this.html.addEventListener("click", func);
-        return this;
-    }
-
-    setCssClass(name) {
-        this.html.classList.add(name);
-    }
-
-}
-
-class QueueItem {
-
-    html = undefined;
-    id = undefined;
-
-    constructor(date, name) {
-        this.html = document.createElement('div');
-        this.html.classList.add("queue-item");
-        this.html.classList.add("horisontal-bar");
-        this.html.classList.add("rounded");
-        this.id = makeid(8);
-        this.html.id = this.id;
-
-        var date_p = document.createElement('p');
-        date_p.innerHTML = date;
-        this.html.appendChild(date_p);
-
-        var text = document.createElement('p');
-        text.classList.add("ellipsis");
-        text.innerHTML = name;
-        this.html.appendChild(text);
-
-        let edit_btn = new ImgButton("Изменить", "./img/edit.svg");
-        edit_btn.setCssClass("edit");
-        this.html.appendChild(edit_btn.html);
-        let rem_btn = new ImgButton("Удалить", "./img/delete.svg");
-        rem_btn.setCssClass("remove");
-        this.html.appendChild(rem_btn.html);
-    }
-
-}
-
-class Calendar {
-
-    html = undefined;
-    id = undefined;
-
-    constructor() {
-        this.html = document.createElement('div');
-        this.html.classList.add("calendar");
-        this.html.classList.add("rounded");
-        this.id = makeid(8);
-        this.html.id = this.id;
-
-        // Calendar Header
-        let month = document.createElement('div');
-        month.classList.add("month");
-        let m_header = document.createElement('ul');
-        let prev_btn = document.createElement('li');
-        prev_btn.classList.add("prev");
-        prev_btn.id = this.id + "-prev";
-        prev_btn.innerHTML = "❮";
-        m_header.appendChild(prev_btn);
-        let next_btn = document.createElement('li');
-        next_btn.classList.add("next");
-        next_btn.id = this.id + "-next";
-        next_btn.innerHTML = "❯";
-        m_header.appendChild(next_btn);
-        let month_text = document.createElement('li');
-        month_text.innerHTML = "Август 2025";
-        m_header.appendChild(month_text);
-        month.appendChild(m_header);
-        this.html.appendChild(month);
-
-        // Week header
-        let weekdays = document.createElement('ul');
-        weekdays.classList.add("weekdays");
-        const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
-        for (const day of days) {
-            let day_li = document.createElement('li');
-            day_li.innerHTML = day;
-            weekdays.appendChild(day_li);
-        }
-        this.html.appendChild(weekdays);
-
-        let day_table = document.createElement('ul');
-        day_table.classList.add("days");
-        const current = 10;
-        for (const day of [...Array(31).keys()]) {
-            let day_li = document.createElement('li');
-            if (day+1 == current) {
-                let day_sp = document.createElement('span');
-                day_sp.classList.add("active");
-                day_sp.innerHTML = day+1;
-                day_li.appendChild(day_sp);
-            } else {
-                day_li.innerHTML = day+1;
-            }
-            day_table.appendChild(day_li);
-        }
-        this.html.appendChild(day_table);
-    }
-
-}