diff --git a/public/ui-config.json b/public/ui-config.json index 1104aa32..050c4e4c 100644 --- a/public/ui-config.json +++ b/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": { diff --git a/src/App.scss b/src/App.scss index d88b1aef..2849b9bf 100644 --- a/src/App.scss +++ b/src/App.scss @@ -53,6 +53,9 @@ $friends-list-height: 300px; $help-width: 275px; $help-height: 450px; +$nitropedia-width: 400px; +$nitropedia-height: 400px; + .nitro-app { width: 100%; height: 100%; diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 6369f546..a727aa12 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -23,3 +23,4 @@ @import './chat-history/ChatHistoryView'; @import './help/HelpView'; @import './floorplan-editor/FloorplanEditorView'; +@import './nitropedia/NitropediaView'; diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index 7a5eccdd..5cd09f84 100644 --- a/src/views/main/MainView.tsx +++ b/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 = props => + ); } diff --git a/src/views/nitropedia/NitropediaView.scss b/src/views/nitropedia/NitropediaView.scss new file mode 100644 index 00000000..a07c3d17 --- /dev/null +++ b/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; + } +} diff --git a/src/views/nitropedia/NitropediaView.tsx b/src/views/nitropedia/NitropediaView.tsx new file mode 100644 index 00000000..578349a5 --- /dev/null +++ b/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(null); + const [ header, setHeader ] = useState(''); + const elementRef = useRef(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('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 ( + + setContent(null)}/> + +
+ + + ); +}