flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rewrote the client side colour functions to be procedural.

Browse source
This commit is contained in:
flash 2018-12-11 01:35:33 +01:00
parent fa9059a9d9
commit d488902bd3
2 changed files with 133 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

207
assets/typescript/Colour.ts
View file

@ -1,77 +1,134 @@
class Colour { const MSZ_COLOUR_INHERIT = 0x40000000,
public static readonly INHERIT: number = 0x40000000; MSZ_COLOUR_READABILITY_THRESHOLD = 186,
public static readonly READABILITY_THRESHOLD: number = 186; MSZ_COLOUR_LUMINANCE_WEIGHT_RED = 0.299,
public static readonly LUMINANCE_WEIGHT_RED: number = 0.299; MSZ_COLOUR_LUMINANCE_WEIGHT_GREEN = 0.587,
public static readonly LUMINANCE_WEIGHT_GREEN: number = 0.587; MSZ_COLOUR_LUMINANCE_WEIGHT_BLUE = 0.114;
public static readonly LUMINANCE_WEIGHT_BLUE: number = 0.114;
public raw: number; function colourCreate(): number {
return 0;
public constructor(rawColour: number = 0) }
{
this.raw = rawColour === null ? Colour.INHERIT : rawColour; function colourNone(): number {
} return MSZ_COLOUR_INHERIT;
}
public static none(): Colour {
return new Colour(Colour.INHERIT); function colourSetInherit(colour: number, enabled: boolean): number {
} if (enabled) {
colour |= MSZ_COLOUR_INHERIT;
public get inherit(): boolean { } else {
return (this.raw & Colour.INHERIT) > 0; colour &= ~MSZ_COLOUR_INHERIT;
} }
public set inherit(inherit: boolean) { return colour;
if (inherit) { }
this.raw |= Colour.INHERIT;
} else { function colourGetInherit(colour: number): boolean {
this.raw &= ~Colour.INHERIT; return (colour & MSZ_COLOUR_INHERIT) > 0;
} }
}
function colourGetRed(colour: number): number {
public get red(): number { return (colour >> 16) & 0xFF;
return (this.raw >> 16) & 0xFF; }
}
function colourSetRed(colour: number, red: number): number {
public set red(red: number) { red = red & 0xFF;
red = red & 0xFF; colour &= ~0xFF0000;
this.raw &= ~0xFF0000; colour |= red << 16;
this.raw |= red << 16; return colour;
} }
public get green(): number { function colourGetGreen(colour: number): number {
return (this.raw >> 8) & 0xFF; return (colour >> 8) & 0xFF;
} }
public set green(green: number) { function colourSetGreen(colour: number, green: number): number {
green = green & 0xFF; green = green & 0xFF;
this.raw &= ~0xFF00; colour &= ~0xFF00;
this.raw |= green << 8; 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) {
blue = blue & 0xFF; function colourSetBlue(colour: number, blue: number): number {
this.raw &= ~0xFF; blue = blue & 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 function colourGetLuminance(colour: number): number {
+ Colour.LUMINANCE_WEIGHT_BLUE * this.blue; 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); function colourGetHex(colour: number): string {
return '#' + (colour & 0xFFFFFF).toString(16);
if (hex.length < 6) }
for (let i = 0; i < 6 - hex.length; i++)
hex = '0' + hex; function colourGetCSS(colour: number): string {
if (colourGetInherit(colour)) {
return '#' + hex; 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;
} }

6
assets/typescript/User.ts
View file

@ -3,7 +3,6 @@ interface CurrentUserInfo {
username: string; username: string;
user_background_settings: number; user_background_settings: number;
user_colour: number; user_colour: number;
colour: Colour;
} }
let userInfo: CurrentUserInfo; let userInfo: CurrentUserInfo;
@ -21,9 +20,6 @@ function getRawCurrentUserInfo(): CurrentUserInfo
function refreshCurrentUserInfo(): void function refreshCurrentUserInfo(): void
{ {
userInfo = getRawCurrentUserInfo(); userInfo = getRawCurrentUserInfo();
if (userInfo)
userInfo.colour = new Colour(userInfo.user_colour);
} }
function getCurrentUser(attribute: string = null) function getCurrentUser(attribute: string = null)
@ -42,5 +38,5 @@ function getCurrentUser(attribute: string = null)
function userInit(): void function userInit(): void
{ {
refreshCurrentUserInfo(); 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'))}.`);
} }