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

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

<template>
  <Ticker
    drag="x"
    :offset="offset"
    :_dragX="offset"
    class="ticker"
  >
    <Box
      src="mariokart64"
      title="Mario Kart 64"
    />
    <Box
      src="goldeneye"
      title="GoldenEye 007"
    />
    <Box
      src="mario64"
      title="Super Mario 64"
    />
    <Box
      src="ocarinaoftime"
      title="Zelda: Ocarina of Time"
    />
    <Box
      src="smashbros"
      title="Super Smash Bros"
    />
    <Box
      src="1080"
      title="1080 Snowboarding"
    />
    <Box
      src="majorasmask"
      title="Majora's Mask"
    />
    <Box
      src="perfectdark"
      title="Perfect Dark"
    />
    <Box
      src="goemon"
      title="Mythical Ninja"
    />
  </Ticker>
</template>

<style scoped>

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

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

.ticker {
  mask-image: linear-gradient(to right, transparent 5%, black 10%, black 90%, transparent 95%);
  touch-action: none;
  user-select: none;
  max-width: 100%;
}
</style>