<script setup lang="tsx">
/** @jsxImportSource vue */
import { Ticker } from 'motion-plus-vue'
import { defineComponent } from 'vue'

const Box = defineComponent({
  props: {
    src: String,
    title: String,
  },
  setup(props) {
    return () => (
      <div class="item">
        <img
          src={`/photos/boxart/n64/${props.src}.jpg`}
          alt={`${props.title} boxart`}
          draggable={false}
        />
      </div>
    )
  },
})
</script>

<template>
  <div class="container">
    <Ticker
      axis="y"
      :hover-factor="0.5"
      class="ticker"
    >
      <Box
        src="mariokart64"
        title="Mario Kart 64"
      />
      <Box
        src="goldeneye"
        title="GoldenEye 007"
      />
      <Box
        src="mario64"
        title="Super Mario 64"
      />
    </Ticker>
    <Ticker
      axis="y"
      :hover-factor="0.5"
      :velocity="-50"
      class="ticker"
    >
      <Box
        src="majorasmask"
        title="Majora's Mask"
      />
      <Box
        src="perfectdark"
        title="Perfect Dark"
      />
      <Box
        src="goemon"
        title="Mythical Ninja"
      />
    </Ticker>
    <Ticker
      axis="y"
      :hover-factor="0.5"
      :velocity="70"
      class="ticker"
    >
      <Box
        src="ocarinaoftime"
        title="Zelda: Ocarina of Time"
      />
      <Box
        src="smashbros"
        title="Super Smash Bros"
      />
      <Box
        src="1080"
        title="1080 Snowboarding"
      />
    </Ticker>
  </div>
</template>

<style scoped>

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 60vh;
  transform: perspective(700px) rotateX(20deg);
}

.item {
  width: 180px;
  height: 255px;
  overflow: hidden;
  position: relative;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticker {
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  touch-action: none;
  user-select: none;
  max-height: 100%;
}
</style>