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

const Box = defineComponent({
  props: {
    src: String,
    title: String,
    setCurrentItem: Function,
  },
  emits: ['update:currentItem'],
  setup(props, { emit }) {
    return () => (
      <div class="item">
        <motion.img
          src={`/photos/boxart/n64/${props.src}.jpg`}
          alt={`${props.title} boxart`}
          draggable={false}
          onViewportEnter={() => {
            emit('update:currentItem', props.title)
          }}
          whileInView={{}}
          inViewOptions={{ amount: 1 }}
        />
      </div>
    )
  },
})

const { scrollY } = useScroll()
const currentItem = ref('Mario Kart 64')
const reverseOffset = useTransform(() => scrollY.get() * -1)

const games = [
  { src: 'mariokart64', title: 'Mario Kart 64' },
  { src: 'goldeneye', title: 'GoldenEye 007' },
  { src: 'mario64', title: 'Super Mario 64' },
  { src: 'ocarinaoftime', title: 'Zelda: Ocarina of Time' },
  { src: 'smashbros', title: 'Super Smash Bros' },
  { src: '1080', title: '1080 Snowboarding' },
  { src: 'majorasmask', title: "Majora's Mask" },
  { src: 'perfectdark', title: 'Perfect Dark' },
  { src: 'goemon', title: 'Mythical Ninja' },
]
</script>

<template>
  <Ticker
    id="top-ticker"
    class="ticker"
    :style="{ position: 'fixed' }"
    :offset="scrollY"
  >
    <span>{{ currentItem }}</span>
  </Ticker>
  <Ticker
    id="bottom-ticker"
    class="ticker"
    :style="{ position: 'fixed' }"
    :offset="reverseOffset"
  >
    <span>{{ currentItem }}</span>
  </Ticker>
  <template v-for="game in games" :key="game.src">
    <Box
      :src="game.src"
      :title="game.title"
      @update:current-item="(item) => currentItem = item"
    />
  </template>
</template>

<style scoped>
.item {
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item img {
  width: 270px;
  height: 382.5px;
  object-fit: cover;
}

.ticker {
  position: fixed;
  left: 0;
  right: 0;
}

.ticker span {
  color: var(--background);
  -webkit-text-stroke: 1px #f5f5f5;
  text-stroke: 1px #f5f5f5;
  opacity: 0.5;
  font-size: 72px;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

#top-ticker {
  top: 80px;
}

#bottom-ticker {
  bottom: 80px;
}

@media (max-width: 768px) {
  .item img {
    width: 200px;
    height: 285px;
  }
}
</style>