tauri integration
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-color: rgba(24, 24, 37, 0.85);
|
||||
--nav-bg: rgba(40, 40, 56, 0.4);
|
||||
--nav-active: rgba(65, 66, 88, 0.7);
|
||||
--border-color: rgba(49, 50, 68, 0.6);
|
||||
--text-color: #cdd6f4;
|
||||
--accent-color: #89b4fa;
|
||||
--button-bg: rgba(65, 66, 88, 0.6);
|
||||
--button-hover: rgba(70, 71, 90, 0.8);
|
||||
--button-active: rgba(137, 180, 250, 0.8);
|
||||
--tab-bg: rgba(40, 40, 56, 0.4);
|
||||
--tab-active: rgba(65, 66, 88, 0.7);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Modal Container - Draggable Area */
|
||||
.modal-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Modal - Main App Window */
|
||||
.modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--nav-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--nav-active);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: var(--button-active);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
import { appWindow } from "@tauri-apps/api/window";
|
||||
import "./App.css";
|
||||
|
||||
// Import cursor images directly
|
||||
import defaultCursor from "./cursors/default.png";
|
||||
import iconCursor from "./cursors/icon.png";
|
||||
import redCursor from "./cursors/red.png";
|
||||
|
||||
// Components
|
||||
import Header from "./components/Header";
|
||||
import Content from "./components/Content";
|
||||
import Footer from "./components/Footer";
|
||||
|
||||
function App() {
|
||||
const [activePage, setActivePage] = useState("cursors");
|
||||
const [cursors, setCursors] = useState([]);
|
||||
const [currentCursorIndex, setCurrentCursorIndex] = useState(0);
|
||||
|
||||
// Load cursors on mount
|
||||
useEffect(() => {
|
||||
const loadCursors = async () => {
|
||||
try {
|
||||
// Get cursors from the Tauri backend
|
||||
const loadedCursors = await invoke("get_cursors");
|
||||
console.log("Loaded cursors:", loadedCursors);
|
||||
setCursors(loadedCursors || []);
|
||||
|
||||
// Get current cursor index
|
||||
const currentIndex = await invoke("get_current_cursor_index");
|
||||
setCurrentCursorIndex(currentIndex);
|
||||
} catch (error) {
|
||||
console.error("Failed to load cursors:", error);
|
||||
// Use the imported cursor images directly
|
||||
setCursors([
|
||||
{ name: "default", path: defaultCursor },
|
||||
{ name: "icon", path: iconCursor },
|
||||
{ name: "red", path: redCursor },
|
||||
// We don't have blue and gold cursors imported since they don't exist yet
|
||||
// These will be excluded for now
|
||||
]);
|
||||
setCurrentCursorIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
loadCursors();
|
||||
}, []);
|
||||
|
||||
// Functions to handle cursor operations using Tauri backend
|
||||
const selectCursor = async (index) => {
|
||||
try {
|
||||
console.log(`Selecting cursor at index ${index}`);
|
||||
await invoke("select_cursor", { index });
|
||||
setCurrentCursorIndex(index);
|
||||
} catch (error) {
|
||||
console.error("Failed to select cursor:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const nextCursor = async () => {
|
||||
if (cursors.length === 0) return;
|
||||
|
||||
try {
|
||||
console.log('Switching to next cursor');
|
||||
const newIndex = await invoke("next_cursor");
|
||||
setCurrentCursorIndex(newIndex);
|
||||
} catch (error) {
|
||||
console.error("Failed to switch to next cursor:", error);
|
||||
// Fallback if backend fails
|
||||
const newIndex = (currentCursorIndex + 1) % cursors.length;
|
||||
setCurrentCursorIndex(newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to minimize app to tray
|
||||
const minimizeToTray = async () => {
|
||||
try {
|
||||
console.log('Minimizing app to tray');
|
||||
await appWindow.hide();
|
||||
} catch (error) {
|
||||
console.error("Failed to minimize to tray:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to exit app
|
||||
const quitApp = async () => {
|
||||
try {
|
||||
console.log('Quitting app');
|
||||
await invoke("quit_app");
|
||||
} catch (error) {
|
||||
console.error("Failed to quit app:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-container">
|
||||
<div className="modal">
|
||||
<Header
|
||||
activePage={activePage}
|
||||
setActivePage={setActivePage}
|
||||
minimizeToTray={minimizeToTray}
|
||||
quitApp={quitApp}
|
||||
/>
|
||||
|
||||
<Content
|
||||
activePage={activePage}
|
||||
cursors={cursors}
|
||||
currentCursorIndex={currentCursorIndex}
|
||||
selectCursor={selectCursor}
|
||||
nextCursor={nextCursor}
|
||||
/>
|
||||
|
||||
<Footer
|
||||
version="0.1.0"
|
||||
status={cursors.length > 0 ? `${cursors.length} cursors loaded` : "No cursors found"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,14 @@
|
||||
/* Content Component Styles */
|
||||
.app-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1vh;
|
||||
border-top: 2px solid rgba(49, 50, 68, 0.6);
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 18px;
|
||||
color: var(--accent-color, #89b4fa);
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import './Content.css';
|
||||
|
||||
// Import content modules
|
||||
import Inventory from './content_modules/Inventory';
|
||||
import Cursors from './content_modules/Cursors';
|
||||
import Crates from './content_modules/Crates';
|
||||
import Settings from './content_modules/Settings';
|
||||
|
||||
function Content({ activePage, cursors, currentCursorIndex, selectCursor, nextCursor }) {
|
||||
// Render the appropriate content based on active page
|
||||
const renderContent = () => {
|
||||
switch (activePage) {
|
||||
case 'inventory':
|
||||
return <Inventory
|
||||
cursors={cursors}
|
||||
currentCursorIndex={currentCursorIndex}
|
||||
selectCursor={selectCursor}
|
||||
/>;
|
||||
case 'cursors':
|
||||
return (
|
||||
<Cursors
|
||||
cursors={cursors}
|
||||
currentCursorIndex={currentCursorIndex}
|
||||
selectCursor={selectCursor}
|
||||
nextCursor={nextCursor}
|
||||
/>
|
||||
);
|
||||
case 'crates':
|
||||
return <Crates />;
|
||||
case 'settings':
|
||||
return <Settings />;
|
||||
default:
|
||||
return <Cursors
|
||||
cursors={cursors}
|
||||
currentCursorIndex={currentCursorIndex}
|
||||
selectCursor={selectCursor}
|
||||
nextCursor={nextCursor}
|
||||
/>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app-content">
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Footer Component Styles */
|
||||
.app-footer {
|
||||
width: 100%;
|
||||
background-color: var(--footer-bg, #181825);
|
||||
padding: 8px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--border-color, #313244);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-status {
|
||||
color: var(--text-color, #cdd6f4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
color: var(--text-color, #cdd6f4);
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import './Footer.css';
|
||||
|
||||
function Footer({ version, status }) {
|
||||
return (
|
||||
<footer className="app-footer">
|
||||
<div className="app-status">
|
||||
{status}
|
||||
</div>
|
||||
<div className="app-version">
|
||||
v{version}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,100 @@
|
||||
/* Header Component Styles */
|
||||
.app-header {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: transparent; /* Reverted to original */
|
||||
/* cursor: move; */ /* Removed, should be handled by drag region or default */
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Chrome-like tabs */
|
||||
.tab {
|
||||
-webkit-app-region: no-drag; /* Override drag region for clickable tabs */
|
||||
cursor: pointer; /* Ensure tabs have a pointer cursor */
|
||||
height: 36px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tab:hover:not(.active):not(.drag-handle) {
|
||||
background-color: var(--tab-bg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: var(--tab-active);
|
||||
color: var(--accent-color);
|
||||
z-index: 1;
|
||||
height: 40px;
|
||||
margin-top: 0;
|
||||
box-shadow: 0 0 10px rgba(137, 180, 250, 0.3);
|
||||
}
|
||||
|
||||
/* Special drag handle tab */
|
||||
.tab.drag-handle {
|
||||
width: 30px;
|
||||
background-color: transparent;
|
||||
color: rgba(205, 214, 244, 0.5);
|
||||
}
|
||||
|
||||
.tab.drag-handle:hover {
|
||||
color: rgba(205, 214, 244, 0.8);
|
||||
}
|
||||
|
||||
/* Window control buttons */
|
||||
.window-controls {
|
||||
-webkit-app-region: no-drag; /* Override drag region for buttons */
|
||||
cursor: default; /* Keep default cursor for controls area */
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.minimize-button,
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.minimize-button:hover,
|
||||
.close-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #f38ba8;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import './Header.css';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faGripVertical,
|
||||
faBoxOpen,
|
||||
faMousePointer,
|
||||
faBoxes,
|
||||
faCog,
|
||||
faBoxArchive,
|
||||
faBox,
|
||||
faWarehouse,
|
||||
faGraduationCap,
|
||||
faCubesStacked,
|
||||
faBorderAll,
|
||||
faBagShopping
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
function Header({ activePage, setActivePage, minimizeToTray, quitApp }) {
|
||||
// Navigation buttons for each page with icons
|
||||
const navItems = [
|
||||
{ id: 'inventory', icon: faBagShopping, tooltip: 'Inventory' },
|
||||
{ id: 'cursors', icon: faMousePointer, tooltip: 'Cursors' },
|
||||
{ id: 'crates', icon: faBoxOpen, tooltip: 'Crates' },
|
||||
{ id: 'settings', icon: faCog, tooltip: 'Settings' }
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="app-header" data-tauri-drag-region>
|
||||
<div className="tabs-container">
|
||||
{navItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`tab ${activePage === item.id ? 'active' : ''}`}
|
||||
onClick={() => setActivePage(item.id)}
|
||||
title={item.tooltip}
|
||||
>
|
||||
<FontAwesomeIcon icon={item.icon} />
|
||||
</div>
|
||||
))}
|
||||
<div className="window-controls">
|
||||
<button className="minimize-button" onClick={minimizeToTray} title="Minimize to Tray">
|
||||
_
|
||||
</button>
|
||||
<button className="close-button" onClick={quitApp} title="Quit Application">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,351 @@
|
||||
/* Crates Module Styles */
|
||||
.crates-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Current crate section (top part) */
|
||||
.current-crate-section {
|
||||
height: 60%;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid rgba(49, 50, 68, 0.6);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.current-crate {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(30, 30, 46, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
border: 1px solid rgba(49, 50, 68, 0.4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Color accents for different crate types */
|
||||
.current-crate::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.current-crate.common::before { background-color: #a6adc8; }
|
||||
.current-crate.uncommon::before { background-color: #a6e3a1; }
|
||||
.current-crate.rare::before { background-color: #89b4fa; }
|
||||
.current-crate.epic::before { background-color: #cba6f7; }
|
||||
.current-crate.legendary::before {
|
||||
background: linear-gradient(90deg, #f9e2af, #fab387, #f9e2af);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -100px; }
|
||||
100% { background-position: 100px; }
|
||||
}
|
||||
|
||||
.crate-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: rgba(49, 50, 68, 0.6);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: rgba(65, 66, 88, 0.8);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.crate-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.crate-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgba(24, 24, 37, 0.5);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid rgba(49, 50, 68, 0.6);
|
||||
}
|
||||
|
||||
.crate-icon {
|
||||
font-size: 48px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* Crate color styling */
|
||||
.current-crate.common .crate-icon { color: #a6adc8; text-shadow: 0 0 10px rgba(166, 173, 200, 0.4); }
|
||||
.current-crate.uncommon .crate-icon { color: #a6e3a1; text-shadow: 0 0 10px rgba(166, 227, 161, 0.4); }
|
||||
.current-crate.rare .crate-icon { color: #89b4fa; text-shadow: 0 0 10px rgba(137, 180, 250, 0.4); }
|
||||
.current-crate.epic .crate-icon { color: #cba6f7; text-shadow: 0 0 10px rgba(203, 166, 247, 0.4); }
|
||||
.current-crate.legendary .crate-icon { color: #f9e2af; text-shadow: 0 0 15px rgba(249, 226, 175, 0.6); animation: pulse 2s infinite; }
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Opening animation */
|
||||
.crate-image.opening {
|
||||
animation: shake 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
50% { transform: translateX(5px); }
|
||||
75% { transform: translateX(-5px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.crate-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.crate-name {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.current-crate.common .crate-name { color: #a6adc8; }
|
||||
.current-crate.uncommon .crate-name { color: #a6e3a1; }
|
||||
.current-crate.rare .crate-name { color: #89b4fa; }
|
||||
.current-crate.epic .crate-name { color: #cba6f7; }
|
||||
.current-crate.legendary .crate-name { color: #f9e2af; }
|
||||
|
||||
.crate-description {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.crate-stats {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.crate-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.open-button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
min-width: 150px;
|
||||
justify-content: center;
|
||||
background-color: rgba(49, 50, 68, 0.7);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.open-button:hover:not(:disabled) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.open-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.open-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Button colors by rarity */
|
||||
.open-button.common:hover:not(:disabled) { background-color: #a6adc8; color: #1e1e2e; }
|
||||
.open-button.uncommon:hover:not(:disabled) { background-color: #a6e3a1; color: #1e1e2e; }
|
||||
.open-button.rare:hover:not(:disabled) { background-color: #89b4fa; color: #1e1e2e; }
|
||||
.open-button.epic:hover:not(:disabled) { background-color: #cba6f7; color: #1e1e2e; }
|
||||
.open-button.legendary:hover:not(:disabled) { background-color: #f9e2af; color: #1e1e2e; }
|
||||
|
||||
/* Crates inventory section (bottom part) */
|
||||
.crates-inventory-section {
|
||||
height: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.inventory-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.inventory-header h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.total-crates {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.crates-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 10px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.crate-item {
|
||||
background-color: rgba(49, 50, 68, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.crate-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
/* Crate item colors */
|
||||
.crate-item.common::after { background-color: #a6adc8; }
|
||||
.crate-item.uncommon::after { background-color: #a6e3a1; }
|
||||
.crate-item.rare::after { background-color: #89b4fa; }
|
||||
.crate-item.epic::after { background-color: #cba6f7; }
|
||||
.crate-item.legendary::after {
|
||||
background: linear-gradient(90deg, #f9e2af, #fab387, #f9e2af);
|
||||
background-size: 200% auto;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.crate-item:hover:not(.empty) {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.crate-item.selected {
|
||||
border-color: var(--accent-color);
|
||||
background-color: rgba(49, 50, 68, 0.6);
|
||||
box-shadow: 0 0 10px rgba(137, 180, 250, 0.4);
|
||||
}
|
||||
|
||||
.crate-item.empty {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.crate-item-icon {
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crate-item.common .crate-item-icon { color: #a6adc8; }
|
||||
.crate-item.uncommon .crate-item-icon { color: #a6e3a1; }
|
||||
.crate-item.rare .crate-item-icon { color: #89b4fa; }
|
||||
.crate-item.epic .crate-item-icon { color: #cba6f7; }
|
||||
.crate-item.legendary .crate-item-icon { color: #f9e2af; }
|
||||
|
||||
.crate-count {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -10px;
|
||||
background-color: rgba(30, 30, 46, 0.9);
|
||||
border-radius: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.crate-item-name {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 500px) {
|
||||
.crate-display {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.crate-info {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import React, { useState } from 'react';
|
||||
import './Crates.css';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faBox, faBoxOpen, faArrowRight, faArrowLeft, faUnlock } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
function Crates() {
|
||||
// Mock crate data - would come from backend
|
||||
const crateTypes = [
|
||||
{ id: 'common', name: 'Common Crate', count: 5, color: '#a6adc8', description: 'Contains common cursors' },
|
||||
{ id: 'uncommon', name: 'Uncommon Crate', count: 3, color: '#a6e3a1', description: 'Contains uncommon and common cursors' },
|
||||
{ id: 'rare', name: 'Rare Crate', count: 2, color: '#89b4fa', description: 'Contains rare and uncommon cursors' },
|
||||
{ id: 'epic', name: 'Epic Crate', count: 1, color: '#cba6f7', description: 'Contains epic, rare and uncommon cursors' },
|
||||
{ id: 'legendary', name: 'Legendary Crate', count: 0, color: '#f9e2af', description: 'Contains legendary and epic cursors' }
|
||||
];
|
||||
|
||||
const [selectedCrateIndex, setSelectedCrateIndex] = useState(0);
|
||||
const [isOpening, setIsOpening] = useState(false);
|
||||
const selectedCrate = crateTypes[selectedCrateIndex];
|
||||
|
||||
// Navigate through available crates
|
||||
const navigateCrate = (direction) => {
|
||||
// Find next available crate with count > 0
|
||||
let newIndex = selectedCrateIndex;
|
||||
let attempts = 0;
|
||||
|
||||
while (attempts < crateTypes.length) {
|
||||
newIndex = (newIndex + direction + crateTypes.length) % crateTypes.length;
|
||||
if (crateTypes[newIndex].count > 0) {
|
||||
break;
|
||||
}
|
||||
attempts++;
|
||||
}
|
||||
|
||||
if (crateTypes[newIndex].count > 0) {
|
||||
setSelectedCrateIndex(newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
// Simulate opening a crate
|
||||
const openCrate = () => {
|
||||
if (selectedCrate.count <= 0) return;
|
||||
|
||||
setIsOpening(true);
|
||||
// Simulate API call and animation time
|
||||
setTimeout(() => {
|
||||
setIsOpening(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="crates-container">
|
||||
{/* Current selected crate section */}
|
||||
<div className="current-crate-section">
|
||||
<div className={`current-crate ${selectedCrate.id}`}>
|
||||
<div className="crate-navigation">
|
||||
<button
|
||||
className="nav-button"
|
||||
onClick={() => navigateCrate(-1)}
|
||||
disabled={crateTypes.filter(c => c.count > 0).length <= 1}
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowLeft} />
|
||||
</button>
|
||||
|
||||
<div className="crate-display">
|
||||
<div className={`crate-image ${isOpening ? 'opening' : ''}`}>
|
||||
<FontAwesomeIcon
|
||||
icon={isOpening ? faBoxOpen : faBox}
|
||||
className="crate-icon"
|
||||
/>
|
||||
</div>
|
||||
<div className="crate-info">
|
||||
<h2 className="crate-name">{selectedCrate.name}</h2>
|
||||
<div className="crate-stats">
|
||||
<span>You have: <strong>{selectedCrate.count}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="nav-button"
|
||||
onClick={() => navigateCrate(1)}
|
||||
disabled={crateTypes.filter(c => c.count > 0).length <= 1}
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowRight} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="crate-actions">
|
||||
<button
|
||||
className={`open-button ${selectedCrate.id}`}
|
||||
onClick={openCrate}
|
||||
disabled={selectedCrate.count === 0 || isOpening}
|
||||
>
|
||||
{isOpening ? 'Opening...' : (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faUnlock} /> Open Crate
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Crates inventory section */}
|
||||
<div className="crates-inventory-section">
|
||||
<div className="inventory-header">
|
||||
<h3>Your Crates</h3>
|
||||
<span className="total-crates">
|
||||
{crateTypes.reduce((total, crate) => total + crate.count, 0)} total
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="crates-grid">
|
||||
{crateTypes.map((crate, index) => (
|
||||
<div
|
||||
key={crate.id}
|
||||
className={`crate-item ${crate.id} ${index === selectedCrateIndex ? 'selected' : ''} ${crate.count === 0 ? 'empty' : ''}`}
|
||||
onClick={() => crate.count > 0 && setSelectedCrateIndex(index)}
|
||||
>
|
||||
<div className="crate-item-icon">
|
||||
<FontAwesomeIcon icon={faBox} />
|
||||
{crate.count > 1 && <span className="crate-count">{crate.count}</span>}
|
||||
</div>
|
||||
<div className="crate-item-name">{crate.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Crates;
|
||||
@@ -0,0 +1,358 @@
|
||||
/* Cursors Module Styles */
|
||||
.cursors-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Equipped cursor banner */
|
||||
.equipped-cursor-banner {
|
||||
height: 25%;
|
||||
min-height: 120px;
|
||||
max-height: 150px;
|
||||
display: flex;
|
||||
background-color: rgba(30, 30, 46, 0.3);
|
||||
border-bottom: 2px solid rgba(49, 50, 68, 0.6);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.current-preview {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.current-preview.legendary {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
filter: drop-shadow(0 0 8px rgba(249, 226, 175, 0.4));
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-5px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
.equipped-cursor-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.equipped-cursor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipped-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(205, 214, 244, 0.6);
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.equipped-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.equipped-rarity {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
align-self: flex-start;
|
||||
background-color: rgba(65, 66, 88, 0.8);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 15px;
|
||||
color: var(--text-color);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.next-button:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: #1e1e2e;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Library controls section */
|
||||
.cursors-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 5px 10px 15px 10px;
|
||||
border-bottom: 1px solid rgba(49, 50, 68, 0.4);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(205, 214, 244, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
background-color: rgba(49, 50, 68, 0.3);
|
||||
border: 1px solid rgba(49, 50, 68, 0.6);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
padding: 8px 10px 8px 32px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 5px rgba(137, 180, 250, 0.3);
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
background-color: rgba(49, 50, 68, 0.4);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background-color: rgba(65, 66, 88, 0.6);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background-color: rgba(65, 66, 88, 0.8);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Rarity-based styling for filter buttons */
|
||||
.filter-button.common {
|
||||
border-left-color: #a6adc8;
|
||||
}
|
||||
|
||||
.filter-button.uncommon {
|
||||
border-left-color: #a6e3a1;
|
||||
}
|
||||
|
||||
.filter-button.rare {
|
||||
border-left-color: #89b4fa;
|
||||
}
|
||||
|
||||
.filter-button.epic {
|
||||
border-left-color: #cba6f7;
|
||||
}
|
||||
|
||||
.filter-button.legendary {
|
||||
border-left-color: #f9e2af;
|
||||
}
|
||||
|
||||
/* Main cursor library */
|
||||
.cursor-library {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
scrollbar-width: thin;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rarity-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rarity-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.rarity-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rarity-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Rarity colors */
|
||||
.equipped-name.common, .equipped-rarity.common, .rarity-line.common { background-color: #a6adc8; }
|
||||
.equipped-name.uncommon, .equipped-rarity.uncommon, .rarity-line.uncommon { background-color: #a6e3a1; }
|
||||
.equipped-name.rare, .equipped-rarity.rare, .rarity-line.rare { background-color: #89b4fa; }
|
||||
.equipped-name.epic, .equipped-rarity.epic, .rarity-line.epic { background-color: #cba6f7; }
|
||||
.equipped-name.legendary, .equipped-rarity.legendary, .rarity-line.legendary { background-color: #f9e2af; }
|
||||
|
||||
/* Horizontal scrolling cursor list */
|
||||
.cursor-list {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
padding: 5px 0 15px 0;
|
||||
scrollbar-width: thin;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.cursor-card {
|
||||
min-width: 150px;
|
||||
max-width: 180px;
|
||||
background-color: rgba(49, 50, 68, 0.4);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(49, 50, 68, 0.4);
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Circular rarity indicator in top right */
|
||||
.cursor-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
z-index: 5;
|
||||
background-color: currentColor;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Rarity colors */
|
||||
.cursor-card.common { color: #a6adc8; }
|
||||
.cursor-card.uncommon { color: #a6e3a1; }
|
||||
.cursor-card.rare { color: #89b4fa; }
|
||||
.cursor-card.epic { color: #cba6f7; }
|
||||
.cursor-card.legendary { color: #f9e2af; }
|
||||
|
||||
/* Hover and active states */
|
||||
.cursor-card:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
|
||||
border-color: currentColor;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.cursor-card:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.cursor-card.active {
|
||||
border-color: currentColor;
|
||||
box-shadow: 0 0 12px currentColor;
|
||||
}
|
||||
|
||||
/* Preview container */
|
||||
.cursor-preview-container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(30, 30, 46, 0.5);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.cursor-preview-img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cursor-card:hover .cursor-preview-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Cursor details */
|
||||
.cursor-details {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.cursor-name {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cursor-rarity-badge {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
text-transform: capitalize;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Animation for legendary items */
|
||||
.cursor-card.legendary::before {
|
||||
animation: legendaryGlow 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes legendaryGlow {
|
||||
0% { opacity: 0.4; }
|
||||
50% { opacity: 0.9; }
|
||||
100% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
.no-cursors, .no-results {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(49, 50, 68, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import React, { useState } from 'react';
|
||||
import './Cursors.css';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSort, faFilter, faSortAmountDown, faSearch } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
function Cursors({ cursors, currentCursorIndex, selectCursor, nextCursor }) {
|
||||
const [filter, setFilter] = useState('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const currentCursor = cursors.length > 0 && currentCursorIndex < cursors.length
|
||||
? cursors[currentCursorIndex]
|
||||
: null;
|
||||
|
||||
// This will eventually come from backend with proper data
|
||||
const getRarity = (index) => {
|
||||
const rarities = ['common', 'uncommon', 'rare', 'epic', 'legendary'];
|
||||
return rarities[index % rarities.length];
|
||||
};
|
||||
|
||||
// Group cursors by rarity
|
||||
const cursorsByRarity = cursors.reduce((acc, cursor, index) => {
|
||||
const rarity = getRarity(index);
|
||||
if (!acc[rarity]) acc[rarity] = [];
|
||||
acc[rarity].push({ ...cursor, index, rarity });
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Filter logic with search
|
||||
const filteredCursors = Object.entries(cursorsByRarity)
|
||||
.filter(([rarity, _]) => filter === 'all' || rarity === filter)
|
||||
.map(([rarity, cursorsOfRarity]) => [
|
||||
rarity,
|
||||
cursorsOfRarity.filter(c =>
|
||||
!searchTerm || c.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
])
|
||||
.filter(([_, cursors]) => cursors.length > 0);
|
||||
|
||||
return (
|
||||
<div className="cursors-container">
|
||||
{/* Current cursor equipped display */}
|
||||
{currentCursor && (
|
||||
<div className="equipped-cursor-banner">
|
||||
<div className="equipped-cursor-image">
|
||||
<img
|
||||
src={currentCursor.path}
|
||||
alt={currentCursor.name}
|
||||
className={`current-preview ${getRarity(currentCursorIndex)}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="equipped-cursor-details">
|
||||
<div className="equipped-cursor-info">
|
||||
<div className="equipped-label">EQUIPPED</div>
|
||||
<div className={`equipped-name ${getRarity(currentCursorIndex)}`}>{currentCursor.name}</div>
|
||||
<div className={`equipped-rarity ${getRarity(currentCursorIndex)}`}>
|
||||
{getRarity(currentCursorIndex).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
<button className="next-button" onClick={nextCursor}>Next Cursor</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Library controls */}
|
||||
<div className="cursors-controls">
|
||||
<div className="search-box">
|
||||
<FontAwesomeIcon icon={faSearch} className="search-icon" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search cursors..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="filter-controls">
|
||||
<button
|
||||
className={`filter-button ${filter === 'all' ? 'active' : ''}`}
|
||||
onClick={() => setFilter('all')}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{Object.keys(cursorsByRarity).map(rarity => (
|
||||
<button
|
||||
key={rarity}
|
||||
className={`filter-button ${filter === rarity ? 'active' : ''} ${rarity}`}
|
||||
onClick={() => setFilter(rarity)}
|
||||
>
|
||||
{rarity.charAt(0).toUpperCase() + rarity.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cursor library */}
|
||||
{cursors.length > 0 ? (
|
||||
<div className="cursor-library">
|
||||
{filteredCursors.map(([rarity, cursorsInRarity]) => (
|
||||
<div className="rarity-section" key={rarity}>
|
||||
<div className={`rarity-header ${rarity}`}>
|
||||
<h3 className="rarity-title">
|
||||
{rarity.toUpperCase()} ({cursorsInRarity.length})
|
||||
</h3>
|
||||
<div className={`rarity-line ${rarity}`}></div>
|
||||
</div>
|
||||
|
||||
<div className="cursor-list">
|
||||
{cursorsInRarity.map((cursor) => (
|
||||
<div
|
||||
key={cursor.index}
|
||||
className={`cursor-card ${cursor.index === currentCursorIndex ? 'active' : ''} ${cursor.rarity}`}
|
||||
onClick={() => selectCursor(cursor.index)}
|
||||
>
|
||||
<div className="cursor-preview-container">
|
||||
<img
|
||||
src={cursor.path}
|
||||
alt={cursor.name}
|
||||
className="cursor-preview-img"
|
||||
/>
|
||||
</div>
|
||||
<div className="cursor-details">
|
||||
<span className="cursor-name">{cursor.name}</span>
|
||||
<span className="cursor-rarity-badge">{cursor.rarity}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredCursors.length === 0 && (
|
||||
<div className="no-results">No cursors match your search</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-cursors">
|
||||
<p>No cursors found in assets directory</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cursors;
|
||||
@@ -0,0 +1,359 @@
|
||||
/* Inventory Module Styles */
|
||||
.inventory-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Search and filter controls */
|
||||
.inventory-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
background-color: rgba(49, 50, 68, 0.4);
|
||||
border-radius: 8px;
|
||||
margin-top: 2%;
|
||||
border: 1px solid rgba(49, 50, 68, 0.8);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(49, 50, 68, 0.8);
|
||||
background-color: rgba(30, 30, 46, 0.7);
|
||||
color: #cdd6f4;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-bar input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: rgba(205, 214, 244, 0.5);
|
||||
}
|
||||
|
||||
.rarity-filter {
|
||||
width: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rarity-filter select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(49, 50, 68, 0.8);
|
||||
background-color: rgba(30, 30, 46, 0.7);
|
||||
color: transparent;
|
||||
text-indent: -9999px;
|
||||
font-size: 14px;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 4px center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rarity-filter .rarity-circle {
|
||||
position: absolute;
|
||||
aspect-ratio: 1/1;
|
||||
width: 30%;
|
||||
margin-left: 8px;
|
||||
|
||||
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Rarity colors for circle indicators */
|
||||
.rarity-circle.all {
|
||||
background: linear-gradient(45deg, #a6adc8, #a6e3a1, #89b4fa, #cba6f7, #f9e2af);
|
||||
}
|
||||
.rarity-circle.common { background-color: #a6adc8; }
|
||||
.rarity-circle.uncommon { background-color: #a6e3a1; }
|
||||
.rarity-circle.rare { background-color: #89b4fa; }
|
||||
.rarity-circle.epic { background-color: #cba6f7; }
|
||||
.rarity-circle.legendary {
|
||||
background-color: #f9e2af;
|
||||
box-shadow: 0 0 5px #f9e2af;
|
||||
}
|
||||
|
||||
/* Style dropdown options to show text and circles */
|
||||
.rarity-filter select option {
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.rarity-filter .rarity-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rarity-filter select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
|
||||
}
|
||||
|
||||
/* Equipped cursor display */
|
||||
.equipped-cursor {
|
||||
display: flex;
|
||||
background-color: rgba(49, 50, 68);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
min-height: 25%;
|
||||
max-height: 25%;
|
||||
border: 1px solid rgba(49, 50, 68, 0.8);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.equipped-cursor-image {
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(30, 30, 46, 0.5);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(49, 50, 68, 0.6);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.equipped-image {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.equipped-cursor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipped-cursor-info h3 {
|
||||
font-size: 14px;
|
||||
margin: 0 0 3px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.equipped-cursor-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.equipped-cursor-rarity {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Minecraft-style inventory */
|
||||
.cute-inventory {
|
||||
min-height: 58%;
|
||||
max-height: 58%;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: rgba(30, 30, 46, 0.3);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2%;
|
||||
border: 1px solid rgba(49, 50, 68, 0.6);
|
||||
}
|
||||
|
||||
.inventory-grid {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9vh, 1fr));
|
||||
}
|
||||
|
||||
.inventory-slot {
|
||||
aspect-ratio: 1;
|
||||
background-color: rgba(49, 50, 68, 0.5);
|
||||
border: 2px solid rgba(30, 30, 46, 0.8);
|
||||
border-radius: 1vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5vh;
|
||||
position: relative;
|
||||
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Rarity indicator as small circle in top right */
|
||||
.inventory-slot.has-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-color: rgba(30, 30, 46, 0.8);
|
||||
}
|
||||
|
||||
/* Small circle rarity indicator in top right */
|
||||
.inventory-slot.has-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item.common::after {
|
||||
background-color: #a6adc8;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item.uncommon::after {
|
||||
background-color: #a6e3a1;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item.rare::after {
|
||||
background-color: #89b4fa;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item.epic::after {
|
||||
background-color: #cba6f7;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item.legendary::after {
|
||||
background-color: #f9e2af;
|
||||
box-shadow: 0 0 5px rgba(249, 226, 175, 0.8);
|
||||
animation: pulseDot 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulseDot {
|
||||
0% { transform: scale(1); box-shadow: 0 0 5px rgba(249, 226, 175, 0.5); }
|
||||
50% { transform: scale(1.2); box-shadow: 0 0 8px rgba(249, 226, 175, 0.8); }
|
||||
100% { transform: scale(1); box-shadow: 0 0 5px rgba(249, 226, 175, 0.5); }
|
||||
}
|
||||
|
||||
.inventory-slot.has-item:hover {
|
||||
transform: scale(1.08);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.inventory-slot.has-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Selected item overrides rarity glow */
|
||||
.inventory-slot.selected {
|
||||
border-color: var(--accent-color) !important;
|
||||
box-shadow: 0 0 12px var(--accent-color) !important;
|
||||
z-index: 10;
|
||||
animation: selectedPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes selectedPulse {
|
||||
0% { box-shadow: 0 0 8px var(--accent-color) !important; }
|
||||
50% { box-shadow: 0 0 15px var(--accent-color) !important; }
|
||||
100% { box-shadow: 0 0 8px var(--accent-color) !important; }
|
||||
}
|
||||
|
||||
/* Shine effect when clicked */
|
||||
.inventory-slot.has-item:active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
|
||||
opacity: 0.6;
|
||||
transform: scale(0);
|
||||
animation: clickRipple 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes clickRipple {
|
||||
0% { transform: scale(0); opacity: 0.6; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
.inventory-item {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Tooltip that appears on hover */
|
||||
.inventory-tooltip {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(30, 30, 46, 0.95);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
min-width: 80px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inventory-slot:hover .inventory-tooltip {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tooltip-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tooltip-rarity {
|
||||
font-size: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Rarity colors */
|
||||
.common, .common.equipped-cursor-name, .tooltip-name.common { color: #a6adc8; }
|
||||
.uncommon, .uncommon.equipped-cursor-name, .tooltip-name.uncommon { color: #a6e3a1; }
|
||||
.rare, .rare.equipped-cursor-name, .tooltip-name.rare { color: #89b4fa; }
|
||||
.epic, .epic.equipped-cursor-name, .tooltip-name.epic { color: #cba6f7; }
|
||||
.legendary, .legendary.equipped-cursor-name, .tooltip-name.legendary { color: #f9e2af; }
|
||||
|
||||
/* Legendary glow effect */
|
||||
.inventory-slot.selected .inventory-item.legendary {
|
||||
filter: drop-shadow(0 0 3px #f9e2af);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.5)); }
|
||||
50% { filter: drop-shadow(0 0 4px rgba(249, 226, 175, 0.8)); }
|
||||
100% { filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.5)); }
|
||||
}
|
||||
|
||||
.inventory-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.cursor-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -0,0 +1,75 @@
|
||||
/* Settings Module Styles */
|
||||
.settings-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
background-color: var(--button-bg, #313244);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
color: var(--text-color, #cdd6f4);
|
||||
}
|
||||
|
||||
.settings-group h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--accent-color, #89b4fa);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.setting-item input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
background-color: var(--modal-bg, #181825);
|
||||
border: 1px solid var(--text-color, #cdd6f4);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting-item input[type="checkbox"]:checked {
|
||||
background-color: var(--accent-color, #89b4fa);
|
||||
border-color: var(--accent-color, #89b4fa);
|
||||
}
|
||||
|
||||
.setting-item input[type="checkbox"]:checked::after {
|
||||
content: '✓';
|
||||
font-size: 12px;
|
||||
color: var(--bg-color, #1e1e2e);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.settings-group p {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import './Settings.css';
|
||||
|
||||
function Settings() {
|
||||
return (
|
||||
<div className="settings-container">
|
||||
<h2 className="content-title">Settings</h2>
|
||||
<div className="settings-content">
|
||||
<div className="settings-group">
|
||||
<h3>Application Settings</h3>
|
||||
<div className="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Start with Windows
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
Minimize to tray on close
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-group">
|
||||
<h3>Cursor Settings</h3>
|
||||
<div className="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
Auto-apply cursor on selection
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-group">
|
||||
<h3>About</h3>
|
||||
<p>Cursor Rush v0.1.0</p>
|
||||
<p>A cross-platform application for customizing your cursor.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
Reference in New Issue
Block a user