Sanity Schema for Wordle

wordle.js

import React from 'react'
import {withDocument} from 'part:@sanity/form-builder'
import {Stack, Card, Flex, Text} from '@sanity/ui'
import {format} from 'date-fns'

const WORD_LENGTH = 5

function Guess({char, answer, index}) {
  const answerSplit = answer.split('')
  let tone = `default`

  if (answerSplit.includes(char)) {
    tone = `caution`

    if (answerSplit.findIndex((l) => l === char) === index) {
      tone = `positive`
    }
  }

  return (
    <Card tone={tone} shadow={1}>
      <Flex align="center" justify="center" style={{width: 50, height: 50}}>
        <Text weight="bold">{char}</Text>
      </Flex>
    </Card>
  )
}

function Score({document: sanityDocument}) {
  const {guesses, answer} = sanityDocument

  if (!guesses?.length) {
    return null
  }

  return (
    <Stack space={2}>
      {guesses
        .filter((guess) => guess && guess.length === WORD_LENGTH)
        .map((guess) => (
          <Flex key={guess} gap={1}>
            {guess.split('').map((char, charIndex) => (
              <Guess key={`${char}-${charIndex}`} index={charIndex} char={char} answer={answer} />
            ))}
          </Flex>
        ))}
    </Stack>
  )
}

export default {
  name: 'wordle',
  title: 'Wordle',
  type: 'document',
  fieldsets: [{name: `game`, title: `Game`, options: {columns: 2}}],
  validation: (Rule) =>
    Rule.custom(({guesses, answer}) =>
      guesses?.length && guesses.includes(answer)
        ? true
        : `Cannot Publish until you guess the answer`
    ),
  fields: [
    {
      name: 'guesses',
      fieldset: 'game',
      type: 'array',
      initialValue: [],
      readOnly: ({document}) => document?.guesses?.includes(document?.answer),
      validation: (Rule) => [
        Rule.required().max(6),
        Rule.unique(),
      ],
      of: [
        {
          name: 'guess',
          type: 'string',
          readOnly: ({value}) => value?.length === WORD_LENGTH,
        },
      ],
    },
    {
      name: 'answer',
      fieldset: 'game',
      type: 'string',
      readOnly: true,
      inputComponent: withDocument(Score),
      initialValue: `PARTY`,
    },
  ],
  preview: {
    select: {
      guesses: 'guesses',
      answer: 'answer',
    },
    prepare({guesses, answer}) {
      return {
        title:
          guesses && guesses?.length && guesses.includes(answer)
            ? answer
            : format(new Date(), 'd MMMM yyyy'),
        subtitle: `${guesses.length}/6`,
      }
    },
  },
}