82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<Transition name="companion-fade">
|
||
|
|
<div
|
||
|
|
v-if="companionActive"
|
||
|
|
class="companion-indicator"
|
||
|
|
title="Companion app connected"
|
||
|
|
>
|
||
|
|
<!-- Wire going down off-screen -->
|
||
|
|
<div class="companion-wire" />
|
||
|
|
|
||
|
|
<!-- Gamepad body -->
|
||
|
|
<div class="companion-pad" :class="{ 'input-flash': companionInputActive }">
|
||
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
|
|
<!-- Controller body -->
|
||
|
|
<rect x="3" y="7" width="18" height="11" rx="3" stroke="currentColor" stroke-width="1.5" />
|
||
|
|
<!-- D-pad vertical -->
|
||
|
|
<rect x="7.5" y="10" width="2" height="5" rx="0.5" fill="currentColor" />
|
||
|
|
<!-- D-pad horizontal -->
|
||
|
|
<rect x="6" y="11.5" width="5" height="2" rx="0.5" fill="currentColor" />
|
||
|
|
<!-- A button -->
|
||
|
|
<circle cx="16" cy="11" r="1.2" fill="currentColor" />
|
||
|
|
<!-- B button -->
|
||
|
|
<circle cx="14" cy="13.5" r="1.2" fill="currentColor" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { companionActive, companionInputActive } from '@/api/remote-relay'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.companion-indicator {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
right: 24px;
|
||
|
|
z-index: 9998;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.companion-pad {
|
||
|
|
color: rgba(247, 147, 26, 0.7);
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
border: 1px solid rgba(247, 147, 26, 0.3);
|
||
|
|
border-bottom: none;
|
||
|
|
border-radius: 8px 8px 0 0;
|
||
|
|
padding: 6px 10px 4px;
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
-webkit-backdrop-filter: blur(8px);
|
||
|
|
transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.companion-pad.input-flash {
|
||
|
|
color: rgba(247, 147, 26, 1);
|
||
|
|
border-color: rgba(247, 147, 26, 0.6);
|
||
|
|
box-shadow: 0 0 12px rgba(247, 147, 26, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.companion-wire {
|
||
|
|
width: 2px;
|
||
|
|
height: 20px;
|
||
|
|
background: linear-gradient(to bottom, rgba(247, 147, 26, 0.5), rgba(247, 147, 26, 0.15));
|
||
|
|
border-radius: 1px;
|
||
|
|
order: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.companion-pad {
|
||
|
|
order: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Fade transition */
|
||
|
|
.companion-fade-enter-active { transition: opacity 0.4s ease, transform 0.4s ease; }
|
||
|
|
.companion-fade-leave-active { transition: opacity 0.3s ease, transform 0.3s ease; }
|
||
|
|
.companion-fade-enter-from { opacity: 0; transform: translateY(20px); }
|
||
|
|
.companion-fade-leave-to { opacity: 0; transform: translateY(20px); }
|
||
|
|
</style>
|