@kennofizet/rewardplay-frontend 1.0.2 → 1.0.4

package/README.md

@@ -1,63 +1,131 @@
-# RewardPlay Frontend Package
+# @kennofizet/rewardplay-frontend
 
-Vue.js 3 component library for RewardPlay game interface.
+Vue 3 frontend package for **RewardPlay**: game UI (bag, shop, daily reward, ranking, settings) that talks to the RewardPlay backend API.
 
-## Installation
+## What This Package Is
 
-**Important:** This package is part of an npm workspace. Dependencies are installed at the **root level**, not in this directory.
+- **Vue 3 component library** for the RewardPlay game interface (login, loading, bag/gear, shop, daily rewards, ranking, manage settings).
+- **Token-based**: you pass a backend URL and token; the package uses them for all API calls.
+- **Embeddable**: mount it in a host app inside a div (e.g. after login or when entering the game section).
+- Backend API, auth, and data format are defined in **@kennofizet/rewardplay-backend**. Use that package (or its docs) for token, endpoints, and data structures.
 
-### From Root (Recommended)
-```bash
-cd ../..  # Go to monorepo root
-npm install
-```
+## Installation
 
-### From Package Directory
 ```bash
-npm install
+npm i @kennofizet/rewardplay-frontend
 ```
-This will install dependencies, but they'll be hoisted to the root `node_modules/` (this is normal for workspaces).
 
-## What `npm install` Does
+**Peer dependency:** Vue 3 (`vue@^3.2.0`). The host project must provide Vue.
 
-When you run `npm install` in this package:
+## Setup: Mount Point and Initialization
 
-1. ✅ Installs dependencies listed in `package.json`
-2. ✅ Creates/updates `node_modules/` at the **root level** (not here)
-3. ❌ Does NOT create local `node_modules/` (workspace hoisting)
-4. ❌ Does NOT build or create dist files
-5. ❌ Does NOT modify source files
+### 1. Mount point in template
 
-**This is normal!** npm workspaces hoist dependencies to the root to avoid duplication.
+Render a stable DOM node only when you are ready to mount RewardPlay (e.g. after you have a token):
 
-## Development
+```html
+<div v-show="initialized" id="rewardplay-mount-point"></div>
+```
 
-For local development (like in the test environment), the package uses source files directly from `src/`. No build step is required.
+- Use `v-show="initialized"` (or `v-if`) so the element exists only when `initialized` is true, then mount in a `nextTick` after setting `initialized = true`.
+- The ID (`rewardplay-mount-point`) is what you pass to `document.getElementById` before mounting.
+
+### 2. Initialize and mount in your app
+
+Example (Vue 3 Composition API with `createApp`):
+
+```js
+import { createApp, ref, nextTick } from 'vue'
+import RewardPlay, { RewardPlayPage } from '@kennofizet/rewardplay-frontend'
+
+const initialized = ref(false)
+let rewardPlayApp = null
+
+async function initialize() {
+  const backendUrl = 'https://your-backend.com'   // from your config
+  if (!backendUrl?.trim()) {
+    // handle error
+    return
+  }
+
+  try {
+    const token = await fetchToken()   // get token from your backend (see rewardplay-backend)
+    initialized.value = true
+    await nextTick()
+
+    const mountPoint = document.getElementById('rewardplay-mount-point')
+    if (!mountPoint) {
+      initialized.value = false
+      return
+    }
+
+    rewardPlayApp = createApp(RewardPlayPage, {
+      imageUrls: [],
+      scriptUrls: [],
+      stylesheetUrls: [],
+      fontUrls: [],
+      backgroundImage: null,
+      language: 'vi',   // 'en' | 'vi'
+      // enableUnzip: true,  // if your RewardPlayPage supports it
+    })
+
+    rewardPlayApp.use(RewardPlay, {
+      backendUrl: backendUrl.trim(),
+      token,
+    })
+
+    rewardPlayApp.mount(mountPoint)
+  } catch (err) {
+    initialized.value = false
+    // handle err
+  }
+}
+
+// e.g. in onMounted or after login
+onMounted(() => {
+  initialize()
+})
+```
 
