Voice Over Placement ​

<script setup>
import { ref } from 'vue'
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()

const placement = ref("top")
const align = ref("start")
</script>

<template>
  <StagePlaySpotlight>
    <h2>In which locations can the tooltip be positioned?</h2>
    <button @click="action('voiceOverPlacement')">Start</button>

    <StagePlayScene 
      :act-name="'voiceOverPlacement'"
      :scene="1"
      :allow-interact="true"
      :voice-over-auto-placement="false"
      :voice-over-placement="placement"
      :voice-over-align="align"
    >
      <div>
        <p>Placement:</p>
        <button @click="placement = 'top'">Top</button>
        <button @click="placement = 'bottom'">Bottom</button>
        <button @click="placement = 'right'">Right</button>
        <button @click="placement = 'left'">Left</button>
      </div>

      <div>
        <p>Align:</p>
        <button @click="align = 'start'">start</button>
        <button @click="align = 'center'">center</button>
        <button @click="align = 'end'">end</button>
      </div>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>

<script setup>
import { ref } from 'vue'
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()

const placement = ref("top")
const align = ref("start")
</script>

<template>
  <StagePlaySpotlight>
    <h2>In which locations can the tooltip be positioned?</h2>
    <button @click="action('voiceOverPlacement')">Start</button>

    <StagePlayScene 
      :act-name="'voiceOverPlacement'"
      :scene="1"
      :allow-interact="true"
      :voice-over-auto-placement="false"
      :voice-over-placement="placement"
      :voice-over-align="align"
    >
      <div>
        <p>Placement:</p>
        <button @click="placement = 'top'">Top</button>
        <button @click="placement = 'bottom'">Bottom</button>
        <button @click="placement = 'right'">Right</button>
        <button @click="placement = 'left'">Left</button>
      </div>

      <div>
        <p>Align:</p>
        <button @click="align = 'start'">start</button>
        <button @click="align = 'center'">center</button>
        <button @click="align = 'end'">end</button>
      </div>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>