@kennofizet/rewardplay-frontend 1.0.2 → 1.0.4

package/src/components/CustomSelect.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="custom-select" :class="{ 'is-open': isOpen, 'is-disabled': disabled }" ref="dropdownRef">
+    <div 
+      class="select-trigger" 
+      @click="toggleDropdown"
+      :class="triggerClass"
+    >
+      <span class="select-value">{{ displayValue }}</span>
+      <span class="select-arrow" :class="{ 'rotated': isOpen }">▼</span>
+    </div>
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="select-dropdown">
+        <div 
+          v-for="option in options" 
+          :key="option.value"
+          class="select-option"
+          :class="{ 'is-selected': modelValue === option.value, 'is-disabled': option.disabled }"
+          @click="selectOption(option)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  options: {
+    type: Array,
+    required: true,
+    validator: (options) => {
+      return options.every(opt => opt.hasOwnProperty('value') && opt.hasOwnProperty('label'))
+    }
+  },
+  placeholder: {
+    type: String,
+    default: 'Select...'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  triggerClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const isOpen = ref(false)
+const dropdownRef = ref(null)
+
+const displayValue = computed(() => {
+  if (!props.modelValue) {
+    return props.placeholder
+  }
+  const selectedOption = props.options.find(opt => opt.value === props.modelValue)
+  return selectedOption ? selectedOption.label : props.placeholder
+})
+
+const toggleDropdown = () => {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+}
+
+const selectOption = (option) => {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  emit('change', option.value)
+  isOpen.value = false
+}
+
+const handleClickOutside = (event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.custom-select {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: #fff;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.custom-select.is-disabled .select-trigger {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.select-trigger:hover:not(.is-disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.custom-select.is-open .select-trigger {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.select-value {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-arrow {
+  margin-left: 8px;
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.8);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.select-arrow.rotated {
+  transform: rotate(180deg);
+}
+
+.select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #253344;
+  border: 1px solid #1a2332;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 4px;
+}
+
+.select-option {
+  padding: 10px 12px;
+  color: #d0d4d6;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.select-option:hover:not(.is-disabled) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.select-option.is-selected {
+  background: rgba(246, 169, 1, 0.2);
+  color: #f6a901;
+  font-weight: 500;
+}
+
+.select-option.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Dropdown transition */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* Scrollbar styling */
+.select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+
+.select-dropdown::-webkit-scrollbar-track {
+  background: #1a2332;
+  border-radius: 3px;
+}
+
+.select-dropdown::-webkit-scrollbar-thumb {
+  background: #253344;
+  border-radius: 3px;
+}
+
+.select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: #2d3a4b;
+}
+</style>

package/src/components/LoadingSource.vue

@@ -37,9 +37,37 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  userDataProgress: {
+    type: Number,
+    default: 0
+  },
   backgroundImage: {
     type: String,
     default: null
+  },
+  loadingTitle: {
+    type: String,
+    default: 'LOADING'
+  },
+  loadingSubtitle: {
+    type: String,
+    default: 'Preparing your gaming experience...'
+  },
+  loadingLabels: {
+    type: Object,
+    default: () => ({
+      assets: 'Loading Assets',
+      unzipping: 'Unzipping Files',
+      userData: 'Load Data User'
+    })
+  },
+  loadingSubTexts: {
+    type: Object,
+    default: () => ({
+      assets: '',
+      unzipping: '',
+      userData: ''
+    })
   }
 })
 
