Show seed. Version number. GitHub link

package.json

@@ -1,6 +1,6 @@
 {
   "name": "word-guess",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "main": "src/index.tsx",
   "homepage": "./",
@@ -15,6 +15,7 @@
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
     "react-dom": "^17.0.1",
+    "react-icons": "^3.11.0",
     "tween-functions": "^1.2.0",
     "typescript": "^4.0.5",
     "web-vitals": "^0.2.4"

src/components/Start/WordInput.tsx → src/components/Start/SentenceInput.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 
-interface WordInputProps {
-  word: string
-  onChange: (word: string)=> void
+interface SentenceInputProps {
+  value: string
+  onChange: (input: string) => void
 }
-const WordInput: React.FunctionComponent<WordInputProps> = (props: WordInputProps)=> {
+const SentenceInput: React.FunctionComponent<SentenceInputProps> = (props: SentenceInputProps)=> {
   return (
     <input 
       type="text"
       style={{fontSize:'3rem', fontWeight:400}}
-      value={props.word}
+      value={props.value}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>  props.onChange(event.target.value) }
       autoFocus
     />
   )
 }
 
-export default WordInput
+export default SentenceInput

src/components/Start/StartForm.tsx

@@ -1,12 +1,15 @@
+import { version } from '../../../package.json'
 import React from 'react'
-import WordInput from './WordInput'
+import { FaGithub } from 'react-icons/fa'
+
+import SentenceInput from './SentenceInput'
 import StartGameButton from './StartGameButton'
 
 const BASE: bigint = 28n
 
-function seed(word: string): bigint {
+function seed(input: string): bigint {
   let seed: bigint = 0n
-  Object.values(word.split("")).forEach(letter => {
+  Object.values(input.split("")).forEach(letter => {
     if (letter !== " ") {
       seed += BigInt(letter.charCodeAt(0)) - 65n + 1n
     }
@@ -15,38 +18,40 @@ function seed(word: string): bigint {
   return seed
 }
 
-function word(seed: bigint): string {
-  let word: string = ""
+function sentence(seed: bigint): string {
+  let sentence: string = ""
   while (seed > BASE) {
     seed /= BASE
     const letter: number = Number(seed % BASE)
     if (letter === 0) {
-      word += ' '
+      sentence += ' '
     } else {
-      word += String.fromCharCode(letter + 65 - 1)
+      sentence += String.fromCharCode(letter + 65 - 1)
     }
   }
-  return word.split("").reverse().join("")
+  return sentence.split("").reverse().join("")
 }
 
 interface StartFormProps {
-  start: (seed: bigint, word: string) => void
+  start: (seed: bigint, input: string) => void
 }
 interface StartFormState {
-  word: string
+  input: string
+  seed: bigint | undefined
   error: string | undefined
 }
 export default class StartForm extends React.PureComponent<StartFormProps, StartFormState> {
   constructor (props: StartFormProps) {
     super(props)
     this.state = {
-      word: "",
+      input: "",
+      seed: undefined,
       error: undefined,
     }
   }
 
   submit = () => {
-    const input: string = this.state.word.toUpperCase()
+    const input: string = this.state.input.toUpperCase()
     if (!input || !input.trim()) {
       this.setState({error: "Input required"})
       return
@@ -56,20 +61,31 @@ export default class StartForm extends React.PureComponent<StartFormProps, Start
       return
     }
     if (/^\d+$/.test(input)) {
-      this.props.start(BigInt(input), word(BigInt(input)))
+      this.props.start(BigInt(input), sentence(BigInt(input)))
       return
     }
     this.setState({error: "Input should either be just letters and spaces or a numeric seed"})
+  }
+
+  showSeed = () => {
+    this.setState(state => ({...state, seed: seed(state.input)}))
+  }
 
+  onWordChange = (input: string) => {
+    this.setState({seed: undefined, input})
   }
 
   render() {
     return (
-    <>
+    <div>
+      {this.state.seed 
+      ? <span>{this.state.seed.toString()}</span>
+      : <button onClick={this.showSeed}>Show seed</button>}
+
       <form id="start" onSubmit={(e)=>e.preventDefault()}>
-        <WordInput 
-          word={this.state.word} 
-          onChange={(word: string)=>this.setState({word})}
+        <SentenceInput 
+          value={this.state.input} 
+          onChange={this.onWordChange}
         />
         <StartGameButton 
           onClick={this.submit}
@@ -78,7 +94,13 @@ export default class StartForm extends React.PureComponent<StartFormProps, Start
       {this.state.error 
       ? <p className="error">{this.state.error}</p>
       : undefined}
-    </>
+
+      <div style={{width: "100%", textAlign: 'center'}}>
+        <span>v{version}</span>
+        <span style={{margin:"0 1rem"}}>|</span>
+        <a href="https://github.com/j-m/word-guess"><FaGithub style={{ verticalAlign: 'middle'}}/>Behind the scenes</a>
+      </div>
+    </div>
     )
   }
 }