Merge pull request #35 from billsonnn/feature/habbopages

added habbopages
This commit is contained in:
Bill 2021-11-22 01:04:57 -05:00 committed by GitHub
commit cf50d4c59d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 148 additions and 0 deletions

View File

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

View File

@ -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%;

View File

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

View File

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

View File

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

View File

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