From 014e00d1a6a2d163a1c76dc4c467e9f5f15decb7 Mon Sep 17 00:00:00 2001
From: Letter N <24603524+LetterN@users.noreply.github.com>
Date: Sat, 22 Aug 2020 13:35:34 +0800
Subject: [PATCH] cogchamp changes. syncing then building tgui next

---
 .../packages/tgui/interfaces/ClockworkSlab.js | 29 +++---
 .../tgui/interfaces/TelecommsInteraction.js   | 72 +++++++-------
 .../tgui/interfaces/TelecommsLogBrowser.js    | 26 +++---
 .../tgui/interfaces/TelecommsMonitor.js       | 10 +-
 .../tgui/interfaces/TelecommsPDALog.js        | 93 ++++++++++---------
 tgui/packages/tgui/interfaces/VrSleeper.js    | 31 ++++---
 6 files changed, 139 insertions(+), 122 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/ClockworkSlab.js b/tgui/packages/tgui/interfaces/ClockworkSlab.js
index 0c662b98d3..48512fd59c 100644
--- a/tgui/packages/tgui/interfaces/ClockworkSlab.js
+++ b/tgui/packages/tgui/interfaces/ClockworkSlab.js
@@ -46,10 +46,11 @@ export const ClockworkSlab = (props, context) => {
             title="Recollection"
             buttons={(
               <Button
-                content="Recital"
                 icon="cog"
                 tooltipPosition={"left"}
-                onClick={() => act('toggle')} />
+                onClick={() => act('toggle')}>
+                Recital
+              </Button>
             )}>
             <Box>
               {HONOR_RATVAR ? (
@@ -96,12 +97,13 @@ export const ClockworkSlab = (props, context) => {
               <Fragment key={cat.name}>
                 <br />
                 <Button
-                  content={cat.name}
                   tooltip={cat.desc}
                   tooltipPosition={'right'}
                   onClick={() => act('rec_category', {
                     "category": cat.name,
-                  })} />
+                  })} >
+                  {cat.name}
+                </Button>
               </Fragment>
             ))}
             <Divider />
@@ -156,11 +158,12 @@ export const ClockworkSlab = (props, context) => {
             title="Power"
             buttons={(
               <Button
-                content="Recollection"
                 icon="book"
                 tooltip={"Tutorial"}
                 tooltipPosition={"left"}
-                onClick={() => act('toggle')} />
+                onClick={() => act('toggle')}>
+                Recollection
+              </Button>
             )}>
             <b>{power}</b> power is available for scripture
             and other consumers.
@@ -232,7 +235,6 @@ export const ClockworkSlab = (props, context) => {
                       collapsing
                       textAlign="right">
                       <Button
-                        content={`Recite ${script.required}`}
                         disabled={
                           script.required_unformatted >= power_unformatted
                         }
@@ -240,22 +242,25 @@ export const ClockworkSlab = (props, context) => {
                         tooltipPosition={'left'}
                         onClick={() => act('recite', {
                           'script': script.type,
-                        })} />
+                        })} >
+                        {`Recite ${script.required}`}
+                      </Button>
                     </Table.Cell>
                     <Table.Cell
                       collapsing
                       textAlign="center">
                       <Button
                         fluid
+                        disabled={!script.quickbind}
+                        onClick={() => act('bind', {
+                          'script': script.type,
+                        })}>
                         content={script.bound ? (
                           `Unbind ${script.bound}`
                         ) : (
                           'Quickbind'
                         )}
-                        disabled={!script.quickbind}
-                        onClick={() => act('bind', {
-                          'script': script.type,
-                        })} />
+                      </Button>
                     </Table.Cell>
                   </Table.Row>
                 ))}