-The `package.json` is configured to point to `src/index.js` for local development, so Vite can resolve the source files directly.
+### 3. Plugin options (required)
 
-## Building for Production
+| Option      | Type   | Description                    |
+|------------|--------|--------------------------------|
+| `backendUrl` | string | Base URL of RewardPlay API     |
+| `token`      | string | RewardPlay auth token          |
 
-If you need to build the package for distribution:
+Both are required when calling `app.use(RewardPlay, { backendUrl, token })`.
 
-```bash
-npm run production
-```
+### 4. RewardPlayPage root props (optional)
 
-This will create built files in the `dist/` directory using Laravel Mix.
+| Prop             | Type   | Default | Description                    |
+|------------------|--------|--------|--------------------------------|
+| `imageUrls`      | Array  | `[]`   | URLs for image manifest/assets |
+| `scriptUrls`     | Array  | `[]`   | Script URLs to load            |
+| `stylesheetUrls` | Array  | `[]`   | CSS URLs                       |
+| `fontUrls`       | Array  | `[]`   | Font URLs                      |
+| `backgroundImage`| string | null   | Background image URL           |
+| `language`       | string | `'en'` | UI language: `'en'` or `'vi'`  |
+| `rotate`         | boolean| true   | Auto-rotate in portrait        |
+| `customStyles`    | Object | `{}`   | Extra inline/CSS variables     |
 
-## Local Development Setup
+## Backend and data
 
-When using this package locally (via `file:` in package.json), Vite will resolve the source files directly. No build needed!
+- **Token**: Your host app must obtain the RewardPlay token (e.g. from your own backend that talks to RewardPlay). How to issue/validate the token and which endpoints to call is defined in **@kennofizet/rewardplay-backend**.
+- **API**: The frontend calls endpoints under `backendUrl` (e.g. `/api/rewardplay/auth/user-data`, `/api/rewardplay/player/shop`, etc.). Base URL, routes, and response shapes are documented in the backend package.
+- For API contracts, env vars, and server setup, read **@kennofizet/rewardplay-backend** (or the backend README in the same repo).
 
-## Where Are My Dependencies?
+## Exports
 
-Dependencies are installed at:
-```
-rewardplay-packages/node_modules/  (root level)
-```
+- **default**: plugin object `{ install }` — use with `app.use(RewardPlay, { backendUrl, token })`.
+- **RewardPlayPage**: root Vue component to mount.
+- **installGameModule**, **createGameApi**, **RewardPlayPage**, **ComingSoonPage**, **LoadingSource**, **LoginScreen**.
+- Utilities: **ResourceLoader**, **useResourceLoader**, constants helpers, **createTranslator**, **translations**.
 
-Not at:
-```
-packages/frontend/node_modules/  (doesn't exist - this is normal!)
-```
+## Development
+
+If you work inside the repo (e.g. `rewardplay-packages`):
+
+- Dependencies are usually installed at the **root** of the repo: `npm install` at root.
+- The package entry is `src/index.js`; the host can resolve source directly (no build step required for development).
+- For a production build of the frontend package, run `npm run production` in this package (output in `dist/`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennofizet/rewardplay-frontend",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "RewardPlay frontend package - Token-based API client for RewardPlay",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/api/index.js

@@ -24,12 +24,150 @@ export function createGameApi(backendUrl, token) {
     },
   })
 
