d018002c3e
- Restructure sidebar: Start → Guide → Operations → Developers → Reference - Fix EN/RU sidebar order (Installation before Quickstart) - Expand troubleshooting with diagnostics commands and task-log triage - Improve quickstart with prerequisites, pitfalls, and contributor links - Expand installation docs with verification commands - Add cyberpunk hero theme to landing page - Add atomicFile utility with tests and stage-runtime script - Harden team provisioning with better error handling and progress output - Add cross-team communication, kanban, and workSync improvements
68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { HeroAgent, HeroAgentRole } from "~/data/heroScene";
|
|
|
|
const props = defineProps<{
|
|
agent: HeroAgent;
|
|
activeSender?: HeroAgentRole | null;
|
|
activeReceiver?: HeroAgentRole | "video" | null;
|
|
}>();
|
|
|
|
const isSender = computed(() => props.activeSender === props.agent.id);
|
|
const isReceiver = computed(() => props.activeReceiver === props.agent.id);
|
|
const imageLoading = computed(() => (props.agent.priority ? "eager" : "lazy"));
|
|
const imageFetchPriority = computed(() => (props.agent.priority ? "high" : "auto"));
|
|
|
|
const rootStyle = computed(() => ({
|
|
"--agent-x": String(props.agent.desktop.x),
|
|
"--agent-y": String(props.agent.desktop.y),
|
|
"--agent-scale": String(props.agent.desktop.scale),
|
|
"--agent-depth": String(props.agent.desktop.depth),
|
|
"--agent-tablet-x": String(props.agent.tablet.x),
|
|
"--agent-tablet-y": String(props.agent.tablet.y),
|
|
"--agent-tablet-scale": String(props.agent.tablet.scale),
|
|
"--agent-tablet-depth": String(props.agent.tablet.depth),
|
|
}));
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="cyber-agent"
|
|
:class="[
|
|
`cyber-agent--${agent.accent}`,
|
|
`cyber-agent--card-${agent.desktop.card}`,
|
|
{
|
|
'cyber-agent--sending': isSender,
|
|
'cyber-agent--receiving': isReceiver,
|
|
'cyber-agent--mobile-visible': agent.mobile.visible,
|
|
},
|
|
]"
|
|
:data-agent="agent.id"
|
|
:style="rootStyle"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="cyber-agent__float">
|
|
<div class="cyber-agent__contact" />
|
|
<img
|
|
class="cyber-agent__image"
|
|
:src="agent.asset"
|
|
alt=""
|
|
:loading="imageLoading"
|
|
:fetchpriority="imageFetchPriority"
|
|
decoding="async"
|
|
draggable="false"
|
|
>
|
|
<div class="cyber-agent__eyes" />
|
|
</div>
|
|
|
|
<div class="cyber-agent__card cyber-panel">
|
|
<div class="cyber-agent__label">{{ agent.label }}</div>
|
|
<ul class="cyber-agent__tasks">
|
|
<li v-for="task in agent.tasks" :key="task">{{ task }}</li>
|
|
</ul>
|
|
<div class="cyber-agent__status">
|
|
<span>Status:</span>
|
|
<strong>{{ agent.status }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|