tauri integration

2025-05-16 17:38:33 +02:00
parent 2e71cd8b9e
commit 06b2f0ffaf
66 changed files with 7239 additions and 0 deletions
@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import './Inventory.css';
+
+function Inventory({ cursors, currentCursorIndex, selectCursor }) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedRarity, setSelectedRarity] = useState('all');
+  const [filteredSlots, setFilteredSlots] = useState([]);
+  // Minecraft inventory typically has 27 slots (9x3)
+  const totalSlots = 36; // 9x4 grid
+
+  // This will eventually come from backend with proper data
+  const cursorRarities = {
+    common: 'Common',
+    uncommon: 'Uncommon',
+    rare: 'Rare',
+    epic: 'Epic',
+    legendary: 'Legendary'
+  };
+
+  // Assign mock rarities to cursors for demonstration
+  const getCursorRarity = (index) => {
+    const rarities = Object.keys(cursorRarities);
+    return rarities[index % rarities.length];
+  };
+
+  // Get currently selected cursor
+  const currentCursor = cursors.length > 0 && currentCursorIndex < cursors.length
+    ? cursors[currentCursorIndex]
+    : null;
+
+  // Create array of slots for the inventory grid
+  const inventorySlots = Array(totalSlots).fill(null).map((_, slotIndex) => {
+    // Map cursor to slot if available
+    const cursorIndex = slotIndex < cursors.length ? slotIndex : null;
+    const cursor = cursorIndex !== null ? cursors[cursorIndex] : null;
+    const rarity = cursor ? getCursorRarity(cursorIndex) : null;
+    
+    return {
+      slotIndex,
+      cursor,
+      cursorIndex,
+      rarity
+    };
+  });
+
+  // Apply filters to inventory slots
+  useEffect(() => {
+    // First, filter the slots that match our criteria
+    let filtered = inventorySlots.filter(slot => {
+      // Filter by search query
+      const matchesSearch = !searchQuery || 
+        (slot.cursor && slot.cursor.name.toLowerCase().includes(searchQuery.toLowerCase()));
+      
+      // Filter by rarity
+      const matchesRarity = selectedRarity === 'all' || 
+        (slot.rarity && slot.rarity === selectedRarity);
+      
+      return matchesSearch && matchesRarity;
+    });
+    
+    // Create a new array for the filtered slots, prioritizing slots with items
+    const filledSlots = filtered.filter(slot => slot.cursor);
+    const emptySlots = Array(totalSlots - filledSlots.length).fill(null)
+      .map((_, index) => ({ 
+        slotIndex: filledSlots.length + index, 
+        cursor: null, 
+        cursorIndex: null, 
+        rarity: null 
+      }));
+    
+    // Combine filled slots at the beginning and empty ones at the end
+    const result = [...filledSlots, ...emptySlots];
+    
+    setFilteredSlots(result);
+  }, [searchQuery, selectedRarity, inventorySlots]);
+
+  return (
+    <div className="inventory-container">
+      {/* Search and Filter Controls */}
+
+      {/* Equipped cursor display */}
+      {currentCursor && (
+        <div className="equipped-cursor">
+          <div className="equipped-cursor-image">
+            <img 
+              src={currentCursor.path} 
+              alt={currentCursor.name} 
+              className="equipped-image"
+            />
+          </div>
+          <div className="equipped-cursor-info">
+            <h3>Equipped</h3>
+            <span className={`equipped-cursor-name ${getCursorRarity(currentCursorIndex)}`}>
+              {currentCursor.name}
+            </span>
+            <span className="equipped-cursor-rarity">
+              {cursorRarities[getCursorRarity(currentCursorIndex)]}
+            </span>
+          </div>
+        </div>
+      )}
+            <div className="inventory-controls">
+        <div className="search-bar">
+          <input 
+            type="text" 
+            placeholder="Search cursors..." 
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="rarity-filter">
+          <div className={`rarity-circle ${selectedRarity}`}></div>
+          <select 
+            value={selectedRarity}
+            onChange={(e) => setSelectedRarity(e.target.value)}
+            aria-label="Filter by rarity"
+          >
+            <option value="all">All Rarities</option>
+            {Object.keys(cursorRarities).map(rarity => (
+              <option key={rarity} value={rarity}>{cursorRarities[rarity]}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      {/* Minecraft-like inventory grid */}
+      <div className="cute-inventory">
+        <div className="inventory-grid">
+          {filteredSlots.map((slot) => (
+            <div 
+              key={slot.slotIndex}
+              className={`inventory-slot ${slot.cursor ? 'has-item' : ''} ${slot.cursorIndex === currentCursorIndex ? 'selected' : ''} ${slot.rarity || ''}`}
+              onClick={() => slot.cursor && selectCursor(slot.cursorIndex)}
+            >
+              {slot.cursor && (
+                <>
+                  <img 
+                    src={slot.cursor.path} 
+                    alt={slot.cursor.name} 
+                    className={`inventory-item ${slot.rarity}`}
+                  />
+                  <div className="inventory-tooltip">
+                    <span className={`tooltip-name ${slot.rarity}`}>{slot.cursor.name}</span>
+                    <span className="tooltip-rarity">{cursorRarities[slot.rarity]}</span>
+                  </div>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      
+   
+    </div>
+  );
+}
+
+export default Inventory;