new load screen, mod tool pos, slim header button

2024-11-26 15:40:51 +01:00 · 2022-03-15 05:11:11 -04:00 · 2022-03-15 05:11:11 -04:00 · 6dd338f3c3
commit 6dd338f3c3
parent 94093f7c02
12 changed files with 85 additions and 18 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -9,7 +9,6 @@
        "source.fixAll.sortJSON": false,
        "source.organizeImports": true
    },
-    "emmet.showExpandedAbbreviation": "never",
 	"git.ignoreLimitWarning": true,
    "files.eol": "\n",
    "files.insertFinalNewline": true,
--- a/src/App.tsx
+++ b/src/App.tsx
@ -10,7 +10,8 @@ export const App: FC<{}> = props =>
 {
    const [ isReady, setIsReady ] = useState(false);
    const [ isError, setIsError ] = useState(false);
-    const [ message, setMessage ] = useState('Getting Ready');
+    const [message, setMessage] = useState('Getting Ready');
+    const [percent, setPercent] = useState(0);

    //@ts-ignore
    if(!NitroConfig) throw new Error('NitroConfig is not defined!');
@ -34,12 +35,18 @@ export const App: FC<{}> = props =>
        return urls;
    }, []);

+    const loadPercent = useCallback(() =>
+    {
+        setPercent(percent + 16.66);
+    }, [setPercent,percent]);
+
    const handler = useCallback((event: NitroEvent) =>
    {
        switch(event.type)
        {
            case ConfigurationEvent.LOADED:
                GetNitroInstance().localization.init();
+                loadPercent();
                return;
            case ConfigurationEvent.FAILED:
                setIsError(true);
@ -55,7 +62,8 @@ export const App: FC<{}> = props =>

                setTimeout(() => window.location.reload(), 1500);
                return;
-			case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
+            case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
+                loadPercent();
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
                setIsError(true);
@ -63,6 +71,7 @@ export const App: FC<{}> = props =>
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
                setMessage('Finishing Up');
+                loadPercent();

                GetAvatarRenderManager().init();

@ -82,9 +91,14 @@ export const App: FC<{}> = props =>
                return;
            case AvatarRenderEvent.AVATAR_RENDER_READY:
                GetNitroInstance().init();
+                loadPercent();
                return;
            case RoomEngineEvent.ENGINE_INITIALIZED:
-                setIsReady(true);
+                loadPercent();
+                setTimeout(() =>
+                { 
+                    setIsReady(true);
+                }, 200)
                return;
            case NitroLocalizationEvent.LOADED:
                GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
@ -94,6 +108,8 @@ export const App: FC<{}> = props =>
                        setMessage('Connecting');
                        
                        GetCommunication().init();
+
+                        loadPercent();
                    }
                    else
                    {
@ -103,7 +119,7 @@ export const App: FC<{}> = props =>
                });
                return;
        }
-    }, [ getPreloadAssetUrls ]);
+    }, [ getPreloadAssetUrls,loadPercent ]);

    UseMainEvent(Nitro.WEBGL_UNAVAILABLE, handler);
    UseMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler);
@ -130,7 +146,7 @@ export const App: FC<{}> = props =>
    return (
        <Base fit overflow="hidden">
            { (!isReady || isError) &&
-                <LoadingView isError={ isError } message={ message } /> }
+                <LoadingView isError={isError} message={message} percent={ percent } /> }
            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
                <MainView />
            </TransitionAnimation>
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@ -83,11 +83,12 @@ $nitro-card-tabs-height: 33px;
                color: $white;
                text-shadow: 0px 4px 4px rgba($black, 0.25);
                @include font-size($h5-font-size);
+                min-height: 21px;
            }

            .nitro-card-header-close {
                cursor: pointer;
-                padding: 0px 1px;
+                padding: 0px 2px;
                line-height: 1;
                @include font-size($h7-font-size);
                border-radius: $border-radius;
--- a/src/common/draggable-window/DraggableWindow.tsx
+++ b/src/common/draggable-window/DraggableWindow.tsx
@ -182,6 +182,10 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
                element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) }px)`;
                element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`;
                break;
+            case DraggableWindowPosition.TOP_LEFT:
+                element.style.top = '50px';
+                element.style.left = '50px';
+                break;
        }

        if(uniqueKey !== null)
