From ab7d329398821f554d7998dff52aea36c543147b Mon Sep 17 00:00:00 2001 From: dank074 Date: Thu, 18 Nov 2021 02:32:52 -0600 Subject: [PATCH 1/3] added habbopages --- public/ui-config.json | 1 + src/App.scss | 3 ++ src/views/Styles.scss | 1 + src/views/main/MainView.tsx | 2 + src/views/nitropedia/NitropediaView.scss | 47 ++++++++++++++++++++++ src/views/nitropedia/NitropediaView.tsx | 50 ++++++++++++++++++++++++ 6 files changed, 104 insertions(+) create mode 100644 src/views/nitropedia/NitropediaView.scss create mode 100644 src/views/nitropedia/NitropediaView.tsx 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 047843ef..5a3a09b1 100644 --- a/src/App.scss +++ b/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%; 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..15f6e6fb --- /dev/null +++ b/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(null); + const [ header, setHeader ] = useState(''); + + 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('habbopages.url') + value.join('/')); + }, [openPage]); + + UseMountEffect(() => + { + AddEventLinkTracker({ linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' }); + }); + + if(!content) return null; + + return ( + + setContent(null)}/> + + {content &&
} + + + ); +} From c5d6da6e97212536c87bee480281133600e976c6 Mon Sep 17 00:00:00 2001 From: dank074 Date: Fri, 19 Nov 2021 00:44:07 -0600 Subject: [PATCH 2/3] add internal link handling --- src/views/nitropedia/NitropediaView.tsx | 62 +++++++++++++++++++++---- 1 file changed, 53 insertions(+), 9 deletions(-) diff --git a/src/views/nitropedia/NitropediaView.tsx b/src/views/nitropedia/NitropediaView.tsx index 15f6e6fb..823fe466 100644 --- a/src/views/nitropedia/NitropediaView.tsx +++ b/src/views/nitropedia/NitropediaView.tsx @@ -1,13 +1,15 @@ -import { FC, useCallback, useState } from 'react'; -import { AddEventLinkTracker, GetConfiguration } from '../../api'; -import { UseMountEffect } from '../../hooks'; +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 regex = /\n\r|\n|\r/mg; +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) => { @@ -15,7 +17,7 @@ export const NitropediaView: FC<{}> = props => .then(response => response.text()) .then(data => { - const splitData = data.split(regex); + const splitData = data.split(newLineRegex); setHeader(splitData.shift()); setContent(splitData.join('')); }) @@ -32,10 +34,52 @@ export const NitropediaView: FC<{}> = props => openPage(GetConfiguration('habbopages.url') + value.join('/')); }, [openPage]); - UseMountEffect(() => + const onClick = useCallback((event: MouseEvent) => { - AddEventLinkTracker({ linkReceived: onLinkReceived, eventUrlPrefix: 'habbopages/' }); - }); + if(event.target instanceof HTMLAnchorElement) + { + const link = event.target.href; + console.log(link); + + 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; @@ -43,7 +87,7 @@ export const NitropediaView: FC<{}> = props => setContent(null)}/> - {content &&
} +
); From 0fa6591b593ecb3c006e1aecfa0439e410f5827d Mon Sep 17 00:00:00 2001 From: dank074 Date: Sun, 21 Nov 2021 22:58:41 -0600 Subject: [PATCH 3/3] prevent original click event on links --- src/views/nitropedia/NitropediaView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/nitropedia/NitropediaView.tsx b/src/views/nitropedia/NitropediaView.tsx index 823fe466..578349a5 100644 --- a/src/views/nitropedia/NitropediaView.tsx +++ b/src/views/nitropedia/NitropediaView.tsx @@ -38,8 +38,8 @@ export const NitropediaView: FC<{}> = props => { if(event.target instanceof HTMLAnchorElement) { + event.preventDefault(); const link = event.target.href; - console.log(link); if(link.startsWith(internalLinkPrefix)) {