Skip to content

Commit

Permalink
Merge pull request #37 from pixelaw/chore/fix_up_event_logs_in_ui
Browse files Browse the repository at this point in the history 
Chore/fix up event logs in UI
  • Loading branch information
@mariz-ov
mariz-ov authored Dec 14, 2023
2 parents 9e9051e + 4738b8d commit 161cef0
Show file tree
Hide file tree
Showing 18 changed files with 295 additions and 190 deletions.
10 changes: 7 additions & 3 deletions web/public/assets/svg/icon_chevron_left.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions web/public/assets/svg/icon_chevron_right.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions web/public/assets/svg/icon_close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions web/public/assets/svg/icon_logs.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 1 addition & 3 deletions web/src/components/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,13 @@ const Main = () => {
<React.Fragment>
{
<DrawPanelProvider>
<div className={'m-sm'}>
<DrawPanel />

<div className="fixed bottom-5 right-20">
<div className="fixed bottom-1 flex justify-center w-full">
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/*// @ts-ignore*/}
<CompactPicker color={selectedHexColor} onChangeComplete={handleColorChange} />
</div>
</div>

<Plugin/>

Expand Down
106 changes: 63 additions & 43 deletions web/src/components/Notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,59 +9,56 @@ import { notificationDataAtom } from '@/global/states.ts'
import { useSetAtom } from 'jotai'
import useAlerts from '@/hooks/events/useAlerts'
import { getEntityIdFromKeys } from '@dojoengine/utils'
import useLocalStorage from '@/hooks/useLocalStorage'
import useAccountAddress from '@/hooks/utils/useAccountAddress'

type AlertType = {
id: string,
position: {
x: number,
y: number
},
caller: string,
player: string,
message: string,
timestamp: bigint
timestamp: bigint,
read?: boolean
}

const Alert: React.FC<AlertType> = ({ position, caller, message }) => {
type AlertProp = AlertType & {
className?: string,
onAlertClick?: (position: {x: number, y: number}, id: string) => void
}
const Alert: React.FC<AlertProp> = ({ position, caller, message, className, onAlertClick, id, read }) => {
const {
setup: {
components: { App },
},
}
} = useDojo()

const app = useComponentValue(App, getEntityIdFromKeys([BigInt(caller)]))
const name = felt252ToString(app?.name ?? 'caller')

const setNotificationData = useSetAtom(notificationDataAtom)

const handleOnClickNotification = () => {
setNotificationData({
x: position.x,
y: position.y,
pixelType: name,
})
if (onAlertClick) onAlertClick(position, id)
}

return (
<div
className={cn(
[
'flex items-center'
'flex items-center',
'w-full',
'text-new-primary',
className ?? ''
])}
>
<div className={cn(['w-[20px] grow-0'])}>
<div className={cn(['h-2 w-2 rounded-full bg-brand-danger'])}/>
</div>
<div className={cn(['grow'])}>
<h2 className={cn(['text-white text-left text-sm font-semibold'])}>{name.toUpperCase()}: {message}</h2>
</div>
<Button
onClick={handleOnClickNotification}
variant={'icon'}
size={'icon'}
className={cn(['w-[20px] grow-0 font-emoji text-xl text-brand-skyblue'])}
>
&#x1f50d;
</Button>
<div onClick={handleOnClickNotification} className={'cursor-pointer w-[95%] pr-[5px]'}>{name} - {message}</div>
{read !== true && (
<div className={cn(['grow-0'])}>
<div className={cn(['h-2 w-2 rounded-full bg-brand-danger'])}/>
</div>
)}
</div>
)
}
Expand All @@ -70,44 +67,63 @@ export default function Notification() {
const [ isOpen, setIsOpen ] = React.useState<boolean>(false)

const alerts = useAlerts()
const hasNotification = alerts.data && alerts.data?.length > 0
const accountAddress = useAccountAddress() ?? 'DEFAULT'

const [ readAlerts, setReadAlerts ] = useLocalStorage<string[]>(`pixelaw::read_alerts::${accountAddress}`, [])

const setNotificationData = useSetAtom(notificationDataAtom)

const handleOnAlertClick = (position: {x: number, y: number}, id: string) => {
setReadAlerts(prevReadAlerts => prevReadAlerts.includes(id) ? prevReadAlerts : [...prevReadAlerts, id])
setNotificationData({
x: position.x,
y: position.y
})
}

const hasNotification = alerts.data ?
alerts.data.filter(alert => !readAlerts.includes(alert.id)).length > 0 : false

return (
<>
{!isOpen && (
<Button
variant={'notification'}
size={'notification'}
className={cn(
[
'fixed left-0 z-40',
'font-emoji text-[28px]'
])}
onClick={() => setIsOpen(true)}
variant={'notification'}
size={'notification'}
className={cn(
[
'fixed left-3 top-[70px] z-40',
'font-emoji text-[28px]',
'bg-[#2A0D39] rounded-full h-[48px] w-[48px]'
])}
onClick={() => setIsOpen(true)}
>
<span className={cn(['relative'])}>
&#x1F514;
<Image src={'/assets/svg/icon_logs.svg'} alt={'Event logs icon'}/>
<div
className={cn([ 'absolute top-[9px] right-[5px] border h-2 w-2 rounded-full bg-brand-danger', { 'hidden': !hasNotification } ])} />
className={cn([ 'absolute top-[-5px] right-[-5px] border h-2 w-2 rounded-full bg-brand-danger', { 'hidden': !hasNotification } ])} />
</span>
</Button>
)}

<div
className={cn(
[
'fixed bottom-0 z-50 overflow-y-auto',
'h-[calc(100vh-var(--header-height))] w-[237px]',
'bg-brand-violet border-r-[1px] border-black',
'py-sm pr-sm pl-xs',
'bg-brand-body border-r-[1px] border-black',
'p-xs',
'transform transition-transform duration-300',
'-translate-x-full',
'opacity-[.88]',
{'translate-x-0': isOpen}
])}
>
<div
className={cn(
[
'h-full',
'flex flex-col gap-y-sm'
'flex flex-col'
])}
>
<div
Expand All @@ -116,22 +132,26 @@ export default function Notification() {
'flex items-center'
])}
>
<div className={cn(['w-[20px] grow-0'])}></div>
<div className={cn(['grow py-xs'])}>
<h2 className={cn(['text-brand-violetAccent text-left text-base uppercase font-silkscreen'])}>Alerts</h2>
<h2 className={cn(['text-[#FFC400] text-left text-base uppercase font-silkscreen'])}>Event Logs</h2>
</div>
<Button
variant={'icon'}
size={'icon'}
className={cn(['w-[20px] grow-0'])}
onClick={() => setIsOpen(false)}
>
<Image src={'/assets/svg/icon_chevron_left.svg'} alt={'Arrow Left Icon'}/>
<Image src={'/assets/svg/icon_close.svg'} alt={'Arrow Left Icon'}/>
</Button>
</div>

{(alerts?.data ?? []).map(alert => (
<Alert {...alert} key={alert.id} />
<Alert {...alert}
key={alert.id}
className={'mb-xs'}
onAlertClick={handleOnAlertClick}
read={readAlerts.includes(alert.id)}
/>
))}

</div>
Expand Down
Loading

0 comments on commit 161cef0

Please sign in to comment.