Part of a game I am making requires a query to gpt-4o asking whether two people have met. An inital person is provided and the user has to input the name of someone who they think has met the initial person. After the guess is submitted through an input field, a promise containing the text “true” or “false” is returned.
Depending on the response, I need to update some values contained in “gameState” and pass them into another query to gpt-4o.
However, since the response is a promise, I cannot update global variables using the response. As of now, “gameState” is initialized inside the async function. “gameState” is changed when the function is run, but when I input a different name it resets and “count” does not increase.
How do I use the information from the promise to update variables, wait until another input is submitted, then pass those updated variables along with the new input into another query?
import './App.css';
import React, { useState, useRef } from 'react';
const { OpenAI } = require('openai');
const openai = new OpenAI({ apiKey: '[myKey}');
function App() {
const inputRef = useRef();
let people = ["Donald Trump", "Taylor Swift"];
const handleSubmit = (event) => {
play(inputRef.current.value, people[0], people[1]);
event.preventDefault();
}
async function play(guess, p1, p2) {
let gameState = {
currentPerson: p1,
count: 0
}
const completion = await openai.chat.completions.create({
messages: [
{
role: "system",
content: "respond with true or false in lower case depening on if these people have met"
},
{
role: "user",
content: `${gameState.currentPerson}, ${guess}`
},
],
model: "gpt-4o",
});
if(completion.choices[0].message.content === "true" && guess === p2) {
console.log("You Win!");
gameState.count++;
console.log(gameState);
} else if(completion.choices[0].message.content === "true") {
console.log("Correct");
gameState.count++;
gameState.currentPerson = guess;
console.log(gameState);
} else {
console.log("Wrong");
}
}
return (
<form onSubmit={handleSubmit} >
<label >
Name:
<input name="guessInput" type="text" ref={inputRef} />
</label>
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
I have tried changing the input event handler into an async function and making the API call there but it resulted in an error.