lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

frontend: polish app launch and release experience

Browse Source
This commit is contained in:
archipelago
2026-06-11 00:24:40 -04:00
parent c393b96da3
commit 1a3d726eac
140 changed files with 5930 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/components/CompanionIntroOverlay.vue
+64 -33
View File
@@ -11,10 +11,18 @@
class="glass-card p-5 w-full max-w-sm relative z-10 mb-20 sm:mb-0"
@click.stop
>
<!-- Icon -->
<div class="flex justify-center mb-3">
<div class="w-12 h-12 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center">
<svg class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<button
type="button"
class="absolute right-3 top-3 h-8 w-8 rounded-full bg-white/5 border border-white/10 text-white/60 hover:text-white hover:bg-white/10 transition-colors"
aria-label="Close companion modal"
@click="dismiss"
>
&times;
</button>
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center flex-shrink-0">
<svg class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<rect x="3" y="7" width="18" height="11" rx="3" stroke-width="1.5" />
<rect x="7.5" y="10" width="2" height="5" rx="0.5" fill="currentColor" />
<rect x="6" y="11.5" width="5" height="2" rx="0.5" fill="currentColor" />
@@ -22,38 +30,44 @@
<circle cx="14" cy="13.5" r="1.2" fill="currentColor" />
</svg>
</div>
</div>
<h3 class="text-lg font-semibold text-white text-center mb-2">Remote Companion</h3>
<p class="text-sm text-white/60 text-center mb-4 leading-relaxed">
Control your node from another device. Install the
<span class="text-orange-400 font-medium">Archipelago</span>
companion app on your phone, connect to the same network, and use it as a
gamepad or keyboard.
</p>
<div class="flex flex-col gap-2 text-xs text-white/40">
<div class="flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">1</span>
<span>Install the APK on your phone</span>
</div>
<div class="flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">2</span>
<span>Enter your node address and password</span>
</div>
<div class="flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">3</span>
<span>Use D-pad &amp; buttons or keyboard to control apps</span>
<div class="min-w-0 flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Remote Companion</h3>
<p class="text-sm text-white/60 leading-relaxed">
Install the Archipelago companion app on your phone, scan the code, and connect to the same node.
</p>
</div>
</div>
<button
class="mt-4 w-full py-2.5 rounded-lg bg-orange-500/20 border border-orange-500/30
text-orange-400 text-sm font-medium hover:bg-orange-500/30 transition-colors"
@click="dismiss"
<div class="mb-4">
<a
:href="companionDownloadUrl"
class="md:hidden inline-flex w-full items-center justify-center rounded-lg bg-orange-500/20 border border-orange-500/30 px-4 py-2.5 text-sm font-medium text-orange-400 hover:bg-orange-500/30 transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Download companion app
</a>
<div class="hidden md:flex justify-center">
<div class="w-[128px] rounded-2xl border border-white/10 bg-white/[0.03] p-1 overflow-hidden">
<img
v-if="qrDataUrl"
:src="qrDataUrl"
alt="Companion app download QR code"
class="block w-full max-w-full h-auto rounded-lg bg-white"
/>
<div v-else class="w-full aspect-square rounded-lg bg-white/5"></div>
</div>
</div>
</div>
<a
:href="companionDownloadUrl"
class="hidden md:block w-full py-2.5 rounded-lg bg-orange-500/20 border border-orange-500/30 text-orange-400 text-sm font-medium hover:bg-orange-500/30 transition-colors text-center"
target="_blank"
rel="noopener noreferrer"
>
Got it
</button>
Download companion app
</a>
</div>
</div>
</Transition>
@@ -61,11 +75,15 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, watch } from 'vue'
import * as QRCode from 'qrcode'
const STORAGE_KEY = 'neode_companion_intro_seen'
const DEFAULT_DOWNLOAD_URL = '/packages/archipelago-companion.apk.zip'
const visible = ref(false)
const qrDataUrl = ref('')
const companionDownloadUrl = import.meta.env.VITE_COMPANION_APK_URL || DEFAULT_DOWNLOAD_URL
onMounted(() => {
try {
@@ -78,6 +96,19 @@ onMounted(() => {
}
})
watch(visible, async (isVisible) => {
if (!isVisible) return
qrDataUrl.value = await QRCode.toDataURL(companionDownloadUrl, {
width: 112,
margin: 1,
errorCorrectionLevel: 'M',
color: {
dark: '#111111',
light: '#ffffff',
},
})
}, { immediate: true, flush: 'post' })
function dismiss() {
visible.value = false
try {