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,50 @@
+import { FC, useCallback, useState } from 'react';
+import { AddEventLinkTracker, GetConfiguration } from '../../api';
+import { UseMountEffect } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+
+const regex = /\n\r|\n|\r/mg;
+export const NitropediaView: FC<{}> = props =>
+{
+    const [ content, setContent ] = useState<string>(null);
+    const [ header, setHeader ] = useState<string>('');
+    
+    const openPage = useCallback((link: string) =>
+    {
+        fetch(link)
+        .then(response => response.text())
+        .then(data =>
+            {
+                const splitData = data.split(regex);
+                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]);
+
+    UseMountEffect(() =>
+    {
+        AddEventLinkTracker({ linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' });
+    });
+
+    if(!content) return null;
+
+    return (
+        <NitroCardView className="nitropedia">
+            <NitroCardHeaderView headerText={header} onCloseClick={() => setContent(null)}/>
+            <NitroCardContentView>
+                {content && <div className="w-100 h-100 text-black" dangerouslySetInnerHTML={{ __html: content }} />}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}