Merge pull request #392 from TaloDev/develop

Release 0.56.0

Author: tudddorrr

README.md

@@ -1,12 +1,10 @@
 # Talo frontend: self-hostable game dev dashboard
 
-Talo is a collection of tools and APIs designed to make game development easier and to help you make better data-driven decisions.
-
-The Talo dashboard gives you a visual overview of your game including players, leaderboards, game save data and various analytics.
+Talo is the easiest way to add leaderboards, player authentication, socket-based multiplayer and more to your game. Using the Talo Dashboard, you can visualise and analyse your game data to make data-driven decisions.
 
 Talo is available to use via our [Godot plugin](https://github.com/TaloDev/godot), [Unity package](https://github.com/TaloDev/unity) or [REST API](https://docs.trytalo.com/docs/http/authentication).
 
-## Talo's key features
+## Features
 
 - 👥 [Player management](https://trytalo.com/players): Persist player data across sessions, create segments and handle authentication.
 - ⚡️ [Event tracking](https://trytalo.com/events): Track in-game player actions individually and globally.
@@ -22,22 +20,16 @@ Talo is available to use via our [Godot plugin](https://github.com/TaloDev/godot
 - 🗣️ [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.
 
-## Documentation
-
-Check out the [full Talo docs](https://docs.trytalo.com) for setup instructions, detailed API docs/examples and configuration options.
-
-## Self-hosting your own Talo instance
+## Links
 
-Talo is designed to be easily self-hosted. Take a look at our [self-hosting guide](https://docs.trytalo.com/docs/selfhosting/overview) and the [GitHub repo](https://github.com/TaloDev/hosting) for examples on how to get started.
+- [Website](https://trytalo.com)
+- [Documentation](https://docs.trytalo.com)
+- [Self-hosting examples](https://github.com/talodev/hosting)
 
-## Contributing to Talo
+## Contributing
 
 Thinking about contributing to Talo? We’d love the help! Head over to our [contribution guide](CONTRIBUTING.md) to learn how to set up the project, run tests, and start adding new features.
 
-## Join our community
+## Join the community
 
 Have questions, want to share feedback or show off your game? [Join us on Discord](https://trytalo.com/discord) to connect with other developers and get help from the Talo team.
-
----
-
-Find all the details about Talo on our [website](https://trytalo.com)!

package-lock.json

@@ -79,7 +79,7 @@
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": "eslint --fix"
   },
-  "version": "0.55.0",
+  "version": "0.56.0",
   "engines": {
     "node": "20.x"
   },

package.json

@@ -6,40 +6,107 @@ type PaginationProps = {
   count: number
   pageState: [number, Dispatch<SetStateAction<number>>]
   itemsPerPage: number
+  maxPageButtons?: number
 }
 
 export default function Pagination({
   count,
   pageState,
-  itemsPerPage
+  itemsPerPage,
+  maxPageButtons = 10
 }: PaginationProps) {
+  const [page, setPage] = pageState
   const totalPages = Math.ceil(count / itemsPerPage)
 
-  if (totalPages === 1) return null
+  if (totalPages <= 1) {
+    return null
+  }
 
-  const [page, setPage] = pageState
-  const pages = [...new Array(totalPages)].map((_, idx) => String(idx + 1))
+  let startPage = Math.max(0, page - Math.floor(maxPageButtons / 2))
+  const endPage = Math.min(totalPages - 1, startPage + maxPageButtons - 1)
+
+  if (endPage - startPage + 1 < maxPageButtons) {
+    startPage = Math.max(0, endPage - maxPageButtons + 1)
+  }
+
+  const pagesToShow: (number | 'ellipsis')[] = []
+
+  if (startPage > 0) {
+    pagesToShow.push(0)
+    if (startPage > 1) {
+      pagesToShow.push('ellipsis')
+    }
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pagesToShow.push(i)
+  }
+
+  if (endPage < totalPages - 1) {
+    if (endPage < totalPages - 2) {
+      pagesToShow.push('ellipsis')
+    }
+    pagesToShow.push(totalPages - 1)
+  }
+
+  const goToPage = (pageNumber: number) => {
+    setPage(Math.max(0, Math.min(pageNumber, totalPages - 1)))
+  }
 
   return (
-    <div className='w-full flex justify-center'>
-      <ul className='flex -ml-1'>
-        {pages.map((val, idx) => (
-          <li key={val}>
+    <div className='w-full flex justify-center py-4'>
+      <nav aria-label='Pagination'>
+        <ul className='flex items-center space-x-2'>
+          <li>
             <Button
               variant='bare'
+              className='px-3 py-2 text-sm font-medium text-black bg-white rounded-md hover:enabled:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed'
+              onClick={() => goToPage(page - 1)}
+              disabled={page === 0}
+            >
+              Previous
+            </Button>
+          </li>
+
+          {pagesToShow.map((pageNumber, idx) => (
+            <li
+              key={idx}
               className={clsx(
-                'py-2 w-8 ml-1 text-black text-center rounded-sm',
-                { 'bg-white': page !== idx },
-                {
-                  'bg-indigo-500 !text-white': page === idx
-                })}
-              onClick={() => setPage(idx)}
+                'lg:inline',
+                { 'hidden': typeof pageNumber !== 'number' || Math.abs(pageNumber - page) > 2 },
+                { 'md:inline': typeof pageNumber === 'number' && Math.abs(pageNumber - page) <= 4 }
+              )}
+            >
+              {pageNumber === 'ellipsis' ? (
+                <span className='p-2 text-sm font-medium text-gray-400'>...</span>
+              ) : (
+                <Button
+                  variant='bare'
+                  className={clsx(
+                    'min-w-10 px-3 py-2 text-black text-center text-sm font-medium rounded-md',
+                    { 'bg-white hover:bg-gray-200': page !== pageNumber },
+                    { 'bg-indigo-500 text-white': page === pageNumber }
+                  )}
+                  onClick={() => goToPage(pageNumber as number)}
+                >
+                  {String((pageNumber as number) + 1)}
+                </Button>
+              )}
+            </li>
+          ))}
+
+          <li>
+            <Button
+              variant='bare'
+              className='px-3 py-2 text-sm font-medium text-black bg-white rounded-md hover:enabled:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed'
+              onClick={() => goToPage(page + 1)}
+              disabled={page === totalPages - 1}
             >
-              {val}
+              Next
             </Button>
           </li>
-        ))}
-      </ul>
+        </ul>
+      </nav>
     </div>
   )
 }

src/components/Pagination.tsx

@@ -32,7 +32,7 @@ export function SingleAlias({ alias }: { alias: PlayerAlias }) {
     >
       <span
         className={clsx('p-1 rounded-full bg-gray-900 text-white', {
-          'text-green-500': alias.player.presence?.online
+          '!text-green-400': alias.player.presence?.online
         })}
       >
         {getIcon(alias)}

src/components/PlayerAliases.tsx

@@ -0,0 +1,48 @@
+import { ReactElement, useMemo } from 'react'
+import { isMetaProp } from '../constants/metaProps'
+import { Prop } from '../entities/prop'
+import clsx from 'clsx'
+import Tippy from '@tippyjs/react'
+import { focusStyle } from '../styles/theme'
+
+type Props = {
+  props: Prop[]
+  icon?: ReactElement
+  onClick?: (prop: Prop) => void
+  devBuild?: boolean
+  buttonTitle?: string
+  className?: string
+}
+
+export function PropBadges({ props, icon: Icon, devBuild, onClick, buttonTitle, className }: Props) {
+  const sortedProps = useMemo(() => {
+    return props
+      .filter((prop) => !isMetaProp(prop))
+      .sort((a, b) => a.key.localeCompare(b.key))
+  }, [props])
+
+  return (
+    <div className={clsx('space-y-2', className)}>
+      {sortedProps.map(({ key, value }) => (
+        <span
+          key={`${key}-${value}`}
+          className='bg-gray-900 rounded text-xs flex w-fit'
+        >
+          <code className='align-middle inline-block p-2 break-all'>{key} = {value}</code>
+          {onClick && (
+            <Tippy content={<p>{buttonTitle}</p>}>
+              <button
+                type='button'
+                className={clsx('grow px-2 bg-indigo-900 rounded-r', focusStyle, { 'bg-orange-900': devBuild })}
+                onClick={() => onClick({ key, value })}
+                aria-label={buttonTitle}
+              >
+                {Icon}
+              </button>
+            </Tippy>
+          )}
+        </span>
+      ))}
+    </div>
+  )
+}

src/components/PropBadges.tsx

@@ -5,7 +5,14 @@ import Pagination from '../Pagination'
 describe('<Pagination />', () => {
   it('should render the correct amount of pages', () => {
     render(<Pagination count={50} pageState={[0, vi.fn()]} itemsPerPage={25} />)
-    expect(screen.getAllByRole('listitem')).toHaveLength(2)
+    // previous, 1, 2, next
+    expect(screen.getAllByRole('listitem')).toHaveLength(4)
+  })
+
+  it('should render the correct amount of pages and ellipsis', () => {
+    render(<Pagination count={350} pageState={[7, vi.fn()]} itemsPerPage={25} maxPageButtons={10} />)
+    // previous, 1, ..., 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, ..., 14, next
+    expect(screen.getAllByRole('listitem')).toHaveLength(16)
   })
 
   it('should go to the correct page on click', async () => {

src/components/__tests__/Pagination.test.tsx

@@ -1,6 +1,7 @@
 import { z } from 'zod'
 import { playerAliasSchema } from './playerAlias'
 import { gameFeedbackCategorySchema } from './gameFeedbackCategory'
+import { propSchema } from './prop'
 
 export const gameFeedbackSchema = z.object({
   id: z.number(),
@@ -9,6 +10,7 @@ export const gameFeedbackSchema = z.object({
   anonymised: z.boolean(),
   playerAlias: playerAliasSchema.nullable(),
   devBuild: z.boolean(),
+  props: z.array(propSchema),
   createdAt: z.string().datetime()
 })
 

src/entities/gameFeedback.ts

@@ -14,14 +14,16 @@ import { useNavigate } from 'react-router-dom'
 import routes from '../constants/routes'
 import useFeedback from '../api/useFeedback'
 import useFeedbackCategories from '../api/useFeedbackCategories'
-import { IconArrowRight } from '@tabler/icons-react'
+import { IconArrowRight, IconCrosshair } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import canViewPage from '../utils/canViewPage'
 import userState from '../state/userState'
 import Pagination from '../components/Pagination'
 import TextInput from '../components/TextInput'
 import useSearch from '../utils/useSearch'
+import { PropBadges } from '../components/PropBadges'
+import { Prop } from '../entities/prop'
 
 export default function Feedback() {
   const user = useRecoilValue(userState)
@@ -43,9 +45,14 @@ export default function Feedback() {
 
   const navigate = useNavigate()
 
-  const goToPlayer = (identifier: string) => {
+  const goToPlayer = useCallback((identifier: string) => {
     navigate(`${routes.players}?search=${identifier}`)
-  }
+  }, [navigate])
+
+  const setPropSearch = useCallback((prop: Prop) => {
+    window.scrollTo(0, 0)
+    setSearch(`prop:${prop.key}=${prop.value}`)
+  }, [setSearch])
 
   return (
     <Page
@@ -82,7 +89,7 @@ export default function Feedback() {
               <TextInput
                 id='feedback-search'
                 type='search'
-                placeholder='Search...'
+                placeholder='Search by comment, player or props...'
                 onChange={setSearch}
                 value={search}
               />
@@ -106,7 +113,7 @@ export default function Feedback() {
 
       {!feedbackError && sortedFeedback.length > 0 &&
         <>
-          <Table columns={['Submitted at', 'Category', 'Comment', 'Player']}>
+          <Table columns={['Submitted at', 'Category', 'Comment', 'Props', 'Player']}>
             <TableBody
               iterator={sortedFeedback}
               configureClassnames={(feedback, idx) => ({
@@ -118,7 +125,16 @@ export default function Feedback() {
                 <>
                   <DateCell>{format(new Date(feedback.createdAt), 'dd MMM Y, HH:mm')}</DateCell>
                   <TableCell>{feedback.category.name}</TableCell>
-                  <TableCell className='min-w-[320px] max-w-[320px] whitespace-pre-wrap'>{feedback.comment}</TableCell>
+                  <TableCell className='w-[400px] whitespace-pre-wrap'>{feedback.comment}</TableCell>
+                  <TableCell className='w-[400px]'>
+                    <PropBadges
+                      props={feedback.props}
+                      devBuild={feedback.devBuild}
+                      icon={<IconCrosshair size={20} />}
+                      onClick={setPropSearch}
+                      buttonTitle='Filter by this prop'
+                    />
+                  </TableCell>
                   <TableCell>
                     {feedback.playerAlias &&
                       <div className='flex items-center'>