--- a/src/common/draggable-window/DraggableWindowPosition.ts
+++ b/src/common/draggable-window/DraggableWindowPosition.ts
@ -2,5 +2,6 @@ export class DraggableWindowPosition
 {
    public static CENTER: string = 'DWP_CENTER';
    public static TOP_CENTER: string = 'DWP_TOP_CENTER';
+    public static TOP_LEFT: string = 'DWP_TOP_LEFT';
    public static NOTHING: string = 'DWP_NOTHING';
 }
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/src/components/chat-history/ChatHistoryView.tsx
@ -127,7 +127,7 @@ export const ChatHistoryView: FC<{}> = props =>
        <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
            <ChatHistoryMessageHandler />
            { isVisible &&
-                <NitroCardView uniqueKey="chat-history" className="nitro-chat-history">
+                <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
                    <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
                    <NitroCardContentView>
                        <AutoSizer defaultWidth={ 300 } defaultHeight={ 200 } onResize={ onResize }>
--- a/src/components/loading/LoadingView.scss
+++ b/src/components/loading/LoadingView.scss
@ -1,6 +1,6 @@
 .nitro-loading {
    position: relative;
-    background: linear-gradient(to bottom, $white, 15%, $primary);
+    background: $primary;

    .connecting-duck {
        position: absolute;
@ -66,6 +66,34 @@
        background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
        z-index: -1;
    }
+
+    .nitro-loading-bar {
+        border:1px solid white;
+        padding:3px;
+        height:30px;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        &::before {
+            content:'';
+            position: absolute;
+            inset: 0;
+            margin:3px;
+            border-radius: 4px;
+            background:darken($primary,15);
+            z-index: 0;
+        }
+
+        .nitro-loading-bar-inner {
+            height:100%;
+            z-index: 4;
+            border-radius: 4px;
+            transition: all 1s;
+            background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
+        }
+    }
 }

@keyframes connecting-duck {
--- a/src/components/loading/LoadingView.tsx
+++ b/src/components/loading/LoadingView.tsx
@ -6,11 +6,12 @@ interface LoadingViewProps
 {
    isError: boolean;
    message: string;
+    percent: number;
 }

 export const LoadingView: FC<LoadingViewProps> = props =>
 {
-    const { isError = false, message = '' } = props;
+    const { isError = false, message = '', percent = 0 } = props;
    const [ loadingShowing, setLoadingShowing ] = useState(false);

    useEffect(() =>
@ -28,10 +29,26 @@ export const LoadingView: FC<LoadingViewProps> = props =>
    }, []);
    
    return (
-        <Column fit center position="relative" className="nitro-loading">
-            <Base className="connecting-duck" />
-            { isError && (message && message.length) &&
-                <Base className="m-auto bottom-3 fs-4 text-shadow" position="absolute">{ message }</Base> }
+        <Column position="relative" className="nitro-loading h-100">
+            <div className="container h-100">
+                <div className="row h-100 justify-content-center">
+                    <Base className="connecting-duck" />
+                    <div className="col-6 align-self-end text-center py-4">
+                        { isError && (message && message.length) ?
+                            <Base className="fs-4 text-shadow">{message}</Base>
+                            :
+                            <>
+                                <Base className="fs-4 text-shadow">{percent.toFixed()}%</Base>
+                                <div className="nitro-loading-bar mt-4">
+                                    <div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
+                                </div>   
+                            </>
+                        }
+                        
+                    </div>
+                </div>
+            </div>
+            
        </Column>
    );
 }
--- a/src/components/mod-tools/ModToolsView.tsx
+++ b/src/components/mod-tools/ModToolsView.tsx
@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
-import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserInfoEvent } from '../../events';
 import { DispatchUiEvent, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
 import { ISelectedUser } from './common/ISelectedUser';
@ -185,7 +185,7 @@ export const ModToolsView: FC<{}> = props =>
        <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
            <ModToolsMessageHandler />
            { isVisible &&
-                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools">
+                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-slim" >
                    <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                    <NitroCardContentView className="text-black" gap={ 1 }>
                        <Button gap={ 1 } onClick={ event => handleClick('toggle_room') } disabled={ !currentRoomId }>
--- a/src/components/mod-tools/views/tickets/CfhChatlogView.tsx
+++ b/src/components/mod-tools/views/tickets/CfhChatlogView.tsx
@ -28,6 +28,7 @@ export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
        if(!parser || parser.data.issueId !== issueId) return;

        setChatlogData(parser.data);
+        console.log(parser.data)
    }, [issueId]);

    UseMessageEventHook(CfhChatlogEvent, onCfhChatlogEvent);
--- a/src/components/navigator/views/search-result/NavigatorSearchResultView.tsx
+++ b/src/components/navigator/views/search-result/NavigatorSearchResultView.tsx
@ -63,7 +63,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                    <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" />
                    <Text>{ LocalizeText(getResultTitle()) }</Text>
                </Flex>
-                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
+                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
            </Flex>
            { isExtended &&
                <Grid columnCount={ (gridHasTwoColumns ? 2 : 1) } className={ 'navigator-grid' + (gridHasTwoColumns ? ' two-columns' : '') } gap={ 0 }>
--- a/src/components/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
+++ b/src/components/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
@ -36,7 +36,7 @@ export const FurnitureExternalImageView: FC<{}> = props =>
    if((objectId === -1) || !photoData) return null;
    
    return (
-        <NitroCardView className="nitro-external-image-widget">
+        <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
            <NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
            <NitroCardContentView>
                <Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>