nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

finished logic

Browse Source
This commit is contained in:
dank074 2021-11-27 00:58:21 -06:00
parent d1128afd3d
commit b684715075
7 changed files with 121 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/ui-config.json
View File

@ -5,7 +5,7 @@
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
"url.prefix": "http://localhost:3000",
"floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
"habbopages.url": "http://localhost:3000/",
"habbopages.url": "https://swf.nitrots.co/gamedata/habbopages/",
"chat.viewer.height.percentage": 0.40,
"widget.dimmer.colorwheel": false,
"hotelview": {

71
src/views/campaign/CampaignView.tsx
View File

@ -1,12 +1,14 @@
import { CampaignCalendarData, CampaignCalendarDataMessageEvent } from '@nitrots/nitro-renderer';
import { CampaignCalendarData, CampaignCalendarDataMessageEvent, CampaignCalendarDoorOpenedMessageEvent, OpenCampaignCalendarDoorAsStaffComposer, OpenCampaignCalendarDoorComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api';
import { CreateMessageHook } from '../../hooks';
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
import { CalendarView } from './views/calendar/CalendarView';
export const CampaignView: FC<{}> = props =>
{
const [ calendarData, setCalendarData ] = useState<CampaignCalendarData>(null);
const [ lastOpenAttempt, setLastOpenAttempt ] = useState<number>(-1);
const [ receivedProducts, setReceivedProducts ] = useState<Map<number, string>>(new Map());
const [ isCalendarOpen, setCalendarOpen ] = useState(false);
const onCampaignCalendarDataMessageEvent = useCallback((event: CampaignCalendarDataMessageEvent) =>
@ -14,12 +16,68 @@ export const CampaignView: FC<{}> = props =>
const parser = event.getParser();
if(!parser) return;
console.log(parser);
setCalendarData(parser.calendarData);
}, []);
CreateMessageHook(CampaignCalendarDataMessageEvent, onCampaignCalendarDataMessageEvent);
const onCampaignCalendarDoorOpenedMessageEvent = useCallback((event: CampaignCalendarDoorOpenedMessageEvent) =>
{
const parser = event.getParser();
if(!parser) return;
const lastAttempt = lastOpenAttempt;
if(parser.doorOpened)
{
BatchUpdates(() =>
{
setCalendarData(prev =>
{
const copy = prev.clone();
copy.openedDays.push(lastOpenAttempt);
return copy;
});
setReceivedProducts(prev =>
{
const copy = new Map(prev);
copy.set(lastAttempt, parser.furnitureClassName);
return copy;
});
});
}
setLastOpenAttempt(-1);
}, [lastOpenAttempt]);
CreateMessageHook(CampaignCalendarDoorOpenedMessageEvent, onCampaignCalendarDoorOpenedMessageEvent);
const openPackage = useCallback((id: number, asStaff = false) =>
{
if(!calendarData) return;
setLastOpenAttempt(id);
if(asStaff)
{
SendMessageHook(new OpenCampaignCalendarDoorAsStaffComposer(calendarData.campaignName, id));
}
else
{
SendMessageHook(new OpenCampaignCalendarDoorComposer(calendarData.campaignName, id));
}
}, [calendarData]);
const onCalendarClose = useCallback(() =>
{
setCalendarOpen(false);
}, []);
const onLinkReceived = useCallback((link: string) =>
{
const value = link.split('/');
@ -45,15 +103,10 @@ export const CampaignView: FC<{}> = props =>
}
}, [onLinkReceived]);
const onCalendarClose = useCallback(() =>
{
setCalendarOpen(false);
}, []);
return (
<>
{(calendarData && isCalendarOpen) &&
<CalendarView close={onCalendarClose} campaignName={calendarData.campaignName} currentDay={calendarData.currentDay} numDays={calendarData.campaignDays} openedDays={calendarData.openedDays} missedDays={calendarData.missedDays}/>
<CalendarView close={onCalendarClose} campaignName={calendarData.campaignName} currentDay={calendarData.currentDay} numDays={calendarData.campaignDays} openedDays={calendarData.openedDays} missedDays={calendarData.missedDays} openPackage={openPackage} receivedProducts={receivedProducts} />
}
</>
)

2
src/views/campaign/common/Utils.ts
View File

@ -1,4 +1,4 @@
export const getNumItemsDisplayed = (): number =>
{
return Math.max(Math.min(2, window.screen.width / 135), 7);
return Math.min(Math.max(2, Math.floor(window.screen.width / 135)), 7);
}

8
src/views/campaign/views/calendar-item/CalendarItemView.tsx
View File

@ -26,8 +26,12 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
return (
<NitroLayoutFlexColumn className={`calendar-item h-100 w-100 cursor-pointer align-items-center justify-content-center ${active ? 'active' : ''}`} onClick={() => onClick(id)}>
{ (state === CalendarItemState.STATE_UNLOCKED) &&
<div className="unlocked-generic-bg">
<div className="unlocked-generic-bg d-flex justify-content-center align-items-center">
<div className="opened d-flex justify-content-center align-items-center">
{ productName &&
<img className="furni-icon" src={getFurnitureIcon(productName)} alt='' />
}
</div>
</div>
}

11
src/views/campaign/views/calendar/CalendarView.scss
View File

@ -20,6 +20,17 @@
//width: 190px;
//height: 189px;
.opened {
background: url("../../../../assets/images/campaign/campaign_opened.png");
width: 96px;
height: 66px;
.furni-icon
{
margin-bottom: 10px;
}
}
}
.locked-generic-bg {

59
src/views/campaign/views/calendar/CalendarView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex } from '../../../../layout';
import { CalendarItemState } from '../../common/CalendarItemState';
import { getNumItemsDisplayed } from '../../common/Utils';
@ -8,9 +8,9 @@ import { CalendarViewProps } from './CalendarView.types';
export const CalendarView: FC<CalendarViewProps> = props =>
{
const { close = null, campaignName = null, currentDay = null, numDays = null, missedDays = null, openedDays = null } = props;
const [ selectedDay, setSelectedDay ] = useState(currentDay);
const [ index, setIndex ] = useState(0);
const { close = null, campaignName = null, currentDay = null, numDays = null, missedDays = null, openedDays = null, openPackage = null, receivedProducts = null } = props;
const [selectedDay, setSelectedDay] = useState(currentDay);
const [index, setIndex] = useState(Math.max(0, selectedDay - 1));
const getDayState = useCallback((day: number) =>
{
@ -22,12 +22,12 @@ export const CalendarView: FC<CalendarViewProps> = props =>
{
return CalendarItemState.STATE_LOCKED_FUTURE;
}
if(missedDays.includes(day))
{
return CalendarItemState.STATE_LOCKED_EXPIRED;
}
return CalendarItemState.STATE_LOCKED_AVAILABLE;
}, [currentDay, missedDays, openedDays]);
@ -51,11 +51,11 @@ export const CalendarView: FC<CalendarViewProps> = props =>
{
const nextDay = selectedDay + 1;
if( (nextDay) === numDays) return;
if((nextDay) === numDays) return;
setSelectedDay(nextDay);
if( (index + getNumItemsDisplayed()) < nextDay + 1 )
if((index + getNumItemsDisplayed()) < nextDay + 1)
{
setIndex(index + 1);
}
@ -66,11 +66,11 @@ export const CalendarView: FC<CalendarViewProps> = props =>
{
const prevDay = selectedDay - 1;
if( (prevDay < 0)) return;
if((prevDay < 0)) return;
setSelectedDay(prevDay);
if( index > prevDay)
if(index > prevDay)
{
setIndex(index - 1);
}
@ -81,32 +81,49 @@ export const CalendarView: FC<CalendarViewProps> = props =>
if(selectedDay === item)
{
//handle opening
const state = getDayState(item);
if(state === CalendarItemState.STATE_LOCKED_AVAILABLE) openPackage(item, false);
}
else
{
setSelectedDay(item);
}
}, [selectedDay]);
}, [getDayState, openPackage, selectedDay]);
const forceOpen = useCallback(() =>
{
const id = selectedDay;
const state = getDayState(id);
if(GetSessionDataManager().isModerator && state !== CalendarItemState.STATE_UNLOCKED)
{
openPackage(id, true);
}
}, [getDayState, openPackage, selectedDay]);
return (
<NitroCardView className="nitro-campaign-calendar">
<NitroCardHeaderView headerText={ LocalizeText(`campaign.calendar.${campaignName}.title`) } onCloseClick={ close }/>
<NitroCardHeaderView headerText={LocalizeText(`campaign.calendar.${campaignName}.title`)} onCloseClick={close} />
<NitroCardContentView>
<div className="text-black">
<h3>{ LocalizeText('campaign.calendar.heading.day', ['number'], [(selectedDay + 1).toString()]) }</h3>
<p>{ dayMessage(selectedDay) }</p>
<div className="d-flex justify-content-between">
<div className="text-black">
<h3>{LocalizeText('campaign.calendar.heading.day', ['number'], [(selectedDay + 1).toString()])}</h3>
<p>{dayMessage(selectedDay)}</p>
</div>
{GetSessionDataManager().isModerator &&
<button className="btn btn-sm btn-danger my-4" onClick={forceOpen}>Force open</button>
}
</div>
<div className="button-container">
<div className="calendar-prev cursor-pointer" onClick={ onClickPrev }/>
<div className="calendar-next cursor-pointer" onClick={ onClickNext }/>
<div className="calendar-prev cursor-pointer" onClick={onClickPrev} />
<div className="calendar-next cursor-pointer" onClick={onClickNext} />
</div>
<NitroLayoutFlex className="h-100" gap={ 2 }>
{
<NitroLayoutFlex className="h-100" gap={2}>
{
[...Array(getNumItemsDisplayed())].map((e, i) =>
{
const day = index + i;
return <CalendarItemView key={ i } state={ getDayState(day) } active={selectedDay === day} onClick={onClickItem} id={day}/>
})
return <CalendarItemView key={i} state={getDayState(day)} active={selectedDay === day} onClick={onClickItem} id={day} productName={receivedProducts.has(day) ? receivedProducts.get(day) : null} />
})
}
</NitroLayoutFlex>
</NitroCardContentView>

2
src/views/campaign/views/calendar/CalendarView.types.ts
View File

@ -1,6 +1,8 @@
export interface CalendarViewProps
{
close(): void;
openPackage(id: number, asStaff: boolean);
receivedProducts: Map<number, string>;
campaignName: string;
currentDay: number;
numDays: number;