Merge pull request #142 from TaloDev/develop

Release 0.25.0

Author: tudddorrr

README.md

@@ -1,23 +1,42 @@
 # Talo dashboard
 
-## Installation
+Talo's dashboard lets you see your players and interact with your game directly.
 
-Run `yarn` or `npm install`.
+## Features
+- ⚡️ [Event tracking](https://trytalo.com/events)
+- 👥 [Player management](https://trytalo.com/players) (including cross-session data, groups and identity management)
+- 🎮 [Unity SDK](https://trytalo.com/unity)
+- 🗃️ Data exports
+- 🕹️ [Leaderboards](https://trytalo.com/leaderboards)
+- 💾 [Game saves](https://trytalo.com/saves)
+- 📊 [Game stats](https://trytalo.com/stats) (global and per-player)
+- ⚙️ [Live config](https://trytalo.com/live-config) (update your game config from the web, no releases required)
 
-## Available Scripts
+## Docs
+
+Our docs are [available here](https://docs.trytalo.com).
+
+## Self-hosting
+
+See the [self-hosting docs](https://docs.trytalo.com/docs/selfhosting/overview) and the [self-hosting example repo](https://github.com/TaloDev/hosting).
+
+## Discord
+
+For help and support, [join our Discord](https://discord.gg/2RWwxXVY3v).
+
+## Installing, building & running
+
+Run `yarn` or `npm install` to install the dependencies.
 
 ### yarn dev
 
 Runs the app in the development mode.
 Open http://localhost:8080 to view it in the browser.
 
-The page will reload if you make edits.
-You will also see any lint errors in the console.
-
 ### yarn build
 
-Builds a static copy of your site to the `dist/` folder.
+Builds a static copy of the site to the `dist/` folder.
 
 ## Docker?
 
-We use Docker to build a production image of the frontend (which is simply an nginx server that hosts the static build files). It's not needed for development.
+We use Docker to build a production image of the dashboard (which is a simple NGINX server that hosts the static build files). It's not needed for development.

package.json

@@ -19,7 +19,7 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "dinero.js": "^2.0.0-alpha.11",
-    "framer-motion": "^9.0.0",
+    "framer-motion": "^10.0.0",
     "lodash-es": "^4.17.21",
     "prop-types": "^15.7.2",
     "querystring": "^0.2.1",
@@ -47,7 +47,7 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react-swc": "^3.0.1",
-    "@vitest/coverage-c8": "^0.28.1",
+    "@vitest/coverage-c8": "^0.29.0",
     "autoprefixer": "^10.2.5",
     "axios-mock-adapter": "^1.20.0",
     "cypress": "^12.3.0",
@@ -61,17 +61,17 @@
     "jsdom": "^21.0.0",
     "lint-staged": ">=10",
     "postcss": "^8.3.0",
-    "start-server-and-test": "^1.15.2",
+    "start-server-and-test": "^2.0.0",
     "tailwindcss": "^3.2.4",
     "vite": "^4.0.4",
-    "vitest": "^0.28.5"
+    "vitest": "^0.29.0"
   },
   "license": "MIT",
   "browserslist": ">0.75%",
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.24.1",
+  "version": "0.25.0",
   "engines": {
     "node": "16.x"
   }

src/components/ColourfulCheckbox.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { IconCheck } from '@tabler/icons-react'
-import { labelFocusStyle } from '../styles/theme'
+import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
 
 const ColourfulCheckbox = (props) => {
   const [focus, setFocus] = useState(false)
@@ -12,7 +12,7 @@ const ColourfulCheckbox = (props) => {
       <input
         id={props.id}
         type='checkbox'
-        className='absolute inset-0 opacity-0'
+        className={hiddenInputStyle}
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         {...props}

src/components/Modal.jsx

@@ -29,8 +29,8 @@ const Modal = (props) => {
       <div className='fixed w-screen md:p-4 bg-gray-900 bg-opacity-60 flex items-start md:items-center justify-center inset-0 z-50 text-black transition-colors'>
         <dialog
           className={classNames('block w-full h-full md:h-auto md:w-[640px] bg-white md:rounded p-0', {
-            'overflow-scroll': props.scroll,
-            'overflow-visible': !props.scroll
+            'overflow-y-scroll': props.scroll,
+            'overflow-y-visible': !props.scroll
           })}
           aria-modal='true'
           aria-labelledby={`modal-${props.id}-label`}

src/components/RadioGroup.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { labelFocusStyle } from '../styles/theme'
+import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
 
 function RadioGroup({ label, name, options, onChange, value, info }) {
   const [focusedValue, setFocusedValue] = useState()
@@ -18,7 +18,7 @@ function RadioGroup({ label, name, options, onChange, value, info }) {
             <div key={option.value} className='min-w-[96px]'>
               <input
                 id={`${name}${idx}`}
-                className='absolute inset-0 opacity-0'
+                className={hiddenInputStyle}
                 type='radio'
                 name={name}
                 onChange={() => onChange(option.value)}

src/components/toggles/DevDataToggle.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import { labelFocusStyle } from '../../styles/theme'
+import { hiddenInputStyle, labelFocusStyle } from '../../styles/theme'
 import { IconCheck, IconX } from '@tabler/icons-react'
 import { useRecoilState } from 'recoil'
 import devDataState from '../../state/devDataState'
@@ -23,7 +23,7 @@ function DevDataToggle() {
       <input
         id='dev-data'
         type='checkbox'
-        className='absolute inset-0 opacity-0'
+        className={hiddenInputStyle}
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         onChange={() => setInnerEnabled(!innerEnabled)}

src/components/toggles/Toggle.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import { labelFocusStyle } from '../../styles/theme'
+import { hiddenInputStyle, labelFocusStyle } from '../../styles/theme'
 
 function Toggle({ id, enabled, onToggle, disabled, inputRef }) {
   const [focus, setFocus] = useState(false)
@@ -25,7 +25,7 @@ function Toggle({ id, enabled, onToggle, disabled, inputRef }) {
         data-testid={id}
         ref={inputRef}
         type='checkbox'
-        className='absolute inset-0 opacity-0'
+        className={hiddenInputStyle}
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         onChange={() => setInnerEnabled(!innerEnabled)}

src/pages/Groups.jsx

@@ -14,6 +14,8 @@ import useGroups from '../api/useGroups'
 import GroupDetails from '../modals/groups/GroupDetails'
 import useSortedItems from '../utils/useSortedItems'
 import Identifier from '../components/Identifier'
+import { useNavigate } from 'react-router-dom'
+import routes from '../constants/routes'
 
 export default function Groups() {
   const activeGame = useRecoilValue(activeGameState)
@@ -24,6 +26,8 @@ export default function Groups() {
   const { groups, loading, error, mutate } = useGroups(activeGame)
   const sortedGroups = useSortedItems(groups, 'name', 'asc')
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     if (!showModal) setEditingGroup(null)
   }, [showModal, editingGroup])
@@ -33,6 +37,10 @@ export default function Groups() {
     setShowModal(true)
   }
 
+  const goToPlayersForGroup = (group) => {
+    navigate(`${routes.players}?search=group:${group.id}`)
+  }
+
   return (
     <Page
       title='Groups'
@@ -56,12 +64,12 @@ export default function Groups() {
 
       {groups.length > 0 &&
         <>
-          <Table columns={['ID', 'Name', 'Players', 'Last updated', '']}>
+          <Table columns={['ID', 'Name', 'Players', 'Last updated', '', '']}>
             <TableBody iterator={sortedGroups}>
               {(group) => (
                 <>
                   <TableCell className='min-w-80'>
-                    <Identifier id='ccb3226c-54ac-4e8d-af27-6154a6315f2f' />
+                    <Identifier id={group.id} />
                   </TableCell>
                   <TableCell className='min-w-[320px] max-w-[320px] lg:min-w-0'>
                     {group.name}
@@ -79,6 +87,14 @@ export default function Groups() {
                       Edit
                     </Button>
                   </TableCell>
+                  <TableCell className='w-48'>
+                    <Button
+                      variant='grey'
+                      onClick={() => goToPlayersForGroup(group)}
+                    >
+                      View players
+                    </Button>
+                  </TableCell>
                 </>
               )}
             </TableBody>

src/pages/Players.jsx

@@ -18,7 +18,9 @@ import Page from '../components/Page'
 import Table from '../components/tables/Table'
 
 const Players = () => {
-  const [search, setSearch] = useState(new URLSearchParams(window.location.search).get('search') ?? '')
+  const initialSearch = new URLSearchParams(window.location.search).get('search')
+
+  const [search, setSearch] = useState(initialSearch ?? '')
   const [debouncedSearch] = useDebounce(search, 300)
   const activeGame = useRecoilValue(activeGameState)
   const navigate = useNavigate()
@@ -36,7 +38,7 @@ const Players = () => {
   }, [page])
 
   return (
-    <Page title='Players' isLoading={loading}>
+    <Page title='Players' isLoading={loading} showBackButton={Boolean(initialSearch)}>
       {(players.length > 0 || debouncedSearch.length > 0) &&
         <div className='flex items-center'>
           <div className='w-1/2 flex-grow md:flex-grow-0 lg:w-1/4'>

src/styles/theme.js

@@ -5,3 +5,5 @@ export const labelFocusStyle = 'ring ring-pink-500'
 export const linkStyle = 'text-indigo-400 hover:underline font-semibold transition-colors rounded-none'
 
 export const unauthedContainerStyle = 'w-full md:w-2/3 xl:w-1/3'
+
+export const hiddenInputStyle = 'absolute inset-0 opacity-0 w-0 h-0'