-
Notifications
You must be signed in to change notification settings - Fork 35
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[client] improve entity details show/hide #1898
Changes from all commits
478b789
e1f3251
2028fd8
71aa635
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
export const KeyBoardKey = ({ | ||
keyName, | ||
invertColors, | ||
size = "sm", | ||
bounce = true, | ||
className, | ||
}: { | ||
keyName: string; | ||
invertColors?: boolean; | ||
size?: "sm" | "md" | "lg"; | ||
bounce?: boolean; | ||
className?: string; | ||
}) => { | ||
const sizeClasses = { | ||
sm: "w-4 h-4 text-xxs", | ||
md: "w-5 h-5 text-xs", | ||
lg: "w-6 h-6 text-sm", | ||
}; | ||
|
||
return ( | ||
<span | ||
className={` | ||
font-bold rounded | ||
flex items-center justify-center | ||
border-2 shadow-lg | ||
${sizeClasses[size]} | ||
${invertColors ? "text-black border-black" : "text-gold border-gold"} | ||
${bounce ? "animate-bounce" : ""} | ||
transition-all duration-200 hover:scale-110 | ||
${className || ""} | ||
`} | ||
> | ||
{keyName.toUpperCase()} | ||
</span> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,9 +10,10 @@ import { useEntitiesUtils } from "@/hooks/helpers/useEntities"; | |
import { MarketModal } from "@/ui/components/trading/MarketModal"; | ||
import { BuildingThumbs, MenuEnum } from "@/ui/config"; | ||
import { BaseContainer } from "@/ui/containers/BaseContainer"; | ||
import { KeyBoardKey } from "@/ui/elements/KeyBoardKey"; | ||
import clsx from "clsx"; | ||
import { motion } from "framer-motion"; | ||
import { Suspense, lazy, useMemo, useState } from "react"; | ||
import { Suspense, lazy, useEffect, useMemo, useState } from "react"; | ||
import { | ||
construction, | ||
military, | ||
|
@@ -93,19 +94,38 @@ export const LeftNavigationModule = () => { | |
[structureInfo], | ||
); | ||
|
||
useEffect(() => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good addition of the key press event listener for the 'E' key. This implements the requirement to show entity details when 'E' is pressed. |
||
const handleKeyPress = (event: KeyboardEvent) => { | ||
switch (event.key.toLowerCase()) { | ||
case "e": | ||
setView(view === View.EntityView ? View.None : View.EntityView); | ||
break; | ||
} | ||
}; | ||
|
||
window.addEventListener("keydown", handleKeyPress); | ||
|
||
return () => { | ||
window.removeEventListener("keydown", handleKeyPress); | ||
}; | ||
}, [view, setView, toggleModal]); | ||
|
||
const navigation = useMemo(() => { | ||
const baseNavigation = [ | ||
{ | ||
name: MenuEnum.entityDetails, | ||
button: ( | ||
<CircleButton | ||
image={BuildingThumbs.hex} | ||
tooltipLocation="top" | ||
label="Details" | ||
active={view === View.EntityView} | ||
size="xl" | ||
onClick={() => setView(view === View.EntityView ? View.None : View.EntityView)} | ||
/> | ||
<div className="relative"> | ||
<CircleButton | ||
image={BuildingThumbs.hex} | ||
tooltipLocation="top" | ||
label="Details" | ||
active={view === View.EntityView} | ||
size="xl" | ||
onClick={() => setView(view === View.EntityView ? View.None : View.EntityView)} | ||
/> | ||
<KeyBoardKey invertColors={view === View.EntityView} className="absolute top-1 right-1" keyName="E" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice addition of the KeyBoardKey component to visually indicate the 'E' shortcut for entity details. |
||
</div> | ||
), | ||
}, | ||
{ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider adding a comment here to explain the new behavior of showing entity details on the second click of the same hex.