/** @jsxImportSource https://esm.sh/react */ import copy from "https://esm.sh/copy-text-to-clipboard"; import leven from "https://esm.sh/fast-levenshtein"; import { useEffect, useState } from "https://esm.sh/react"; import { DataRequest, render } from "https://esm.town/v/jxnblk/ReactStream"; import { useStreamingAPI } from "https://esm.town/v/jxnblk/useStreamingAPI"; // chat and encode/decode import api, { decode } from "https://esm.town/v/jxnblk/IndirectionAPI"; import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts"; import { Typewriter } from "https://esm.town/v/jxnblk/useTypewriter"; const PERMALINK = "https://www.val.town/v/jxnblk/indirection"; function App(props) { const [history, setHistory] = useState(props.data.history || []); const [word, setWord] = useState(""); const [turn, setTurn] = useState(props.data.turn || emptyTurn); const [ui, setUI] = useState(props.data?.turn?.clue ? UIState.Guessing : UIState.Start); const { message, submit, loading, error } = useStreamingAPI(); const addHistoryGuess = (guess: string) => { setHistory([ ...history, { word: turn.word, clue: turn.clue, guess: guess, }, ]); }; const handleSubmit = e => { e.preventDefault(); let correct = null; if (ui === UIState.Guessing) { // is a guess play addHistoryGuess(word.toLowerCase()); correct = turn.word === word.toLowerCase(); console.log("levenshtein", leven.get(turn.word, word.toLowerCase())); setTurn({ ...turn, guess: word.toLowerCase() }); } else if (ui === UIState.Correct) { // is a new word after correct answer submit({ word: word.toLowerCase() }); setUI(UIState.Loading); return; } if (correct) { setUI(UIState.Correct); setWord(""); } else { // incorrect words continue the chain submit({ word: word.toLowerCase() }); setUI(UIState.Loading); } }; const copyLink = () => { if (copy(window.location.href)) { console.log("copied"); } }; useEffect(() => { if (loading) return; if (!message) return; console.log({ word, message }); setURL({ history, turn: { // for the next play / page load word: word.toLowerCase(), clue: message, }, }); setUI(UIState.Sharing); }, [word, message, loading]); const showForm = ui === UIState.Start || ui === UIState.Guessing || ui === UIState.Correct; const urlLength = props.url?.length || -1; console.log("url.length", urlLength); return (