<script setup lang="ts">
import { $getWechat } from "@/commons/utils.ts";
import { onMounted, ref } from "vue";

defineProps<{
  imageUrls: Record<string, string>;
  userJoinStatus: boolean;
}>();

defineEmits<{
  touchGameRule: [];
}>();

const nickname = ref("");
const avatar = ref("");
onMounted(() => {
  const wechat = $getWechat();
  nickname.value = wechat.nickname;
  avatar.value = wechat.avatar;
});
</script>

<template>
  <div class="h5-page game-stage">
    <div class="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
    <div class="img-logo"></div>
    <div class="img-title"></div>
    <div class="img-title2"></div>
    <div class="img-gift"></div>
    <div class="img-user-bg"></div>
    <div
      class="img-avatar"
      :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"
    ></div>
    <div class="txt-nickname">{{ nickname }}</div>
    <div class="txt-loading">
      <label v-if="userJoinStatus">您已成功加入游戏等待主持人开始</label>
      <label v-else>正在加入游戏...</label>
    </div>
    <div class="img-start-bg"></div>
  </div>
</template>

<style scoped>
.game-stage {
  position: absolute;
  width: 750px;
  height: 1624px;
  padding: 0;
}

.game-desc {
  position: absolute;
  top: 40%;
  left: var(--stage-viewport-left, 0);
  display: flex;
  width: 58px;
  height: 158px;
  padding-top: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 0 12px 12px 0;
  background: rgba(40, 12, 8, 0.52);
  color: rgba(255, 255, 255, 0.9);
  font-size: 25px;
  letter-spacing: 10px;
  line-height: 1.25;
  text-align: center;
  text-orientation: upright;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}

.bg-bottom {
  position: absolute;
  bottom: 0;
  left: var(--stage-viewport-left, 0);
  width: var(--stage-viewport-width, 750px);
  height: 479px;
  background: v-bind("imageUrls.bg2") center/cover;
  opacity: 0.6;
}

.img-logo {
  position: absolute;
  top: 66px;
  left: 50%;
  width: 428px;
  height: 77px;
  background: v-bind("imageUrls.logo") center/cover;
  transform: translateX(-50%);
}

.img-title {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 609px;
  height: 87.04px;
  background: v-bind("imageUrls.title") center/cover;
  transform: translateX(-50%);
}
.img-title2 {
  position: absolute;
  top: 290px;
  left: 50%;
  width: 491.77px;
  height: 200px;
  background: v-bind("imageUrls.title2") center/cover;
  transform: translateX(-50%);
}
.img-gift {
  position: absolute;
  top: 421px;
  right: -10px;
  right: -10%;
  width: 234.1px;
  height: 142.21px;
  background: v-bind("imageUrls.gift") center/cover;
}

.img-user-bg {
  position: absolute;
  top: 600px;
  left: 50%;
  width: 447px;
  height: 287.5px;
  background: v-bind("imageUrls.userBg") center/cover no-repeat;
  transform: translateX(-50%);
}
.img-avatar {
  position: absolute;
  top: 524px;
  left: 50%;
  transform: translateX(-50%);
}
.txt-nickname {
  position: absolute;
  top: 668px;
  left: 50%;
  color: #e00000;
  font-size: 25pt;
  font-weight: bold;
  transform: translateX(-50%);
}

.txt-loading {
  position: absolute;
  top: 743px;
  left: 50%;
  width: 288px;
  color: #e00000;
  font-size: 25pt;
  font-weight: bold;
  text-align: center;
  transform: translateX(-50%);
}

.img-start-bg {
  position: absolute;
  bottom: 291px;
  left: 50%;
  width: 500px;
  height: 90px;
  background: v-bind("imageUrls.startBg") center/cover no-repeat;
  transform: translateX(-50%);
}

.txt-loading label {
  display: inline-block;
  transform-origin: center;
  animation: loading-text-scale 1.2s ease-in-out infinite;
}

@keyframes loading-text-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.loading-gu {
  position: absolute;
  bottom: 100px;
  left: 50%;
  width: 600px;
  height: 534px;
  background: v-bind("imageUrls.gu") center/cover;
  transform: translateX(-50%);
}
</style>
