style: run format:apply
This commit is contained in:
+49
-35
@@ -1,44 +1,58 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useWebsocketStore } from "../store/useWebsocketStore";
|
||||
import styles from "../styles/AppContainer.module.css";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useWebsocketStore } from '../store/useWebsocketStore';
|
||||
import styles from '../styles/AppContainer.module.css';
|
||||
|
||||
export default function AppContainer({ children }: { children: React.ReactNode }) {
|
||||
const { connect, isConnected } = useWebsocketStore();
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
export default function AppContainer({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { connect, isConnected } = useWebsocketStore();
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
connect();
|
||||
useEffect(() => {
|
||||
connect();
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setShowHelp(true);
|
||||
}, 3000);
|
||||
const timer = setTimeout(() => {
|
||||
setShowHelp(true);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [connect]);
|
||||
return () => clearTimeout(timer);
|
||||
}, [connect]);
|
||||
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<div className={styles.overlay}>
|
||||
<div className={styles.card}>
|
||||
<h1 className={styles.title}>Hex: Unlocked</h1>
|
||||
<p className={styles.subtitle}>Awaiting unlocker connection</p>
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<div className={styles.overlay}>
|
||||
<div className={styles.card}>
|
||||
<h1 className={styles.title}>Hex: Unlocked</h1>
|
||||
<p className={styles.subtitle}>Awaiting unlocker connection</p>
|
||||
|
||||
<div className={styles.spinner}></div>
|
||||
<div className={styles.spinner}></div>
|
||||
|
||||
{showHelp && (
|
||||
<div className={styles.helpText}>
|
||||
<p style={{ marginBottom: '0.5rem' }}>Make sure the client is running.</p>
|
||||
<p>
|
||||
Don't have it? Download it <a href="https://git.neru.rip/neru/HexUnlocked" target="_blank" rel="noreferrer" className={styles.link}>here</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{showHelp && (
|
||||
<div className={styles.helpText}>
|
||||
<p style={{ marginBottom: '0.5rem' }}>
|
||||
Make sure the client is running.
|
||||
</p>
|
||||
<p>
|
||||
Don't have it? Download it{' '}
|
||||
<a
|
||||
href='https://git.neru.rip/neru/HexUnlocked'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
className={styles.link}
|
||||
>
|
||||
here
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
+77
-52
@@ -4,62 +4,87 @@ import { randInRange } from '@/lib/utils';
|
||||
import styles from '../styles/QuantityCard.module.css';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
name: string;
|
||||
iconUrl: string;
|
||||
qty: number;
|
||||
randMin: number;
|
||||
randMax: number;
|
||||
onSetQty: (id: string, qty: number) => void;
|
||||
id: string;
|
||||
name: string;
|
||||
iconUrl: string;
|
||||
qty: number;
|
||||
randMin: number;
|
||||
randMax: number;
|
||||
onSetQty: (id: string, qty: number) => void;
|
||||
};
|
||||
|
||||
const clamp = (v: number) => Math.min(32767, Math.max(0, v));
|
||||
|
||||
export default function QuantityCard({ id, name, iconUrl, qty, randMin, randMax, onSetQty }: Props) {
|
||||
const active = qty > 0;
|
||||
export default function QuantityCard({
|
||||
id,
|
||||
name,
|
||||
iconUrl,
|
||||
qty,
|
||||
randMin,
|
||||
randMax,
|
||||
onSetQty
|
||||
}: Props) {
|
||||
const active = qty > 0;
|
||||
|
||||
return (
|
||||
<div className={`${styles.card} ${active ? styles.cardActive : ''}`}>
|
||||
<img className={styles.icon} src={iconUrl} alt={name} loading="lazy" />
|
||||
<span className={styles.name}>{name}</span>
|
||||
return (
|
||||
<div className={`${styles.card} ${active ? styles.cardActive : ''}`}>
|
||||
<img className={styles.icon} src={iconUrl} alt={name} loading='lazy' />
|
||||
<span className={styles.name}>{name}</span>
|
||||
|
||||
{active ? (
|
||||
<>
|
||||
<div className={styles.qtyRow}>
|
||||
<button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty - 1))}>−</button>
|
||||
<input
|
||||
className={styles.qtyInput}
|
||||
type="number"
|
||||
value={qty}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={e => {
|
||||
const v = parseInt(e.target.value);
|
||||
if (!isNaN(v)) onSetQty(id, clamp(v));
|
||||
}}
|
||||
/>
|
||||
<button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty + 1))}>+</button>
|
||||
</div>
|
||||
{active ? (
|
||||
<>
|
||||
<div className={styles.qtyRow}>
|
||||
<button
|
||||
className={styles.qtyBtn}
|
||||
onClick={() => onSetQty(id, clamp(qty - 1))}
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
className={styles.qtyInput}
|
||||
type='number'
|
||||
value={qty}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={(e) => {
|
||||
const v = parseInt(e.target.value);
|
||||
if (!isNaN(v)) onSetQty(id, clamp(v));
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className={styles.qtyBtn}
|
||||
onClick={() => onSetQty(id, clamp(qty + 1))}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.quickRow}>
|
||||
<button className={styles.quickBtn} onClick={() => onSetQty(id, 100)}>100</button>
|
||||
<button
|
||||
className={`${styles.quickBtn} ${styles.quickBtnRand}`}
|
||||
onClick={() => onSetQty(id, randInRange(randMin, randMax))}
|
||||
>
|
||||
rand
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.quickBtn} ${styles.quickBtnRemove}`}
|
||||
onClick={() => onSetQty(id, 0)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>+ Add</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className={styles.quickRow}>
|
||||
<button
|
||||
className={styles.quickBtn}
|
||||
onClick={() => onSetQty(id, 100)}
|
||||
>
|
||||
100
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.quickBtn} ${styles.quickBtnRand}`}
|
||||
onClick={() => onSetQty(id, randInRange(randMin, randMax))}
|
||||
>
|
||||
rand
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.quickBtn} ${styles.quickBtnRemove}`}
|
||||
onClick={() => onSetQty(id, 0)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>
|
||||
+ Add
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+28
-18
@@ -1,24 +1,34 @@
|
||||
import Link from "next/link";
|
||||
import Link from 'next/link';
|
||||
|
||||
import styles from '../styles/Sidebar.module.css';
|
||||
|
||||
export default function Sidebar() {
|
||||
return (
|
||||
<aside className={styles.sidebar}>
|
||||
<h1 className={styles.title}>Hex: Unlocked</h1>
|
||||
return (
|
||||
<aside className={styles.sidebar}>
|
||||
<h1 className={styles.title}>Hex: Unlocked</h1>
|
||||
|
||||
<nav>
|
||||
<Link href="/" className={styles.navLink}>Dashboard</Link>
|
||||
<Link href="/characters" className={styles.navLink}>Characters</Link>
|
||||
<Link href="/customizations" className={styles.navLink}>Customizations</Link>
|
||||
<Link href="/items" className={styles.navLink}>Items, offerings & addons</Link>
|
||||
<Link href="/perks" className={styles.navLink}>Perks</Link>
|
||||
<Link href="/dlcs" className={styles.navLink}>DLCs</Link>
|
||||
</nav>
|
||||
<nav>
|
||||
<Link href='/' className={styles.navLink}>
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href='/characters' className={styles.navLink}>
|
||||
Characters
|
||||
</Link>
|
||||
<Link href='/customizations' className={styles.navLink}>
|
||||
Customizations
|
||||
</Link>
|
||||
<Link href='/items' className={styles.navLink}>
|
||||
Items, offerings & addons
|
||||
</Link>
|
||||
<Link href='/perks' className={styles.navLink}>
|
||||
Perks
|
||||
</Link>
|
||||
<Link href='/dlcs' className={styles.navLink}>
|
||||
DLCs
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button className={styles.syncButton}>
|
||||
Synchronize
|
||||
</button>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
<button className={styles.syncButton}>Synchronize</button>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user