Add ability to share encoded roster via URL

Author: Talberon

README.md

@@ -89,6 +89,7 @@ export default defineConfig([
 - [ ] The ability to store these lineups somewhere so we can retrieve them 
   - [x] Local Storage
   - [ ] Database
-- [ ] The ability to share lineups with others
-  - [ ] Encoded url
-  - [ ] Save code
+- [x] The ability to share lineups with others
+  - [x] Encoded url
+- [ ] Generate a tailored pre-game script based on the roles in the roster
+  - [ ] Play audio as a text-to-speech for that script

src/App.tsx

@@ -5,9 +5,12 @@ import { RoleCard } from './components/role-card'
 import { Roster } from './components/roster'
 import { RosterRepository } from './components/roster-respository'
 import { generateRoster } from './lib/generate-roster'
+import {
+  encodeCommaSeparatedRosterToBase64,
+  getRosterFromQueryString,
+} from './lib/role-utils'
 import { type Role, Roles } from './model/roles'
 import { DefaultRosters } from './model/rosters'
-import { getRosterFromQueryString } from './lib/role-utils'
 
 function App() {
   const roles = Object.values(Roles) //.filter((role) => role.balance === 0)
@@ -253,7 +256,15 @@ function App() {
   function setRoster(draftedRoles: string[]) {
     // Get the current URL
     const currentUrl = new URL(window.location.href)
-    currentUrl.searchParams.set('roster', 'TEST') // Adds 'paramName=paramValue' or updates its value if it already exists
+
+    const base64Roster = encodeCommaSeparatedRosterToBase64(
+      draftedRoles.map((cardId) => {
+        const [_, role] = cardId.split('|')
+        return role
+      })
+    )
+
+    currentUrl.searchParams.set('roster', base64Roster) // Adds 'paramName=paramValue' or updates its value if it already exists
 
     const newUrl = currentUrl.toString()
     //Update query params

src/components/roster-respository.tsx

@@ -1,11 +1,11 @@
+import { copyRosterToClipboard } from '../lib/role-utils'
 import { Roles } from '../model/roles'
-import type { Lineup } from '../model/rosters'
 
 interface RosterRepositoryProps {
   activePreset: string
   customRosterName: string
   deleteRoster: () => void
-  rosterLineups: Record<string, Lineup>
+  rosterLineups: Record<string, string[]>
   saveRoster: () => void
   selectRoster: (selectedRoster: string) => void
   setCustomRosterName: React.Dispatch<React.SetStateAction<string>>
@@ -20,11 +20,11 @@ export function RosterRepository({
   saveRoster,
   selectRoster,
   setCustomRosterName,
-  generateRoster
+  generateRoster,
 }: RosterRepositoryProps) {
   return (
     <div className="flex flex-wrap gap-1 justify-center content-baseline">
-      <div id="load-roster" className='md:flex-1 flex-nowrap text-nowrap'>
+      <div id="load-roster" className="md:flex-1 flex-nowrap text-nowrap">
         <div id="select-roster">
           <span className="font-semibold">Preset:</span>
           <select
@@ -52,7 +52,7 @@ export function RosterRepository({
           </span>
         </div>
       </div>
-      <div className='md:flex-1 flex-nowrap text-nowrap'>
+      <div className="md:flex-1 flex-nowrap text-nowrap">
         <input
           value={customRosterName}
           onChange={(e) => setCustomRosterName(e.target.value)}
@@ -63,25 +63,33 @@ export function RosterRepository({
           className="p-1.5 pl-3 rounded-l-xl placeholder:text-gray-100 placeholder:italic bg-slate-900 text-slate-200"
         />
         <span
-          onClick={_ => customRosterName && saveRoster()}
+          onClick={(_) => customRosterName && saveRoster()}
           className={`${!customRosterName ? 'disabled text-gray-800 bg-gray-600' : 'bg-purple-600 hover:bg-purple-500 active:bg-purple-800'} select-none font-semibold rounded-r-lg p-2 `}
         >
           Save Current Roster
         </span>
       </div>
 
       <div className="bg-indigo-900 shadow-2xl rounded-full p-3">
-        <span className='font-semibold select-none'>Generate Lineup:</span>{' '}
+        <span className="font-semibold select-none">Generate Lineup:</span>{' '}
         {[4, 5, 6, 7, 8, 9, 10, 11].map((numPlayers) => (
           <span
             key={numPlayers}
-            className={`mx-1 px-3 py-2 select-none ${numPlayers % 2 == 0 ? 'bg-teal-700 hover:bg-teal-600 active:bg-teal-800': 'bg-amber-700 hover:bg-amber-600 active:bg-amber-800'} rounded-full cursor-pointer`}
+            className={`mx-1 px-3 py-2 select-none ${numPlayers % 2 == 0 ? 'bg-teal-700 hover:bg-teal-600 active:bg-teal-800' : 'bg-amber-700 hover:bg-amber-600 active:bg-amber-800'} rounded-full cursor-pointer`}
             onClick={() => generateRoster(numPlayers)}
           >
             {numPlayers}
           </span>
         ))}
       </div>
+
+      {/* Share Button */}
+      <span
+        onClick={copyRosterToClipboard}
+        className="select-none text-nowrap font-semibold flex-nowrap bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-800 rounded-full px-3 py-3"
+      >
+        Share Roster 🔗
+      </span>
     </div>
   )
 }

src/components/roster.tsx

@@ -1,7 +1,7 @@
 import { useDroppable } from '@dnd-kit/core'
+import { useEffect, useState } from 'react'
 import { Roles, type Role } from '../model/roles'
 import { RoleCard } from './role-card'
-import { useEffect, useState } from 'react'
 
 interface RosterProps {
   children: any
@@ -51,7 +51,9 @@ export function Roster(props: RosterProps) {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold">Roster{rosterIsModified && '*'}</h2>
+      <div className='flex justify-center gap-3 items-center m-1'>
+      <span className="text-2xl font-bold">Roster{rosterIsModified && '*'}</span>
+      </div>
       <div className="select-none rounded-2xl bg-indigo-950 border-dashed border-slate-400 border-2 min-w-30 min-h-30 mb-2 p-2">
         <div className="flex flex-wrap gap-3 mb-3">
           <span className="grow text-xl font-bold">

src/lib/role-utils.ts

@@ -4,18 +4,28 @@ import { DefaultRosters } from '../model/rosters'
 export function convertRosterToCommaSeparatedIds(roster: Role[]): string {
   return roster.map((role) => role.id).join(',')
 }
-export function copyRosterToClipboard(roster: Role[]) {
-  navigator.clipboard.writeText(convertRosterToCommaSeparatedIds(roster))
+
+export function copyRosterToClipboard() {
+  navigator.clipboard.writeText(window.location.href)
+  alert('Copied roster url to clipboard!')
 }
 
 export function convertRosterToBase64(roster: Role[]): string {
   return btoa(convertRosterToCommaSeparatedIds(roster))
 }
 
-export function convertCommaSeparatedRolesToArray(rosterString: string): Role[] {
-  return rosterString.split(',').map(id => {
+export function encodeCommaSeparatedRosterToBase64(
+  rosterIds: string[]
+): string {
+  return btoa(rosterIds.join(','))
+}
+
+export function convertCommaSeparatedRolesToArray(
+  rosterString: string
+): Role[] {
+  return rosterString.split(',').map((id) => {
     if (Object.keys(Roles).includes(id)) {
-        return Roles[id]
+      return Roles[id]
     }
 
     const unknownRole: Role = Roles['UNKNOWN']
@@ -25,16 +35,19 @@ export function convertCommaSeparatedRolesToArray(rosterString: string): Role[]
 
 export function decodeEncodedRoster(base64String: string): Role[] {
   const commaSeparatedRoster = atob(base64String)
+  console.log('Roster from Base64String:', commaSeparatedRoster)
   return convertCommaSeparatedRolesToArray(commaSeparatedRoster)
 }
 
 export function getRosterFromQueryString(): Role[] {
-    const urlParams = new URLSearchParams(window.location.search)
+  const urlParams = new URLSearchParams(window.location.search)
 
-    const encodedRosterParam = urlParams.get('roster')
-    if (encodedRosterParam) {
-        return decodeEncodedRoster(encodedRosterParam)
-    }
+  const encodedRosterParam = urlParams.get('roster')
+  if (encodedRosterParam) {
+    return decodeEncodedRoster(encodedRosterParam)
+  }
 
-    return convertCommaSeparatedRolesToArray(DefaultRosters['Blank Slate'].join(','))
-}
+  return convertCommaSeparatedRolesToArray(
+    DefaultRosters['Blank Slate'].join(',')
+  )
+}