@@ -155,7 +183,8 @@ const updateCanvas = () => {
   ctx.font = 'bold 48px Arial, sans-serif'
   ctx.textAlign = 'center'
   ctx.textBaseline = 'middle'
-  ctx.fillText('LOADING', width / 2, titleY)
+  const loadingTitle = props.loadingTitle
+  ctx.fillText(loadingTitle, width / 2, titleY)
   
   // Reset shadow
   ctx.shadowBlur = 0
@@ -163,11 +192,12 @@ const updateCanvas = () => {
   // Draw subtitle
   ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
   ctx.font = '18px Arial, sans-serif'
-  ctx.fillText('Preparing your gaming experience...', width / 2, titleY + 50)
+  const loadingSubtitle = props.loadingSubtitle
+  ctx.fillText(loadingSubtitle, width / 2, titleY + 50)
 
   // Draw main loading bar with chunky game-like style
-  // Calculate total progress as average of Loading Assets and Unzipping Files
-  const totalProgress = (props.loadingProgress + props.unzipProgress) / 2
+  // Calculate total progress as average of Loading Assets, Unzipping Files, and Load Data User
+  const totalProgress = (props.loadingProgress + props.unzipProgress + props.userDataProgress) / 3
   const barWidth = width * 0.65
   const barHeight = 35
   const barX = (width - barWidth) / 2
@@ -262,12 +292,25 @@ const updateCanvas = () => {
 
   // Draw progress items with better styling
   const progressItems = [
-    { label: 'Loading Assets', progress: Math.min(props.loadingProgress, 100) },
-    { label: 'Unzipping Files', progress: Math.min(props.unzipProgress, 100) }
+    { 
+      label: props.loadingLabels.assets, 
+      progress: Math.min(props.loadingProgress, 100),
+      subText: props.loadingSubTexts.assets || ''
+    },
+    { 
+      label: props.loadingLabels.unzipping, 
+      progress: Math.min(props.unzipProgress, 100),
+      subText: props.loadingSubTexts.unzipping || ''
+    },
+    { 
+      label: props.loadingLabels.userData, 
+      progress: Math.min(props.userDataProgress, 100),
+      subText: props.loadingSubTexts.userData || ''
+    }
   ]
 
   const startY = height * 0.68
-  const itemHeight = 30
+  const itemHeight = 40 // Increased to accommodate sub-text
   const spacing = 12
 
   progressItems.forEach((item, index) => {
@@ -300,10 +343,30 @@ const updateCanvas = () => {
     ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'
     ctx.textAlign = 'right'
     ctx.fillText(`${Math.round(item.progress)}%`, itemBarX + itemBarWidth, y - 5)
+    
+    // Sub-text under progress bar
+    if (item.subText) {
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
+      ctx.font = '12px Arial, sans-serif'
+      ctx.textAlign = 'left'
+      ctx.textBaseline = 'top'
+      // Truncate long text
+      const maxWidth = itemBarWidth - 10
+      let displayText = item.subText
+      const metrics = ctx.measureText(displayText)
+      if (metrics.width > maxWidth) {
+        // Truncate with ellipsis
+        while (ctx.measureText(displayText + '...').width > maxWidth && displayText.length > 0) {
+          displayText = displayText.slice(0, -1)
+        }
+        displayText = displayText + '...'
+      }
+      ctx.fillText(displayText, itemBarX, y + 12)
+    }
   })
 
   // Check if loading is complete
-  if (props.loadingProgress >= 100 && props.unzipProgress >= 100) {
+  if (props.loadingProgress >= 100 && props.unzipProgress >= 100 && props.userDataProgress >= 100) {
     emit('loading-complete')
   }
 }
@@ -325,7 +388,7 @@ const handleResize = () => {
   })
 }
 
-watch([() => props.isLoading, () => props.loadingProgress, () => props.unzipProgress], () => {
+watch([() => props.isLoading, () => props.loadingProgress, () => props.unzipProgress, () => props.userDataProgress], () => {
   if (props.isLoading) {
     nextTick(() => {
       if (animationFrameId) {

package/src/components/LoginScreen.vue

@@ -30,7 +30,8 @@ const emit = defineEmits(['login-success', 'login-failed'])
 const gameApi = inject('gameApi')
 const canvasRef = ref(null)
 const error = ref(null)
-const errorType = ref(null) // 'no-api', 'invalid-token', 'connection-failed', 'server-error'
+const errorType = ref(null) // 'no-api', 'invalid-token', 'connection-failed', 'server-error', 'no-zone'
+const errorMessage = ref(null) // Custom error message to display
 const status = ref('checking') // 'checking', 'success', 'error'
 let animationFrameId = null
 let pulseAnimation = 0
@@ -67,6 +68,10 @@ const drawContent = (ctx, width, height) => {
     drawCheckingAnimation(ctx, centerX, centerY, width, height)
   } else if (status.value === 'error') {
     drawErrorIcon(ctx, centerX, centerY, width, height)
+    // Draw error message if available
+    if (errorMessage.value) {
+      drawErrorMessage(ctx, centerX, centerY + Math.min(width, height) * 0.15, width, height)
+    }
   } else if (status.value === 'success') {
     drawSuccessIcon(ctx, centerX, centerY, width, height)
   }
@@ -172,6 +177,8 @@ const drawErrorIcon = (ctx, centerX, centerY, width, height) => {
     drawConnectionError(ctx, centerX, centerY + size * 1.2, width, height)
   } else if (errorType.value === 'server-error') {
     drawServerError(ctx, centerX, centerY + size * 1.2, width, height)
+  } else if (errorType.value === 'no-zone') {
+    drawNoZoneError(ctx, centerX, centerY + size * 1.2, width, height)
   } else {
     drawGenericError(ctx, centerX, centerY + size * 1.2, width, height)
   }
@@ -426,6 +433,91 @@ const drawGenericError = (ctx, centerX, centerY, width, height) => {
   }
 }
 
+const drawNoZoneError = (ctx, centerX, centerY, width, height) => {
+  const iconSize = Math.min(width, height) * 0.08
+  
+  // Draw zone/server icon with X mark
+  ctx.strokeStyle = '#ff6666'
+  ctx.fillStyle = '#ff6666'
+  ctx.lineWidth = iconSize * 0.12
+  ctx.lineCap = 'round'
+  
+  // Draw server/zone box
+  const boxX = centerX - iconSize * 0.4
+  const boxY = centerY - iconSize * 0.3
+  const boxWidth = iconSize * 0.8
+  const boxHeight = iconSize * 0.6
+  
+  ctx.strokeRect(boxX, boxY, boxWidth, boxHeight)
+  
+  // Draw X mark over the box
+  ctx.strokeStyle = '#ff0000'
+  ctx.lineWidth = iconSize * 0.15
+  const xSize = iconSize * 0.5
+  
+  ctx.beginPath()
+  ctx.moveTo(boxX + boxWidth * 0.2, boxY + boxHeight * 0.2)
+  ctx.lineTo(boxX + boxWidth * 0.8, boxY + boxHeight * 0.8)
+  ctx.stroke()
+  
+  ctx.beginPath()
+  ctx.moveTo(boxX + boxWidth * 0.8, boxY + boxHeight * 0.2)
+  ctx.lineTo(boxX + boxWidth * 0.2, boxY + boxHeight * 0.8)
+  ctx.stroke()
+}
+
+const drawErrorMessage = (ctx, centerX, centerY, width, height) => {
+  if (!errorMessage.value) return
+  
+  ctx.save()
+  ctx.fillStyle = '#ffffff'
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'
+  ctx.lineWidth = 2
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  
+  // Calculate font size based on screen size
+  const fontSize = Math.min(width, height) * 0.025
+  ctx.font = `bold ${fontSize}px Arial, sans-serif`
+  
+  // Draw text with outline for better visibility
+  const text = errorMessage.value
+  const maxWidth = width * 0.8
+  const words = text.split(' ')
+  const lines = []
+  let currentLine = ''
+  
+  // Word wrap
+  words.forEach(word => {
+    const testLine = currentLine + (currentLine ? ' ' : '') + word
+    const metrics = ctx.measureText(testLine)
+    if (metrics.width > maxWidth && currentLine) {
+      lines.push(currentLine)
+      currentLine = word
+    } else {
+      currentLine = testLine
+    }
+  })
+  if (currentLine) {
+    lines.push(currentLine)
+  }
+  
+  // Draw each line
+  const lineHeight = fontSize * 1.4
+  const startY = centerY - ((lines.length - 1) * lineHeight) / 2
+  
+  lines.forEach((line, index) => {
+    const y = startY + index * lineHeight
+    
+    // Draw text outline (shadow)
+    ctx.strokeText(line, centerX, y)
+    // Draw text
+    ctx.fillText(line, centerX, y)
+  })
+  
+  ctx.restore()
+}
+
 const drawSuccessIcon = (ctx, centerX, centerY, width, height) => {
   const size = Math.min(width, height) * 0.15
   const x = centerX
@@ -498,11 +590,14 @@ const animate = () => {
   }
 }
 
+const translator = inject('translator', null)
+const t = translator || ((key) => key)
+
 const checkUser = async () => {
   if (!gameApi) {
     status.value = 'error'
     errorType.value = 'no-api'
-    emit('login-failed', 'API not available')
+    emit('login-failed', t('component.login.apiNotAvailable'))
     return
   }
 
@@ -514,16 +609,15 @@ const checkUser = async () => {
     
     if (response.data.success) {
       status.value = 'success'
+      // Determine is_manager flag from response (if present)
+      const isManager = !!(response.data?.datas?.is_manager)
       // Wait a moment to show success icon
       setTimeout(() => {
-        emit('login-success', {
-          ...response.data.user,
-          imagesUrl: response.data.images_url || ''
-        })
+        emit('login-success', { is_manager: isManager })
       }, 500)
     } else {
       status.value = 'error'
-      const errorMsg = response.data.error || 'Authentication failed'
+      const errorMsg = response.data.message || t('component.login.authenticationFailed')
       
       // Determine error type
       if (errorMsg.toLowerCase().includes('token') || errorMsg.toLowerCase().includes('invalid')) {
@@ -538,20 +632,32 @@ const checkUser = async () => {
     }
   } catch (err) {
     status.value = 'error'
-    const errorMessage = err.response?.data?.error || err.message || 'Connection failed'
+    const errorMsg = err.response?.data?.message || err.message || t('component.login.connectionFailed')
+    
+    // Handle 403 error specifically
+    if (err.response?.status === 403) {
+      errorType.value = 'no-zone'
+      errorMessage.value = 'User not in any zone or not managing any server'
+      emit('login-failed', errorMessage.value)
+      return
+    }
     
-    // Determine error type
-    if (err.code === 'ECONNREFUSED' || err.message.includes('Network') || errorMessage.includes('Connection')) {
+    // Determine error type for other errors
+    if (err.code === 'ECONNREFUSED' || err.message.includes('Network') || errorMsg.includes('Connection')) {
       errorType.value = 'connection-failed'
+      errorMessage.value = null
     } else if (err.response?.status >= 500) {
       errorType.value = 'server-error'
-    } else if (err.response?.status === 401 || errorMessage.includes('token') || errorMessage.includes('Invalid')) {
+      errorMessage.value = null
+    } else if (err.response?.status === 401 || errorMsg.includes('token') || errorMsg.includes('Invalid')) {
       errorType.value = 'invalid-token'
+      errorMessage.value = null
     } else {
       errorType.value = 'generic'
+      errorMessage.value = null
     }
     
-    emit('login-failed', errorMessage)
+    emit('login-failed', errorMsg)
   }
 }
 
@@ -564,6 +670,7 @@ watch(() => props.showLogin, (newVal) => {
       status.value = 'checking'
       error.value = null
       errorType.value = null
+      errorMessage.value = null
       pulseAnimation = 0
       errorAnimation = 0
       animate()
@@ -583,7 +690,6 @@ onMounted(() => {
   if (props.showLogin) {
     nextTick(() => {
       animate()
-      checkUser()
     })
   }
 })

package/src/components/MainGame.vue

@@ -1,30 +1,42 @@
 <template>
   <GameLayout 
     :rotate="rotate"
+    :is-manager="isManager"
     @page-change="handlePageChange"
     @icon-click="handleIconClick"
   >
     <component :is="currentPage" />
+    <template #overlay>
+      <EventsPopup
+        v-if="showEventsPopup && activeEvents.length > 0"
+        :events="activeEvents"
+        @close="showEventsPopup = false"
+      />
+    </template>
   </GameLayout>
 </template>
 
 <script setup>
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, onMounted, inject } from 'vue'
 import GameLayout from './game/GameLayout.vue'
+import EventsPopup from './game/EventsPopup.vue'
 import DailyRewardPage from '../pages/game/DailyRewardPage.vue'
 import BagGearPage from '../pages/game/BagGearPage.vue'
 import LuckyWheelPage from '../pages/game/LuckyWheelPage.vue'
-import RankingCoinPage from '../pages/game/RankingCoinPage.vue'
+import RankingPage from '../pages/game/RankingPage.vue'
 import RulesPage from '../pages/game/RulesPage.vue'
+import ShopPage from '../pages/game/ShopPage.vue'
+import ComingSoonPage from '../pages/ComingSoonPage.vue'
+import ManageSettingPage from '../pages/game/ManageSettingPage.vue'
 
 const props = defineProps({
-  imagesUrl: {
-    type: String,
-    default: ''
-  },
   rotate: {
     type: Boolean,
     default: true
+  },
+  isManager: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -32,19 +44,37 @@ const pageMap = {
   'reward': DailyRewardPage,
   'bag': BagGearPage,
   'lucky-wheel': LuckyWheelPage,
-  'ranking': RankingCoinPage,
-  'rules': RulesPage,
-  'shop': () => import('../pages/game/ShopPage.vue').catch(() => ({ default: () => null }))
+  'ranking': RankingPage,
+  'rules': ComingSoonPage,
+  'shop': ShopPage,
+  'manage-setting': ManageSettingPage
 }
 
 const currentPage = shallowRef(DailyRewardPage) // Default to DailyReward
+const showEventsPopup = ref(false)
+const activeEvents = ref([])
+const gameApi = inject('gameApi', null)
+
+onMounted(async () => {
+  if (gameApi) {
+    try {
+      const res = await gameApi.getPlayerEvents()
+      const list = res?.data?.datas?.events ?? []
+      activeEvents.value = Array.isArray(list) ? list : []
+      if (activeEvents.value.length > 0) {
+        showEventsPopup.value = true
+      }
+    } catch (e) {
+      activeEvents.value = []
+    }
+  }
+})
 
 const handlePageChange = (page) => {
   if (page === 'back') {
     // Handle back navigation
     return
   }
-  
   if (pageMap[page]) {
     const pageComponent = pageMap[page]
     if (typeof pageComponent === 'function') {
@@ -60,7 +90,6 @@ const handlePageChange = (page) => {
 
 const handleIconClick = (icon) => {
   // Handle icon clicks (notifications, settings, etc.)
-  console.log('Icon clicked:', icon)
 }
 </script>