From 9c77ee70b2e83f8c715ad4d3a1d03c06505f23be Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 12 Jan 2022 23:54:46 -0500
Subject: [PATCH] Wired layout changes

---
 src/components/wired/WiredView.scss           |  1 -
 src/components/wired/WiredView.tsx            |  6 ++-
 src/components/wired/views/WiredBaseView.tsx  | 52 +++++++++----------
 .../wired/views/WiredFurniSelectorView.tsx    | 10 ++--
 4 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/wired/WiredView.scss b/src/components/wired/WiredView.scss
index eba870c2..11232733 100644
--- a/src/components/wired/WiredView.scss
+++ b/src/components/wired/WiredView.scss
@@ -1,6 +1,5 @@
 .nitro-wired {
     width: 300px;
-	padding:7px;
 
     .icon {
 		background-repeat: no-repeat;
diff --git a/src/components/wired/WiredView.tsx b/src/components/wired/WiredView.tsx
index 2a95a5b1..51bad7c7 100644
--- a/src/components/wired/WiredView.tsx
+++ b/src/components/wired/WiredView.tsx
@@ -1,5 +1,6 @@
 import { ConditionDefinition, Triggerable, TriggerDefinition, UpdateActionMessageComposer, UpdateConditionMessageComposer, UpdateTriggerMessageComposer, WiredActionDefinition } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
+import { IsOwnerOfFloorFurniture } from '../../api';
 import { WiredEvent } from '../../events';
 import { useUiEvent } from '../../hooks/events';
 import { SendMessageHook } from '../../hooks/messages';
@@ -22,7 +23,10 @@ export const WiredView: FC<{}> = props =>
 
     const onWiredEvent = useCallback((event: WiredEvent) =>
     {
-        // check if owner & warn with confirm
+        if(!IsOwnerOfFloorFurniture(trigger.id))
+        {
+            
+        }
         
         if(trigger instanceof WiredActionDefinition)
         {
diff --git a/src/components/wired/views/WiredBaseView.tsx b/src/components/wired/views/WiredBaseView.tsx
index f807fc25..e04181ca 100644
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@@ -1,8 +1,12 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../api';
+import { Button } from '../../../common/Button';
+import { Column } from '../../../common/Column';
+import { Flex } from '../../../common/Flex';
+import { Text } from '../../../common/Text';
 import { WiredEvent } from '../../../events';
 import { dispatchUiEvent } from '../../../hooks/events';
-import { NitroCardContentView, NitroCardView } from '../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { WiredFurniType } from '../common/WiredFurniType';
 import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
 import { useWiredContext } from '../context/WiredContext';
@@ -13,11 +17,12 @@ export interface WiredBaseViewProps
     wiredType: string;
     requiresFurni: number;
     save: () => void;
+    validate?: () => boolean;
 }
 
 export const WiredBaseView: FC<WiredBaseViewProps> = props =>
 {
-    const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, children = null } = props;
+    const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null } = props;
     const [ wiredName, setWiredName ] = useState<string>(null);
     const [ wiredDescription, setWiredDescription ] = useState<string>(null);
     const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null } = useWiredContext();
@@ -60,10 +65,12 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
 
     const onSave = useCallback(() =>
     {
+        if(validate && !validate()) return;
+
         if(save) save();
 
         setTimeout(() => dispatchUiEvent(new WiredEvent(WiredEvent.SAVE_WIRED)), 1);
-    }, [ save ]);
+    }, [ save, validate ]);
 
     const close = useCallback(() =>
     {
@@ -71,34 +78,27 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
     }, [ setTrigger ]);
 
     return (
-        <NitroCardView className={`nitro-wired nitro-wired-${wiredType} ` + (wiredType === 'trigger' ? 'rounded-0' : 'rounded-2')}>
-            <div className="nitro-wired-header d-flex">
-                <div className="nitro-wired-title rounded-start w-100 drag-handler">{ LocalizeText('wiredfurni.title') }</div>
-                <div className="nitro-wired-close rounded-end flex-shrink-0" onClick={ close }>
-                    <i className="fas fa-times" />
-                </div>
-            </div>
+        <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
             <NitroCardContentView>
-                <div className="d-flex align-items-center">
-                    <i className={ `me-2 flex-shrink-0 icon icon-wired-${ wiredType }` } />
-                    <div className="fw-bold">{ wiredName }</div>
-                </div>
-                <div>{ wiredDescription }</div>
-                <div>
-                    { !children ? null : <>
-                        <hr className="my-1 mb-2 bg-dark" />
-                        { children }
-                    </> }
-                </div>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <i className={ `icon icon-wired-${ wiredType }` } />
+                        <Text bold>{ wiredName }</Text>
+                    </Flex>
+                    <Text small>{ wiredDescription }</Text>
+                </Column>
+                { (children !== null) && <hr className="m-0 bg-dark" /> }
+                { children }
                 { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
                     <>
-                        <hr className="my-1 mb-2 bg-dark" />
+                        <hr className="m-0 bg-dark" />
                         <WiredFurniSelectorView />
                     </> }
-                <div className="d-flex mt-3">
-                    <button className="btn btn-sm btn-success me-2 w-100" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</button>
-                    <button className="btn btn-sm btn-secondary w-100" onClick={ close }>{ LocalizeText('cancel') }</button>
-                </div>
+                <Flex gap={ 1 }>
+                    <Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
+                    <Button fullWidth variant="secondary" onClick={ close }>{ LocalizeText('cancel') }</Button>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/wired/views/WiredFurniSelectorView.tsx b/src/components/wired/views/WiredFurniSelectorView.tsx
index 129f1b8a..2bda2a08 100644
--- a/src/components/wired/views/WiredFurniSelectorView.tsx
+++ b/src/components/wired/views/WiredFurniSelectorView.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect } from 'react';
 import { LocalizeText } from '../../../api';
+import { Column } from '../../../common/Column';
+import { Text } from '../../../common/Text';
 import { WiredSelectObjectEvent } from '../../../events';
 import { useUiEvent } from '../../../hooks/events';
 import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
@@ -75,9 +77,9 @@ export const WiredFurniSelectorView: FC<{}> = props =>
     }, [ trigger, setFurniIds ]);
     
     return (
-        <div className="d-flex flex-column">
-            <div className="fw-bold">{ LocalizeText('wiredfurni.pickfurnis.caption', ['count', 'limit'], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</div>
-            { LocalizeText('wiredfurni.pickfurnis.desc') }
-        </div>
+        <Column gap={ 1 }>
+            <Text bold>{ LocalizeText('wiredfurni.pickfurnis.caption', ['count', 'limit'], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
+            <Text small>{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
+        </Column>
     );
 }