@hytopia.com/examples 1.0.2 → 1.0.4

package/frontiers-rpg-game/assets/ui/menus/merchant.html

@@ -0,0 +1,1127 @@
+<!-- Merchant UI -->
+<div class="merchant-overlay">
+  <div class="merchant-container">
+    <div class="merchant-header">
+      <div class="merchant-info">
+        <img src="" alt="Merchant" class="merchant-avatar">
+        <div class="merchant-details">
+          <div class="merchant-name"></div>
+          <div class="merchant-title"></div>
+        </div>
+      </div>
+      <button class="merchant-close">×</button>
+    </div>
+    
+    <div class="merchant-content">
+      <!-- Main Merchant Grid -->
+      <div class="merchant-grid-container">
+        <div class="merchant-grid" id="merchant-grid">
+          <!-- Grid slots will be generated by JavaScript -->
+        </div>
+      </div>
+      
+      <!-- Right Panel for future UI elements -->
+      <div class="merchant-right-panel">
+        <div class="merchant-panel-placeholder">
+          <!-- Future UI elements like quantity selection, instructions, etc. -->
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Hotbar Container -->
+  <div class="merchant-hotbar-container">
+    <div class="merchant-hotbar-grid" id="merchant-hotbar-grid">
+      <!-- Hotbar slots will be generated by JavaScript -->
+    </div>
+  </div>
+</div>
+
+<script>
+  // Configuration
+  const MERCHANT_CONFIG = {
+    slots: 18,
+    rowWidth: 6,
+    hotbarSlots: 8,
+    minRows: 3,
+    maxBuyQuantity: 999
+  };
+
+  // State management
+  const merchantState = {
+    backpackItems: [],
+    hotbarItems: [],
+    currentMode: null,
+    selectedItem: null,
+    selectedQuantity: 1
+  };
+
+  // Setup hytopia data handlers
+  hytopia.onData(data => {
+    if (data.type === 'toggleMerchant') {
+      toggleMerchant(data);
+    }
+    
+    if (data.type === 'hotbarUpdate') {
+      merchantState.hotbarItems[data.position] = data;
+      if (merchantState.currentMode === 'sell') {
+        updateHotbarSlot(data.position, data);
+      }
+    }
+    
+    if (data.type === 'backpackUpdate') {
+      merchantState.backpackItems[data.position] = data;
+      if (merchantState.currentMode === 'sell') {
+        updateMerchantSlot(data.position, data);
+      }
+    }
+  });
+
+  // Initialize merchant system
+  function initializeMerchant() {
+    createMerchantSlots();
+    createHotbarSlots();
+    
+    // Add close button handler
+    const closeButton = document.querySelector('.merchant-close');
+    if (closeButton) {
+      closeButton.addEventListener('click', () => toggleMerchant(null));
+    }
+  }
+
+  function createMerchantSlots() {
+    const grid = document.getElementById('merchant-grid');
+    grid.innerHTML = '';
+    
+    for (let i = 0; i < MERCHANT_CONFIG.slots; i++) {
+      const slot = document.createElement('div');
+      slot.className = 'merchant-slot';
+      slot.dataset.slotIndex = i;
+      slot.innerHTML = '<div class="merchant-slot-content"></div>';
+      grid.appendChild(slot);
+    }
+  }
+
+  function createHotbarSlots() {
+    const grid = document.getElementById('merchant-hotbar-grid');
+    grid.innerHTML = '';
+    
+    for (let i = 0; i < MERCHANT_CONFIG.hotbarSlots; i++) {
+      const slot = document.createElement('div');
+      slot.className = 'merchant-hotbar-slot';
+      slot.dataset.hotbarIndex = i;
+      slot.innerHTML = `<div class="merchant-hotbar-slot-content">${i + 1}</div>`;
+      grid.appendChild(slot);
+    }
+  }
+
+  // Use shared tooltip system
+  function createTooltip(slot, itemData) {
+    const options = {
+      tooltipClass: 'merchant-item-tooltip',
+      contentClass: 'merchant-item-tooltip-content'
+    };
+    
+    // Configure price display based on merchant mode
+    if (merchantState.currentMode === 'buy') {
+      options.showBuyPrice = true;
+      options.showSellPrice = false;
+      // Use sellPrice as buyPrice for display (sellPrice contains the buy price data)
+      if (itemData.sellPrice !== undefined) {
+        itemData.buyPrice = itemData.sellPrice;
+      }
+    } else {
+      options.showBuyPrice = false;
+      options.showSellPrice = true;
+    }
+    
+    ItemTooltips.createTooltip(slot, itemData, options);
+  }
+
+  function removeTooltip(slot) {
+    ItemTooltips.removeTooltip(slot, 'merchant-item-tooltip');
+  }
+
+  function createItemContent(content, itemData, config) {
+    // Create item icon
+    const icon = document.createElement('img');
+    icon.src = `{{CDN_ASSETS_URL}}/${itemData.iconImageUri}`;
+    icon.alt = 'Item';
+    icon.className = config.iconClass;
+    content.appendChild(icon);
+    
+    // Add quantity if greater than 1
+    if (itemData.quantity && itemData.quantity > 1) {
+      const quantity = document.createElement('div');
+      quantity.className = config.quantityClass;
+      quantity.textContent = itemData.quantity.toLocaleString();
+      content.appendChild(quantity);
+    }
+  }
+
+  // Slot update configurations
+  const SLOT_CONFIGS = {
+    hotbar: {
+      selector: '.merchant-hotbar-slot',
+      contentSelector: '.merchant-hotbar-slot-content',
+      iconClass: 'merchant-hotbar-slot-icon',
+      quantityClass: 'merchant-hotbar-slot-quantity',
+      maxSlots: MERCHANT_CONFIG.hotbarSlots,
+      showEmptyNumber: true
+    },
+    merchant: {
+      selector: '.merchant-slot',
+      contentSelector: '.merchant-slot-content',
+      iconClass: 'merchant-item-icon',
+      quantityClass: 'merchant-slot-quantity',
+      maxSlots: MERCHANT_CONFIG.slots,
+      showEmptyNumber: false
+    }
+  };
+
+  // Generic slot update function
+  function updateSlot(slotType, position, itemData) {
+    const config = SLOT_CONFIGS[slotType];
+    if (!config || position < 0 || position >= config.maxSlots) return;
+
+    const slots = document.querySelectorAll(config.selector);
+    const slot = slots[position];
+    if (!slot) return;
+    
+    const content = slot.querySelector(config.contentSelector);
+    if (!content) return;
+    
+    // Clear existing content and tooltip
+    content.innerHTML = '';
+    removeTooltip(slot);
+    
+    // Remove previous click handler
+    slot.onclick = null;
+    slot.classList.remove('merchant-slot-selected');
+    
+    if (itemData.removed) {
+      // Show slot number for empty slots (hotbar only)
+      if (config.showEmptyNumber) {
+        content.textContent = position + 1;
+      }
+    } else {
+      createItemContent(content, itemData, config);
+      createTooltip(slot, itemData);
+      
+      // Determine correct sourceType - in sell mode, merchant grid shows backpack items
+      const sourceType = (slotType === 'merchant' && merchantState.currentMode === 'sell') ? 'backpack' : slotType;
+      
+      // Add click handler for item selection
+      slot.onclick = () => selectItem(itemData, sourceType, position);
+    }
+  }
+
+  // Specific update functions
+  function updateHotbarSlot(position, itemData) {
+    updateSlot('hotbar', position, itemData);
+  }
+
+  function updateMerchantSlot(position, itemData) {
+    updateSlot('merchant', position, itemData);
+  }
+
+  // Helper functions for merchant management
+  function updateMerchantInfo(merchantName, merchantTitle, merchantAvatarUri, mode) {
+    const avatar = document.querySelector('.merchant-avatar');
+    const name = document.querySelector('.merchant-name');
+    const title = document.querySelector('.merchant-title');
+    
+    if (avatar && merchantAvatarUri) {
+      avatar.src = `{{CDN_ASSETS_URL}}/${merchantAvatarUri}`;
+    }
+    if (name) {
+      const baseName = merchantName || 'Merchant';
+      const modeText = mode === 'buy' ? 'Buying From: ' : 'Selling To: ';
+      name.textContent = modeText + baseName;
+    }
+    if (title) {
+      title.textContent = merchantTitle || '';
+    }
+  }
+
+  function setMerchantVisibility(visible) {
+    const overlay = document.querySelector('.merchant-overlay');
+    if (overlay) {
+      overlay.style.display = visible ? 'flex' : 'none';
+    }
+  }
+
+  function setHotbarVisibility(visible) {
+    const hotbarContainer = document.querySelector('.merchant-hotbar-container');
+    if (hotbarContainer) {
+      hotbarContainer.style.display = visible ? 'block' : 'none';
+    }
+  }
+
+  function updateMerchantGrid(rows) {
+    MERCHANT_CONFIG.slots = rows * MERCHANT_CONFIG.rowWidth;
+    createMerchantSlots();
+    
+    const merchantGrid = document.getElementById('merchant-grid');
+    if (merchantGrid) {
+      merchantGrid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+    }
+  }
+
+  function populateSlots(items, maxSlots, updateFunction) {
+    for (let i = 0; i < maxSlots; i++) {
+      const item = items[i];
+      updateFunction(i, item || { removed: true });
+    }
+  }
+
+  function calculateRequiredRows(buyableItems) {
+    if (!buyableItems || buyableItems.length === 0) return MERCHANT_CONFIG.minRows;
+    
+    const positions = buyableItems
+      .map(item => item.position)
+      .filter(pos => typeof pos === 'number');
+    
+    if (positions.length === 0) return MERCHANT_CONFIG.minRows;
+    
+    const maxPosition = Math.max(17, Math.max(...positions)); // At least 18 slots (0-17)
+    return Math.ceil((maxPosition + 1) / MERCHANT_CONFIG.rowWidth);
+  }
+
+  function populateBuyableItems(buyableItems) {
+    if (!buyableItems || buyableItems.length === 0) return;
+    
+    buyableItems.forEach(item => {
+      if (typeof item.position === 'number' && 
+          item.position >= 0 && 
+          item.position < MERCHANT_CONFIG.slots) {
+        
+        const itemData = {
+          ...item,
+          sellPrice: item.buyPrice // Use price as sell value for tooltip
+        };
+        updateMerchantSlot(item.position, itemData);
+      }
+    });
+  }
+
+  function updateRightPanelContent() {
+    const placeholder = document.querySelector('.merchant-panel-placeholder');
+    if (!placeholder) return;
+    
+    if (merchantState.selectedItem) {
+      renderItemDetails();
+    } else if (merchantState.currentMode === 'buy') {
+      placeholder.textContent = 'First, select an item. After that, you can confirm the quantity to buy.';
+    } else if (merchantState.currentMode === 'sell') {
+      placeholder.textContent = 'First, select an item. After that, you can confirm the quantity to sell.';
+    } else {
+      placeholder.textContent = '';
+    }
+  }
+
+  function selectItem(itemData, sourceType, sourceIndex) {
+    // Clear previous selection highlighting
+    document.querySelectorAll('.merchant-slot-selected').forEach(slot => {
+      slot.classList.remove('merchant-slot-selected');
+    });
+    
+    merchantState.selectedItem = {
+      ...itemData,
+      sourceType,
+      sourceIndex
+    };
+    merchantState.selectedQuantity = 1;
+    
+    // Highlight the selected slot
+    const config = SLOT_CONFIGS[sourceType];
+    if (config) {
+      const slots = document.querySelectorAll(config.selector);
+      const selectedSlot = slots[sourceIndex];
+      if (selectedSlot) {
+        selectedSlot.classList.add('merchant-slot-selected');
+      }
+    }
+    
+    updateRightPanelContent();
+  }
+
+  function clearSelection() {
+    // Clear previous selection highlighting
+    document.querySelectorAll('.merchant-slot-selected').forEach(slot => {
+      slot.classList.remove('merchant-slot-selected');
+    });
+    
+    merchantState.selectedItem = null;
+    merchantState.selectedQuantity = 1;
+    updateRightPanelContent();
+  }
+
+  function renderItemDetails() {
+    const placeholder = document.querySelector('.merchant-panel-placeholder');
+    if (!placeholder || !merchantState.selectedItem) return;
+
+    const maxQuantity = merchantState.currentMode === 'sell' 
+      ? (merchantState.selectedItem.quantity || 1) 
+      : MERCHANT_CONFIG.maxBuyQuantity;
+    const price = merchantState.selectedItem.buyPrice || merchantState.selectedItem.sellPrice || 0;
+    const actionLabel = merchantState.currentMode === 'buy' ? 'Buy' : 'Sell';
+    
+    const totalDisplay = price > 0 
+      ? `${(price * merchantState.selectedQuantity).toLocaleString()} gold`
+      : (merchantState.currentMode === 'buy' ? 'Not Buyable' : 'Not Sellable');
+
+    placeholder.innerHTML = `
+      <div class="merchant-item-details">
+        <div class="merchant-item-header">
+          <img src="{{CDN_ASSETS_URL}}/${merchantState.selectedItem.iconImageUri}" alt="${merchantState.selectedItem.name}" class="merchant-item-icon">
+          <div class="merchant-item-info">
+            <div class="merchant-item-name">${merchantState.selectedItem.name}</div>
+            <div class="merchant-item-total">${totalDisplay}</div>
+          </div>
+        </div>
+        <div class="merchant-item-actions">
+          <div class="merchant-quantity-controls">
+            <button class="merchant-qty-btn merchant-qty-decrease">-</button>
+            <span class="merchant-qty-display">${merchantState.selectedQuantity}</span>
+            <button class="merchant-qty-btn merchant-qty-increase">+</button>
+          </div>
+          <button class="merchant-action-btn merchant-confirm-action" ${price === 0 ? 'disabled' : ''}>${actionLabel}</button>
+        </div>
+      </div>
+    `;
+
+    // Add event listeners
+    const decreaseBtn = placeholder.querySelector('.merchant-qty-decrease');
+    const increaseBtn = placeholder.querySelector('.merchant-qty-increase');
+    const confirmBtn = placeholder.querySelector('.merchant-confirm-action');
+
+    if (decreaseBtn) {
+      decreaseBtn.addEventListener('click', () => changeQuantity(-1));
+    }
+    
+    if (increaseBtn) {
+      increaseBtn.addEventListener('click', () => changeQuantity(1));
+    }
+
+    if (confirmBtn && price > 0) {
+      confirmBtn.addEventListener('click', confirmAction);
+    }
+  }
+
+  function changeQuantity(delta) {
+    const maxQuantity = merchantState.currentMode === 'sell' 
+      ? (merchantState.selectedItem.quantity || 1) 
+      : MERCHANT_CONFIG.maxBuyQuantity;
+    merchantState.selectedQuantity = Math.max(1, Math.min(maxQuantity, merchantState.selectedQuantity + delta));
+    renderItemDetails();
+  }
+
+  function confirmAction() {
+    if (!merchantState.selectedItem) return;
+    
+    const actionData = {
+      type: merchantState.currentMode === 'buy' ? 'buyItem' : 'sellItem',
+      quantity: merchantState.selectedQuantity,
+      sourceType: merchantState.selectedItem.sourceType,
+      sourceIndex: merchantState.selectedItem.sourceIndex
+    };
+    console.log(actionData);
+    hytopia.sendData(actionData);
+    clearSelection();
+  }
+
+  function toggleMerchant(data) {
+    if (!data) {
+      setMerchantVisibility(false);
+      merchantState.currentMode = null;
+      clearSelection();
+      hytopia.lockPointer(true);
+      return;
+    }
+
+    const { mode, buyableItems, merchantName, merchantTitle, merchantAvatarUri } = data;
+    merchantState.currentMode = mode;
+    clearSelection(); // Clear selection when switching modes
+    
+    // Update merchant info
+    updateMerchantInfo(merchantName, merchantTitle, merchantAvatarUri, mode);
+    
+    setMerchantVisibility(true);
+
+    if (mode === 'buy') {
+      setHotbarVisibility(false);
+
+      const requiredRows = calculateRequiredRows(buyableItems);
+      updateMerchantGrid(requiredRows);
+      populateBuyableItems(buyableItems);
+      hytopia.lockPointer(false, true);
+    } else if (mode === 'sell') {
+      setHotbarVisibility(true);
+      
+      updateMerchantGrid(3); // 3 rows for sell mode (18 slots total)
+      populateSlots(merchantState.backpackItems, MERCHANT_CONFIG.slots, updateMerchantSlot);
+      populateSlots(merchantState.hotbarItems, MERCHANT_CONFIG.hotbarSlots, updateHotbarSlot);
+      hytopia.lockPointer(false, true);
+    }
+  }
+
+  // Initialize on load
+  initializeMerchant();
+</script>
+
+<style>
+  :root {
+    --merchant-slot-size: 56px;
+    --merchant-hotbar-size: 64px;
+    --merchant-icon-size: 32px;
+    --merchant-gap: 6px;
+    --merchant-padding: 12px;
+    --merchant-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    
+    /* Color palette */
+    --merchant-bg-primary: linear-gradient(145deg, #2a2a2a, #1e1e1e);
+    --merchant-bg-secondary: linear-gradient(135deg, #3a3a3a, #2d2d2d);
+    --merchant-border: #444;
+    --merchant-border-light: #555;
+    --merchant-text: #ffffff;
+    --merchant-text-muted: #cccccc;
+    --merchant-text-dim: #888;
+    --merchant-overlay: rgba(0, 0, 0, 0.3);
+    --merchant-shadow: 0 8px 32px rgba(0, 0, 0, 0.9);
+    --merchant-shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  .merchant-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    font-family: var(--merchant-font);
+    user-select: none;
+    gap: 16px;
+  }
+
+  /* Shared container styles */
+  .merchant-container,
+  .merchant-hotbar-container {
+    background: var(--merchant-bg-primary);
+    border: 2px solid var(--merchant-border);
+    border-radius: 12px;
+    box-shadow: var(--merchant-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    width: 680px;
+  }
+
+  /* Header styles */
+  .merchant-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: var(--merchant-bg-secondary);
+    border-bottom: 1px solid var(--merchant-border);
+  }
+
+  .merchant-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .merchant-avatar {
+    width: 48px;
+    height: 48px;
+    border: 2px solid var(--merchant-border);
+    border-radius: 6px;
+    object-fit: cover;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+    flex-shrink: 0;
+  }
+
+  .merchant-details {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .merchant-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--merchant-text);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .merchant-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--merchant-text-muted);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: 0.3px;
+  }
+
+  .merchant-close {
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid rgba(255, 0, 0, 0.3);
+    border-radius: 6px;
+    color: #ff6b6b;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .merchant-close:hover {
+    background: rgba(255, 0, 0, 0.3);
+    transform: scale(1.05);
+  }
+
+  /* Layout */
+  .merchant-content {
+    padding: 20px;
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .merchant-grid-container {
+    flex: 1;
+  }
+
+  .merchant-right-panel {
+    flex: 1;
+    background: var(--merchant-overlay);
+    border: 1px solid var(--merchant-border);
+    border-radius: 8px;
+    padding: var(--merchant-padding);
+    min-height: 192px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .merchant-panel-placeholder {
+    color: #666;
+    font-size: 14px;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  /* Item Details Panel */
+  .merchant-item-details {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .merchant-item-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .merchant-item-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .merchant-item-icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    image-rendering: pixelated;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 2px;
+  }
+
+  .merchant-item-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+  }
+
+  .merchant-item-name {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--merchant-text);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    text-align: center;
+    width: 100%;
+    line-height: 1.2;
+  }
+
+  .merchant-item-total {
+    font-size: 11px;
+    font-weight: 600;
+    color: #ffd700;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  }
+
+  .merchant-quantity-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .merchant-qty-btn {
+    width: 32px;
+    height: 32px;
+    background: var(--merchant-bg-secondary);
+    border: 1px solid var(--merchant-border);
+    border-radius: 3px;
+    color: var(--merchant-text);
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .merchant-qty-btn:hover {
+    background: var(--merchant-border);
+  }
+
+  .merchant-qty-display {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--merchant-text);
+    min-width: 20px;
+    text-align: center;
+  }
+
+  .merchant-action-btn {
+    padding: 8px 16px;
+    border: 1px solid #4CAF50;
+    border-radius: 4px;
+    background: rgba(76, 175, 80, 0.2);
+    color: #4CAF50;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .merchant-action-btn:hover {
+    background: rgba(76, 175, 80, 0.3);
+    color: #66BB6A;
+  }
+
+  /* Disabled button styles */
+  .merchant-qty-btn:disabled,
+  .merchant-action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Selected slot styling */
+  .merchant-slot-selected {
+    border-color: #4CAF50 !important;
+    background: rgba(76, 175, 80, 0.1) !important;
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3) !important;
+  }
+
+  /* Grid styles */
+  .merchant-grid,
+  .merchant-hotbar-grid {
+    display: grid;
+    gap: var(--merchant-gap);
+    background: var(--merchant-overlay);
+    padding: var(--merchant-padding);
+    border: 1px solid var(--merchant-border);
+    border-radius: 8px;
+    box-shadow: var(--merchant-shadow-inset);
+  }
+
+  .merchant-grid {
+    grid-template: repeat(3, 1fr) / repeat(6, 1fr);
+  }
+
+  .merchant-hotbar-grid {
+    grid-template-columns: repeat(8, 1fr);
+    padding: 16px;
+    gap: 8px;
+  }
+
+  /* Slot styles */
+  .merchant-slot,
+  .merchant-hotbar-slot {
+    background: rgba(0, 0, 0, 0.6);
+    border: 2px solid #333;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .merchant-slot {
+    width: var(--merchant-slot-size);
+    height: var(--merchant-slot-size);
+  }
+
+  .merchant-hotbar-slot {
+    width: var(--merchant-hotbar-size);
+    height: var(--merchant-hotbar-size);
+  }
+
+  /* Hover states */
+  .merchant-slot:hover,
+  .merchant-hotbar-slot:hover {
+    border-color: var(--merchant-border-light);
+    background: rgba(0, 0, 0, 0.8);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
+    transform: translateY(-1px);
+  }
+
+  /* Content styles */
+  .merchant-slot-content,
+  .merchant-hotbar-slot-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: var(--merchant-text-muted);
+  }
+
+  .merchant-hotbar-slot-content {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--merchant-text-dim);
+  }
+
+  /* Item icons */
+  .merchant-item-icon,
+  .merchant-hotbar-slot-icon {
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .merchant-item-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .merchant-hotbar-slot-icon {
+    width: 56px;
+    height: 56px;
+  }
+
+  /* Quantity badges */
+  .merchant-slot-quantity,
+  .merchant-hotbar-slot-quantity {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.8);
+    color: var(--merchant-text);
+    font-weight: 700;
+    padding: 1px 3px;
+    border-radius: 3px;
+    line-height: 1;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    min-width: 10px;
+    text-align: center;
+  }
+
+  .merchant-slot-quantity {
+    font-size: 9px;
+  }
+
+  .merchant-hotbar-slot-quantity {
+    font-size: 10px;
+    padding: 1px 4px;
+    min-width: 12px;
+  }
+
+  /* Merchant-specific tooltip positioning (content handled by shared system) */
+  .merchant-item-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  /* Item rarity colors */
+  .merchant-slot.merchant-common,
+  .merchant-hotbar-slot.merchant-common { border-color: #9CA3AF; }
+  .merchant-slot.merchant-uncommon,
+  .merchant-hotbar-slot.merchant-uncommon { border-color: #22C55E; }
+  .merchant-slot.merchant-rare,
+  .merchant-hotbar-slot.merchant-rare { border-color: #3B82F6; }
+  .merchant-slot.merchant-epic,
+  .merchant-hotbar-slot.merchant-epic { border-color: #A855F7; }
+  .merchant-slot.merchant-legendary,
+  .merchant-hotbar-slot.merchant-legendary { border-color: #F59E0B; }
+
+  /* Mobile styles */
+  @media (max-width: 768px) {
+    body.mobile {
+      --merchant-slot-size: 40px;
+      --merchant-hotbar-size: 40px;
+      --merchant-icon-size: 20px;
+      --merchant-gap: 3px;
+      --merchant-padding: 6px;
+    }
+
+    body.mobile .merchant-overlay {
+      gap: 8px;
+      padding: 4px;
+    }
+
+    body.mobile .merchant-container,
+    body.mobile .merchant-hotbar-container {
+      width: auto;
+      max-width: 500px;
+      min-width: 320px;
+    }
+
+    body.mobile .merchant-header {
+      padding: 4px 8px;
+    }
+
+    body.mobile .merchant-info {
+      gap: 8px;
+    }
+
+    body.mobile .merchant-avatar {
+      width: 32px;
+      height: 32px;
+    }
+
+    body.mobile .merchant-name {
+      font-size: 12px;
+    }
+
+    body.mobile .merchant-title {
+      font-size: 10px;
+    }
+
+    body.mobile .merchant-close {
+      width: 20px;
+      height: 20px;
+      font-size: 14px;
+    }
+
+    body.mobile .merchant-content {
+      padding: 6px;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    body.mobile .merchant-grid,
+    body.mobile .merchant-hotbar-grid {
+      justify-items: center;
+      width: fit-content;
+      margin: 0 auto;
+    }
+
+    body.mobile .merchant-right-panel {
+      width: auto;
+      flex: 1;
+      min-height: 80px;
+      padding: var(--merchant-padding);
+    }
+
+    body.mobile .merchant-panel-placeholder {
+      padding: 20px;
+      font-size: 12px;
+    }
+
+    body.mobile .merchant-slot-content,
+    body.mobile .merchant-hotbar-slot-content {
+      font-size: 10px;
+    }
+
+    body.mobile .merchant-item-icon {
+      width: 32px;
+      height: 32px;
+    }
+
+    body.mobile .merchant-hotbar-slot-icon {
+      width: 32px;
+      height: 32px;
+    }
+
+    body.mobile .merchant-slot-quantity {
+      font-size: 7px;
+      padding: 1px 2px;
+      bottom: 1px;
+      right: 1px;
+      min-width: 8px;
+    }
+
+    body.mobile .merchant-hotbar-slot-quantity {
+      font-size: 8px;
+      padding: 1px 3px;
+      bottom: 1px;
+      right: 1px;
+    }
+
+    body.mobile .merchant-item-tooltip {
+      display: none;
+    }
+
+    /* Mobile item details */
+    body.mobile .merchant-item-details {
+      gap: 6px;
+    }
+
+    body.mobile .merchant-item-header {
+      gap: 8px;
+      padding: 6px;
+    }
+
+    body.mobile .merchant-item-actions {
+      gap: 6px;
+    }
+
+    body.mobile .merchant-item-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    body.mobile .merchant-item-name {
+      font-size: 10px;
+    }
+
+    body.mobile .merchant-item-total {
+      font-size: 9px;
+    }
+
+    body.mobile .merchant-qty-btn {
+      width: 20px;
+      height: 20px;
+      font-size: 10px;
+    }
+
+    body.mobile .merchant-qty-display {
+      font-size: 10px;
+      min-width: 16px;
+    }
+
+    body.mobile .merchant-action-btn {
+      padding: 6px 12px;
+      font-size: 10px;
+    }
+  }
+
+  /* Button styles */
+  .merchant-close,
+  .merchant-qty-btn,
+  .merchant-action-btn {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    border-radius: 4px;
+  }
+
+  .merchant-close {
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid rgba(255, 0, 0, 0.3);
+    border-radius: 6px;
+    color: #ff6b6b;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .merchant-close:hover {
+    background: rgba(255, 0, 0, 0.3);
+    transform: scale(1.05);
+  }
+
+  .merchant-qty-btn {
+    width: 32px;
+    height: 32px;
+    background: var(--merchant-bg-secondary);
+    border: 1px solid var(--merchant-border);
+    border-radius: 3px;
+    color: var(--merchant-text);
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .merchant-qty-btn:hover {
+    background: var(--merchant-border);
+  }
+
+  .merchant-qty-display {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--merchant-text);
+    min-width: 20px;
+    text-align: center;
+  }
+
+  .merchant-action-btn {
+    padding: 8px 16px;
+    border: 1px solid #4CAF50;
+    background: rgba(76, 175, 80, 0.2);
+    color: #4CAF50;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .merchant-action-btn:hover {
+    background: rgba(76, 175, 80, 0.3);
+    color: #66BB6A;
+  }
+</style>