diff --git a/tgui/packages/tgui/interfaces/TelecommsInteraction.js b/tgui/packages/tgui/interfaces/TelecommsInteraction.js
index 25e7985eac..f98f1a29e1 100644
--- a/tgui/packages/tgui/interfaces/TelecommsInteraction.js
+++ b/tgui/packages/tgui/interfaces/TelecommsInteraction.js
@@ -45,11 +45,11 @@ export const TelecommsInteraction = (props, context) => {
             <LabeledList>
               <LabeledList.Item label="Power Status">
                 <Button
-                  content={power ? 'On' : 'Off'}
                   icon={power ? 'power-off' : 'times'}
                   color={power ? 'good' : 'bad'}
-                  onClick={() => act('toggle')}
-                />
+                  onClick={() => act('toggle')}>
+                  {power ? 'On' : 'Off'}
+                </Button>
               </LabeledList.Item>
               {power ? (
                 <Fragment>
@@ -80,40 +80,40 @@ export const TelecommsInteraction = (props, context) => {
                     <Fragment>
                       <LabeledList.Item label="Broadcasting">
                         <Button
-                          content={machine.broadcast ? 'YES' : 'NO'}
                           icon={machine.broadcast ? 'check' : 'times'}
                           color={machine.broadcast ? 'good' : 'bad'}
                           onClick={() => act('relay', {
                             'broadcast': true,
-                          })}
-                        />
+                          })}>
+                          {machine.broadcast ? 'YES' : 'NO'}
+                        </Button>
                       </LabeledList.Item>
                       <LabeledList.Item label="Receiving">
                         <Button
-                          content={machine.receiving ? 'YES' : 'NO'}
                           icon={machine.receiving ? 'check' : 'times'}
                           color={machine.receiving ? 'good' : 'bad'}
                           onClick={() => act('relay', {
                             'receiving': true,
-                          })}
-                        />
+                          })}>
+                          {machine.receiving ? 'YES' : 'NO'}
+                        </Button>
                       </LabeledList.Item>
                     </Fragment>
                   )}
                   {!!isbus && (
                     <LabeledList.Item label="Change Signal Frequency">
                       <Button
-                        content={machine.chang_frequency ? (
-                          'Enabled'
-                        ) : (
-                          'Disabled'
-                        )}
                         icon={machine.chang_frequency ? 'power-off' : 'times'}
                         color={machine.chang_frequency ? 'good' : 'bad'}
                         onClick={() => act('frequency', {
                           'toggle': true,
-                        })}
-                      />
+                        })}>
+                        {machine.chang_frequency ? (
+                          'Enabled'
+                        ) : (
+                          'Disabled'
+                        )}
+                      </Button>
                       {!!machine.chang_frequency && (
                         <NumberInput
                           animate
@@ -141,25 +141,25 @@ export const TelecommsInteraction = (props, context) => {
                       buttons={multitool_buf ? (
                         <Fragment>
                           <Button
-                            content="Link"
                             onClick={() => act('multitool', {
                               'Link': true,
-                            })}
-                          />
+                            })}>
+                            Link
+                          </Button>
                           <Button
-                            content="Flush"
                             onClick={() => act('multitool', {
                               'Flush': true,
-                            })}
-                          />
+                            })}>
+                            Flush
+                          </Button>
                         </Fragment>
                       ) : (
                         <Button
-                          content="Add Machine"
                           onClick={() => act('multitool', {
                             'Add': true,
-                          })}
-                        />
+                          })}>
+                          Add Machine
+                        </Button>
                       )}>
                       {!!multitool_buf && (
                         `${multitool_buf.name} (${multitool_buf.id})`
@@ -183,11 +183,11 @@ export const TelecommsInteraction = (props, context) => {
                         label={entity.ref}
                         buttons={(
                           <Button
-                            content="Remove"
                             onClick={() => act('unlink', {
                               'value': entity.ref,
-                            })}
-                          />
+                            })}>
+                            Remove
+                          </Button>
                         )}>
                         {`${entity.name} (${entity.id})`}
                       </LabeledList.Item>