+  // Add interceptor to automatically include zone_id from localStorage as header
+  api.interceptors.request.use((config) => {
+    try {
+      const selectedZone = localStorage.getItem('selected_zone')
+      if (selectedZone) {
+        const zone = JSON.parse(selectedZone)
+        if (zone && zone.id) {
+          // Add zone_id to headers (similar to X-RewardPlay-Token)
+          config.headers = config.headers || {}
+          if (!config.headers['X-RewardPlay-Zone-Id']) {
+            config.headers['X-RewardPlay-Zone-Id'] = zone.id.toString()
+          }
+        }
+      }
+    } catch (e) {
+      // Silently fail if localStorage is not available or zone is invalid
+      console.warn('Failed to get zone_id from localStorage:', e)
+    }
+    // When sending FormData, remove Content-Type so the browser sets multipart/form-data with boundary
+    if (config.data instanceof FormData) {
+      delete config.headers['Content-Type']
+    }
+    return config
+  })
+
   return {
     // Auth
-    checkUser: () => api.post('/api/rewardplay/auth/check'),
-    
-    // Demo
-    getDemo: () => api.get('/api/rewardplay/demo'),
+    checkUser: () => api.get('/api/rewardplay/auth/check'),
+    getUserData: () => api.get('/api/rewardplay/auth/user-data'),
+    // Zones the current user belongs to
+    getZones: () => api.get('/api/rewardplay/player/zones'),
+    getCustomImages: (params) => api.get('/api/rewardplay/player/custom-images', { params }),
+    // Manifest
+    getManifest: () => api.get('/api/rewardplay/manifest'),
+    // Ranking (period: day | week | month | year)
+    getRanking: (period = 'day') => api.get('/api/rewardplay/ranking', { params: { period } }),
+    // Zones the current user can manage (for settings)
+    getManagedZones: () => api.get('/api/rewardplay/player/managed-zones'),
+    // Zone management (settings)
+    getAllZones: (params) => api.get('/api/rewardplay/zones', { params }),
+    createZone: (data) => api.post('/api/rewardplay/zones', data),
+    updateZone: (id, data) => api.put(`/api/rewardplay/zones/${id}`, data),
+    deleteZone: (id) => api.delete(`/api/rewardplay/zones/${id}`),
+    // Zone users (server members + assigned)
+    getZoneUsers: (zoneId, params) => api.get(`/api/rewardplay/zones/${zoneId}/users`, { params }),
+    assignZoneUser: (zoneId, userId) => api.post(`/api/rewardplay/zones/${zoneId}/users`, { user_id: userId }),
+    removeZoneUser: (zoneId, userId) => api.delete(`/api/rewardplay/zones/${zoneId}/users/${userId}`),
+
+    // Setting Items CRUD
+    getSettingItems: (params) => api.get('/api/rewardplay/setting-items', { params }),
+    suggestSettingItems: () => api.post('/api/rewardplay/setting-items/suggest'),
+    createSettingItem: (data) => api.post('/api/rewardplay/setting-items', data),
+    updateSettingItem: (id, data) => {
+      if (data instanceof FormData) {
+        if (!data.has('_method')) data.append('_method', 'PUT')
+        return api.post(`/api/rewardplay/setting-items/${id}`, data)
+      }
+      return api.put(`/api/rewardplay/setting-items/${id}`, data)
+    },
+    deleteSettingItem: (id) => api.delete(`/api/rewardplay/setting-items/${id}`),
+
+    // Setting Options CRUD
+    getSettingOptions: (params) => api.get('/api/rewardplay/setting-options', { params }),
+    getSettingOption: (id) => api.get(`/api/rewardplay/setting-options/${id}`),
+    createSettingOption: (data) => api.post('/api/rewardplay/setting-options', data),
+    updateSettingOption: (id, data) => api.put(`/api/rewardplay/setting-options/${id}`, data),
+    deleteSettingOption: (id) => api.delete(`/api/rewardplay/setting-options/${id}`),
+
+    // Setting Stats Transforms CRUD
+    getSettingStatsTransforms: (params) => api.get('/api/rewardplay/setting-stats-transforms', { params }),
+    createSettingStatsTransform: (data) => api.post('/api/rewardplay/setting-stats-transforms', data),
+    updateSettingStatsTransform: (id, data) => api.put(`/api/rewardplay/setting-stats-transforms/${id}`, data),
+    deleteSettingStatsTransform: (id) => api.delete(`/api/rewardplay/setting-stats-transforms/${id}`),
+    suggestSettingStatsTransforms: () => api.post('/api/rewardplay/setting-stats-transforms/suggest'),
+    getSettingStatsTransformsAllowedKeys: () => api.get('/api/rewardplay/setting-stats-transforms/allowed-keys'),
+
+    // Global data (accessible to both player and manage)
+    getAllStats: () => api.get('/api/rewardplay/stats/all'),
+    getRewardTypes: (mode) => api.get('/api/rewardplay/stats/reward-types', { params: { mode } }),
+
+    // Setting Item Sets CRUD
+    getSettingItemSets: (params) => api.get('/api/rewardplay/setting-item-sets', { params }),
+    getItemsForZone: (params) => api.get('/api/rewardplay/setting-items/items-for-zone', { params }),
+    createSettingItemSet: (data) => api.post('/api/rewardplay/setting-item-sets', data),
+    updateSettingItemSet: (id, data) => api.put(`/api/rewardplay/setting-item-sets/${id}`, data),
+    deleteSettingItemSet: (id) => api.delete(`/api/rewardplay/setting-item-sets/${id}`),
+
+    // Setting Stack Bonuses CRUD
+    getStackBonuses: (params) => api.get('/api/rewardplay/setting-stack-bonuses', { params }),
+    getStackBonus: (id) => api.get(`/api/rewardplay/setting-stack-bonuses/${id}`),
+    createStackBonus: (data) => api.post('/api/rewardplay/setting-stack-bonuses', data),
+    updateStackBonus: (id, data) => api.put(`/api/rewardplay/setting-stack-bonuses/${id}`, data),
+    deleteStackBonus: (id) => api.delete(`/api/rewardplay/setting-stack-bonuses/${id}`),
+    suggestStackBonuses: () => api.post('/api/rewardplay/setting-stack-bonuses/suggest'),
+
+    // Setting Daily Rewards (Manage)
+    getDailyRewardConfigs: (params) => api.get('/api/rewardplay/setting-daily-rewards', { params }), // Expects month/year
+    saveDailyRewardConfig: (data) => api.post('/api/rewardplay/setting-daily-rewards', data), // Update or Create based on date
+    suggestDailyRewards: (data) => api.post('/api/rewardplay/setting-daily-rewards/suggest', data),
+
+    // Setting Level Exps (Manage)
+    getLevelExps: (params) => api.get('/api/rewardplay/setting-level-exps', { params }),
+    getLevelExp: (id) => api.get(`/api/rewardplay/setting-level-exps/${id}`),
+    createLevelExp: (data) => api.post('/api/rewardplay/setting-level-exps', data),
+    updateLevelExp: (id, data) => api.put(`/api/rewardplay/setting-level-exps/${id}`, data),
+    deleteLevelExp: (id) => api.delete(`/api/rewardplay/setting-level-exps/${id}`),
+    suggestLevelExps: () => api.post('/api/rewardplay/setting-level-exps/suggest'),
+
+    // Setting Events (Manage)
+    getSettingEvents: (params) => api.get('/api/rewardplay/setting-events', { params }),
+    getSettingEvent: (id) => api.get(`/api/rewardplay/setting-events/${id}`),
+    suggestSettingEvents: () => api.post('/api/rewardplay/setting-events/suggest'),
+    createSettingEvent: (data) => api.post('/api/rewardplay/setting-events', data),
+    updateSettingEvent: (id, data) => {
+      if (data instanceof FormData) {
+        return api.post(`/api/rewardplay/setting-events/${id}`, data)
+      }
+      return api.put(`/api/rewardplay/setting-events/${id}`, data)
+    },
+    deleteSettingEvent: (id) => api.delete(`/api/rewardplay/setting-events/${id}`),
+
+    // Setting Shop Items (Manage)
+    getSettingShopItems: (params) => api.get('/api/rewardplay/setting-shop-items', { params }),
+    getSettingShopItem: (id) => api.get(`/api/rewardplay/setting-shop-items/${id}`),
+    suggestSettingShopItems: () => api.post('/api/rewardplay/setting-shop-items/suggest'),
+    createSettingShopItem: (data) => api.post('/api/rewardplay/setting-shop-items', data),
+    updateSettingShopItem: (id, data) => api.put(`/api/rewardplay/setting-shop-items/${id}`, data),
+    deleteSettingShopItem: (id) => api.delete(`/api/rewardplay/setting-shop-items/${id}`),
+
+    // Player Daily Rewards & Bag
+    getPlayerDailyRewardState: () => api.get('/api/rewardplay/player/daily-rewards'), // Includes stack info
+    collectDailyReward: () => api.post('/api/rewardplay/player/daily-rewards/collect'),
+    getPlayerBag: () => api.get('/api/rewardplay/player/bag'),
+    saveGears: (gears) => api.post('/api/rewardplay/player/bag/gears', { gears }),
+    openBox: (userBagItemId, quantity = 1) =>
+      api.post('/api/rewardplay/player/bag/open-box', { user_bag_item_id: userBagItemId, quantity: Math.max(1, Math.min(parseInt(quantity, 10) || 1, 99)) }),
+
+    // Player Events (active events for popup)
+    getPlayerEvents: () => api.get('/api/rewardplay/player/events'),
+
+    // Player Shop (active shop items + purchase)
+    getPlayerShop: () => api.get('/api/rewardplay/player/shop'),
+    purchaseShopItem: (shopItemId, quantity = 1) =>
+      api.post('/api/rewardplay/player/shop/purchase', { shop_item_id: shopItemId, quantity }),
   }
 }
 

