Merge pull request #184 from TaloDev/develop

Release 0.26.0

Author: tudddorrr

README.md

@@ -11,6 +11,7 @@ Talo's dashboard lets you see your players and interact with your game directly.
 - 💾 [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)
+- 🔧 [Steamworks integration](https://trytalo.com/steamworks-integration)
 
 ## Docs
 

package.json

@@ -71,7 +71,7 @@
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.25.2",
+  "version": "0.26.0",
   "engines": {
     "node": "16.x"
   }

src/Router.jsx

@@ -38,6 +38,8 @@ const PlayerProfile = lazy(() => import(/* webpackChunkName: 'player-profile' */
 const PlayerLeaderboardEntries = lazy(() => import(/* webpackChunkName: 'player-leaderboard-entries' */ './pages/PlayerLeaderboardEntries'))
 const ForgotPassword = lazy(() => import(/* webpackChunkName: 'forgot-password' */ './pages/ForgotPassword'))
 const ResetPassword = lazy(() => import(/* webpackChunkName: 'reset-password' */ './pages/ResetPassword'))
+const PlayerSaves = lazy(() => import(/* webpackChunkName: 'player-saves' */ './pages/PlayerSaves'))
+const PlayerSaveContent = lazy(() => import(/* webpackChunkName: 'player-save-content' */ './pages/PlayerSaveContent'))
 
 function Router({ intendedUrl }) {
   const user = useRecoilValue(userState)
@@ -91,6 +93,8 @@ function Router({ intendedUrl }) {
                   {canViewPage(user, routes.gameProps) && <Route exact path={routes.gameProps} element={<GameProps />} />}
                   <Route exact path={routes.playerProfile} element={<PlayerProfile />} />
                   <Route exact path={routes.playerLeaderboardEntries} element={<PlayerLeaderboardEntries />} />
+                  <Route exact path={routes.playerSaveContent} element={<PlayerSaveContent />} />
+                  <Route exact path={routes.playerSaves} element={<PlayerSaves />} />
                 </>
               }
 

src/api/usePlayerSaves.js

@@ -0,0 +1,24 @@
+import useSWR from 'swr'
+import buildError from '../utils/buildError'
+import api from './api'
+
+const usePlayerEvents = (activeGame, playerId) => {
+  const fetcher = async (url) => {
+    const res = await api.get(url)
+    return res.data
+  }
+
+  const { data, error } = useSWR(
+    `/games/${activeGame.id}/players/${playerId}/saves`,
+    fetcher
+  )
+
+  return {
+    saves: data?.saves ?? [],
+    loading: !data && !error,
+    error: error && buildError(error),
+    errorStatusCode: error && error.response?.status
+  }
+}
+
+export default usePlayerEvents

src/constants/routes.js

@@ -22,6 +22,8 @@ export default {
   playerLeaderboardEntries: '/players/:id/leaderboard-entries',
   playerProfile: '/players/:id/profile',
   playerProps: '/players/:id/props',
+  playerSaves: '/players/:id/saves',
+  playerSaveContent: '/players/:id/saves/:saveId',
   playerStats: '/players/:id/stats',
   recover: '/recover',
   register: '/register',

src/pages/PlayerProfile.jsx

@@ -12,7 +12,7 @@ import Table from '../components/tables/Table'
 import SecondaryTitle from '../components/SecondaryTitle'
 import PlayerAliases from '../components/PlayerAliases'
 import Identifier from '../components/Identifier'
-import { IconBolt, IconChartBar, IconSettings, IconTrophy } from '@tabler/icons-react'
+import { IconBolt, IconChartBar, IconDeviceFloppy, IconSettings, IconTrophy } from '@tabler/icons-react'
 import Button from '../components/Button'
 import Loading from '../components/Loading'
 
@@ -36,6 +36,11 @@ const links = [
     name: 'Entries',
     icon: IconTrophy,
     route: routes.playerLeaderboardEntries
+  },
+  {
+    name: 'Saves',
+    icon: IconDeviceFloppy,
+    route: routes.playerSaves
   }
 ]
 

src/pages/PlayerSaveContent.jsx

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import routes from '../constants/routes'
+import Page from '../components/Page'
+
+export default function PlayerSaveContent() {
+  const { id: playerId } = useParams()
+
+  const location = useLocation()
+  const save = location.state?.save
+
+  const [isLoading, setLoading] = useState(true)
+
+  useEffect(() => {
+    console.log(save)
+    if (!save) {
+      navigate(routes.playerSaves.replace(':id', playerId))
+    } else {
+      setTimeout(() => {
+        setContent()
+      }, 200)
+    }
+  }, [save])
+
+  const navigate = useNavigate()
+
+  const embedRef = useRef()
+
+  const setContent = useCallback(() => {
+    embedRef.current.contentWindow.postMessage({
+      json: save.content,
+      options: {
+        theme: 'dark',
+        direction: 'RIGHT'
+      }
+    }, '*')
+
+    setLoading(false)
+  }, [])
+
+  return (
+    <Page
+      showBackButton
+      title={save?.name ?? 'Save content'}
+      isLoading={isLoading}
+    >
+      <iframe
+        ref={embedRef}
+        src='https://jsoncrack.com/widget'
+        title='save-content'
+        className='w-full h-[75vh] lg:h-[66vh] xl:h-[75vh] rounded border-2 border-gray-700 overflow-hidden'
+      />
+    </Page>
+  )
+}

src/pages/PlayerSaves.jsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import ErrorMessage from '../components/ErrorMessage'
+import TableCell from '../components/tables/TableCell'
+import TableBody from '../components/tables/TableBody'
+import routes from '../constants/routes'
+import usePlayerSaves from '../api/usePlayerSaves'
+import { format } from 'date-fns'
+import DateCell from '../components/tables/cells/DateCell'
+import useSortedItems from '../utils/useSortedItems'
+import PlayerIdentifier from '../components/PlayerIdentifier'
+import Page from '../components/Page'
+import usePlayer from '../utils/usePlayer'
+import Table from '../components/tables/Table'
+import activeGameState from '../state/activeGameState'
+import { useRecoilValue } from 'recoil'
+import Button from '../components/Button'
+
+export default function PlayerSaves() {
+  const activeGame = useRecoilValue(activeGameState)
+
+  const { id: playerId } = useParams()
+  const [player] = usePlayer()
+
+  const { saves, loading: savesLoading, error, errorStatusCode } = usePlayerSaves(activeGame, playerId)
+  const sortedSaves = useSortedItems(saves, 'updatedAt')
+
+  const navigate = useNavigate()
+
+  const loading = !player || savesLoading
+
+  useEffect(() => {
+    if (errorStatusCode === 404) {
+      navigate(routes.players, { replace: true })
+    }
+  }, [errorStatusCode])
+
+  const viewSaveContent = (save) => {
+    const path = routes.playerSaveContent
+      .replace(':id', playerId)
+      .replace(':saveId', save.id)
+
+    navigate(path, {
+      state: {
+        save
+      }
+    })
+  }
+
+  return (
+    <Page
+      showBackButton
+      title='Player saves'
+      isLoading={loading}
+    >
+      <PlayerIdentifier player={player} />
+
+      {!error && !loading && sortedSaves.length === 0 &&
+        <p>This player has not created any saves yet</p>
+      }
+
+      {!error && sortedSaves.length > 0 &&
+        <Table columns={['Name', 'Created at', 'Updated at', '']}>
+          <TableBody iterator={sortedSaves}>
+            {(save) => (
+              <>
+                <TableCell className='min-w-60'>{save.name}</TableCell>
+                <DateCell>{format(new Date(save.createdAt), 'dd MMM Y, HH:mm')}</DateCell>
+                <DateCell>{format(new Date(save.updatedAt), 'dd MMM Y, HH:mm')}</DateCell>
+                <TableCell className='w-60'>
+                  <Button variant='grey' onClick={() => viewSaveContent(save)}>View content</Button>
+                </TableCell>
+              </>
+            )}
+          </TableBody>
+        </Table>
+      }
+
+      {error && <ErrorMessage error={error} />}
+    </Page>
+  )
+}