remember the notify and reverse flags for each game separately

js/pacosako_ui.js

@@ -669,6 +669,18 @@ $(function (){
          }
       });
 
+      const notifyList = $('#cb_notify').data('gameList');
+      const doNotify = notifyList.includes('*') || notifyList.includes(newId);
+      $('#cb_notify').prop('checked', doNotify);
+      if (doNotify) {
+         requestNotify();
+      }
+
+      const reverseList = $('#cb_reverse').data('gameList');
+      const doReverse = reverseList.includes('*') || reverseList.includes(newId);
+      $('#cb_reverse').prop('checked', doReverse);
+      arrangeBoard(doReverse);
+
       $('#jitsi_link').attr('href', 'https://meet.jit.si/PacoSaco_' + newId);
       $('#game_link').attr('href', location.href);
 
@@ -846,24 +858,54 @@ $(function (){
 
    if ('localStorage' in window) {
       const fromStorage = function fromStorage(key, value) {
-         debug('from localStorage', { key: key, value: value });
+         function updatePerGameFlag(key, value, selector, onchange) {
+            let gameList = undefined;
+            const gameId = $('#cb_board').data('gameId');
+            if (value === 'on') {
+               gameList = ['*']
+            } else if (value === 'off') {
+               gameList = [];
+            } else {
+               try {
+                  gameList = JSON.parse(value);
+                  if (!Array.isArray(gameList)) {
+                     throw new TypeError(`expected an array for ${key}`);
+                  }
+                  for (const item of gameList) {
+                     if (typeof item !== 'string') {
+                        throw new TypeError(`expected an array of strings for ${key}`);
+                     }
+                  }
+               } catch (err) {
+                  debug(`error parsing game list for ${key}`, err);
+                  gameList = [];
+               }
+            }
+            const enabled = gameList.includes('*') || gameList.includes(gameId);
+            const checkbox = $(selector).first();
+            const wasChecked = checkbox.prop('checked');
+            checkbox.data('gameList', gameList);
+            checkbox.prop('checked', enabled);
+            if (enabled !== wasChecked) {
+               onchange(enabled);
+            }
+         }
+
+         debug('from localStorage', { key, value });
          if (key === LS_KEY_NOTIFY) {
-            const doNotify = value === 'on';
+            updatePerGameFlag(key, value, '#cb_notify', (enabled) => {
-            const cb_notify = $('#cb_notify')[0];
+               if (enabled) {
-            const wasChecked = cb_notify.checked;
-            cb_notify.checked = doNotify;
-            if (doNotify && !wasChecked) {
                   requestNotify();
                }
+            });
          } else if (key === LS_KEY_SOUND) {
             const doSound = value === 'on';
             const cb_sound = $('#cb_sound')[0];
             cb_sound.checked = doSound;
          } else if (key === LS_KEY_REVERSE) {
-            const doReverse = value === 'on';
+            updatePerGameFlag(key, value, '#cb_reverse', (enabled) => {
-            const cb_reverse = $('#cb_reverse')[0];
+               arrangeBoard(enabled);
-            cb_reverse.checked = doReverse;
+            });
-            arrangeBoard(doReverse);
          } else if (key === LS_KEY_THEME) {
             const cb_theme = $('#cb_select_theme');
             if (value !== cb_theme.val()) {
@@ -898,10 +940,31 @@ $(function (){
       drop: squareDropDestination,
    });
 
-   $('#cb_notify').on('change', function(){
+   /* Maximum length of gameList for per-game flags like notify and reverse */
+   const GAMES_TO_REMEMBER = 50;
+
+   function perGameFlagChanged(key, selector) {
       if ('localStorage' in window) {
-         window.localStorage.setItem(LS_KEY_NOTIFY, this.checked ? 'on' : 'off');
+         const checkbox = $(selector);
+         const checked = checkbox.prop('checked');
+         const gameId = $('#cb_board').data('gameId');
+         let gameList = checkbox.data('gameList') || [];
+         if (gameList.includes('*')) {
+            gameList = Object.keys(IO.getCachedMeta());
          }
+         gameList = gameList.filter((x) => x !== gameId);
+         if (checked) {
+            /* Ensure the new gameId is at the front of the list */
+            gameList.unshift(gameId);
+         }
+         gameList = gameList.slice(0, GAMES_TO_REMEMBER);
+         checkbox.data('gameList', gameList);
+         window.localStorage.setItem(key, JSON.stringify(gameList));
+      }
+   }
+
+   $('#cb_notify').on('change', function(){
+      perGameFlagChanged(LS_KEY_NOTIFY, this);
       if (this.checked) {
          requestNotify();
       }
@@ -914,10 +977,7 @@ $(function (){
    });
 
    $('#cb_reverse').on('change', function(){
-      debug('cb_reverse changed to ' + this.checked);
+      perGameFlagChanged(LS_KEY_REVERSE, this);
-      if ('localStorage' in window) {
-         window.localStorage.setItem(LS_KEY_REVERSE, this.checked ? 'on' : 'off');
-      }
       arrangeBoard(this.checked);
    });