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

@@ -30,13 +30,19 @@ export const Internal = {
     };
   },
 
-  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,
       },
     };
   },
@@ -64,8 +70,9 @@ export function addModule(semester: Semester, moduleCode: ModuleCode) {
 
       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));
     });
 }
 
@@ -207,6 +214,16 @@ export function selectModuleColor(
   };
 }
 
+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 @@ export default class TimetableOnly extends Component<Props, State> {
 
   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

@@ -30,6 +30,7 @@ const exportData: ExportData = {
   hidden: ['PC1222'],
   theme: {
     id: 'google',
+    numOfColors: 8,
     timetableOrientation: VERTICAL,
     showTitle: true,
   },
@@ -83,6 +84,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

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

website/src/reducers/timetables.ts

@@ -5,7 +5,7 @@ import { createMigrate } from 'redux-persist';
 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 {
@@ -14,6 +14,7 @@ import {
   HIDE_LESSON_IN_TIMETABLE,
   REMOVE_MODULE,
   SELECT_MODULE_COLOR,
+  REASSIGN_ALL_MODULES_COLOR,
   SET_LESSON_CONFIG,
   SET_TIMETABLE,
   SHOW_LESSON_IN_TIMETABLE,
@@ -131,7 +132,7 @@ function semColors(state: ColorMapping = defaultSemColorMap, action: Actions): C
     case ADD_MODULE:
       return {
         ...state,
-        [moduleCode]: getNewColor(values(state)),
+        [moduleCode]: getNewColor(values(state), action.payload.numOfColors),
       };
 
     case REMOVE_MODULE:
@@ -148,6 +149,19 @@ function semColors(state: ColorMapping = defaultSemColorMap, action: Actions): C
   }
 }
 
+function recolor(state: SemesterColorMap, numOfColors: number): SemesterColorMap {
+  const newSemesterColorMap: SemesterColorMap = {};
+  Object.keys(state).forEach((semester) => {
+    const colorMapping = state[semester];
+    const newColorMapping: ColorMapping = {};
+    Object.keys(colorMapping).forEach((moduleCode) => {
+      newColorMapping[moduleCode] = colorMapping[moduleCode] % numOfColors;
+    });
+    newSemesterColorMap[semester] = newColorMapping;
+  });
+  return newSemesterColorMap;
+}
+
 // Map of semester to list of hidden modules
 const defaultHiddenState: ModuleCode[] = [];
 function semHiddenModules(state = defaultHiddenState, action: Actions) {
@@ -182,7 +196,6 @@ function timetables(
   if (!action.payload) {
     return state;
   }
-
   switch (action.type) {
     case SET_TIMETABLE: {
       const { semester, timetable, colors } = action.payload;
@@ -219,6 +232,11 @@ function timetables(
         hidden: { [semester]: hidden },
       };
     }
+    case REASSIGN_ALL_MODULES_COLOR:
+      return {
+        ...state,
+        colors: recolor(state.colors, action.payload.numOfColors),
+      };
 
     default:
       return state;

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

@@ -3,6 +3,7 @@ export type ThemeId = string;
 export type Theme = {
   readonly id: ThemeId;
   readonly name: string;
+  readonly numOfColors: number;
 };
 
 export type Mode = 'LIGHT' | 'DARK';