@@ -198,11 +198,11 @@ export const TelecommsInteraction = (props, context) => {
                   title="Filtering Frequencies"
                   level={2}>
                   <Button
-                    content="Add Filter"
                     onClick={() => act('freq', {
                       'add': true,
-                    })}
-                  />
+                    })}>
+                    Add Filter
+                  </Button>
                   <br />
                   <br />
                   {(freq_listening && freq_listening.length) ? (
@@ -213,17 +213,17 @@ export const TelecommsInteraction = (props, context) => {
                         <Button
                           key={thing}
                           icon="times"
-                          content={valid ? (
+                          onClick={() => act('freq', {
+                            'remove': thing,
+                          })}>
+                          {valid ? (
                             <span style={`color: ${valid.color}`}>
                               {`${thing} (${valid.name})`}
                             </span>
                           ) : (
                             thing
                           )}
-                          onClick={() => act('freq', {
-                            'remove': thing,
-                          })}
-                        />
+                        </Button>
                       );
                     })
                   ) : (
diff --git a/tgui/packages/tgui/interfaces/TelecommsLogBrowser.js b/tgui/packages/tgui/interfaces/TelecommsLogBrowser.js
index ad3fcffb62..953b90ae8c 100644
--- a/tgui/packages/tgui/interfaces/TelecommsLogBrowser.js
+++ b/tgui/packages/tgui/interfaces/TelecommsLogBrowser.js
@@ -50,15 +50,17 @@ export const TelecommsLogBrowser = (props, context) => {
                 buttons={(
                   <Fragment>
                     <Button
-                      content="Flush Buffer"
                       icon="minus-circle"
                       disabled={!servers.length || !!selected}
-                      onClick={() => act('release')} />
+                      onClick={() => act('release')}>
+                      Flush Buffer
+                    </Button>
                     <Button
-                      content="Probe Network"
                       icon="sync"
                       disabled={selected}
-                      onClick={() => act('probe')} />
+                      onClick={() => act('probe')}>
+                      Probe Network
+                    </Button>
                   </Fragment>
                 )}>
                 {servers ? (
@@ -71,10 +73,10 @@ export const TelecommsLogBrowser = (props, context) => {
                 label="Selected Server"
                 buttons={(
                   <Button
-                    content="Disconnect"
                     disabled={!selected}
-                    onClick={() => act('mainmenu')}
-                  />
+                    onClick={() => act('mainmenu')}>
+                    Disconnect
+                  </Button>
                 )}>
                 {selected ? (
                   `${selected.name} (${selected.id})`
@@ -131,10 +133,11 @@ export const TelecommsLogBrowser = (props, context) => {
                         label="Filename"
                         buttons={(
                           <Button
-                            content="Delete"
                             onClick={() => act('delete', {
                               'value': logs.ref,
-                            })} />
+                            })}>
+                            Delete
+                          </Button>
                         )}>
                         {logs.name}
                       </LabeledList.Item>
@@ -172,12 +175,13 @@ export const TelecommsLogBrowser = (props, context) => {
                       label={`${server.ref}`}
                       buttons={(
                         <Button
-                          content="Connect"
                           selected={data.selected
                           && (server.ref === data.selected.ref)}
                           onClick={() => act('viewmachine', {
                             'value': server.id,
-                          })} />
+                          })}>
+                          Connect
+                        </Button>
                       )}>
                       {`${server.name} (${server.id})`}
                     </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/TelecommsMonitor.js b/tgui/packages/tgui/interfaces/TelecommsMonitor.js
index 1bb1113080..a85b623d2a 100644
--- a/tgui/packages/tgui/interfaces/TelecommsMonitor.js
+++ b/tgui/packages/tgui/interfaces/TelecommsMonitor.js
@@ -54,15 +54,17 @@ export const TelecommsMonitor = (props, context) => {
                 buttons={(
                   <Fragment>
                     <Button
-                      content="Flush Buffer"
                       icon="minus-circle"
                       disabled={!servers.length || !!selected}
-                      onClick={() => act('release')} />
+                      onClick={() => act('release')}>
+                      Flush Buffer
+                    </Button>
                     <Button
-                      content="Probe Network"
                       icon="sync"
                       disabled={selected}
-                      onClick={() => act('probe')} />
+                      onClick={() => act('probe')}>
+                      Probe Network
+                    </Button>
                   </Fragment>
                 )}>
                 {!selected ? (
diff --git a/tgui/packages/tgui/interfaces/TelecommsPDALog.js b/tgui/packages/tgui/interfaces/TelecommsPDALog.js
index 0415411fe2..b03a5abf2c 100644
--- a/tgui/packages/tgui/interfaces/TelecommsPDALog.js
+++ b/tgui/packages/tgui/interfaces/TelecommsPDALog.js
@@ -95,15 +95,17 @@ export const TelecommsPDALog = (props, context) => {
                 buttons={(
                   <Fragment>
                     <Button
-                      content="Flush Buffer"
                       icon="minus-circle"
                       disabled={!servers.length}
-                      onClick={() => act('release')} />
+                      onClick={() => act('release')}>
+                      Flush Buffer
+                    </Button>
                     <Button
-                      content="Probe Network"
                       icon="sync"
                       disabled={servers.length}
-                      onClick={() => act('probe')} />
+                      onClick={() => act('probe')}>
+                      Probe Network
+                    </Button>
                   </Fragment>
                 )}>
                 {servers ? (
@@ -118,17 +120,17 @@ export const TelecommsPDALog = (props, context) => {
                 buttons={(
                   <Fragment>
                     <Button
-                      content="Change Password"
                       disabled={!authenticated || !selected}
-                      onClick={() => act('change_auth')}
-                    />
-                    {canhack && (
+                      onClick={() => act('change_auth')}>
+                      Change Password
+                    </Button>
+                    {!!canhack && (
                       <Button
-                        content="Brute Force"
                         color="bad"
                         disabled={authenticated || !selected}
-                        onClick={() => act('hack')}
-                      />
+                        onClick={() => act('hack')}>
+                        Brute Force
+                      </Button>
                     )}
                   </Fragment>
                 )}>
@@ -139,18 +141,18 @@ export const TelecommsPDALog = (props, context) => {
                 buttons={(
                   <Fragment>
                     <Button
-                      content={!authenticated ? 'Login' : 'Logout'}
                       icon={authenticated ? 'unlock' : 'lock'}
                       color={authenticated ? 'good' : 'bad'}
                       disabled={!selected}
-                      onClick={() => act('auth')}
-                    />
+                      onClick={() => act('auth')}>
+                      {!authenticated ? 'Login' : 'Logout'}
+                    </Button>
                     <Button
-                      content="Disconnect"
                       icon="minus-circle"
                       disabled={!selected}
-                      onClick={() => act('mainmenu')}
-                    />
+                      onClick={() => act('mainmenu')}>
+                      Disconnect
+                    </Button>
                   </Fragment>
                 )}>
                 {selected ? (
@@ -214,12 +216,13 @@ export const TelecommsPDALog = (props, context) => {
                       label={`${server.ref}`}
                       buttons={(
                         <Button
-                          content="Connect"
                           selected={data.selected
                             && (server.ref === data.selected.ref)}
                           onClick={() => act('viewmachine', {
                             'value': server.id,
-                          })} />
+                          })}>
+                          Connect
+                        </Button>
                       )}>
                       {`${server.name} (${server.id})`}
                     </LabeledList.Item>
@@ -267,18 +270,18 @@ export const TeleLogs = (props, context) => {
   return (
     <Section title="Logs">
       <Button
-        content="Refresh"
         icon="sync"
-        onClick={() => act('refresh')}
-      />
+        onClick={() => act('refresh')}>
+        Refresh
+      </Button>
       <Button.Confirm
-        content="Delete All Logs"
         icon="trash"
         disabled={!log_to_use || !(log_to_use && log_to_use.length)}
         onClick={() => act('clear_log', {
           'value': msgs_log ? 'rc_msgs' : 'pda_logs',
-        })}
-      />
+        })}>
+        Delete All Logs
+      </Button.Confirm>
       <Section
         title="Messages"
         level={2}>
@@ -289,11 +292,11 @@ export const TeleLogs = (props, context) => {
                 label={msgs_log ? "Sending Dep." : "Sender"}
                 buttons={(
                   <Button
-                    content="Delete"
                     onClick={() => act('del_log', {
                       'ref': message.ref,
-                    })}
-                  />
+                    })}>
+                    Delete
+                  </Button>
                 )}>
                 {message.sender}
               </LabeledList.Item>
@@ -305,14 +308,14 @@ export const TeleLogs = (props, context) => {
                 label="Message"
                 buttons={(
                   !!message.picture && ( // don't send img over req
-                    <Button // Had to use _act for this.
-                      content="Image"
+                    <Button
                       icon="image"
                       onClick={() => Byond.topic({
                         'src': message.ref,
                         'photo': 1,
-                      })}
-                    />
+                      })}>
+                      Image
+                    </Button>
                   )
                 )}>
                 {message.message}
@@ -362,7 +365,7 @@ export const TeleLogs = (props, context) => {
   );
 };
 
-export const CustomMsg = (props, context) => {
+export const CustomMsg = context => {
   const { act, data } = useBackend(context);
   const fake_message = data.fake_message || {
     'sender': 'System Administrator',
@@ -373,19 +376,19 @@ export const CustomMsg = (props, context) => {
   return (
     <Section title="Custom Message">
       <Button
-        content="Reset"
         icon="sync"
         onClick={() => act('fake', {
           'reset': true,
-        })}
-      />
+        })}>
+        Reset
+      </Button>
       <Button
-        content="Send"
         disabled={!fake_message.recepient || !fake_message.message}
         onClick={() => act('fake', {
           'send': true,
-        })}
-      />
+        })}>
+        Send
+      </Button>
       <br /><br />
       <LabeledList>
         <LabeledList.Item label="Sender">
@@ -410,16 +413,16 @@ export const CustomMsg = (props, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="Recipient">
           <Button
-            content={fake_message.recepient ? (
+            selected={fake_message.recepient}
+            onClick={() => act('fake', {
+              'recepient': true,
+            })}>
+            {fake_message.recepient ? (
               fake_message.recepient
             ) : (
               'Select'
             )}
-            selected={fake_message.recepient}
-            onClick={() => act('fake', {
-              'recepient': true,
-            })}
-          />
+          </Button>
         </LabeledList.Item>
         <LabeledList.Item label="Message">
           <Input
diff --git a/tgui/packages/tgui/interfaces/VrSleeper.js b/tgui/packages/tgui/interfaces/VrSleeper.js
index 64a4defb07..58de36fab2 100644
--- a/tgui/packages/tgui/interfaces/VrSleeper.js
+++ b/tgui/packages/tgui/interfaces/VrSleeper.js
@@ -18,7 +18,7 @@ export const VrSleeper = (props, context) => {
         )}
 
         <Section title={"Virtual Avatar"}>
-          {!!data.vr_avatar && (
+          {data.vr_avatar ? (
             <LabeledList>
               <LabeledList.Item
                 label={"Name"} >
@@ -41,39 +41,42 @@ export const VrSleeper = (props, context) => {
                 </LabeledList.Item>
               )}
             </LabeledList>
-          ) || (
+          ) : (
             "No Virtual Avatar detected"
           )}
         </Section>
-
         <Section title="VR Commands">
           <Button
-            content={data.toggle_open
-              ? 'Close VR Sleeper'
-              : 'Open VR Sleeper'}
             icon={data.toggle_open ? 'unlock' : 'lock'}
             disabled={data.stored < data.max}
-            onClick={() => act('toggle_open')} />
+            onClick={() => act('toggle_open')}>
+            {data.toggle_open
+              ? 'Close VR Sleeper'
+              : 'Open VR Sleeper'}
+          </Button>
           <Section>
-            {!!data.isoccupant && (
+            {data.isoccupant ? (
               <Button.Confirm
                 color={'blue'}
-                content={'Connect to VR'}
                 onClick={() => {
                   act('vr_connect');
                   act('tgui:close');
                 }}
-                icon={'unlock'} />
-            )
-          || ("You need to be inside the VR sleeper to connect to VR")}
+                icon={'unlock'}>
+                Connect to VR
+              </Button.Confirm>
+            ) : (
+              "You need to be inside the VR sleeper to connect to VR"
+            )}
           </Section>
           {!!data.vr_avatar && (
             <Button
-              content={"Delete VR avatar"}
               icon={'recycle'}
               onClick={() => {
                 act('delete_avatar');
-              }} />
+              }}>
+              Delete VR avatar
+            </Button>
           )}
         </Section>
       </Window.Content>