added calendar view

src/views/Styles.scss

@@ -24,3 +24,4 @@
 @import './help/HelpView';
 @import './floorplan-editor/FloorplanEditorView';
 @import './nitropedia/NitropediaView';
+@import './campaign/CampaignView';

src/views/campaign/CampaignView.scss

@@ -0,0 +1 @@
+@import './views/calendar/CalendarView';

src/views/campaign/CampaignView.tsx

@@ -0,0 +1,60 @@
+import { CampaignCalendarData, CampaignCalendarDataMessageEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api';
+import { CreateMessageHook } from '../../hooks';
+import { CalendarView } from './views/calendar/CalendarView';
+
+export const CampaignView: FC<{}> = props =>
+{
+    const [ calendarData, setCalendarData ] = useState<CampaignCalendarData>(null);
+    const [ isCalendarOpen, setCalendarOpen ] = useState(false);
+    
+    const onCampaignCalendarDataMessageEvent = useCallback((event: CampaignCalendarDataMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        setCalendarData(parser.calendarData);
+    }, []);
+
+    CreateMessageHook(CampaignCalendarDataMessageEvent, onCampaignCalendarDataMessageEvent);
+
+    const onLinkReceived = useCallback((link: string) =>
+    {
+        const value = link.split('/');
+
+        if(value.length < 2) return;
+
+        switch(value[1])
+        {
+            case 'calendar':
+                setCalendarOpen(true);
+                break;
+        }
+    }, []);
+
+    useEffect(() =>
+    {
+        const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'openView/' };
+        AddEventLinkTracker(linkTracker);
+
+        return () =>
+        {
+            RemoveLinkEventTracker(linkTracker);
+        }
+    }, [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}/>
+            }
+        </>
+    )
+}

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

@@ -0,0 +1,10 @@
+.nitro-campaign-calendar {
+    width: 800px;
+    height: 400px;
+
+    .calendar-day {
+        background: url('../../../../assets/images/campaign/campaign_day_generic_bg.png');
+        max-height: 100%;
+        min-width: 50px;
+    }
+}

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

@@ -0,0 +1,43 @@
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardGridItemView, NitroCardGridView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+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 dayMessage = useCallback((day: number) =>
+    {
+        if(missedDays.includes(day))
+        {
+            return LocalizeText('campaign.calendar.info.expired');
+        }
+
+        if(openedDays.includes(day))
+        {
+            return LocalizeText('campaign.calendar.info.unlocked')
+        }
+    }, [missedDays, openedDays]);
+
+    return (
+        <NitroCardView className="nitro-campaign-calendar">
+            <NitroCardHeaderView headerText={LocalizeText(`campaign.calendar.${campaignName}.title`)} onCloseClick={close}/>
+            <NitroCardContentView>
+                <div className="text-black">
+                    <h3>{LocalizeText('campaign.calendar.heading.day', ['number'], [selectedDay.toString()])}</h3>
+                    <p>{LocalizeText('')}</p>
+                </div>
+                <NitroCardGridView className="h-100 w-100" columns={7}>
+                    { 
+                        [...Array(7)].map((e, i) =>
+                        {
+                            return <NitroCardGridItemView key={i} className="calendar-day h-100"/>
+                        })
+                    }
+                </NitroCardGridView>
+            </NitroCardContentView>
+        </NitroCardView>
+    )
+}

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

@@ -0,0 +1,9 @@
+export interface CalendarViewProps
+{
+    close(): void;
+    campaignName: string;
+    currentDay: number;
+    numDays: number;
+    openedDays: number[];
+    missedDays: number[];
+}

src/views/main/MainView.tsx

@@ -6,6 +6,7 @@ import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
+import { CampaignView } from '../campaign/CampaignView';
 import { CatalogView } from '../catalog/CatalogView';
 import { ChatHistoryView } from '../chat-history/ChatHistoryView';
 import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
@@ -77,6 +78,7 @@ export const MainView: FC<MainViewProps> = props =>
             <HelpView />
             <FloorplanEditorView />
             <NitropediaView />
+            <CampaignView />
         </div>
     );
 }