Theo's Typesafe Cult•2y ago

Wordle - Word selection

Hi! I'm currently developing a wordle clone where you are able to guess between programming languages. I am almost finished with it but there is one thing that I can't really wrap my head around. I need to find a way to select a specific solution for each day based on a certain timestamp each day. I also want it to be the same for all users. Any help is greatly appreciated 🙂

Solution:

hash the date and convert the first couple of bits to decimal. That will be the number of this day's word in the wordlist

Jump to solution

21 Replies

maskmonarch•2y ago

Base the timestamp on UTC instead of a relative timezone

voffieeOP•2y ago

The problem isn't the timestamp part. It is more the fact that I need a way to store the solution once it is generated so that all users get it And I don't want a code snippet to be ran every time someone goes to the page and overwrites the previous solution

Solution

Matvey•2y ago

hash the date and convert the first couple of bits to decimal. That will be the number of this day's word in the wordlist

voffieeOP•2y ago

And that then should make sure that everyone gets the same since it is based of a date, right?

Matvey•2y ago

Just make a server that returns today's result.

voffieeOP•2y ago

Do I really need a server? I have an SPA currently and if I just need to hash the date then it should be fine without a server? Or am I missing something here? Also do you have an example of how the hashing works? I have not worked with hashing stuff to much

Matvey•2y ago

Yes, you can get hash like this

await crypto.subtle.digest("SHA-256", new TextEncoder().encode("STRING TO HASH"));

await crypto.subtle.digest("SHA-256", new TextEncoder().encode("STRING TO HASH"));

1 character change in the input string will change the hash completely No, you can put every answer into its own file, and on the frontend hash the date and fetch the corresponding file so you don't fetch all possible answers

voffieeOP•2y ago

so then I guess NextJS would be better then a SPA React application? And the "STRING TO HASH" would be the utc date then?

Matvey•2y ago

yes

voffieeOP•2y ago

So it would be

await crypto.subtle.digest("SHA-256", new ArrayBuffer(new TextEncoder().encode(new Date().getTime())));

await crypto.subtle.digest("SHA-256", new ArrayBuffer(new TextEncoder().encode(new Date().getTime())));

Matvey•2y ago

With this you will get new result each second because new Date().getTime() changes every second

voffieeOP•2y ago

Ohh yeah, true

Matvey•2y ago

const results = ["An", "Array", "Of", "Possible", "Wordle", "Answers"];
const date = new Date();
const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`${date.getUTCDate()} ${date.getUTCMonth()} ${date.getUTCFullYear()}`));
const result = results[new Uint16Array(hash)[0] % results.length];

const results = ["An", "Array", "Of", "Possible", "Wordle", "Answers"];
const date = new Date();
const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`${date.getUTCDate()} ${date.getUTCMonth()} ${date.getUTCFullYear()}`));
const result = results[new Uint16Array(hash)[0] % results.length];

something like this

voffieeOP•2y ago

The ArrayBuffer needs a number. I'm currently getting this error within the ArrayBuffer constructor

Argument of type 'Uint8Array' is not assignable to parameter of type 'number'.

Argument of type 'Uint8Array' is not assignable to parameter of type 'number'.

Matvey•2y ago

You don't need ArrayBuffer, TextEncoder already returns a buffer, sorry i updated my message

voffieeOP•2y ago

All good 👍 What way would be the best to resolve a promise within a React component? Because currently I store the solution as a variable within my "App container" component. The function that generates the solution returns a promise to it because it is async to be able to await crypto Could I use some Promise.all() solution?

Matvey•2y ago

There is only one promise yes

voffieeOP•2y ago

I know, I haven't worked with promises to much within React

voffieeOP•2y ago

Just marked your hash message as the solution But how would I make it possible for the generateSolution function to not return a Promise but rather the actual value

Matvey•2y ago

No, you can't, but you can do something like this

const App = () => {
  const [solution, setSolution] = useState<string | null>(null);
  useEffect(() => generateSolution().then(s => serSolution(s)), []);

  if (!solution) return "Loading ...";
  return (
    <WordleGame solution={solution} />
  )
}

const App = () => {
  const [solution, setSolution] = useState<string | null>(null);
  useEffect(() => generateSolution().then(s => serSolution(s)), []);

  if (!solution) return "Loading ...";
  return (
    <WordleGame solution={solution} />
  )
}

voffieeOP•2y ago

I think I was able to solve the issue but thanks for the help! 🙂

Gaming

Programming

Wordle - Word selection