Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 36x 36x 36x 18x 18x 54x 18x 18x 18x 18x 18x 18x 18x 18x 36x 36x | import React, { useEffect, useState } from 'react';
import "./Header.css";
const defaultProducts = [
{ id: 'stick', name: 'Stick', price: 15, imgSrc: '/stick.png', soldSrc: '/stick.png' },
{ id: 'sword', name: 'Sword', price: 30, imgSrc: '/sword.png', soldSrc: '/sword.png' },
{ id: 'magicBook', name: 'MagicBook', price: 40, imgSrc: '/book.png', soldSrc: '/book.png' },
];
const Header = ({ health, experience, level, products = defaultProducts }) => {
const [boughtProducts, setBoughtProducts] = useState([]);
const [selectedItem, setSelectedItem] = useState(null);
useEffect(() => {
// update state
const updateBoughtProducts = () => {
const boughtItems = JSON.parse(localStorage.getItem('boughtItems') || '{}');
const updatedBoughtProducts = products.filter(product => boughtItems[product.id]);
setBoughtProducts(updatedBoughtProducts);
};
// get bought products
updateBoughtProducts();
// get selected item from localStorage
const savedSelectedItem = localStorage.getItem('selectedItem');
Iif (savedSelectedItem) {
setSelectedItem(JSON.parse(savedSelectedItem));
}
const handleLocalStorageChange = () => {
updateBoughtProducts();
};
window.addEventListener('localStorageChanged', handleLocalStorageChange);
return () => {
window.removeEventListener('localStorageChanged', handleLocalStorageChange);
};
}, [products]);
// show selected in character-pic
const handleItemClick = (product) => {
setSelectedItem(product);
localStorage.setItem('selectedItem', JSON.stringify(product));
};
return(
<div className="header">
{/*-------- User Start --------*/}
<div className="user">
<div className="user-character">
<img className="user-character-pic" src="/char-pic.png" alt=""/>
{/* show if a weaspon is selected, else show nothing*/}
{selectedItem ? (
<img className="selected-weapon" src={selectedItem.imgSrc} alt={selectedItem.name} />
) : null
}
</div>
<div className="user-character-info">
<div className="username">Ray</div>
<div className="user-data">
{/*- Health Bar -*/}
<div className="health">
<img src="/heart.png" alt=""/>
<div className="health-bar">
<div className="health-level" style={{ width: `${health}%` }}></div>
</div>
<span>{health}/100</span>
</div>
{/*- Level Bar -*/}
<div className="level">
<img src="/star.png" alt=""/>
<div className="level-bar">
<div className="level-level" style={{ width: `${experience}%` }}></div>
</div>
<span>Level {level}: {experience}/100</span>
</div>
</div>
</div>
</div>
{/*-------- User End --------*/}
{/*-------- Bag Start --------*/}
<div className="bag">
<div className="bag-name">Bag</div>
<div className="bought-items-images">
{boughtProducts.map(product => (
<img
key={product.id}
src={product.soldSrc}
alt={product.name}
title={`Bought: ${product.name}`}
onClick={() => handleItemClick(product)}
style={selectedItem && selectedItem.id === product.id ? { backgroundColor: '#f75d5d' } : {}}
/>
))}
</div>
</div>
{/*-------- Bag End --------*/}
</div>
);
};
export default Header;
|