Merge pull request #35 from billsonnn/feature/habbopages

added habbopages

public/ui-config.json

@@ -5,6 +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/",
     "chat.viewer.height.percentage": 0.40,
     "widget.dimmer.colorwheel": false,
     "hotelview": {

src/App.scss

@@ -50,6 +50,9 @@ $chat-history-height: 300px;
 $friends-list-width: 250px;
 $friends-list-height: 300px;
 
+$nitropedia-width: 400px;
+$nitropedia-height: 400px;
+
 .nitro-app {
     width: 100%;
     height: 100%;

src/views/Styles.scss

@@ -23,3 +23,4 @@
 @import './chat-history/ChatHistoryView';
 @import './help/HelpView';
 @import './floorplan-editor/FloorplanEditorView';
+@import './nitropedia/NitropediaView';

src/views/main/MainView.tsx

@@ -16,6 +16,7 @@ import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
 import { NavigatorView } from '../navigator/NavigatorView';
+import { NitropediaView } from '../nitropedia/NitropediaView';
 import { RightSideView } from '../right-side/RightSideView';
 import { RoomHostView } from '../room-host/RoomHostView';
 import { ToolbarView } from '../toolbar/ToolbarView';
@@ -75,6 +76,7 @@ export const MainView: FC<MainViewProps> = props =>
             <CameraWidgetView />
             <HelpView />
             <FloorplanEditorView />
+            <NitropediaView />
         </div>
     );
 }

src/views/nitropedia/NitropediaView.scss

@@ -0,0 +1,47 @@
+.nitropedia {
+    width: $nitropedia-width;
+    height: $nitropedia-height;
+
+    h1 {
+        font-weight: bold;
+        font-size: 23px;
+        color: #fc6204;
+    }
+    
+    h2 {
+        font-weight: bold;
+        font-size: 19px;
+        color: #fc6204;
+    }
+    
+    h3 {
+        font-weight: bold;
+        font-size: 15px;
+        color: #fc6204;
+    }
+    
+    p {
+        font-size: 12px;
+    }
+    
+    a {
+        font-weight: bold;
+        color: #fc6204;
+        text-decoration: underline;
+    }
+    
+    .bullet-item {
+        margin-left: 7px;
+        text-indent: -7px;
+    }
+    
+    .padding-top {
+        font-size: 1px;
+        line-height: 10px;
+    }
+    
+    .padding-bottom {
+        font-size: 1px;
+        line-height: 5px;
+    }
+}

src/views/nitropedia/NitropediaView.tsx

@@ -0,0 +1,94 @@
+import { MouseEventType } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, RemoveLinkEventTracker } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+
+const newLineRegex = /\n\r|\n|\r/mg;
+const internalLinkPrefix = 'event:';
+export const NitropediaView: FC<{}> = props =>
+{
+    const [ content, setContent ] = useState<string>(null);
+    const [ header, setHeader ] = useState<string>('');
+    const elementRef = useRef<HTMLDivElement>(null);
+    
+    const openPage = useCallback((link: string) =>
+    {
+        fetch(link)
+        .then(response => response.text())
+        .then(data =>
+            {
+                const splitData = data.split(newLineRegex);
+                setHeader(splitData.shift());
+                setContent(splitData.join(''));
+            })
+    }, []);
+    
+    const onLinkReceived = useCallback((link: string) =>
+    {
+        const value = link.split('/');
+
+        if(value.length < 2) return;
+
+        value.shift();
+
+        openPage(GetConfiguration<string>('habbopages.url') + value.join('/'));
+    }, [openPage]);
+
+    const onClick = useCallback((event: MouseEvent) =>
+    {
+        if(event.target instanceof HTMLAnchorElement)
+        {
+            event.preventDefault();
+            const link = event.target.href;
+
+            if(link.startsWith(internalLinkPrefix))
+            {
+                const internalLink = link.substring(internalLinkPrefix.length);
+                CreateLinkEvent(internalLink);
+            }
+
+            else
+            {
+                window.open(link);
+            }
+        }
+        
+    },[]);
+
+    useEffect(() =>
+    {
+        const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' };
+        AddEventLinkTracker(linkTracker);
+
+        return () =>
+        {
+            RemoveLinkEventTracker(linkTracker);
+        }
+    }, [onLinkReceived]);
+
+    useEffect(() =>
+    {
+        const element = elementRef.current;
+
+        if(element)
+        {
+            element.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        }
+
+        return () =>
+        {
+            if(element) element.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+        }
+    }, [onClick, content]);
+
+    if(!content) return null;
+
+    return (
+        <NitroCardView className="nitropedia">
+            <NitroCardHeaderView headerText={header} onCloseClick={() => setContent(null)}/>
+            <NitroCardContentView>
+                <div ref={elementRef} className="w-100 h-100 text-black" dangerouslySetInnerHTML={{ __html: content }} />
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}