package/src/components/BonusSection.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="bonus-section">
+    <label>{{ label }}</label>
+    <div class="bonus-list">
+      <div 
+        v-for="(bonus, index) in bonuses" 
+        :key="index"
+        class="bonus-item"
+      >
+        <template v-if="bonus.type === 'custom_option' && bonus.name">
+          <!-- Show display component for custom options (snapshot) -->
+          <CustomOptionDisplay
+            :name="bonus.name"
+            :properties="bonus.properties || {}"
+            :stats-label="t('page.manageSetting.settingItems.stats')"
+            class="bonus-custom-display"
+          />
+        </template>
+        <template v-else>
+          <!-- Show unified selector for stats or when nothing selected yet -->
+          <CustomSelect
+            v-model="bonus.selectedValue"
+            :options="unifiedOptions"
+            :placeholder="selectKeyPlaceholder"
+            @change="handleKeyChange(index)"
+            trigger-class="bonus-key-select"
+          />
+          <input 
+            v-if="bonus.type === 'stat' && bonus.selectedValue"
+            v-model.number="bonus.value"
+            type="number"
+            step="0.01"
+            :placeholder="valuePlaceholder"
+            class="bonus-value-input"
+          />
+        </template>
+        <button 
+          type="button"
+          class="btn-remove-bonus"
+          @click="handleRemove(index)"
+          :title="removeLabel"
+        >
+          ×
+        </button>
+      </div>
+      <button 
+        type="button"
+        class="btn-add-bonus"
+        @click="handleAdd"
+      >
+        <span class="btn-add-icon">+</span>
+        <span>{{ addOptionLabel }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, computed } from 'vue'
+import CustomSelect from './CustomSelect.vue'
+import CustomOptionDisplay from './CustomOptionDisplay.vue'
+
+const translator = inject('translator', null)
+const t = translator || ((key) => key)
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  bonuses: {
+    type: Array,
+    required: true
+  },
+  bonusKeyOptions: {
+    type: Array,
+    required: true
+  },
+  customOptionOptions: {
+    type: Array,
+    default: () => []
+  },
+  selectKeyPlaceholder: {
+    type: String,
+    default: 'Select Key'
+  },
+  valuePlaceholder: {
+    type: String,
+    default: 'Value'
+  },
+  addOptionLabel: {
+    type: String,
+    default: 'Add Option'
+  },
+  removeLabel: {
+    type: String,
+    default: 'Remove'
+  }
+})
+
+const emit = defineEmits(['add', 'remove', 'key-change'])
+
+// Unified options combining stats and custom options
+const unifiedOptions = computed(() => {
+  const options = []
+  
+  // Add regular stats
+  props.bonusKeyOptions.forEach(stat => {
+    options.push({
+      value: stat.value,
+      label: stat.label,
+      type: 'stat',
+      isCustom: false
+    })
+  })
+  
+  // Add custom options
+  props.customOptionOptions.forEach(customOption => {
+    options.push({
+      value: customOption.value,
+      label: customOption.label,
+      type: 'custom_option',
+      isCustom: true,
+      properties: customOption.properties
+    })
+  })
+  
+  return options
+})
+
+const handleAdd = () => {
+  emit('add')
+}
+
+const handleRemove = (index) => {
+  emit('remove', index)
+}
+
+const handleKeyChange = (index) => {
+  emit('key-change', index)
+}
+</script>
+
+<style scoped>
+.bonus-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.bonus-section label {
+  margin-bottom: 5px;
+  font-size: 13px;
+  color: #d0d4d6;
+  font-weight: 500;
+}
+
+.bonus-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.bonus-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.bonus-key-select {
+  flex: 1;
+  min-width: 0;
+}
+
+.bonus-value-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  background: #253344;
+  border: 1px solid #1a2332;
+  color: #d0d4d6;
+  font-size: 14px;
+}
+
+.bonus-custom-value {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  background: #1a2332;
+  border: 1px solid #253344;
+  border-radius: 4px;
+  cursor: help;
+}
+
+.custom-value-label {
+  font-size: 12px;
+  color: #f6a901;
+  font-weight: 500;
+}
+
+.custom-value-count {
+  font-size: 11px;
+  color: #999;
+}
+
+.btn-remove-bonus {
+  padding: 8px 12px;
+  background: #ff6b6b;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-remove-bonus:hover {
+  background: #ee5a5a;
+}
+
+.btn-add-bonus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: #253344;
+  border: 2px dashed #1a2332;
+  color: #d0d4d6;
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 4px;
+  transition: all 0.2s;
+  width: 100%;
+  margin-top: 5px;
+}
+
+.btn-add-bonus:hover {
+  background: #1a2332;
+  border-color: #f6a901;
+  color: #f6a901;
+}
+
+.btn-add-icon {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.bonus-custom-display {
+  flex: 1;
+}
+</style>

package/src/components/CustomOptionDisplay.vue

@@ -0,0 +1,77 @@
+<template>
+  <div 
+    class="custom-option-display"
+    :title="tooltipText"
+  >
+    <span class="custom-option-name">{{ name }}</span>
+    <span class="custom-option-info">{{ statsCount }} {{ statsLabel }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  properties: {
+    type: Object,
+    default: () => ({})
+  },
+  statsLabel: {
+    type: String,
+    default: 'stats'
+  }
+})
+
+const statsCount = computed(() => {
+  return Object.keys(props.properties || {}).length
+})
+
+const tooltipText = computed(() => {
+  if (!props.properties || Object.keys(props.properties).length === 0) {
+    return props.name
+  }
+  
+  // Format properties for tooltip display
+  const statsList = Object.entries(props.properties)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('\n')
+  
+  return `${props.name}\n\n${statsList}`
+})
+</script>
+
+<style scoped>
+.custom-option-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: #1a2332;
+  border: 1px solid #253344;
+  border-radius: 4px;
+  cursor: help;
+  white-space: nowrap;
+}
+
+.custom-option-display.property-display {
+  min-width: 0;
+}
+
+.custom-option-name {
+  font-weight: 600;
+  color: #f6a901;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.custom-option-info {
+  font-size: 11px;
+  color: #8a9196;
+  flex-shrink: 0;
+}
+</style>