finished logic

public/ui-config.json

@@ -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": {

src/views/campaign/CampaignView.tsx

@@ -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} />
             }
         </>
     )

src/views/campaign/common/Utils.ts

@@ -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);
 }

src/views/campaign/views/calendar-item/CalendarItemView.tsx

@@ -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>
             }
 

src/views/campaign/views/calendar/CalendarView.scss

@@ -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 {

src/views/campaign/views/calendar/CalendarView.tsx

@@ -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 { close = null, campaignName = null, currentDay = null, numDays = null, missedDays = null, openedDays = null, openPackage = null, receivedProducts = null } = props;
-    const [ selectedDay, setSelectedDay ] = useState(currentDay);
+    const [selectedDay, setSelectedDay] = useState(currentDay);
-    const [ index, setIndex ] = useState(0);
+    const [index, setIndex] = useState(Math.max(0, selectedDay - 1));
 
     const getDayState = useCallback((day: number) =>
     {
@@ -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,31 +81,48 @@ 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">
+                <div className="d-flex justify-content-between">
-                    <h3>{ LocalizeText('campaign.calendar.heading.day', ['number'], [(selectedDay + 1).toString()]) }</h3>
+                    <div className="text-black">
-                    <p>{ dayMessage(selectedDay) }</p>
+                        <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-prev cursor-pointer" onClick={onClickPrev} />
-                    <div className="calendar-next cursor-pointer" onClick={ onClickNext }/>
+                    <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>

src/views/campaign/views/calendar/CalendarView.types.ts

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