feat: Enable flexible number of colors for themes

website/src/actions/__snapshots__/theme.test.ts.snap

@@ -16,7 +16,11 @@ exports[`theme should dispatch a cycle of theme 2`] = `
 
 exports[`theme should dispatch a select of theme 1`] = `
 {
-  "payload": "test",
+  "payload": {
+    "id": "test",
+    "name": "Test",
+    "numOfColors": 8,
+  },
   "type": "SELECT_THEME",
 }
 `;

website/src/actions/theme.test.ts

@@ -1,8 +1,13 @@
 import * as actions from 'actions/theme';
+import { Theme } from 'types/settings';
 
 describe('theme', () => {
   test('should dispatch a select of theme', () => {
-    const theme = 'test';
+    const theme: Theme = {
+      id: 'test',
+      name: 'Test',
+      numOfColors: 8,
+    };
     expect(actions.selectTheme(theme)).toMatchSnapshot();
   });
 

website/src/actions/theme.ts

@@ -1,5 +1,7 @@
+import { Theme } from 'types/settings';
+
 export const SELECT_THEME = 'SELECT_THEME' as const;
-export function selectTheme(theme: string) {
+export function selectTheme(theme: Theme) {
   return {
     type: SELECT_THEME,
     payload: theme,

website/src/actions/timetables.ts

@@ -33,13 +33,19 @@
     };
   },
 
-  addModule(semester: Semester, moduleCode: ModuleCode, moduleLessonConfig: ModuleLessonConfig) {
+  addModule(
+    semester: Semester,
+    moduleCode: ModuleCode,
+    moduleLessonConfig: ModuleLessonConfig,
+    numOfColors: number,
+  ) {
     return {
       type: ADD_MODULE,
       payload: {
         semester,
         moduleCode,
         moduleLessonConfig,
+        numOfColors,
       },
     };
   },
@@ -67,8 +73,9 @@
 
       const lessons = getModuleTimetable(module, semester);
       const moduleLessonConfig = randomModuleLessonConfig(lessons);
+      const { numOfColors } = getState().theme;
 
-      dispatch(Internal.addModule(semester, moduleCode, moduleLessonConfig));
+      dispatch(Internal.addModule(semester, moduleCode, moduleLessonConfig, numOfColors));
     });
 }
 
@@ -238,6 +245,16 @@
   };
 }
 
+export const REASSIGN_ALL_MODULES_COLOR = 'REASSIGN_ALL_MODULES_COLOR' as const;
+export function reassignAllModulesColor(numOfColors: number) {
+  return {
+    type: REASSIGN_ALL_MODULES_COLOR,
+    payload: {
+      numOfColors,
+    },
+  };
+}
+
 export const HIDE_LESSON_IN_TIMETABLE = 'HIDE_LESSON_IN_TIMETABLE' as const;
 export function hideLessonInTimetable(semester: Semester, moduleCode: ModuleCode) {
   return {

website/src/data/themes.json

@@ -1,50 +1,67 @@
 [
   {
     "id": "ashes",
-    "name": " Ashes"
+    "name": " Ashes",
+    "numOfColors": 8
   },
   {
     "id": "chalk",
-    "name": "Chalk"
+    "name": "Chalk",
+    "numOfColors": 8
   },
   {
     "id": "eighties",
-    "name": "Eighties"
+    "name": "Eighties",
+    "numOfColors": 8
   },
   {
     "id": "google",
-    "name": "Google"
+    "name": "Google",
+    "numOfColors": 8
   },
   {
     "id": "mocha",
-    "name": "Mocha"
+    "name": "Mocha",
+    "numOfColors": 8
   },
   {
     "id": "monokai",
-    "name": "Monokai"
+    "name": "Monokai",
+    "numOfColors": 8
   },
   {
     "id": "ocean",
-    "name": "Ocean"
+    "name": "Ocean",
+    "numOfColors": 8
   },
   {
     "id": "oceanic-next",
-    "name": "Oceanic Next"
+    "name": "Oceanic Next",
+    "numOfColors": 8
   },
   {
     "id": "paraiso",
-    "name": "Paraiso"
+    "name": "Paraiso",
+    "numOfColors": 8
   },
   {
     "id": "railscasts",
-    "name": "Railscasts"
+    "name": "Railscasts",
+    "numOfColors": 8
+  },
+  {
+    "id": "tequila",
+    "name": "Tequila",
+    "numOfColors": 10
   },
   {
     "id": "tomorrow",
-    "name": "Tomorrow"
+    "name": "Tomorrow",
+    "numOfColors": 8
   },
   {
     "id": "twilight",
-    "name": "Twilight"
+    "name": "Twilight",
+    "numOfColors": 8
   }
 ]

website/src/entry/export/TimetableOnly.tsx

@@ -29,15 +29,15 @@
 
   override render() {
     const { store } = this.props;
-    const theme = store.getState().theme.id;
+    const { theme } = store.getState();
 
     const { semester, timetable, colors } = this.state;
-    const timetableColors = fillColorMapping(timetable, colors);
+    const timetableColors = fillColorMapping(timetable, colors, theme.numOfColors);
 
     return (
       <MemoryRouter initialEntries={['https://nusmods.com']}>
         <Provider store={store}>
-          <div id="timetable-only" className={`theme-${theme}`}>
+          <div id="timetable-only" className={`theme-${theme.id}`}>
             <TimetableContent
               header={null}
               semester={semester}

website/src/reducers/index.test.ts

@@ -31,6 +31,7 @@ const exportData: ExportData = {
   hidden: ['PC1222'],
   theme: {
     id: 'google',
+    numOfColors: 8,
     timetableOrientation: VERTICAL,
     showTitle: true,
   },
@@ -84,6 +85,7 @@ test('reducers should set export data state', () => {
 
   expect(state.theme).toEqual({
     id: 'google',
+    numOfColors: 8,
     timetableOrientation: VERTICAL,
     showTitle: true,
   });

website/src/reducers/theme.test.ts

@@ -2,10 +2,15 @@ import { ThemeState, VERTICAL } from 'types/reducers';
 
 import * as actions from 'actions/theme';
 import reducer, { defaultThemeState, themeIds } from 'reducers/theme';
+import { Theme } from 'types/settings';
 
 const themeInitialState: ThemeState = defaultThemeState;
-const googleTheme = 'google';
-const themeWithEighties: ThemeState = { ...themeInitialState, id: googleTheme };
+const googleTheme: Theme = {
+  id: 'google',
+  name: 'Google',
+  numOfColors: 8,
+};
+const themeWithEighties: ThemeState = { ...themeInitialState, id: googleTheme.id };
 const themeWithFirstTheme: ThemeState = { ...themeInitialState, id: themeIds[0] };
 const themeWithLastTheme: ThemeState = { ...themeInitialState, id: themeIds[themeIds.length - 1] };
 const themeWithVerticalOrientation: ThemeState = {

website/src/reducers/theme.ts

@@ -15,31 +15,34 @@ import { DIMENSIONS, withTracker } from 'bootstrapping/matomo';
 export const defaultThemeState: ThemeState = {
   // Available themes are defined in `themes.scss`
   id: 'eighties',
+  numOfColors: 8,
   timetableOrientation: HORIZONTAL,
   showTitle: false,
 };
 export const themeIds = themes.map((obj: Theme) => obj.id);
 
 function theme(state: ThemeState = defaultThemeState, action: Actions): ThemeState {
-  function setTheme(newTheme: string): ThemeState {
+  function setTheme(newTheme: Theme): ThemeState {
     // Update theme analytics info
-    withTracker((tracker) => tracker.setCustomDimension(DIMENSIONS.theme, newTheme));
+    withTracker((tracker) => tracker.setCustomDimension(DIMENSIONS.theme, newTheme.id));
 
     return {
       ...state,
-      id: newTheme,
+      id: newTheme.id,
+      numOfColors: newTheme.numOfColors,
     };
   }
 
   switch (action.type) {
     case SELECT_THEME:
+      // Reassign all modules' color when changing theme
       return setTheme(action.payload);
 
     case CYCLE_THEME: {
       const newThemeIndex =
         (themeIds.indexOf(state.id) + themeIds.length + action.payload) % themeIds.length;
 
-      return setTheme(themeIds[newThemeIndex]);
+      return setTheme(themes[newThemeIndex]);
     }
     case TOGGLE_TIMETABLE_ORIENTATION:
       return {

website/src/reducers/timetables.test.ts

@@ -14,6 +14,9 @@ import {
 import { TimetablesState } from 'types/reducers';
 import config from 'config';
 
+// use 8 different colors for testing
+const NUM_DIFFERENT_COLORS = 8;
+
 const initialState = defaultTimetableState;
 
 jest.mock('config');
@@ -28,6 +31,7 @@ describe('color reducers', () => {
           semester: 1,
           moduleCode: 'CS1010S',
           moduleLessonConfig: {},
+          numOfColors: NUM_DIFFERENT_COLORS,
         },
       }).colors,
     ).toHaveProperty('1.CS1010S');
@@ -39,6 +43,7 @@ describe('color reducers', () => {
           semester: 2,
           moduleCode: 'CS3216',
           moduleLessonConfig: {},
+          numOfColors: NUM_DIFFERENT_COLORS,
         },
       }).colors,
     ).toHaveProperty('2.CS3216');

website/src/reducers/timetables.ts

@@ -5,14 +5,15 @@
 import { PersistConfig } from 'storage/persistReducer';
 import { ModuleCode } from 'types/modules';
 import { ModuleLessonConfig, SemTimetableConfig } from 'types/timetables';
-import { ColorMapping, TimetablesState } from 'types/reducers';
+import { ColorMapping, SemesterColorMap, TimetablesState } from 'types/reducers';
 
 import config from 'config';
 import {
   ADD_MODULE,
   CHANGE_LESSON,
   HIDDEN_IMPORTED_SEM,
   HIDE_LESSON_IN_TIMETABLE,
+  REASSIGN_ALL_MODULES_COLOR,
   REMOVE_MODULE,
   RESET_TIMETABLE,
   SELECT_MODULE_COLOR,
@@ -134,7 +135,7 @@
     case ADD_MODULE:
       return {
         ...state,
-        [moduleCode]: getNewColor(values(state)),
+        [moduleCode]: getNewColor(values(state), action.payload.numOfColors),
       };
 
     case REMOVE_MODULE:
@@ -151,6 +152,18 @@
   }
 }
 
+function recolor(curSemesterColorMap: SemesterColorMap, numOfColors: number): SemesterColorMap {
+  const newSemesterColorMap: SemesterColorMap = {};
+  Object.entries(curSemesterColorMap).forEach(([semester, colorMapping]) => {
+    const newColorMapping: ColorMapping = {};
+    Object.entries(colorMapping).forEach(([moduleCode, colorIndex]) => {
+      newColorMapping[moduleCode] = colorIndex % numOfColors;
+    });
+    newSemesterColorMap[semester] = newColorMapping;
+  });
+  return newSemesterColorMap;
+}
+
 // Map of semester to list of hidden modules
 const DEFAULT_HIDDEN_STATE: ModuleCode[] = [];
 function semHiddenModules(state = DEFAULT_HIDDEN_STATE, action: Actions) {
@@ -236,6 +249,11 @@
         hidden: { [semester]: hidden },
       };
     }
+    case REASSIGN_ALL_MODULES_COLOR:
+      return {
+        ...state,
+        colors: recolor(state.colors, action.payload.numOfColors),
+      };
 
     case SET_HIDDEN_IMPORTED: {
       const { semester, hiddenModules } = action.payload;

website/src/styles/constants.scss

@@ -145,6 +145,18 @@ $nusmods-theme-colors: (
     #b6b3eb,
     #bc9458
   ),
+  tequila: (
+    #e7553e,
+    #ff9f1e,
+    #ffc7c7,
+    #f1baa1,
+    #ffd700,
+    #8febdb,
+    #a9daf5,
+    #80b9f3,
+    #b9848c,
+    #b249f2,
+  ),
   tomorrow: (
     #c66,
     #de935f,

website/src/types/reducers.ts

@@ -79,6 +79,7 @@ export const HORIZONTAL: TimetableOrientation = 'HORIZONTAL';
 
 export type ThemeState = Readonly<{
   id: string;
+  numOfColors: number;
   timetableOrientation: TimetableOrientation;
   showTitle: boolean;
 }>;

website/src/types/settings.ts

@@ -7,6 +7,7 @@ export type ThemeId = string;
 export type Theme = {
   readonly id: ThemeId;
   readonly name: string;
+  readonly numOfColors: number;
 };
 
 /**