Merge pull request #443 from TaloDev/develop

Release 0.66.0

Author: tudddorrr

README.md

@@ -19,6 +19,7 @@ Talo is available to use via our [Godot plugin](https://github.com/TaloDev/godot
 - 🔧 [Steamworks integration](https://trytalo.com/steamworks-integration): Hook into Steamworks for authentication and ownership checks.
 - 🗣️ [Game feedback](https://trytalo.com/feedback): Collect and manage feedback from your players.
 - 🔔 [Player presence](https://trytalo.com/players#presence): See if players are online and set custom statuses.
+- 🤝 [Player relationships](https://trytalo.com/player-relationships): Easily add friends, followers and social systems to your game.
 
 ## Links
 

package-lock.json

@@ -30,7 +30,7 @@
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.13.6",
     "react-hook-form": "^7.66.0",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.30.3",
     "react-select": "^5.8.0",
     "react-useportal": "^1.0.19",
     "recharts": "^2.15.2",
@@ -78,7 +78,7 @@
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": "eslint --fix"
   },
-  "version": "0.65.1",
+  "version": "0.66.0",
   "engines": {
     "node": "22.x"
   },

package.json

@@ -0,0 +1,37 @@
+import Button from './Button'
+import clsx from 'clsx'
+
+export type ButtonGroupOption<T> = {
+  id: T
+  label: string
+}
+
+type ButtonGroupProps<T> = {
+  options: ButtonGroupOption<T>[]
+  selected: T | null
+  onChange: (value: T) => void
+}
+
+export default function ButtonGroup<T extends string>({
+  options,
+  selected,
+  onChange
+}: ButtonGroupProps<T>) {
+  const buttonClassName = 'text-sm md:text-base border-2 border-l-0 py-1 px-1 md:py-1.5 md:px-2 border-indigo-500 rounded-none first:rounded-l first:border-l-2 last:rounded-r hover:bg-gray-900 ring-inset'
+
+  return (
+    <div>
+      {options.map((option) => (
+        <Button
+          type='button'
+          key={option.id}
+          variant='bare'
+          className={clsx(buttonClassName, { 'bg-indigo-500 hover:bg-indigo-500': option.id === selected })}
+          onClick={() => onChange(option.id)}
+        >
+          {option.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

src/components/ButtonGroup.tsx

@@ -32,6 +32,7 @@ export default function Footer() {
           <li><Link to='https://trytalo.com/stats?utm_source=dashboard&utm_medium=footer'>Game stats</Link></li>
           <li><Link to='https://trytalo.com/feedback?utm_source=dashboard&utm_medium=footer'>Game feedback</Link></li>
           <li><Link to='https://trytalo.com/live-config?utm_source=dashboard&utm_medium=footer'>Live config</Link></li>
+          <li><Link to='https://trytalo.com/player-relationships?utm_source=dashboard&utm_medium=footer'>Player relationships</Link></li>
           <li><Link to='https://trytalo.com/open-source?utm_source=dashboard&utm_medium=footer'>Open source</Link></li>
         </ul>
       </div>

src/components/Footer.tsx

@@ -54,7 +54,7 @@ function RecoveryCodes({
   return (
     <Container>
       <AlertBanner
-        className='!items-start'
+        className='items-start!'
         text={'Keep these codes safe. If you lose access to your authenticator and don\'t have any recovery codes, you will lose access to your account.'}
       />
 
@@ -64,6 +64,7 @@ function RecoveryCodes({
 
       <div className='md:flex space-y-4 md:space-y-0 md:space-x-4'>
         <Button
+          type='button'
           className='justify-center md:w-auto'
           variant={codesCopied ? 'green' : undefined}
           onClick={onCopyCodesClick}
@@ -73,6 +74,7 @@ function RecoveryCodes({
         </Button>
 
         <Button
+          type='button'
           className='justify-center md:w-auto'
           onClick={onDownloadCodesClick}
           icon={<IconDownload />}
@@ -82,6 +84,7 @@ function RecoveryCodes({
 
         {showCreateButton &&
           <Button
+            type='button'
             className='justify-center md:w-auto'
             onClick={onCreateRecoveryCodesClick}
           >

src/components/RecoveryCodes.tsx

@@ -1,11 +1,7 @@
 import { TimePeriod } from '../utils/useTimePeriod'
-import Button from './Button'
-import clsx from 'clsx'
+import ButtonGroup, { ButtonGroupOption } from './ButtonGroup'
 
-export type LabelledTimePeriod = {
-  id: TimePeriod
-  label: string
-}
+export type LabelledTimePeriod = ButtonGroupOption<TimePeriod>
 
 type TimePeriodPickerProps = {
   periods: LabelledTimePeriod[]
@@ -14,20 +10,16 @@ type TimePeriodPickerProps = {
 }
 
 export default function TimePeriodPicker({ periods, onPick, selectedPeriod }: TimePeriodPickerProps) {
-  const buttonClassName = 'text-sm md:text-base border-2 border-l-0 py-1 px-1 md:py-1.5 md:px-2 border-indigo-500 rounded-none first:rounded-l first:border-l-2 last:rounded-r hover:bg-gray-900 ring-inset'
-
   return (
-    <div>
-      {periods.map((period) => (
-        <Button
-          key={period.id}
-          variant='bare'
-          className={clsx(buttonClassName, { 'bg-indigo-500 hover:bg-indigo-500': period.id === selectedPeriod })}
-          onClick={() => onPick(period)}
-        >
-          {period.label}
-        </Button>
-      ))}
-    </div>
+    <ButtonGroup
+      options={periods}
+      selected={selectedPeriod}
+      onChange={(id) => {
+        const period = periods.find((p) => p.id === id)
+        if (period) {
+          onPick(period)
+        }
+      }}
+    />
   )
 }

src/components/TimePeriodPicker.tsx

@@ -31,7 +31,7 @@ export default function EventsFiltersSection({ eventNames, error }: Props) {
   }, [eventNames, filteredSelectedEvents, selectedEventNames, setSelectedEventNames])
 
   return (
-    <div className='justify-between items-start'>
+    <div>
       <div className='mb-4 md:mb-8'>
         <TimePeriodPicker
           periods={timePeriods}

src/components/events/EventsFiltersSection.tsx

@@ -1,13 +1,24 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { NodeDataRow } from '../../utils/useNodeGraph'
+import { memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 import { Handle, Position } from '@xyflow/react'
 import { useSetRecoilState } from 'recoil'
 import saveDataNodeSizesState from '../../state/saveDataNodeSizesState'
 import clsx from 'clsx'
+import Button from '../Button'
+import { IconCopy } from '@tabler/icons-react'
+import ToastContext from '../toast/ToastContext'
+import { NodeDataRow } from '../../utils/nodeGraphHelpers'
+
+const MIN_NODE_WIDTH = 'min-w-[200px]'
+const MAX_NODE_WIDTH = 'max-w-[600px]'
 
 type SaveDataNodeProps = {
   id: string
-  data: { rows: NodeDataRow[], search: string, formatVersion: string }
+  data: {
+    rows: NodeDataRow[]
+    search: string
+    formatVersion: string
+    isHovered: boolean
+  }
 }
 
 function SaveDataNode({ id, data }: SaveDataNodeProps ) {
@@ -30,7 +41,8 @@ function SaveDataNode({ id, data }: SaveDataNodeProps ) {
   }, [id, setNodeSizes])
 
   const valueIsNumber = useCallback((value: unknown) => {
-    return !isNaN(Number(value))
+    const str = String(value)
+    return str !== '' && !isNaN(Number(value))
   }, [])
 
   const valueIsBoolean = useCallback((value: unknown) => {
@@ -51,6 +63,9 @@ function SaveDataNode({ id, data }: SaveDataNodeProps ) {
 
   const renderItem = useCallback((item: string) => {
     if (valueIsString(item)) {
+      if (item === '') {
+        return '""'
+      }
       if (data.formatVersion === 'godot.v2' && item.includes('"')) {
         return item
       }
@@ -65,15 +80,39 @@ function SaveDataNode({ id, data }: SaveDataNodeProps ) {
     })
   }, [data.search, data.rows])
 
+  const valueRow = useMemo(() => {
+    return data.rows.find((row) => row.item.startsWith('value'))
+  }, [data.rows])
+
+  const canShowCopyButton = data.isHovered && valueRow
+
+  const toast = useContext(ToastContext)
+
+  const copyValue = useCallback(() => {
+    if (valueRow) {
+      const value = valueRow.item.split(': ')[1] || ''
+      navigator.clipboard.writeText(value)
+      toast.trigger('Value copied to clipboard')
+    }
+  }, [valueRow, toast])
+
   return (
-    <div ref={ref} className={clsx('py-4 px-8 rounded bg-gray-900 border-2 border-gray-500 transition-all', {
-      'bg-opacity-30': data.search !== '' && !searchMatches
-    })}>
-      <div className={clsx('transition-opacity -mx-4', { 'opacity-30': data.search !== '' && !searchMatches })}>
+    <div
+      ref={ref}
+      className={clsx(
+        'py-4 px-8 rounded bg-gray-900 border-2 border-gray-500 transition-all',
+        MIN_NODE_WIDTH,
+        MAX_NODE_WIDTH,
+        {
+          'bg-opacity-30': data.search !== '' && !searchMatches
+        }
+      )}
+    >
+      <div className={clsx('relative transition-opacity -mx-4', { 'opacity-30': data.search !== '' && !searchMatches })}>
         {data.rows.map((row, idx) => (
           <div
             key={idx}
-            className={clsx('text-sm text-white font-mono text-nowrap', {
+            className={clsx('text-sm text-white font-mono wrap-break-word', {
               'text-center': data.rows.length === 1
             })}
           >
@@ -83,15 +122,15 @@ function SaveDataNode({ id, data }: SaveDataNodeProps ) {
                 <span className='text-indigo-300'>{row.item.split(' ')[1]}</span>
               </>
             }
-            {row.type !== 'array' && /(.*: .*)\w+/.test(row.item) &&
+            {row.type !== 'array' && row.item.includes(': ') &&
               <>
-                <span className='font-medium'>{row.item.split(' ')[0]} </span>
-                <span className={composeClassNames(row.item.split(' ')[1])}>
-                  {renderItem(row.item.split(': ')[1])}
+                <span className='font-medium'>{row.item.split(': ')[0]}: </span>
+                <span className={composeClassNames(row.item.split(': ')[1] || '')}>
+                  {renderItem(row.item.split(': ')[1] || '')}
                 </span>
               </>
             }
-            {row.type !== 'array' && !/(.*: .*)\w+/.test(row.item) &&
+            {row.type !== 'array' && !row.item.includes(': ') &&
               <span
                 className={composeClassNames(row.item)}>
                 {renderItem(row.item)}
@@ -100,6 +139,15 @@ function SaveDataNode({ id, data }: SaveDataNodeProps ) {
           </div>
         ))}
 
+        {canShowCopyButton &&
+          <Button
+            type='button'
+            className='absolute right-0 top-0 w-auto!'
+            icon={<IconCopy size={20} />}
+            onClick={copyValue}
+          />
+        }
+
         <Handle type='target' position={Position.Top} className='invisible mt-1' />
         <Handle type='source' position={Position.Bottom} className='invisible' />
       </div>