Rewrote the client side colour functions to be procedural.

assets/typescript/Colour.ts

@@ -1,77 +1,134 @@
-class Colour {
-    public static readonly INHERIT: number = 0x40000000;
-    public static readonly READABILITY_THRESHOLD: number = 186;
-    public static readonly LUMINANCE_WEIGHT_RED: number = 0.299;
-    public static readonly LUMINANCE_WEIGHT_GREEN: number = 0.587;
-    public static readonly LUMINANCE_WEIGHT_BLUE: number = 0.114;
+const MSZ_COLOUR_INHERIT = 0x40000000,
+    MSZ_COLOUR_READABILITY_THRESHOLD = 186,
+    MSZ_COLOUR_LUMINANCE_WEIGHT_RED = 0.299,
+    MSZ_COLOUR_LUMINANCE_WEIGHT_GREEN = 0.587,
+    MSZ_COLOUR_LUMINANCE_WEIGHT_BLUE = 0.114;
 
-    public raw: number;
-
-    public constructor(rawColour: number = 0)
-    {
-        this.raw = rawColour === null ? Colour.INHERIT : rawColour;
+function colourCreate(): number {
+    return 0;
 }
 
-    public static none(): Colour {
-        return new Colour(Colour.INHERIT);
+function colourNone(): number {
+    return MSZ_COLOUR_INHERIT;
 }
 
-    public get inherit(): boolean {
-        return (this.raw & Colour.INHERIT) > 0;
-    }
-
-    public set inherit(inherit: boolean) {
-        if (inherit) {
-            this.raw |= Colour.INHERIT;
+function colourSetInherit(colour: number, enabled: boolean): number {
+    if (enabled) {
+        colour |= MSZ_COLOUR_INHERIT;
     } else {
-            this.raw &= ~Colour.INHERIT;
-        }
+        colour &= ~MSZ_COLOUR_INHERIT;
     }
 
-    public get red(): number {
-        return (this.raw >> 16) & 0xFF;
+    return colour;
 }
 
-    public set red(red: number) {
+function colourGetInherit(colour: number): boolean {
+    return (colour & MSZ_COLOUR_INHERIT) > 0;
+}
+
+function colourGetRed(colour: number): number {
+    return (colour >> 16) & 0xFF;
+}
+
+function colourSetRed(colour: number, red: number): number {
     red = red & 0xFF;
-        this.raw &= ~0xFF0000;
-        this.raw |= red << 16;
+    colour &= ~0xFF0000;
+    colour |= red << 16;
+    return colour;
 }
 
-    public get green(): number {
-        return (this.raw >> 8) & 0xFF;
+function colourGetGreen(colour: number): number {
+    return (colour >> 8) & 0xFF;
 }
 
-    public set green(green: number) {
+function colourSetGreen(colour: number, green: number): number {
     green = green & 0xFF;
-        this.raw &= ~0xFF00;
-        this.raw |= green << 8;
+    colour &= ~0xFF00;
+    colour |= green << 8;
+    return colour;
 }
 
-    public get blue(): number {
-        return this.raw & 0xFF;
+function colourGetBlue(colour: number): number {
+    return colour & 0xFF;
 }
 
-    public set blue(blue: number) {
+function colourSetBlue(colour: number, blue: number): number {
     blue = blue & 0xFF;
-        this.raw &= ~0xFF;
-        this.raw |= blue;
+    colour &= ~0xFF;
+    colour |= blue;
+    return colour;
 }
 
-    public get luminance(): number {
-        return Colour.LUMINANCE_WEIGHT_RED * this.red
-            + Colour.LUMINANCE_WEIGHT_GREEN * this.green
-            + Colour.LUMINANCE_WEIGHT_BLUE * this.blue;
+function colourGetLuminance(colour: number): number {
+    return MSZ_COLOUR_LUMINANCE_WEIGHT_RED * colourGetRed(colour)
+        + MSZ_COLOUR_LUMINANCE_WEIGHT_GREEN * colourGetGreen(colour)
+        + MSZ_COLOUR_LUMINANCE_WEIGHT_BLUE * colourGetBlue(colour);
 }
 
-    public get hex(): string
-    {
-        let hex: string = (this.raw & 0xFFFFFF).toString(16);
-
-        if (hex.length < 6)
-            for (let i = 0; i < 6 - hex.length; i++)
-                hex = '0' + hex;
-
-        return '#' + hex;
+function colourGetHex(colour: number): string {
+    return '#' + (colour & 0xFFFFFF).toString(16);
 }
+
+function colourGetCSS(colour: number): string {
+    if (colourGetInherit(colour)) {
+        return 'inherit';
+    }
+
+    return colourGetHex(colour);
+}
+
+function colourGetCSSContrast(
+    colour: number,
+    dark: string = 'dark',
+    light: string = 'light',
+    inheritIsDark: boolean = true
+): string {
+    if (colourGetInherit(colour)) {
+        return inheritIsDark ? dark : light;
+    }
+
+    return colourGetLuminance(colour) > MSZ_COLOUR_READABILITY_THRESHOLD
+        ? dark
+        : light;
+}
+
+function colourFromRGB(red: number, green: number, blue: number): number {
+    let colour: number = colourCreate();
+    colour = colourSetRed(colour, red);
+    colour = colourSetGreen(colour, green);
+    colour = colourSetBlue(colour, blue);
+    return colour;
+}
+
+function colourFromHex(hex: string): number {
+    if (hex.startsWith('#'))
+        hex = hex.substr(1);
+
+    const length: number = hex.length;
+
+    if (length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    } else if (length !== 6) {
+        return 0;
+    }
+
+    return parseInt(hex, 16);
+}
+
+class ColourProperties {
+    red: number;
+    green: number;
+    blue: number;
+    inherit: boolean;
+    luminance: number;
+}
+
+function colourGetProperties(colour: number): ColourProperties {
+    const props: ColourProperties = new ColourProperties;
+    props.red = colourGetRed(colour);
+    props.green = colourGetGreen(colour);
+    props.blue = colourGetBlue(colour);
+    props.inherit = colourGetInherit(colour);
+    props.luminance = colourGetLuminance(colour);
+    return props;
 }

assets/typescript/User.ts

@@ -3,7 +3,6 @@ interface CurrentUserInfo {
     username: string;
     user_background_settings: number;
     user_colour: number;
-    colour: Colour;
 }
 
 let userInfo: CurrentUserInfo;
@@ -21,9 +20,6 @@ function getRawCurrentUserInfo(): CurrentUserInfo
 function refreshCurrentUserInfo(): void
 {
     userInfo = getRawCurrentUserInfo();
-
-    if (userInfo)
-        userInfo.colour = new Colour(userInfo.user_colour);
 }
 
 function getCurrentUser(attribute: string = null)
@@ -42,5 +38,5 @@ function getCurrentUser(attribute: string = null)
 function userInit(): void
 {
     refreshCurrentUserInfo();
-    console.log(`You are ${getCurrentUser('username')} with user id ${getCurrentUser('user_id')} and colour ${getCurrentUser('colour').hex}.`);
+    console.log(`You are ${getCurrentUser('username')} with user id ${getCurrentUser('user_id')} and colour ${colourGetCSS(getCurrentUser('user_colour'))}.`);
 }