97 lines
2.3 KiB
JavaScript
97 lines
2.3 KiB
JavaScript
import React, { useContext, useCallback } from "react";
|
|
|
|
import { assetsPath } from './Common.js';
|
|
import { GlobalContext } from "./GlobalContext.js";
|
|
|
|
import "./Placard.css";
|
|
|
|
const Placard = ({type, disabled, count, buildActive, setBuildActive}) => {
|
|
const { ws } = useContext(GlobalContext);
|
|
const sendMessage = useCallback((data) => {
|
|
ws.send(JSON.stringify(data));
|
|
}, [ws]);
|
|
|
|
const dismissClicked = () => {
|
|
setBuildActive(false);
|
|
}
|
|
|
|
const buildClicked = () => {
|
|
if (!type.match(/^l.*/)) { /* longest / largest ... */
|
|
if (!buildActive) {
|
|
setBuildActive(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
const roadClicked = () => {
|
|
sendMessage({ type: 'buy-road'});
|
|
setBuildActive(false);
|
|
};
|
|
|
|
const settlementClicked = () => {
|
|
sendMessage({ type: 'buy-settlement'});
|
|
setBuildActive(false);
|
|
};
|
|
|
|
const cityClicked = () => {
|
|
sendMessage({ type: 'buy-city'});
|
|
setBuildActive(false);
|
|
};
|
|
|
|
const developmentClicked = () => {
|
|
sendMessage({ type: 'buy-development'});
|
|
setBuildActive(false);
|
|
};
|
|
|
|
if (!type) {
|
|
return <></>;
|
|
}
|
|
|
|
if (type === 'B') { type = 'blue'; }
|
|
else if (type === 'O') { type = 'orange'; }
|
|
else if (type === 'R') { type = 'red'; }
|
|
else if (type === 'W') { type = 'white'; }
|
|
|
|
let buttons;
|
|
if (!disabled && buildActive) {
|
|
switch (type) {
|
|
case 'orange':
|
|
case 'red':
|
|
case 'white':
|
|
case 'blue':
|
|
buttons = <>
|
|
<div onClick={dismissClicked}/>
|
|
<div onClick={roadClicked}/>
|
|
<div onClick={settlementClicked}/>
|
|
<div onClick={cityClicked}/>
|
|
<div onClick={developmentClicked}/>
|
|
<div onClick={dismissClicked}/>
|
|
</>;
|
|
break;
|
|
default:
|
|
buttons = <></>;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!disabled) {
|
|
return <div className={`Placard${buildActive ? ' Selected' : ''}`}
|
|
onClick={buildClicked}
|
|
disabled={disabled}
|
|
data-type={type}
|
|
style={{
|
|
backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
|
|
}}
|
|
>{buttons}</div>
|
|
} else {
|
|
return <div className={`Placard${buildActive ? ' Selected' : ''}`}
|
|
disabled={disabled}
|
|
data-type={type}
|
|
style={{
|
|
backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
|
|
}}>{ count && <div className="Right">{count}</div> }</div>
|
|
}
|
|
};
|
|
|
|
export {Placard};
|