By adding both a variable to record in the client what the server has
told us the name is, and also adding localStorage storage of the name
so it persists between browser starts.
const name_input = document.querySelector("#name");
const name_dialog = document.querySelector("#name-dialog");
const name_input = document.querySelector("#name");
const name_dialog = document.querySelector("#name-dialog");
const images = document.querySelector("#images");
const zombo_form = document.querySelector("#zombo-form");
const prompt = document.querySelector("#prompt");
const images = document.querySelector("#images");
const zombo_form = document.querySelector("#zombo-form");
const prompt = document.querySelector("#prompt");
socket.on('inform-name', (name) => {
console.log("Received inform-name event: " + name);
socket.on('inform-name', (name) => {
console.log("Received inform-name event: " + name);
+
+ /* When we receive a name we store it in 3 places:
+ *
+ * * The informed_name variable (confirming what the server knows)
+ * * The name_input field (so the user will see that in their profile)
+ * * In localStorage (for use in a future session)
+ */
+ informed_name = name;
+ localStorage.setItem('name', name);
});
socket.on('reset', () => {
});
socket.on('reset', () => {
figure.appendChild(comment_form);
comment_input.addEventListener('focus', () => {
figure.appendChild(comment_form);
comment_input.addEventListener('focus', () => {
- /* Do nothing if name is already set. */
- if (name_input.value)
+ /* If the server has informed us it has our name, we are done. */
+ if (informed_name)
+ return;
+
+ /* If server has no name, check local storage. */
+ const name = localStorage.getItem('name');
+ if (name) {
+ socket.emit('set-name', name);
- /* Otherwise, bring up the modal dialog to set the name. */
+ /* Failing both, bring up the modal dialog to set the name. */
name_dialog.showModal();
});
name_dialog.showModal();
});