Added public front page clock screen reader mode

turnercore · Jan 6, 2024 · 53a14e2 · 53a14e2
1 parent 236b65d
commit 53a14e2
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 5 deletions.
diff --git a/clocktower/app/page.tsx b/clocktower/app/page.tsx
@@ -17,13 +17,13 @@ const Home = async () => {
   return (
     <div className='relative flex flex-col text-center items-center mb-[100px]'>
       <SiteTitle />
-      <div className=' mb-8 flex flex-col items-center'>
+      <div className=' mb-8 flex flex-col items-center space-y-4'>
         <p className='text-2xl mb-2'>Shared game clocks for tabletop RPGs</p>
         {isLoggedIn ? (
-          <div>
+          <>
             <p>To make some clocks, select a tower from the dropdown above.</p>
             <Button variant='outline'>Or create a new tower!</Button>
-          </div>
+          </>
         ) : (
           <div className='flex flex-row space-x-3 items-center mx-auto'>
             <Button variant='outline' asChild>

diff --git a/clocktower/components/homepage/PublicClock.tsx b/clocktower/components/homepage/PublicClock.tsx
@@ -4,7 +4,18 @@ import React, { useState, useEffect, MouseEvent } from 'react'
 import { PieChart } from 'react-minimal-pie-chart'
 import { lightenHexColor, darkenHexColor } from '@/tools/changeHexColors'
 import PublicClockSettings from './PublicClockSettings'
-import { ClockSchema, ClockType, ColorPaletteType } from '@/types/schemas'
+import { type ClockType } from '@/types/schemas'
+import { useAccessibility } from '@/providers/AccessibilityProvider'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Input,
+  CardFooter,
+  Label,
+} from '../ui'
+import generateUUID from '@/tools/generateId'
 
 export type PublicClockType = Omit<
   ClockType,
@@ -96,6 +107,7 @@ const PublicClock: React.FC = () => {
   const [hoveredSliceIndex, setHoveredSliceIndex] = useState<number | null>(
     null,
   )
+  const { screenReaderMode } = useAccessibility()
 
   useEffect(() => {
     const randomSegements = Math.floor(Math.random() * 10) + 2 // Random Number between 2 and 10
@@ -202,6 +214,36 @@ const PublicClock: React.FC = () => {
     }
   }
 
+  // Screen Reader Mode Settings
+  const handleNameInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newName = event.target.value
+    handleDataChange({ name: newName })
+  }
+
+  const handleFilledInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newFilled = parseInt(event.target.value, 10) - 1 // Adjust for 0-index
+    if (!isNaN(newFilled) && newFilled >= 0 && newFilled < clockData.segments) {
+      handleDataChange({ filled: newFilled })
+    }
+  }
+
+  const handleTotalSegmentsInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newSegments = parseInt(event.target.value, 10)
+    if (!isNaN(newSegments) && newSegments > 0) {
+      handleDataChange({ segments: newSegments })
+      if (clockData.filled !== null && clockData.filled >= newSegments) {
+        // Adjust filled segments if it exceeds the new total segments
+        handleDataChange({ filled: newSegments - 1 })
+      }
+    }
+  }
+
   const pieChart = (
     <PieChart
       data={updatedData}
@@ -225,6 +267,52 @@ const PublicClock: React.FC = () => {
     />
   )
 
+  const randomId = generateUUID()
+
+  const screenReaderClock = (
+    <Card>
+      <CardHeader>
+        <CardTitle>{`Clock ${clockData.name}`}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Label htmlFor={`clock-name-${randomId}`}>Clock Name</Label>
+        <Input
+          id={`clock-name-${randomId}`}
+          type='text'
+          defaultValue={clockData.name}
+          onChange={handleNameInputChange}
+        />
+
+        <Label htmlFor={`clock-filled-${randomId}`}>Filled Segments</Label>
+        <Input
+          id={`clock-filled-${randomId}`}
+          type='number'
+          defaultValue={clockData.filled !== null ? clockData.filled + 1 : 0}
+          onChange={handleFilledInputChange}
+        />
+        <Label htmlFor={`clock-segments-${randomId}`}>Total Segments</Label>
+        <Input
+          id={`clock-segments-${randomId}`}
+          type='number'
+          defaultValue={clockData.segments}
+          onChange={handleTotalSegmentsInputChange}
+        />
+      </CardContent>
+      <CardFooter>
+        <p>
+          Percentage Filled:
+          {clockData.filled !== null
+            ? Math.floor(((clockData.filled + 1) / clockData.segments) * 100)
+            : 0}
+        </p>
+      </CardFooter>
+    </Card>
+  )
+
+  if (screenReaderMode) {
+    return <div className='flex flex-col space-y-4'>{screenReaderClock}</div>
+  }
+
   return (
     <>
       {pieChart}

diff --git a/clocktower/components/layout/Header.tsx b/clocktower/components/layout/Header.tsx
@@ -57,7 +57,7 @@ export default function Header() {
   return (
     <div className='relative bg-[#A6D3C9] dark:bg-opacity-20 bg-opacity-50 top-0 w-full flex justify-between items-center p-4 space-x-2'>
       {/* Left side of header */}
-      <div className='flex-1 flex justify-start'>
+      <div className='flex-1 flex justify-start space-x-2'>
         <Button
           variant='outline'
           size='icon'