Files
MewoLab_AquaDX/AquaNet/src/pages/Home/SetupInstructions.svelte
T
2024-03-06 00:21:27 -05:00

106 lines
2.8 KiB
Svelte

<!-- Svelte 4.2.11 -->
<script lang="ts">
import { fade, slide } from "svelte/transition";
import { USER } from "../../libs/sdk";
import type { UserMe } from "../../libs/generalTypes";
import { codeToHtml } from 'shiki'
import { AQUA_CONNECTION, DISCORD_INVITE, FADE_IN, FADE_OUT } from "../../libs/config";
let user: UserMe
let keychip: string;
let keychipCode: string;
let getStartedRequesting = false;
USER.me().then((u) => {
user = u;
});
function getStarted() {
if (getStartedRequesting) return;
getStartedRequesting = true;
USER.keychip().then(k => {
getStartedRequesting = false;
keychip = k;
codeToHtml(`
[dns]
default=${AQUA_CONNECTION}
[keychip]
enable=1
; This is your unique keychip, do not share it with anyone
id=${keychip.slice(0, 4)}-${keychip.slice(4)}1337`.trim(), {
lang: 'ini',
theme: 'rose-pine',
}).then((html) => {
keychipCode = html;
});
});
}
</script>
<div class="setup-instructions">
<h2>Setup Connection</h2>
<p>
Welcome! If you own an arcade cabinet or game setup,
please follow the instructions below to set up the connection with AquaDX.
</p>
<blockquote>
We assume that you already have the required files and can run the game (e.g. ROM and segatools)
that come with the cabinet or game setup.
If not, please contact the seller of your device for the required files, as we will not provide them for copyright reasons.
</blockquote>
{#if user}
<div transition:slide>
{#if !keychip && !keychipCode}
<div class="no-margin" out:fade={FADE_OUT}>
<button class="emp" on:click={getStarted}>Get started</button>
</div>
{:else}
<div class="no-margin" in:fade={FADE_IN}>
<p>
Please edit your segatools.ini file and modify the following lines:
</p>
<div class="code">
{@html keychipCode}
</div>
<p>
Then, after you restart the game, you should be able to connect to AquaDX. Please verify that the network tests are all GOOD in the test menu.
</p>
<p>
If you have any questions, please ask in our <a href={DISCORD_INVITE}>Discord server</a>.
</p>
</div>
{/if}
</div>
{:else}
<p>Loading...</p>
{/if}
</div>
<style lang="sass">
.code
overflow-x: auto
:global(pre.shiki)
background-color: transparent !important
:global(code)
counter-reset: step
counter-increment: step 0
:global(code .line::before)
content: counter(step)
counter-increment: step
width: 1rem
margin-right: 1.5rem
display: inline-block
text-align: right
color: rgba(115,138,148,.4)
</style>