Merge pull request #1 from joshfeinsilber/initial-release-patches

Initial release patches
joshfeinsilber · May 13, 2024 · b57fe43 · b57fe43
2 parents d121440 + d6d7485
commit b57fe43
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/src/components/keyboard/Key.tsx b/src/components/keyboard/Key.tsx
@@ -1,15 +1,33 @@
+import classNames from 'classnames'
 import * as React from 'react'
 import styled from 'styled-components'
 
 type Props = React.PropsWithChildren<{
   size: number
+  submit?: boolean
+  color?: {
+    bg?: string
+    activeBg?: string
+    text?: string
+  }
   onClick?: () => void
 }>
 
 export const Key = (props: Props) => {
   return (
     <Container
-      className="transition-75 flex h-14 cursor-pointer items-center justify-center rounded bg-slate-300 font-semibold uppercase text-black transition-all active:bg-slate-400"
+      className={classNames(
+        `transition-75 flex h-14 cursor-pointer items-center justify-center rounded font-semibold uppercase transition-all`,
+        {
+          'text-black': !props.submit,
+          'bg-slate-300': !props.submit,
+          'active:bg-slate-400': !props.submit,
+
+          'text-white': props.submit,
+          'bg-green-600': props.submit,
+          'active:bg-green-700': props.submit
+        }
+      )}
       style={{ flex: props.size }}
       onClick={props.onClick}
     >

diff --git a/src/components/keyboard/Keyboard.tsx b/src/components/keyboard/Keyboard.tsx
@@ -44,7 +44,12 @@ export const Keyboard = (props: Props) => {
               <Key
                 key={'key-' + (key.action.value ?? key.action.type)}
                 size={key.action.type !== IKeyActionType.letter ? 1.5 : 1}
-                onClick={() => props.onKeyPress?.(key.action)}
+                submit={key.action.type === IKeyActionType.submit}
+                onClick={() => {
+                  props.onKeyPress?.(key.action)
+                  // @ts-ignore
+                  document.activeElement?.blur() // Blur focus on the button after clicking so that if we use the Enter key, it doesn't trigger the button again
+                }}
               >
                 {key.content}
               </Key>

diff --git a/src/screens/results/Words.tsx b/src/screens/results/Words.tsx
@@ -5,7 +5,7 @@ export const Words = () => {
   const wordsUsed: string[] = useAtomValue(words)
 
   return (
-    <div className="card mt-4 w-full bg-base-100 text-center shadow-xl">
+    <div className="card mt-4 w-full select-text bg-base-100 text-center shadow-xl">
       <div className="card-body flex flex-col items-center">
         <ul className="text-base">
           {wordsUsed.map((word, index) => (

diff --git a/src/util/results/share.ts b/src/util/results/share.ts
@@ -24,8 +24,12 @@ const resultText = () => {
 
     text += `
 `
-    word.split('').forEach(() => {
-      text += `${color}`
+    word.split('').forEach((letter, idx) => {
+      if (idx === 0) {
+        text += letter.toUpperCase()
+      } else {
+        text += `${color}`
+      }
     })
   })