aasdfdfas
This commit is contained in:
parent
5fc85b610f
commit
8e8e82350d
GPG key ID:
0104BC05F41B77B8
5 changed files with 364 additions and 104 deletions
|
|
@ -1,17 +1,16 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
const searchProjectsResponse = z.object({
|
||||
hits: z.object({
|
||||
export const searchProjectsHit = z.object({
|
||||
slug: z.string().regex(/^[\w!@$()`.+,"\-']{3,64}$/),
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
categories: z.string().array().default([]),
|
||||
client_side: z.enum(["required", "optional", "unsupported"]),
|
||||
server_side: z.enum(["required", "optional", "unsupported"]),
|
||||
project_type: z.enum(["mod", "modpack", "resourcepack", "shader"]),
|
||||
client_side: z.enum(['required', 'optional', 'unsupported', 'unknown']),
|
||||
server_side: z.enum(['required', 'optional', 'unsupported', 'unknown']),
|
||||
project_type: z.enum(['mod', 'modpack', 'resourcepack', 'shader']),
|
||||
downloads: z.number(),
|
||||
icon_url: z.string().url(),
|
||||
color: z.number(),
|
||||
icon_url: z.union([z.string().url(), z.literal('').transform(() => '/favicon.png')]),
|
||||
color: z.number().nullable(),
|
||||
project_id: z.string(),
|
||||
author: z.string(),
|
||||
display_categories: z.string().array().default([]),
|
||||
|
|
@ -22,8 +21,11 @@ const searchProjectsResponse = z.object({
|
|||
latest_version: z.string().optional(),
|
||||
license: z.string(),
|
||||
gallery: z.string().array().default([]),
|
||||
featured_gallery: z.string().optional(),
|
||||
}).array(),
|
||||
featured_gallery: z.string().nullable()
|
||||
});
|
||||
|
||||
export const searchProjectsResponse = z.object({
|
||||
hits: searchProjectsHit.array(),
|
||||
offset: z.number(),
|
||||
limit: z.number(),
|
||||
total_hits: z.number()
|
||||
|
|
@ -31,34 +33,43 @@ const searchProjectsResponse = z.object({
|
|||
|
||||
const searchProjectsRequest = z.object({
|
||||
query: z.string().optional(),
|
||||
facets: z.string().regex(/^(categories|versions|license|project_type):(.+)$/).array().array().default([]),
|
||||
index: z.enum(["relevance", "downloads", "follows", "newest", "updated"]).default("relevance"),
|
||||
facets: z
|
||||
.string()
|
||||
.regex(/^(categories|versions|license|project_type):(.+)$/)
|
||||
.array()
|
||||
.array()
|
||||
.default([]),
|
||||
index: z.enum(['relevance', 'downloads', 'follows', 'newest', 'updated']).default('relevance'),
|
||||
offset: z.number().default(0),
|
||||
limit: z.number().default(10),
|
||||
filters: z.string().optional()
|
||||
});
|
||||
|
||||
function searchProjectsRequestToUrlParams(request: z.infer<typeof searchProjectsRequest>): URLSearchParams {
|
||||
function searchProjectsRequestToUrlParams(
|
||||
request: z.infer<typeof searchProjectsRequest>
|
||||
): URLSearchParams {
|
||||
const params = new URLSearchParams();
|
||||
if (typeof request.query != 'undefined') {
|
||||
params.set("query", request.query);
|
||||
params.set('query', request.query);
|
||||
}
|
||||
params.set("facets", JSON.stringify(request.facets));
|
||||
params.set("index", request.index);
|
||||
params.set("offset", request.offset.toString());
|
||||
params.set("limit", request.limit.toString());
|
||||
params.set('facets', JSON.stringify(request.facets));
|
||||
params.set('index', request.index);
|
||||
params.set('offset', request.offset.toString());
|
||||
params.set('limit', request.limit.toString());
|
||||
if (typeof request.filters != 'undefined') {
|
||||
params.set("filters", request.filters);
|
||||
params.set('filters', request.filters);
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
export async function searchProjects(request: z.input<typeof searchProjectsRequest>): Promise<z.infer<typeof searchProjectsResponse>> {
|
||||
export async function searchProjects(
|
||||
request: z.input<typeof searchProjectsRequest>
|
||||
): Promise<z.infer<typeof searchProjectsResponse>> {
|
||||
const parsedRequest = searchProjectsRequest.parse(request);
|
||||
const params = searchProjectsRequestToUrlParams(parsedRequest);
|
||||
const response = await fetch("https://api.modrinth.com/v2/search?" + params.toString(), {
|
||||
const response = await fetch('https://api.modrinth.com/v2/search?' + params.toString(), {
|
||||
headers: {
|
||||
"User-Agent": "NotModdermore/noversion (+https://git.skye.vg/me/not-moddermore/)"
|
||||
'User-Agent': 'NotModdermore/noversion (+https://git.skye.vg/me/not-moddermore/)'
|
||||
}
|
||||
});
|
||||
return searchProjectsResponse.parse(await response.json());
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script lang="ts">
|
||||
import FlattenedFileList from './FlattenedFileList.svelte';
|
||||
import FileTree from './FileTree.svelte';
|
||||
|
||||
import type { Folder } from '$lib/types';
|
||||
import type { File, Folder } from '$lib/types';
|
||||
import {
|
||||
Tab,
|
||||
TabGroup,
|
||||
|
|
@ -13,7 +14,14 @@
|
|||
DialogTitle,
|
||||
DialogDescription
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { PlusIcon } from 'svelte-feather-icons';
|
||||
import { FolderIcon, PlusIcon } from 'svelte-feather-icons';
|
||||
import {
|
||||
searchProjects,
|
||||
type searchProjectsHit,
|
||||
type searchProjectsResponse
|
||||
} from '$lib/modrinth';
|
||||
import type { z } from 'zod';
|
||||
import toml from '@ltd/j-toml';
|
||||
let fileTree: Folder = {
|
||||
type: 'folder',
|
||||
children: {
|
||||
|
|
@ -70,49 +78,229 @@ version = "2sIhirkG"
|
|||
};
|
||||
let blobs: Blob[] = [];
|
||||
let isOpen = false;
|
||||
let modalStatus:
|
||||
| 'none'
|
||||
| 'search:mods'
|
||||
| 'search:resourcepacks'
|
||||
| 'search:shaderpacks'
|
||||
| 'edit:simple'
|
||||
| 'edit:advanced'
|
||||
| 'select:modversion' = 'none';
|
||||
|
||||
let searchTerm = '';
|
||||
let searchTermSaved = '';
|
||||
let searchResult: z.infer<typeof searchProjectsResponse>;
|
||||
let searchLoading = false;
|
||||
let searchLoadingMore = false;
|
||||
async function search() {
|
||||
// const result = await modrinthClient.searchProjects({
|
||||
// te
|
||||
// })
|
||||
// console.log(result)
|
||||
searchLoading = true;
|
||||
searchTermSaved = searchTerm;
|
||||
let facet: string = '';
|
||||
switch (modalStatus) {
|
||||
case 'search:mods':
|
||||
facet = 'project_type:mod';
|
||||
break;
|
||||
case 'search:resourcepacks':
|
||||
facet = 'project_type:resourcepack';
|
||||
break;
|
||||
case 'search:shaderpacks':
|
||||
facet = 'project_type:shader';
|
||||
break;
|
||||
}
|
||||
const result = await searchProjects({
|
||||
query: searchTerm,
|
||||
facets: [[facet]]
|
||||
});
|
||||
console.log(result);
|
||||
searchResult = result;
|
||||
searchLoading = false;
|
||||
}
|
||||
async function searchMore() {
|
||||
searchLoadingMore = true;
|
||||
const result = await searchProjects({
|
||||
query: searchTermSaved,
|
||||
facets: [['project_type:mod']],
|
||||
offset: searchResult.hits.length
|
||||
});
|
||||
console.log(result);
|
||||
searchResult.hits = searchResult.hits.concat(result.hits);
|
||||
searchLoadingMore = false;
|
||||
}
|
||||
|
||||
async function addMod(mod: z.infer<typeof searchProjectsHit>) {}
|
||||
|
||||
let editPath: string[] = [];
|
||||
function getFileFromPath(path: string[], tree: Folder): File | undefined {
|
||||
const segment = editPath.shift();
|
||||
if (typeof segment == 'undefined') {
|
||||
return undefined
|
||||
}
|
||||
const next = tree.children[segment];
|
||||
if (!next) {
|
||||
return undefined;
|
||||
}
|
||||
if (next.type == 'file' && editPath.length == 0) {
|
||||
return next;
|
||||
} else if (next.type == 'file') {
|
||||
return undefined;
|
||||
}
|
||||
return getFileFromPath(editPath, next);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<TabGroup>
|
||||
<TabList>
|
||||
<Tab>Simple</Tab>
|
||||
<Tab>Advanced</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<h1>Mods <button on:click={() => isOpen = true}><PlusIcon /></button></h1>
|
||||
<FlattenedFileList tree={fileTree.children.mods?.type == 'folder'
|
||||
? fileTree.children.mods
|
||||
: { type: 'folder', children: {} }} />
|
||||
<h1>Resource Packs <button><PlusIcon /></button></h1>
|
||||
<TabPanel class="flex flex-col gap-2">
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<h1 class="text-xl">Mods</h1>
|
||||
<button
|
||||
class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
|
||||
on:click={() => (modalStatus = 'search:mods')}
|
||||
>
|
||||
<PlusIcon class="w-4 h-4 text-black" />
|
||||
</button>
|
||||
</div>
|
||||
<FlattenedFileList
|
||||
editFile={(path) => {
|
||||
modalStatus = 'edit:simple';
|
||||
editPath = ['mods'].concat(path);
|
||||
}}
|
||||
tree={fileTree.children.mods?.type == 'folder'
|
||||
? fileTree.children.mods
|
||||
: { type: 'folder', children: {} }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<h1 class="text-xl">Resource Packs</h1>
|
||||
<button
|
||||
class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
|
||||
on:click={() => (modalStatus = 'search:resourcepacks')}
|
||||
>
|
||||
<PlusIcon class="w-4 h-4 text-black" />
|
||||
</button>
|
||||
</div>
|
||||
<FlattenedFileList
|
||||
editFile={(path) => {
|
||||
modalStatus = 'edit:simple';
|
||||
editPath = ['resourcepacks'].concat(path);
|
||||
}}
|
||||
tree={fileTree.children.resourcepacks?.type == 'folder'
|
||||
? fileTree.children.resourcepacks
|
||||
: { type: 'folder', children: {} }}
|
||||
/>
|
||||
<h1>Shader Packs <button><PlusIcon /></button></h1>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<h1 class="text-xl">Shader Packs</h1>
|
||||
<button
|
||||
class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center"
|
||||
on:click={() => (modalStatus = 'search:shaderpacks')}
|
||||
>
|
||||
<PlusIcon class="w-4 h-4 text-black" />
|
||||
</button>
|
||||
</div>
|
||||
<FlattenedFileList
|
||||
editFile={(path) => {
|
||||
modalStatus = 'edit:simple';
|
||||
editPath = ['shaderpacks'].concat(path);
|
||||
}}
|
||||
tree={fileTree.children.shaderpacks?.type == 'folder'
|
||||
? fileTree.children.shaderpacks
|
||||
: { type: 'folder', children: {} }}
|
||||
/>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<FolderIcon class="inline" /> /
|
||||
<FileTree tree={fileTree} />
|
||||
</TabPanel>
|
||||
<TabPanel>{JSON.stringify(fileTree)}</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
</div>
|
||||
|
||||
<Dialog open={isOpen} on:close={() => (isOpen = false)} class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center">
|
||||
<DialogOverlay class="fixed top-0 left-0 bg-base opacity-50 w-screen h-screen" />
|
||||
<div class="z-10 bg-surface0 rounded-xl shadow-xl p-5">
|
||||
<DialogTitle>Add Mod</DialogTitle>
|
||||
<Dialog
|
||||
open={modalStatus != 'none'}
|
||||
on:close={() => (modalStatus = 'none')}
|
||||
class="fixed top-0 left-0 w-screen h-screen flex overflow-scroll"
|
||||
>
|
||||
<DialogOverlay class="fixed top-0 left-0 bg-overlay0 opacity-50 w-screen h-screen" />
|
||||
<div class="m-auto z-10">
|
||||
<div class="bg-base rounded-xl shadow-xl p-5 m-2 flex flex-col gap-1">
|
||||
{#if modalStatus == 'search:mods' || modalStatus == 'search:resourcepacks' || modalStatus == 'search:shaderpacks'}
|
||||
{#if modalStatus == 'search:mods'}
|
||||
<DialogTitle class="text-xl">Add Mod</DialogTitle>
|
||||
<DialogDescription>Add a mod to your modpack</DialogDescription>
|
||||
<input type="text" placeholder="Search" bind:value={searchTerm}><button on:click={search}>Search</button>
|
||||
{:else if modalStatus == 'search:resourcepacks'}
|
||||
<DialogTitle class="text-xl">Add Resource Pack</DialogTitle>
|
||||
<DialogDescription>Add a resource pack to your modpack</DialogDescription>
|
||||
{:else if modalStatus == 'search:shaderpacks'}
|
||||
<DialogTitle class="text-xl">Add Shader</DialogTitle>
|
||||
<DialogDescription>Add a shader to your modpack</DialogDescription>
|
||||
{/if}
|
||||
<div class="flex gap-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
bind:value={searchTerm}
|
||||
on:change={search}
|
||||
class="bg-surface0 rounded grow border-1 border-overlay0 outline-lavender focus:ring-lavender focus:border-lavender"
|
||||
/>
|
||||
<button
|
||||
on:click={search}
|
||||
class="rounded p-3 bg-surface0 hover:bg-surface1 outline-lavender">Search</button
|
||||
>
|
||||
</div>
|
||||
{#if searchLoading}
|
||||
Searching...
|
||||
{:else if searchResult?.hits.length > 0}
|
||||
<ul class="flex flex-col gap-2 mt-2">
|
||||
{#each searchResult?.hits ?? [] as hit}
|
||||
<li class="flex flex-row rounded bg-surface0 gap-2 p-1 w-md max-w-md min-w-md shadow">
|
||||
<img
|
||||
src={hit.icon_url}
|
||||
alt="{hit.title} icon"
|
||||
class="bg-surface1 h-16 w-16 rounded-lg"
|
||||
/>
|
||||
<div class="grow">
|
||||
<h1 class="text-lg">{hit.title}</h1>
|
||||
<p>{hit.description}</p>
|
||||
<button
|
||||
on:click={() => addMod(hit)}
|
||||
class="float-right bg-green text-crust p-1 rounded m-1"
|
||||
>
|
||||
<PlusIcon class="inline" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
{#if searchResult?.hits.length < searchResult?.total_hits}
|
||||
<li>
|
||||
<button
|
||||
on:click={searchMore}
|
||||
class="rounded w-full p-3 bg-surface0 hover:bg-surface1 outline-lavender"
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
</li>
|
||||
{:else if searchLoadingMore}
|
||||
Loading...
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
{:else if modalStatus == 'edit:simple'}
|
||||
{@const file = getFileFromPath(editPath, fileTree)}
|
||||
{#if file && file.inline && file.metafile}
|
||||
{@const parsed = toml.parse(file.content)}
|
||||
{JSON.stringify(parsed)}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
|
|||
27
src/routes/create/FileTree.svelte
Normal file
27
src/routes/create/FileTree.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import type { Folder } from '$lib/types';
|
||||
import { DownloadIcon, FileIcon, FolderIcon } from 'svelte-feather-icons';
|
||||
import FileTree from './FileTree.svelte';
|
||||
|
||||
export let tree: Folder;
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each Object.entries(tree.children) as item}
|
||||
<li class="ml-4">
|
||||
{#if item[1].type == 'file'}
|
||||
{#if item[1].inline && item[1].metafile}
|
||||
<DownloadIcon class="inline" />
|
||||
{item[0]}
|
||||
{:else}
|
||||
<FileIcon class="inline" />
|
||||
{item[0]}
|
||||
{/if}
|
||||
{:else}
|
||||
<FolderIcon class="inline" />
|
||||
{item[0]}
|
||||
<FileTree tree={item[1]} />
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -2,8 +2,15 @@
|
|||
import type { FileTree, File, Folder } from '$lib/types';
|
||||
import { metafileSchema } from '$lib/packwiz-types';
|
||||
import toml from '@ltd/j-toml';
|
||||
import { XIcon } from 'svelte-feather-icons';
|
||||
import {
|
||||
Edit3Icon,
|
||||
ExternalLinkIcon,
|
||||
MonitorIcon,
|
||||
ServerIcon,
|
||||
XIcon
|
||||
} from 'svelte-feather-icons';
|
||||
export let tree: Folder;
|
||||
export let editFile: (path: string[]) => void;
|
||||
function getFilesRecursively(tree: FileTree): [string[], File][] {
|
||||
if (tree.type == 'file') {
|
||||
return [[[], tree]];
|
||||
|
|
@ -32,29 +39,56 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
<ul class="flex flex-col gap-2 mt-2">
|
||||
{#each getFilesRecursively(tree) as mod (mod[0])}
|
||||
<li>
|
||||
<li class="flex flex-col rounded bg-surface0 gap-2 p-1 max-w-md shadow">
|
||||
{#if mod[1].inline && mod[1].metafile}
|
||||
{@const parsed = metafileSchema.parse(toml.parse(mod[1].content))}
|
||||
<h2>
|
||||
{parsed.name} ({mod[0].join('/')})
|
||||
<div class="flex flex-row items-end gap-1">
|
||||
<h2 class="text-lg">
|
||||
{parsed.name}
|
||||
</h2>
|
||||
<h3 class="text-sm">
|
||||
({mod[0].join('/')})
|
||||
</h3>
|
||||
<div class="grow" />
|
||||
{#if parsed.side == 'both' || parsed.side == 'client'}
|
||||
<MonitorIcon class="w-4 h-4 shrink-0" />
|
||||
{/if}
|
||||
{#if parsed.side == 'both' || parsed.side == 'server'}
|
||||
<ServerIcon class="w-4 h-4 shrink-0" />
|
||||
{/if}
|
||||
<button
|
||||
on:click={() => editFile(mod[0])}
|
||||
class="rounded w-6 h-6 bg-green outline-lavender flex justify-center items-center shrink-0"
|
||||
>
|
||||
<Edit3Icon class="w-4 h-4 text-crust" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
deletePath(mod[0], tree);
|
||||
tree = tree;
|
||||
}}><XIcon /></button
|
||||
}}
|
||||
class="rounded w-6 h-6 bg-red outline-lavender flex justify-center items-center shrink-0"
|
||||
>
|
||||
</h2>
|
||||
<XIcon class="w-4 h-4 text-crust" />
|
||||
</button>
|
||||
</div>
|
||||
{#if parsed.update.curseforge}
|
||||
<a
|
||||
href="https://minecraft.curseforge.com/projects/{parsed.update.curseforge[
|
||||
'project-id'
|
||||
]}">Curseforge</a
|
||||
]}"
|
||||
>
|
||||
Curseforge
|
||||
<ExternalLinkIcon class="inline" />
|
||||
</a>
|
||||
{/if}
|
||||
{#if parsed.update.modrinth}
|
||||
<a href="https://modrinth.com/project/{parsed.update.modrinth['mod-id']}">Modrinth</a>
|
||||
<a href="https://modrinth.com/project/{parsed.update.modrinth['mod-id']}">
|
||||
Modrinth
|
||||
<ExternalLinkIcon class="inline" />
|
||||
</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<h2>{mod[0].join('/')}</h2>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 633 KiB After Width: | Height: | Size: 285 KiB |
Loading…
Reference in a new issue