Allow for diacritics

README.md

@@ -15,10 +15,11 @@ _Summary of changes_
 - Use Unicode normalization by default
 - Use BC Sans open source font to better render Indigenous language orthographies in BC, Canada. See the blog to change the font
 - Complete localization/translateability of the interface using react-i18next
+- Add suffixes/diacritics table to "orthography.ts"
 
 _To adapt for your language (the basics):_
 
-1. Change the file in `src/constants/orthography.ts` to use your language's writing system.
+1. Change the file in `src/constants/orthography.ts` to use your language's writing system and diacritics, for diacritic code points, https://r12a.github.io/app-conversion/ may be helpful.
 2. Change the file in `src/constants/wordlist.ts` to use your language's words.
 3. Change the file in `src/constants/validGuesses.ts` to include all valid guesses for your language.
 4. Change the file in `src/constants/config.ts` to include meta data about your language. If your language needs words longer or shorter than 5, you can set that in this file and also set the number of tries.

src/App.tsx

@@ -17,6 +17,7 @@ import {
 } from './lib/localStorage'
 
 import { CONFIG } from './constants/config'
+import { COMBINING_MARKS } from './constants/orthography'
 import ReactGA from 'react-ga'
 import '@bcgov/bc-sans/css/BCSans.css'
 import './i18n'
@@ -82,13 +83,20 @@ const App: React.FC<WithTranslation> = ({ t, i18n }) => {
   }, [isGameWon, isGameLost, t])
 
   const onChar = (value: string) => {
+    const index = COMBINING_MARKS.findIndex((element) => element === value)
     if (
-      currentGuess.length < CONFIG.wordLength &&
       guesses.length < CONFIG.tries &&
-      !isGameWon
+      !isGameWon &&
+      (currentGuess.length < CONFIG.wordLength || index > -1)
     ) {
-      let newGuess = currentGuess.concat([value])
-      setCurrentGuess(newGuess)
+      if (index > -1) {
+        let lastvalue = currentGuess.slice(-1) + value
+        let newGuess = currentGuess.slice(0, -1).concat([lastvalue])
+        setCurrentGuess(newGuess)
+      } else {
+        let newGuess = currentGuess.concat([value])
+        setCurrentGuess(newGuess)
+      }
     }
   }
 

src/components/keyboard/Keyboard.tsx

@@ -2,7 +2,8 @@ import { KeyValue } from '../../lib/keyboard'
 import { getStatuses } from '../../lib/statuses'
 import { Key } from './Key'
 import { useEffect } from 'react'
-import { ORTHOGRAPHY } from '../../constants/orthography'
+import { KEY_SYMBOLS } from '../../constants/orthography'
+import { COMBINING_MARKS } from '../../constants/orthography'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
@@ -16,7 +17,7 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
   const { t } = useTranslation()
   const charStatuses = getStatuses(guesses)
 
-  const onClick = (value: KeyValue) => {
+  const onClick = (value: KeyValue ) => {
     if (value === 'ENTER') {
       onEnter()
     } else if (value === 'DELETE') {
@@ -50,7 +51,19 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
   return (
     <div>
       <div className="flex justify-center mb-1">
-        {ORTHOGRAPHY.slice(0, Math.floor(ORTHOGRAPHY.length * 0.4)).map(
+        {COMBINING_MARKS.map(
+          (combine) => (
+            <Key
+              key={combine}
+              value={combine}
+              onClick={onClick}
+              status={charStatuses[combine]}
+            />
+          )
+        )}
+      </div>
+      <div className="flex justify-center mb-1">
+        {KEY_SYMBOLS.slice(0, Math.floor(KEY_SYMBOLS.length * 0.4)).map(
           (char) => (
             <Key
               key={char}
@@ -62,9 +75,9 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
         )}
       </div>
       <div className="flex justify-center mb-1">
-        {ORTHOGRAPHY.slice(
-          Math.floor(ORTHOGRAPHY.length * 0.4),
-          Math.floor(ORTHOGRAPHY.length * 0.7)
+        {KEY_SYMBOLS.slice(
+          Math.floor(KEY_SYMBOLS.length * 0.4),
+          Math.floor(KEY_SYMBOLS.length * 0.7)
         ).map((char) => (
           <Key
             key={char}
@@ -78,9 +91,9 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
         <Key key="enterKey" width={65.4} value="ENTER" onClick={onClick}>
           {t('enterKey')}
         </Key>
-        {ORTHOGRAPHY.slice(
-          Math.floor(ORTHOGRAPHY.length * 0.7),
-          ORTHOGRAPHY.length
+        {KEY_SYMBOLS.slice(
+          Math.floor(KEY_SYMBOLS.length * 0.7),
+          KEY_SYMBOLS.length
         ).map((char) => (
           <Key
             key={char}

src/constants/orthography.ts

@@ -1,5 +1,6 @@
 import { CONFIG } from './config'
 
+//Valid combinations of characters that form the language orthography
 export const ORTHOGRAPHY = [
   'a',
   'aa',
@@ -52,8 +53,68 @@ export const ORTHOGRAPHY = [
   '?',
 ]
 
+//Symbols on the main keyboard
+export const KEY_SYMBOLS = [
+  'a',
+  'aa',
+  'b',
+  'd',
+  'e',
+  'ee',
+  'g',
+  'gw',
+  'gy',
+  'h',
+  'hl',
+  'i',
+  'ii',
+  'j',
+  'k',
+  "k'",
+  "ḵ'",
+  'kw',
+  "kw'",
+  'ky',
+  "ky'",
+  'l',
+  "'l",
+  'm',
+  "'m",
+  'n',
+  "'n",
+  'o',
+  'oo',
+  'p',
+  "p'",
+  's',
+  't',
+  "t'",
+  'ts',
+  "ts'",
+  'u',
+  'uu',
+  'w',
+  "'w",
+  'x',
+  'xw',
+  'y',
+  "'y",
+  "'",
+  '?',]
+
+// Combining marks such as diacritics and suffixes
+export const COMBINING_MARKS = [
+  '\u0331',
+]
+
 if (CONFIG.normalization) {
   ORTHOGRAPHY.forEach(
     (val, i) => (ORTHOGRAPHY[i] = val.normalize(CONFIG.normalization))
   )
+  KEY_SYMBOLS.forEach(
+    (val, i) => (KEY_SYMBOLS[i] = val.normalize(CONFIG.normalization))
+  )
+  COMBINING_MARKS.forEach(
+    (val, i) => (COMBINING_MARKS[i] = val.normalize(CONFIG.normalization))
+  )
 }