Skip to content

Commit

Permalink
migrate to luminescent ui pt3
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed Aug 25, 2024
1 parent cee772f commit 43b7d8e
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 63 deletions.
3 changes: 1 addition & 2 deletions src/routes/acornmc/vote/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { component$, useVisibleTask$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { LoadingIcon } from '@luminescent/ui-qwik';
import Background from '~/components/images/background.png?jsx';

export default component$(() => {
Expand All @@ -20,7 +19,7 @@ export default component$(() => {
</h1>
<h2 class="text-gray-400 text-base sm:text-2xl flex gap-2 items-center">
Opening Links
<LoadingIcon width={24} class={{ 'ml-2': true }} />
<div class={{ 'lum-loading ml-2 w-6 h-6': true }} />
</h2>
</section>
);
Expand Down
31 changes: 17 additions & 14 deletions src/routes/resources/animtexture/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { $, component$, useOn, useStore, useVisibleTask$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';

import { Button, ButtonAnchor, TextInput, Toggle } from '@luminescent/ui-qwik';
import { Toggle } from '@luminescent/ui-qwik';
import {
inlineTranslate,
useSpeak,
Expand Down Expand Up @@ -62,8 +62,10 @@ export default component$(() => {
{t('animtexture.subtitle@@Easily merge textures for resource pack animations')}
</h2>

<label for="fileInput">Select Frame(s) or a GIF</label><br />
<input id="fileInput" type="file" multiple accept="image/*" class="text-white text-xl file:bg-gray-600 file:hover:bg-gray-500 file:rounded-lg file:cursor-pointer file:px-4 file:py-2 file:mr-4 mt-2 text-transparent file:text-white file:text-lg file:border-none" />
<div class="flex flex-col gap-2">
<label for="fileInput">Select Frame(s) or a GIF</label>
<input id="fileInput" type="file" multiple accept="image/*" class="file:lum-btn rounded-lg file:cursor-pointer flex" />
</div>

<div id="imgs" class="flex flex-wrap max-h-[620px] overflow-auto my-4 gap-2">
{store.frames.map((frame, i) => (
Expand All @@ -74,15 +76,14 @@ export default component$(() => {
))}
</div>

<TextInput id="textureName" class={{ 'mb-3': true }} value={store.textureName} onInput$={(e, el) => { store.textureName = el.value; }}>
{t('animtexture.textureName@@Texture Name')}
</TextInput>
<label for="textureName">{t('animtexture.textureName@@Texture Name')}</label><br />
<input id="textureName" class={{ 'lum-input mb-3 mt-2': true }} value={store.textureName} onInput$={(e, el) => { store.textureName = el.value; }}/>

<Toggle id="Cumulative" checked={store.cumulative}
onChange$={(e, el) => { store.cumulative = el.checked; }}
label={t('animtexture.cumulative@@Cumulative (Turn this on if gif frames are broken)')} />

<Button class={{ 'my-6': true }} onClick$={() => {
<button class={{ 'lum-btn my-6': true }} onClick$={() => {
const canvas = document.getElementById('c') as HTMLCanvasElement;
canvas.classList.add('sm:flex');
const imglist = document.getElementById('imgs') as HTMLDivElement;
Expand Down Expand Up @@ -128,16 +129,18 @@ export default component$(() => {
links.className = 'inline';
}}>
{t('animtexture.generate@@Generate')}
</Button>
</button>

<div id="links" class="hidden">
<p class="mb-4">Animated Texture Generated Successfully!</p>
<ButtonAnchor id="pngd" class={{ 'mr-2': true }} href='/'>
{t('animtexture.downloadPNG@@Download PNG')}
</ButtonAnchor>
<ButtonAnchor id="mcmeta" target="_blank" href='data:text/plain;charset=utf-8,{"animation":{}}'>
{t('animtexture.downloadMCMETA@@Download MCMETA')}
</ButtonAnchor>
<div class="flex gap-2">
<a class="lum-btn" id="pngd" href='/'>
{t('animtexture.downloadPNG@@Download PNG')}
</a>
<a class="lum-btn" id="mcmeta" target="_blank" href='data:text/plain;charset=utf-8,{"animation":{}}'>
{t('animtexture.downloadMCMETA@@Download MCMETA')}
</a>
</div>
</div>

</div>
Expand Down
55 changes: 29 additions & 26 deletions src/routes/resources/flags/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable qwik/valid-lexical-scope */
import { component$, useStore, useTask$ } from '@builder.io/qwik';
import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';
import { Header, Dropdown, TextArea, TextInput, Toggle, DropdownRaw, ButtonAnchor } from '@luminescent/ui-qwik';
import { Dropdown, Toggle, DropdownRaw } from '@luminescent/ui-qwik';
import { CodeWorkingOutline, CubeOutline, HelpOutline, RefreshCircleOutline, TerminalOutline } from 'qwik-ionicons';
import { inlineTranslate, useSpeak } from 'qwik-speak';
import { getCookies, setCookies } from '~/components/util/SharedUtils';
Expand Down Expand Up @@ -140,7 +140,7 @@ export default component$(() => {
}, { deep: true });

useTask$(({ track }) => {
isBrowser && setCookies('parsed', store);
if (isBrowser) setCookies('parsed', store);
(Object.keys(store) as Array<keyof typeof store>).forEach((key) => {
track(() => store[key]);
});
Expand All @@ -158,14 +158,17 @@ export default component$(() => {

<div class="flex [&>*]:flex-1 flex-wrap gap-4 justify-between my-6 fill-current">
<div class="flex flex-col gap-4">
<TextInput id="input" value={store.fileName} placeholder="server.jar" onChange$={(e, el) => {
if (el.value.replace(/ /g, '') == '') return;
if (!el.value.endsWith('.jar')) { el.value += '.jar'; }
store.fileName = el.value;
}}>
<span class="font-bold">{t('flags.fileName.label@@File Name')}</span><br/>
{t('flags.fileName.description@@The name of the file that will be used to start your server.')}
</TextInput>
<div class="flex flex-col gap-1">
<label for="input">
<span class="font-bold">{t('flags.fileName.label@@File Name')}</span><br/>
{t('flags.fileName.description@@The name of the file that will be used to start your server.')}
</label>
<input class="lum-input" id="input" value={store.fileName} placeholder="server.jar" onChange$={(e, el) => {
if (el.value.replace(/ /g, '') == '') return;
if (!el.value.endsWith('.jar')) { el.value += '.jar'; }
store.fileName = el.value;
}}/>
</div>
<div class="flex gap-2">
<Dropdown id="os" class={{ 'w-full': true }} onChange$={(e, el) => {
store.operatingSystem = el.value;
Expand All @@ -186,8 +189,8 @@ export default component$(() => {
<div>
<span class="font-bold">{t('memory.label@@Memory')}</span><br/>
{t('flags.memory.description@@The amount of memory (RAM) to allocate to your server.')}
<div class="group relative w-full h-2 bg-gray-800 hover:bg-gray-700 select-none rounded-lg my-2">
<div class="h-2 bg-blue-800 group-hover:bg-blue-700 rounded-lg" style={{ width: `${store.memory / 32 * 100}%` }} />
<div class="group relative w-full h-2 lum-bg-gray-800 hover:lum-bg-gray-700 select-none rounded-lg my-2">
<div class="h-2 lum-bg-blue-800 group-hover:lum-bg-blue-700 rounded-lg" style={{ width: `${store.memory / 32 * 100}%` }} />
<div class="absolute w-full top-1 flex justify-between">
<span class="text-left">|</span>
<span class="text-center">|</span>
Expand All @@ -196,7 +199,7 @@ export default component$(() => {
<span class="text-right">|</span>
</div>
<div class="absolute -top-1 flex flex-col gap-4 items-center" style={{ left: `calc(${store.memory / 32 * 100}% - 48px)` }}>
<div class="w-4 h-4 bg-blue-700 group-hover:bg-blue-600 rounded-full" />
<div class="w-4 h-4 lum-bg-blue-700 group-hover:lum-bg-blue-600 rounded-full" />
<div class="opacity-0 group-hover:opacity-100 w-24 py-2 bg-gray-800 rounded-lg flex justify-center transition-all z-50">
{store.memory} GB
</div>
Expand All @@ -221,18 +224,18 @@ export default component$(() => {
<DropdownRaw id="flagshelp" onChange$={(e, el) => {
store.flags = el.value as keyof typeof flagTypes;
}} display={<><HelpOutline width={24}/></>}>
<ButtonAnchor q:slot='extra-buttons' transparent href="https://docs.papermc.io/paper/aikars-flags" target="_blank">
<a class="lum-btn lum-bg-transparent" q:slot='extra-buttons' href="https://docs.papermc.io/paper/aikars-flags" target="_blank">
Aikar's Flags
</ButtonAnchor>
<ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/brucethemoose/Minecraft-Performance-Flags-Benchmarks" target="_blank">
</a>
<a class="lum-btn lum-bg-transparent" href="https://github.com/brucethemoose/Minecraft-Performance-Flags-Benchmarks" target="_blank">
Benchmarked Flags
</ButtonAnchor>
<ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/hilltty/hilltty-flags/blob/main/english-lang.md" target="_blank">
</a>
<a class="lum-btn lum-bg-transparent" href="https://github.com/hilltty/hilltty-flags/blob/main/english-lang.md" target="_blank">
hilltty's Flags
</ButtonAnchor>
<ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/Obydux/Minecraft-GraalVM-Flags" target="_blank">
</a>
<a class="lum-btn lum-bg-transparent" href="https://github.com/Obydux/Minecraft-GraalVM-Flags" target="_blank">
Obydux's Flags
</ButtonAnchor>
</a>
</DropdownRaw>
</div>
<div class="flex flex-col gap-2">
Expand Down Expand Up @@ -265,11 +268,11 @@ export default component$(() => {
</div>

{/* charlimit={256} */}
<TextArea output class={{ 'h-96 mt-2': true }} id="Output" value={((p: any) => generateResult(p).script)(store)}>
<Header subheader={t('flags.script.description@@The resulting script that can be used to start your server. Place this file in the same location as {{fileName}}, then execute it!', { fileName: store.fileName })}>
{t('flags.script.label@@Script')}
</Header>
</TextArea>
<label for="Output" class="text-gray-50">
<span class="font-bold">{t('flags.script.label@@Script')}</span><br/>
{t('flags.script.description@@The resulting script that can be used to start your server. Place this file in the same location as {{fileName}}, then execute it!', { fileName: store.fileName })}
</label>
<textarea class={{ 'lum-input h-96 font-mono mt-2 w-full': true }} id="Output" value={((p: any) => generateResult(p).script)(store)}/>
</div>
</section>
);
Expand Down
23 changes: 12 additions & 11 deletions src/routes/resources/jars/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { component$, useStore, useSignal } from '@builder.io/qwik';
import { Card, Header, TextInput, ButtonAnchor, Button } from '@luminescent/ui-qwik';
import { CloseOutline } from 'qwik-ionicons';
import { Header } from '@luminescent/ui-qwik';
import { CloseOutline, DownloadOutline } from 'qwik-ionicons';

async function fetchLatestPurpurVersion() {
const response = await fetch('https://api.purpurmc.org/v2/purpur');
Expand Down Expand Up @@ -89,7 +89,8 @@ export default component$(() => {
<div class="w-full max-w-2xl flex flex-col items-center space-y-4 p-4">
<h1 class="text-3xl font-bold mb-4 text-center">Jarflop - The Minecraft Server Jar Hub!</h1>
<div class="w-full mb-6">
<TextInput
<input
class="lum-input w-full"
id="search-input"
placeholder="Search for a version..."
value={store.searchTerm}
Expand All @@ -103,7 +104,7 @@ export default component$(() => {
>
{filteredJars.length > 0 ? (
filteredJars.map((jar, index) => (
<Card key={index} hover="clickable" onClick$={async () => {
<button class="lum-card lum-bg-gray-800/40 hover:lum-bg-gray-800 w-full transition duration-1000 hover:duration-75 ease-out" key={index} onClick$={async () => {
try {
store.selectedJar = jar;
modalRef.value?.showModal();
Expand All @@ -121,26 +122,26 @@ export default component$(() => {
</Header>
</div>
</div>
</Card>
</button>
))
) : (
<p class="text-center text-gray-400">No results found. If you are wanting a new server jar added please contact us!</p>
)}
</div>
</div>
</div>
<dialog ref={modalRef} class="bg-gray-800 text-white p-6 rounded-lg shadow-lg relative max-w-lg w-full transform transition-transform duration-300 ease-out scale-100">
<dialog ref={modalRef} class="lum-bg-gray-800/20 lum-pad-equal-2xl shadow-lg backdrop-blur-xl rounded-lg relative max-w-lg w-full transform transition-transform duration-300 ease-out">
<div class="flex items-center mb-4">
<img src={store.selectedJar?.logo} alt={`${store.selectedJar?.name} logo`} class="w-12 h-12 mr-4" height="1" width="1"/>
<h2 class="text-2xl font-bold flex-1">{store.selectedJar?.name}</h2>
<Button square onClick$={() => modalRef.value?.close()}>
<button class="lum-btn lum-bg-transparent " onClick$={() => modalRef.value?.close()}>
<CloseOutline width="24" style={{ color: 'white' }} />
</Button>
</button>
</div>
<p class="mb-4">{store.selectedJar?.longDescription}</p>
<ButtonAnchor href={store.downloadLink}>
Download Latest Version
</ButtonAnchor>
<a class="lum-btn" href={store.downloadLink}>
<DownloadOutline width="24"/> Download Latest Version
</a>
</dialog>
</div>
);
Expand Down
9 changes: 4 additions & 5 deletions src/routes/resources/papertimings/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { component$, Resource } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { routeLoader$ } from '@builder.io/qwik-city';
import { ButtonAnchor, Card } from '@luminescent/ui-qwik';

import analyzeTimings from '~/analyze/functions/analyzeTimings';
import { collector } from '~/analyze/functions/collector';
Expand Down Expand Up @@ -31,19 +30,19 @@ export default component$(() => {
onResolved={(fields: Field[]) => <>
{fields.map((field: Field, i: number) => {
return (
<Card key={`field${i}`}>
<div class="lum-card" key={`field${i}`}>
<p class="text-white font-bold text-xl break-words">
{field.name.replace(/\./g, '\n> ')}
</p>
{field.value}
{field.buttons?.map((button: any, i2: number) => {
return (
<ButtonAnchor key={`button${i2}-${i}`} href={button.url}>
<a class="lum-btn" key={`button${i2}-${i}`} href={button.url}>
{button.text}
</ButtonAnchor>
</a>
);
})}
</Card>
</div>
);
})}
</>}
Expand Down
9 changes: 4 additions & 5 deletions src/routes/resources/sparkprofile/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { component$, Resource } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { routeLoader$ } from '@builder.io/qwik-city';
import { ButtonAnchor, Card } from '@luminescent/ui-qwik';

import analyzeProfile from '~/analyze/functions/analyzeProfile';
import { collector } from '~/analyze/functions/collector';
Expand Down Expand Up @@ -31,19 +30,19 @@ export default component$(() => {
onResolved={(fields: Field[]) => <>
{fields.map((field: Field, i: number) => {
return (
<Card key={`field${i}`}>
<div class="lum-card" key={`field${i}`}>
<p class="text-white font-bold text-xl break-words">
{field.name.replace(/\./g, '\n> ')}
</p>
{field.value}
{field.buttons?.map((button: any, i2: number) => {
return (
<ButtonAnchor key={`button${i2}-${i}`} href={button.url}>
<a class="lum-btn" key={`button${i2}-${i}`} href={button.url}>
{button.text}
</ButtonAnchor>
</a>
);
})}
</Card>
</div>
);
})}
</>}
Expand Down

0 comments on commit 43b7d8e

Please sign in to comment.