benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

something

Browse Source 
Former-commit-id: 41811c2d7d98c1d3ad65e0d1dd559de64f96845e
This commit is contained in:
Benjamin Kyd
2022-03-25 15:57:12 +00:00
parent 93686c10e1
commit 4a83c84d3d
57 changed files with 206456 additions and 206456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.env
View File

@@ -1,17 +1,17 @@
NODE_ENV=dev
PORT=80
PORT_DEV=8080
LOG_LEVEL=0
LOG_CONSOLE=true
LOG_PATH=logs.log
LOG_NET_HOST=127.0.0.1
LOG_NET_PORT=21
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_DB=legolog
DATABASE_DB_DEV=legologdev
DATABASE_USER=postgres
DATABASE_PASSWORD=postgres
NODE_ENV=dev
PORT=80
PORT_DEV=8080
LOG_LEVEL=0
LOG_CONSOLE=true
LOG_PATH=logs.log
LOG_NET_HOST=127.0.0.1
LOG_NET_PORT=21
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_DB=legolog
DATABASE_DB_DEV=legologdev
DATABASE_USER=postgres
DATABASE_PASSWORD=postgres

2
.gitattributes vendored
View File

@@ -1 +1 @@
*.tar.gz filter=lfs diff=lfs merge=lfs -text
*.tar.gz filter=lfs diff=lfs merge=lfs -text

6
.gitignore vendored
View File

@@ -1,3 +1,3 @@
node_modules/
logs.log
db/image/*/
node_modules/
logs.log
db/image/*/

66
client/public/brick-renderer/basic.fs
View File

@@ -1,33 +1,33 @@
#version 300 es
precision highp float;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uView;
in vec3 vPosition;
in vec3 vNormal;
out vec4 fragColor;
// TODO: PBR
// https://github.com/Moguri/panda3d-simplepbr
void main() {
vec3 color = vec3(0.89019607843, 0.0, 0.00392156862);
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(uView.lightPosition.xyz - vPosition);
vec3 viewDir = normalize(uView.eyePosition.xyz - vPosition);
vec3 halfDir = normalize(lightDir + viewDir);
float spec = pow(max(dot(normal, halfDir), 0.0), 20.0);
vec3 specular = vec3(0.3) * spec;
float diff = max(dot(lightDir, normal), 0.0);
vec3 diffuse = color * diff;
vec3 ambient = color * 0.1;
fragColor = vec4(ambient + diffuse + specular, 1.0);
}
#version 300 es
precision highp float;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uView;
in vec3 vPosition;
in vec3 vNormal;
out vec4 fragColor;
// TODO: PBR
// https://github.com/Moguri/panda3d-simplepbr
void main() {
vec3 color = vec3(0.89019607843, 0.0, 0.00392156862);
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(uView.lightPosition.xyz - vPosition);
vec3 viewDir = normalize(uView.eyePosition.xyz - vPosition);
vec3 halfDir = normalize(lightDir + viewDir);
float spec = pow(max(dot(normal, halfDir), 0.0), 20.0);
vec3 specular = vec3(0.3) * spec;
float diff = max(dot(lightDir, normal), 0.0);
vec3 diffuse = color * diff;
vec3 ambient = color * 0.1;
fragColor = vec4(ambient + diffuse + specular, 1.0);
}

44
client/public/brick-renderer/basic.vs
View File

@@ -1,22 +1,22 @@
#version 300 es
layout(location=0) in vec4 position;
layout(location=1) in vec4 normal;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uView;
uniform mat4 uModel;
out vec3 vPosition;
out vec3 vNormal;
void main() {
vec4 worldPosition = uModel * position;
vPosition = worldPosition.xyz;
vNormal = (uModel * normal).xyz;
gl_Position = uView.viewProj * worldPosition;
}
#version 300 es
layout(location=0) in vec4 position;
layout(location=1) in vec4 normal;
uniform SceneUniforms {
mat4 viewProj;
vec4 eyePosition;
vec4 lightPosition;
} uView;
uniform mat4 uModel;
out vec3 vPosition;
out vec3 vNormal;
void main() {
vec4 worldPosition = uModel * position;
vPosition = worldPosition.xyz;
vNormal = (uModel * normal).xyz;
gl_Position = uView.viewProj * worldPosition;
}

272
client/public/brick-renderer/box.mjs
View File

@@ -1,136 +1,136 @@
export default class Box {
constructor(gl, options) {
this.gl = gl;
this.options = options;
this.vao = gl.createVertexArray();
gl.bindVertexArray(this.vao);
}
get vertexCount() {
return this.verticies;
}
bind() {
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
}
create(options) {
const { positions, normals } = this.boxVerticies(options);
this.verticies = positions.length / 3;
this.positionBuffer = this.gl.createBuffer();
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(0);
this.normalBuffer = this.gl.createBuffer();
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, normals, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(1, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(1);
}
// TODO: Use indicies ffs
boxVerticies(options) {
options = options || {};
const dimensions = options.dimensions || [1, 1, 1];
const position = options.position || [-dimensions[0] / 2, -dimensions[1] / 2, -dimensions[2] / 2];
const x = position[0];
const y = position[1];
const z = position[2];
const width = dimensions[0];
const height = dimensions[1];
const depth = dimensions[2];
const fbl = { x, y, z: z + depth };
const fbr = { x: x + width, y, z: z + depth };
const ftl = { x, y: y + height, z: z + depth };
const ftr = { x: x + width, y: y + height, z: z + depth };
const bbl = { x, y, z };
const bbr = { x: x + width, y, z };
const btl = { x, y: y + height, z };
const btr = { x: x + width, y: y + height, z };
const positions = new Float32Array([
// front
fbl.x, fbl.y, fbl.z,
fbr.x, fbr.y, fbr.z,
ftl.x, ftl.y, ftl.z,
ftl.x, ftl.y, ftl.z,
fbr.x, fbr.y, fbr.z,
ftr.x, ftr.y, ftr.z,
// right
fbr.x, fbr.y, fbr.z,
bbr.x, bbr.y, bbr.z,
ftr.x, ftr.y, ftr.z,
ftr.x, ftr.y, ftr.z,
bbr.x, bbr.y, bbr.z,
btr.x, btr.y, btr.z,
// back
fbr.x, bbr.y, bbr.z,
bbl.x, bbl.y, bbl.z,
btr.x, btr.y, btr.z,
btr.x, btr.y, btr.z,
bbl.x, bbl.y, bbl.z,
btl.x, btl.y, btl.z,
// left
bbl.x, bbl.y, bbl.z,
fbl.x, fbl.y, fbl.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
fbl.x, fbl.y, fbl.z,
ftl.x, ftl.y, ftl.z,
// top
ftl.x, ftl.y, ftl.z,
ftr.x, ftr.y, ftr.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
ftr.x, ftr.y, ftr.z,
btr.x, btr.y, btr.z,
// bottom
bbl.x, bbl.y, bbl.z,
bbr.x, bbr.y, bbr.z,
fbl.x, fbl.y, fbl.z,
fbl.x, fbl.y, fbl.z,
bbr.x, bbr.y, bbr.z,
fbr.x, fbr.y, fbr.z,
]);
const normals = new Float32Array(positions.length);
let ni;
for (let i = 0, count = positions.length / 3; i < count; i++) {
ni = i * 3;
normals[ni] = parseInt(i / 6, 10) === 1
? 1
: parseInt(i / 6, 10) === 3 ? -1 : 0;
normals[ni + 1] = parseInt(i / 6, 10) === 4
? 1
: parseInt(i / 6, 10) === 5 ? -1 : 0;
normals[ni + 2] = parseInt(i / 6, 10) === 0
? 1
: parseInt(i / 6, 10) === 2 ? -1 : 0;
}
return {
positions,
normals,
};
}
}
export default class Box {
constructor(gl, options) {
this.gl = gl;
this.options = options;
this.vao = gl.createVertexArray();
gl.bindVertexArray(this.vao);
}
get vertexCount() {
return this.verticies;
}
bind() {
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
}
create(options) {
const { positions, normals } = this.boxVerticies(options);
this.verticies = positions.length / 3;
this.positionBuffer = this.gl.createBuffer();
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(0);
this.normalBuffer = this.gl.createBuffer();
this.gl.bindVertexArray(this.vao);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, normals, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(1, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(1);
}
// TODO: Use indicies ffs
boxVerticies(options) {
options = options || {};
const dimensions = options.dimensions || [1, 1, 1];
const position = options.position || [-dimensions[0] / 2, -dimensions[1] / 2, -dimensions[2] / 2];
const x = position[0];
const y = position[1];
const z = position[2];
const width = dimensions[0];
const height = dimensions[1];
const depth = dimensions[2];
const fbl = { x, y, z: z + depth };
const fbr = { x: x + width, y, z: z + depth };
const ftl = { x, y: y + height, z: z + depth };
const ftr = { x: x + width, y: y + height, z: z + depth };
const bbl = { x, y, z };
const bbr = { x: x + width, y, z };
const btl = { x, y: y + height, z };
const btr = { x: x + width, y: y + height, z };
const positions = new Float32Array([
// front
fbl.x, fbl.y, fbl.z,
fbr.x, fbr.y, fbr.z,
ftl.x, ftl.y, ftl.z,
ftl.x, ftl.y, ftl.z,
fbr.x, fbr.y, fbr.z,
ftr.x, ftr.y, ftr.z,
// right
fbr.x, fbr.y, fbr.z,
bbr.x, bbr.y, bbr.z,
ftr.x, ftr.y, ftr.z,
ftr.x, ftr.y, ftr.z,
bbr.x, bbr.y, bbr.z,
btr.x, btr.y, btr.z,
// back
fbr.x, bbr.y, bbr.z,
bbl.x, bbl.y, bbl.z,
btr.x, btr.y, btr.z,
btr.x, btr.y, btr.z,
bbl.x, bbl.y, bbl.z,
btl.x, btl.y, btl.z,
// left
bbl.x, bbl.y, bbl.z,
fbl.x, fbl.y, fbl.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
fbl.x, fbl.y, fbl.z,
ftl.x, ftl.y, ftl.z,
// top
ftl.x, ftl.y, ftl.z,
ftr.x, ftr.y, ftr.z,
btl.x, btl.y, btl.z,
btl.x, btl.y, btl.z,
ftr.x, ftr.y, ftr.z,
btr.x, btr.y, btr.z,
// bottom
bbl.x, bbl.y, bbl.z,
bbr.x, bbr.y, bbr.z,
fbl.x, fbl.y, fbl.z,
fbl.x, fbl.y, fbl.z,
bbr.x, bbr.y, bbr.z,
fbr.x, fbr.y, fbr.z,
]);
const normals = new Float32Array(positions.length);
let ni;
for (let i = 0, count = positions.length / 3; i < count; i++) {
ni = i * 3;
normals[ni] = parseInt(i / 6, 10) === 1
? 1
: parseInt(i / 6, 10) === 3 ? -1 : 0;
normals[ni + 1] = parseInt(i / 6, 10) === 4
? 1
: parseInt(i / 6, 10) === 5 ? -1 : 0;
normals[ni + 2] = parseInt(i / 6, 10) === 0
? 1
: parseInt(i / 6, 10) === 2 ? -1 : 0;
}
return {
positions,
normals,
};
}
}

260
client/public/brick-renderer/index.mjs
View File

@@ -1,130 +1,130 @@
import { mat4, vec3 } from './glm/glm.mjs';
import Shader from './shader.mjs';
import Box from './box.mjs';
import LoadObj from './wavefront-obj.mjs';
let BasicVsource, BasicFSource;
let LegoStudObjSource, LegoStudObjParseResult;
export async function RendererPreInit() {
BasicFSource = await fetch('./brick-renderer/basic.fs').then(r => r.text());
BasicVsource = await fetch('./brick-renderer/basic.vs').then(r => r.text());
LegoStudObjSource = await fetch('./res/lego_stud.obj').then(r => r.text());
LegoStudObjParseResult = LoadObj(LegoStudObjSource);
console.log(LegoStudObjParseResult);
}
class BaseRenderer {
constructor(canvas) {
this.canvas = canvas;
this.gl = canvas.getContext('webgl2');
this.gl.viewport(0, 0, canvas.width, canvas.height);
this.gl.clearColor(0.84313, 0.76078, 1.0, 1.0);
this.gl.enable(this.gl.DEPTH_TEST);
this.shader = new Shader(this.gl, BasicVsource, BasicFSource);
this.shader.link();
WebGLDebugUtils.init(this.gl);
}
}
export class BrickRenderer extends BaseRenderer {
constructor(canvas, options) {
super(canvas);
this.angleX = 0;
this.angleY = 0;
// random number between 0 and 0.1
this.dx = Math.random() * 0.09;
this.dy = Math.random() * 0.09;
/////////////////////////
// TESTING LEGO STUDS //
this.VAO = this.gl.createVertexArray();
this.gl.bindVertexArray(this.VAO);
this.VBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.VBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.vertices, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(0);
const nVBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, nVBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.normals, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(1, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(1);
this.EBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, LegoStudObjParseResult.indices, this.gl.STATIC_DRAW);
// TESTING LEGO STUDS //
/////////////////////////
this.sceneUniformLocation = this.shader.getUniformBlock('SceneUniforms');
this.modelMatrixLocation = this.shader.getUniform('uView');
this.shader.attatch();
this.boxObj = new Box(this.gl, { dimensions: [0.5, 0.6, 0.5] });
this.boxObj.create();
const projMatrix = mat4.create();
mat4.perspective(projMatrix, Math.PI / 2, this.gl.drawingBufferWidth / this.gl.drawingBufferHeight, 0.1, 10.0);
const viewMatrix = mat4.create();
const eyePosition = vec3.fromValues(1, 1, 1);
mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
const viewProjMatrix = mat4.create();
mat4.multiply(viewProjMatrix, projMatrix, viewMatrix);
const lightPosition = vec3.fromValues(1, 1, 0.5);
this.modelMatrix = mat4.create();
this.rotateXMatrix = mat4.create();
this.rotateYMatrix = mat4.create();
const sceneUniformData = new Float32Array(24);
sceneUniformData.set(viewProjMatrix);
sceneUniformData.set(eyePosition, 16);
sceneUniformData.set(lightPosition, 20);
const sceneUniformBuffer = this.gl.createBuffer();
this.gl.bindBufferBase(this.gl.UNIFORM_BUFFER, 0, sceneUniformBuffer);
this.gl.bufferData(this.gl.UNIFORM_BUFFER, sceneUniformData, this.gl.STATIC_DRAW);
requestAnimationFrame(this.draw.bind(this));
}
draw() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.angleX += this.dx;
this.angleY += this.dy;
mat4.fromXRotation(this.rotateXMatrix, this.angleX);
mat4.fromYRotation(this.rotateYMatrix, this.angleY);
mat4.multiply(this.modelMatrix, this.rotateXMatrix, this.rotateYMatrix);
this.gl.uniformMatrix4fv(this.modelMatrixLocation, false, this.modelMatrix);
this.gl.bindVertexArray(this.VAO);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO);
this.gl.drawElements(this.gl.TRIANGLES, LegoStudObjParseResult.indices.length * 3, this.gl.UNSIGNED_SHORT, 0);
// this.boxObj.bind();
// this.gl.drawArrays(this.gl.TRIANGLES, 0, this.boxObj.vertexCount);
if (this.gl.getError() !== this.gl.NO_ERROR) {
console.error(WebGLDebugUtils.glEnumToString(this.gl.getError()));
}
requestAnimationFrame(this.draw.bind(this));
}
}
import { mat4, vec3 } from './glm/glm.mjs';
import Shader from './shader.mjs';
import Box from './box.mjs';
import LoadObj from './wavefront-obj.mjs';
let BasicVsource, BasicFSource;
let LegoStudObjSource, LegoStudObjParseResult;
export async function RendererPreInit() {
BasicFSource = await fetch('./brick-renderer/basic.fs').then(r => r.text());
BasicVsource = await fetch('./brick-renderer/basic.vs').then(r => r.text());
LegoStudObjSource = await fetch('./res/lego_stud.obj').then(r => r.text());
LegoStudObjParseResult = LoadObj(LegoStudObjSource);
console.log(LegoStudObjParseResult);
}
class BaseRenderer {
constructor(canvas) {
this.canvas = canvas;
this.gl = canvas.getContext('webgl2');
this.gl.viewport(0, 0, canvas.width, canvas.height);
this.gl.clearColor(0.84313, 0.76078, 1.0, 1.0);
this.gl.enable(this.gl.DEPTH_TEST);
this.shader = new Shader(this.gl, BasicVsource, BasicFSource);
this.shader.link();
WebGLDebugUtils.init(this.gl);
}
}
export class BrickRenderer extends BaseRenderer {
constructor(canvas, options) {
super(canvas);
this.angleX = 0;
this.angleY = 0;
// random number between 0 and 0.1
this.dx = Math.random() * 0.09;
this.dy = Math.random() * 0.09;
/////////////////////////
// TESTING LEGO STUDS //
this.VAO = this.gl.createVertexArray();
this.gl.bindVertexArray(this.VAO);
this.VBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.VBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.vertices, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(0);
const nVBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, nVBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.normals, this.gl.STATIC_DRAW);
this.gl.vertexAttribPointer(1, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(1);
this.EBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, LegoStudObjParseResult.indices, this.gl.STATIC_DRAW);
// TESTING LEGO STUDS //
/////////////////////////
this.sceneUniformLocation = this.shader.getUniformBlock('SceneUniforms');
this.modelMatrixLocation = this.shader.getUniform('uView');
this.shader.attatch();
this.boxObj = new Box(this.gl, { dimensions: [0.5, 0.6, 0.5] });
this.boxObj.create();
const projMatrix = mat4.create();
mat4.perspective(projMatrix, Math.PI / 2, this.gl.drawingBufferWidth / this.gl.drawingBufferHeight, 0.1, 10.0);
const viewMatrix = mat4.create();
const eyePosition = vec3.fromValues(1, 1, 1);
mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
const viewProjMatrix = mat4.create();
mat4.multiply(viewProjMatrix, projMatrix, viewMatrix);
const lightPosition = vec3.fromValues(1, 1, 0.5);
this.modelMatrix = mat4.create();
this.rotateXMatrix = mat4.create();
this.rotateYMatrix = mat4.create();
const sceneUniformData = new Float32Array(24);
sceneUniformData.set(viewProjMatrix);
sceneUniformData.set(eyePosition, 16);
sceneUniformData.set(lightPosition, 20);
const sceneUniformBuffer = this.gl.createBuffer();
this.gl.bindBufferBase(this.gl.UNIFORM_BUFFER, 0, sceneUniformBuffer);
this.gl.bufferData(this.gl.UNIFORM_BUFFER, sceneUniformData, this.gl.STATIC_DRAW);
requestAnimationFrame(this.draw.bind(this));
}
draw() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.angleX += this.dx;
this.angleY += this.dy;
mat4.fromXRotation(this.rotateXMatrix, this.angleX);
mat4.fromYRotation(this.rotateYMatrix, this.angleY);
mat4.multiply(this.modelMatrix, this.rotateXMatrix, this.rotateYMatrix);
this.gl.uniformMatrix4fv(this.modelMatrixLocation, false, this.modelMatrix);
this.gl.bindVertexArray(this.VAO);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO);
this.gl.drawElements(this.gl.TRIANGLES, LegoStudObjParseResult.indices.length * 3, this.gl.UNSIGNED_SHORT, 0);
// this.boxObj.bind();
// this.gl.drawArrays(this.gl.TRIANGLES, 0, this.boxObj.vertexCount);
if (this.gl.getError() !== this.gl.NO_ERROR) {
console.error(WebGLDebugUtils.glEnumToString(this.gl.getError()));
}
requestAnimationFrame(this.draw.bind(this));
}
}

114
client/public/brick-renderer/renderable.mjs
View File

@@ -1,57 +1,57 @@
import { mat4, vec3, vec4 } from './glm/glm.mjs';
export class Material {
constructor(gl, colour = [0.89019607843, 0.0, 0.00392156862], shininess = 20.0) {
this.gl = gl;
this.colour = colour;
this.shininess = shininess;
}
}
export class Renderable {
constructor(gl, shader, material = new Material()) {
this.gl = gl;
// TODO: Get these from the shader
this.attributeLocations = {
position: 0,
normal: 1,
};
this.buffers = {
vertexBuffer: null,
normalBuffer: null,
faceBuffer: null,
};
this.data = {
verticies: [],
normals: [],
faces: [],
};
this.shader = shader;
this.material = material;
this.uniforms = {
modelMatrix: mat4.create(),
u_modelMatrix: null,
viewMatrix: mat4.create(),
u_viewMatrix: null,
projectionMatrix: mat4.create(),
u_projectionMatrix: null,
lightPosition: vec3.create(),
u_lightPosition: null,
ambientLightColor: vec3.fromValues(0.2, 0.2, 0.2),
u_ambientLightColor: null,
diffuseLightColor: vec3.fromValues(0.8, 0.8, 0.8),
u_diffuseLightColor: null,
specularLightColor: vec3.fromValues(1.0, 1.0, 1.0),
u_specularLightColor: null,
lightIntensity: 1.0,
u_lightIntensity: null,
ambientIntensity: 1.0,
u_ambientIntensity: null,
};
}
}
export class LegoBrickRenderable {
}
import { mat4, vec3, vec4 } from './glm/glm.mjs';
export class Material {
constructor(gl, colour = [0.89019607843, 0.0, 0.00392156862], shininess = 20.0) {
this.gl = gl;
this.colour = colour;
this.shininess = shininess;
}
}
export class Renderable {
constructor(gl, shader, material = new Material()) {
this.gl = gl;
// TODO: Get these from the shader
this.attributeLocations = {
position: 0,
normal: 1,
};
this.buffers = {
vertexBuffer: null,
normalBuffer: null,
faceBuffer: null,
};
this.data = {
verticies: [],
normals: [],
faces: [],
};
this.shader = shader;
this.material = material;
this.uniforms = {
modelMatrix: mat4.create(),
u_modelMatrix: null,
viewMatrix: mat4.create(),
u_viewMatrix: null,
projectionMatrix: mat4.create(),
u_projectionMatrix: null,
lightPosition: vec3.create(),
u_lightPosition: null,
ambientLightColor: vec3.fromValues(0.2, 0.2, 0.2),
u_ambientLightColor: null,
diffuseLightColor: vec3.fromValues(0.8, 0.8, 0.8),
u_diffuseLightColor: null,
specularLightColor: vec3.fromValues(1.0, 1.0, 1.0),
u_specularLightColor: null,
lightIntensity: 1.0,
u_lightIntensity: null,
ambientIntensity: 1.0,
u_ambientIntensity: null,
};
}
}
export class LegoBrickRenderable {
}

254
client/public/brick-renderer/shader.mjs
View File

@@ -1,127 +1,127 @@
export default class Shader {
constructor(gl, vSource, fSource) {
this.gl = gl;
this.vSource = vSource;
this.fSource = fSource;
this.uniformBlockNum = 0;
this.shaderProgram = 123;
this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER);
this.gl.shaderSource(this.vShader, this.vSource);
this.gl.compileShader(this.vShader);
if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.vShader));
}
this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.gl.shaderSource(this.fShader, this.fSource);
this.gl.compileShader(this.fShader);
if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.fShader));
}
}
get vertexShader() {
return this.vShader;
}
get fragmentShader() {
return this.fShader;
}
get program() {
return this.shaderProgram;
}
getUniformBlock(name) {
const location = this.gl.getUniformBlockIndex(this.shaderProgram, name);
this.gl.uniformBlockBinding(this.shaderProgram, location, this.uniformBlockNum);
this.uniformBlockNum++;
return location;
}
getUniform(name) {
return this.gl.getUniformLocation(this.shaderProgram, name);
}
attribLocation(location, name) {
this.gl.bindAttribLocation(this.shaderProgram, location, name);
}
setUniform(uniform, value) {
switch (uniform.type) {
case this.gl.FLOAT:
this.gl.uniform1f(uniform, value);
break;
case this.gl.FLOAT_VEC2:
this.gl.uniform2f(uniform, value[0], value[1]);
break;
case this.gl.FLOAT_VEC3:
this.gl.uniform3f(uniform, value[0], value[1], value[2]);
break;
case this.gl.FLOAT_VEC4:
this.gl.uniform4f(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.INT:
this.gl.uniform1i(uniform, value);
break;
case this.gl.INT_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]);
break;
case this.gl.INT_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break;
case this.gl.INT_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.BOOL:
this.gl.uniform1i(uniform, value);
break;
case this.gl.BOOL_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]);
break;
case this.gl.BOOL_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break;
case this.gl.BOOL_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.FLOAT_MAT2:
this.gl.uniformMatrix2fv(uniform, false, value);
break;
case this.gl.FLOAT_MAT3:
this.gl.uniformMatrix3fv(uniform, false, value);
break;
case this.gl.FLOAT_MAT4:
this.gl.uniformMatrix4fv(uniform, false, value);
break;
case this.gl.SAMPLER_2D:
this.gl.uniform1i(uniform, value);
break;
case this.gl.SAMPLER_CUBE:
this.gl.uniform1i(uniform, value);
break;
default:
console.error(`Unsupported uniform type ${uniform.type}`);
}
}
link() {
this.shaderProgram = this.gl.createProgram();
this.gl.attachShader(this.shaderProgram, this.vShader);
this.gl.attachShader(this.shaderProgram, this.fShader);
this.gl.linkProgram(this.shaderProgram);
if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
console.error(this.gl.getProgramParameter(this.shaderProgram));
}
}
attatch() {
this.gl.useProgram(this.shaderProgram);
}
}
export default class Shader {
constructor(gl, vSource, fSource) {
this.gl = gl;
this.vSource = vSource;
this.fSource = fSource;
this.uniformBlockNum = 0;
this.shaderProgram = 123;
this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER);
this.gl.shaderSource(this.vShader, this.vSource);
this.gl.compileShader(this.vShader);
if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.vShader));
}
this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.gl.shaderSource(this.fShader, this.fSource);
this.gl.compileShader(this.fShader);
if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.fShader));
}
}
get vertexShader() {
return this.vShader;
}
get fragmentShader() {
return this.fShader;
}
get program() {
return this.shaderProgram;
}
getUniformBlock(name) {
const location = this.gl.getUniformBlockIndex(this.shaderProgram, name);
this.gl.uniformBlockBinding(this.shaderProgram, location, this.uniformBlockNum);
this.uniformBlockNum++;
return location;
}
getUniform(name) {
return this.gl.getUniformLocation(this.shaderProgram, name);
}
attribLocation(location, name) {
this.gl.bindAttribLocation(this.shaderProgram, location, name);
}
setUniform(uniform, value) {
switch (uniform.type) {
case this.gl.FLOAT:
this.gl.uniform1f(uniform, value);
break;
case this.gl.FLOAT_VEC2:
this.gl.uniform2f(uniform, value[0], value[1]);
break;
case this.gl.FLOAT_VEC3:
this.gl.uniform3f(uniform, value[0], value[1], value[2]);
break;
case this.gl.FLOAT_VEC4:
this.gl.uniform4f(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.INT:
this.gl.uniform1i(uniform, value);
break;
case this.gl.INT_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]);
break;
case this.gl.INT_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break;
case this.gl.INT_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.BOOL:
this.gl.uniform1i(uniform, value);
break;
case this.gl.BOOL_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]);
break;
case this.gl.BOOL_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break;
case this.gl.BOOL_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break;
case this.gl.FLOAT_MAT2:
this.gl.uniformMatrix2fv(uniform, false, value);
break;
case this.gl.FLOAT_MAT3:
this.gl.uniformMatrix3fv(uniform, false, value);
break;
case this.gl.FLOAT_MAT4:
this.gl.uniformMatrix4fv(uniform, false, value);
break;
case this.gl.SAMPLER_2D:
this.gl.uniform1i(uniform, value);
break;
case this.gl.SAMPLER_CUBE:
this.gl.uniform1i(uniform, value);
break;
default:
console.error(`Unsupported uniform type ${uniform.type}`);
}
}
link() {
this.shaderProgram = this.gl.createProgram();
this.gl.attachShader(this.shaderProgram, this.vShader);
this.gl.attachShader(this.shaderProgram, this.fShader);
this.gl.linkProgram(this.shaderProgram);
if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
console.error(this.gl.getProgramParameter(this.shaderProgram));
}
}
attatch() {
this.gl.useProgram(this.shaderProgram);
}
}

102
client/public/brick-renderer/wavefront-obj.mjs
View File

@@ -1,51 +1,51 @@
// Looseley based on https://webglfundamentals.org/webgl/lessons/webgl-load-obj.html
// returns verticies, normals and indicies
// (texture coordinates are for nerds)
export default function LoadObj(objText) {
const lines = objText.split('\n');
const v = [];
const vn = [];
const f = [];
const fn = [];
for (const line of lines) {
const words = line.split(' ');
if (words[0] === 'v') {
// verticies
const x = parseFloat(words[1]);
const y = parseFloat(words[2]);
const z = parseFloat(words[3]);
const vert = [x, y, z];
v.push(vert);
} else if (words[0] === 'vn') {
// normals
const nx = parseFloat(words[1]);
const ny = parseFloat(words[2]);
const nz = parseFloat(words[3]);
const n = [nx, ny, nz];
vn.push(n);
} else if (words[0] === 'f') {
// indicies
const pos = [];
const nor = [];
for (let i = 1; i < words.length; i++) {
const face = words[i].split('//');
const v = parseInt(face[0]);
const n = parseInt(face[1]);
pos.push(v);
nor.push(n);
}
f.push(pos);
fn.push(nor);
}
}
return {
vertices: v,
normals: vn,
indices: f,
normalIndicies: fn,
};
}
// Looseley based on https://webglfundamentals.org/webgl/lessons/webgl-load-obj.html
// returns verticies, normals and indicies
// (texture coordinates are for nerds)
export default function LoadObj(objText) {
const lines = objText.split('\n');
const v = [];
const vn = [];
const f = [];
const fn = [];
for (const line of lines) {
const words = line.split(' ');
if (words[0] === 'v') {
// verticies
const x = parseFloat(words[1]);
const y = parseFloat(words[2]);
const z = parseFloat(words[3]);
const vert = [x, y, z];
v.push(vert);
} else if (words[0] === 'vn') {
// normals
const nx = parseFloat(words[1]);
const ny = parseFloat(words[2]);
const nz = parseFloat(words[3]);
const n = [nx, ny, nz];
vn.push(n);
} else if (words[0] === 'f') {
// indicies
const pos = [];
const nor = [];
for (let i = 1; i < words.length; i++) {
const face = words[i].split('//');
const v = parseInt(face[0]);
const n = parseInt(face[1]);
pos.push(v);
nor.push(n);
}
f.push(pos);
fn.push(nor);
}
}
return {
vertices: v,
normals: vn,
indices: f,
normalIndicies: fn,
};
}

2380
client/public/brick-renderer/webgl-debug.js
View File

File diff suppressed because it is too large Load Diff

62
client/public/components/compact-listing.mjs
View File

@@ -1,31 +1,31 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class CompactProductListing extends Component {
static __IDENTIFY() { return 'compact-listing'; }
constructor() {
super(CompactProductListing);
}
Render() {
return {
template: `
{this.state.name}
{this.state.desc}
£{this.state.price}
<img src="{this.state.image}"></img>
`,
style: `
compact-listing-component {
display: flex;
}
`,
};
}
OnceRendered() {
}
}
RegisterComponent(CompactProductListing);
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class CompactProductListing extends Component {
static __IDENTIFY() { return 'compact-listing'; }
constructor() {
super(CompactProductListing);
}
Render() {
return {
template: `
{this.state.name}
{this.state.desc}
£{this.state.price}
<img src="{this.state.image}"></img>
`,
style: `
compact-listing-component {
display: flex;
}
`,
};
}
OnceRendered() {
}
}
RegisterComponent(CompactProductListing);

302
client/public/components/components.mjs
View File

@@ -1,151 +1,151 @@
// it is important that no more than content than
// neccesary is fetched from the server
const preLoadCache = [];
export function SideLoad(path) {
return new Promise((resolve) => {
if (preLoadCache[path]) {
resolve(preLoadCache[path]);
} else {
const fetchPromise = fetch(path).then(response => response.text());
preLoadCache[path] = fetchPromise;
resolve(fetchPromise);
}
});
}
export function RegisterComponent(componentClass) {
const name = componentClass.__IDENTIFY();
console.log('registering component: ' + name);
customElements.define(`${name}-component`, componentClass);
}
export class Component extends HTMLElement {
constructor(child) {
super();
this.root = this.attachShadow({ mode: 'open' });
this.state = {};
this.child = child;
// give components a unique identifier
// TODO: Make this unique
// Components[child.__IDENTIFY()] = this;
}
// Override these
Render() { Component.__WARN('Render'); }
OnceRendered() { Component.__WARN('Render'); }
static __IDENTIFY() { Component.__WARN('identify'); }
connectedCallback() {
// set up to watch all attributes for changes
this.watchAttributeChange(this.attributeChangedCallback.bind(this));
// if there are any attributes related to the element
// be sure to include them in the state to be sure that
// they can be resolved
let stateUpdateQueue = { ...this.state };
for (const attribute of this.attributes) {
stateUpdateQueue = { ...stateUpdateQueue, [attribute.name]: attribute.value };
}
this.setState(stateUpdateQueue);
if (this.attributes.length === 0) {
this.__INVOKE_RENDER();
}
}
disconnectedCallback() {
this.root.innerHTML = '';
}
watchAttributeChange(callback) {
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes') {
const newVal = mutation.target.getAttribute(mutation.attributeName);
callback(mutation.attributeName, newVal);
}
});
});
observer.observe(this, { attributes: true });
}
attributeChangedCallback(name, newValue) {
console.log(`attribute changed: ${name} ${newValue}`);
this.setState({ ...this.state, [name]: newValue });
this.__INVOKE_RENDER();
}
get getState() {
return this.state;
}
setState(newState) {
this.state = newState;
this.__INVOKE_RENDER(Object.bind(this));
}
async __INVOKE_RENDER() {
let res = this.Render(Object.bind(this));
if (res instanceof Promise) {
res = await res;
}
if (res.template === undefined || res.style === undefined) {
Component.__ERR('no template or style');
return;
}
// way to formally update state WITHOUT triggering a re-render
if (res.state) {
this.state = res.state;
}
// if res.template is a promise, we need to wait to resolve it
if (res.template instanceof Promise) {
res.template = await res.template;
}
if (res.style instanceof Promise) {
res.style = await res.style;
}
// go through and resolve all of the "state" dependancies
let resolved = res.template;
const parserRegex = /{(.*?)}/gm;
for (let m; (m = parserRegex.exec(res.template)) !== null;) {
if (m.index === parserRegex.lastIndex) {
parserRegex.lastIndex++;
}
// resolve the state dependancy and replace it in the template
if (m[1].startsWith('this.state')) {
const stateKey = m[1].substring(11);
const stateValue = this.state[stateKey];
console.log('attempting to replace', m[0], 'with', stateValue);
if (stateValue === undefined) {
continue;
}
console.log('replacing', m[0], 'with', stateValue);
resolved = resolved.replace(m[0], stateValue);
}
}
this.root.innerHTML = resolved;
const style = document.createElement('style');
style.textContent = res.style;
this.root.appendChild(style);
this.OnceRendered();
}
static __WARN(caller) {
console.error(`WARNING: ${caller} is not implemented`);
}
static __ERR(msg) {
console.error(`ERROR: idiot ${msg}`);
}
}
// it is important that no more than content than
// neccesary is fetched from the server
const preLoadCache = [];
export function SideLoad(path) {
return new Promise((resolve) => {
if (preLoadCache[path]) {
resolve(preLoadCache[path]);
} else {
const fetchPromise = fetch(path).then(response => response.text());
preLoadCache[path] = fetchPromise;
resolve(fetchPromise);
}
});
}
export function RegisterComponent(componentClass) {
const name = componentClass.__IDENTIFY();
console.log('registering component: ' + name);
customElements.define(`${name}-component`, componentClass);
}
export class Component extends HTMLElement {
constructor(child) {
super();
this.root = this.attachShadow({ mode: 'open' });
this.state = {};
this.child = child;
// give components a unique identifier
// TODO: Make this unique
// Components[child.__IDENTIFY()] = this;
}
// Override these
Render() { Component.__WARN('Render'); }
OnceRendered() { Component.__WARN('Render'); }
static __IDENTIFY() { Component.__WARN('identify'); }
connectedCallback() {
// set up to watch all attributes for changes
this.watchAttributeChange(this.attributeChangedCallback.bind(this));
// if there are any attributes related to the element
// be sure to include them in the state to be sure that
// they can be resolved
let stateUpdateQueue = { ...this.state };
for (const attribute of this.attributes) {
stateUpdateQueue = { ...stateUpdateQueue, [attribute.name]: attribute.value };
}
this.setState(stateUpdateQueue);
if (this.attributes.length === 0) {
this.__INVOKE_RENDER();
}
}
disconnectedCallback() {
this.root.innerHTML = '';
}
watchAttributeChange(callback) {
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes') {
const newVal = mutation.target.getAttribute(mutation.attributeName);
callback(mutation.attributeName, newVal);
}
});
});
observer.observe(this, { attributes: true });
}
attributeChangedCallback(name, newValue) {
console.log(`attribute changed: ${name} ${newValue}`);
this.setState({ ...this.state, [name]: newValue });
this.__INVOKE_RENDER();
}
get getState() {
return this.state;
}
setState(newState) {
this.state = newState;
this.__INVOKE_RENDER(Object.bind(this));
}
async __INVOKE_RENDER() {
let res = this.Render(Object.bind(this));
if (res instanceof Promise) {
res = await res;
}
if (res.template === undefined || res.style === undefined) {
Component.__ERR('no template or style');
return;
}
// way to formally update state WITHOUT triggering a re-render
if (res.state) {
this.state = res.state;
}
// if res.template is a promise, we need to wait to resolve it
if (res.template instanceof Promise) {
res.template = await res.template;
}
if (res.style instanceof Promise) {
res.style = await res.style;
}
// go through and resolve all of the "state" dependancies
let resolved = res.template;
const parserRegex = /{(.*?)}/gm;
for (let m; (m = parserRegex.exec(res.template)) !== null;) {
if (m.index === parserRegex.lastIndex) {
parserRegex.lastIndex++;
}
// resolve the state dependancy and replace it in the template
if (m[1].startsWith('this.state')) {
const stateKey = m[1].substring(11);
const stateValue = this.state[stateKey];
console.log('attempting to replace', m[0], 'with', stateValue);
if (stateValue === undefined) {
continue;
}
console.log('replacing', m[0], 'with', stateValue);
resolved = resolved.replace(m[0], stateValue);
}
}
this.root.innerHTML = resolved;
const style = document.createElement('style');
style.textContent = res.style;
this.root.appendChild(style);
this.OnceRendered();
}
static __WARN(caller) {
console.error(`WARNING: ${caller} is not implemented`);
}
static __ERR(msg) {
console.error(`ERROR: idiot ${msg}`);
}
}

532
client/public/components/css/navbar.css
View File

@@ -1,266 +1,266 @@
.navbar {
position: sticky;
display: flex;
font-family: 'Josefin Sans', sans-serif;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
font-size: 2.3em;
margin: auto;
padding-top: 1em;
color: #222;
}
.push-right {
display: flex;
flex-direction: column;
margin-left: auto;
text-align: right;
}
.push-down {
align-self: flex-end;
flex-basis: 100%;
margin-top: auto;
}
.logo {
flex-grow: 2;
transform: translatey(-40%);
}
.hamburger {
background: transparent;
border: none;
cursor: pointer;
display: none;
outline: none;
position: relative;
height: 60px;
width: 60px;
z-index: 200;
}
.hamburger-line {
background: #222;
height: 6px;
position: absolute;
left: 0;
transition: all 0.2s ease-out;
width: 100%;
}
.hamburger:hover .hamburger-line {
background: #555;
}
.hamburger-line-top {
top: 3px;
}
.menu-active .hamburger-line-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
.hamburger-line-middle {
top: 50%;
transform: translatey(-50%);
}
.menu-active .hamburger-line-middle {
left: 50%;
opacity: 0;
width: 0;
}
.hamburger-line-bottom {
bottom: 3px;
}
.menu-active .hamburger-line-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
/* nav menu */
.nav-menu {
font-family: 'Londrina Solid', cursive;
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: all 0.25s ease-in;
}
.nav-menu .menu-item a {
color: #222;
display: block;
line-height: 30px;
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
}
.nav-menu .menu-item a:hover {
color: #555;
text-decoration: underline;
}
.drop-down {
z-index: 100;
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: #E4D6FF;
padding: 5px 5px;
list-style: none;
width: 230px;
z-index: 2;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.hamburger {
display: inline-block;
}
}
/* Make sure the thing doesnt move */
/* .nav-menu {
transform: translatey(-100%);
} */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu {
position: fixed;
background: #e4d6ffde;
flex-direction: column;
justify-content: center;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translatey(-100%);
text-align: center;
z-index: 100;
}
.menu-active .nav-menu {
transform: translatey(0%);
opacity: 1;
}
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu .menu-item a {
font-size: 1.5em;
margin: 8px;
}
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.sub-nav {
position: relative;
width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav-link:hover + .sub-nav {
display: block;
}
.sub-nav:hover {
display: block;
}
/* search bar */
.secondary-menu {
display: flex;
margin-top: 9px;
flex-direction: row;
justify-content: space-around;
color: #222;
align-items: center;
align-content: center;
flex-wrap: nowrap;
width: 100%;
}
.search-wrapper {
flex-basis: 75%;
height: 100%;
position: relative;
display: flex;
min-width: 100px;
/* margin-left: 8px; */
z-index: 1;
}
/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
#search-bar {
width: 100%;
padding: 12px 14px;
background-color: transparent;
transition: transform 250ms ease-in-out;
font-family: 'Josefin Sans', sans-serif;
font-size: 0.5em;
color: #222;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 27px 27px;
background-position: 95% center;
border-radius: 10px;
border: 2px solid #222;
transition: all 250ms ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.search__input::placeholder {
color: rgba(87, 87, 86, 0.8);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#search-bar:hover, #search-bar:focus {
padding: 12px 0;
outline: 0;
border: 2px solid transparent;
border-bottom: 2px solid #222;
border-radius: 0;
background-position: 100% center;
}
/* #search-bar:hover, #search-bar:focus {
border: 1.5px solid #009688;
background-color: white;
} */
#cart-wrapper {
display: flex;
flex-basis: 10%;
justify-content: space-between;
padding-bottom: 2px;
}
#cart-icon {
padding-top: 2px;
}
#cart-number {
padding-top: 9px;
font-size: 1em;
font-weight: 100;
}
.navbar {
position: sticky;
display: flex;
font-family: 'Josefin Sans', sans-serif;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
font-size: 2.3em;
margin: auto;
padding-top: 1em;
color: #222;
}
.push-right {
display: flex;
flex-direction: column;
margin-left: auto;
text-align: right;
}
.push-down {
align-self: flex-end;
flex-basis: 100%;
margin-top: auto;
}
.logo {
flex-grow: 2;
transform: translatey(-40%);
}
.hamburger {
background: transparent;
border: none;
cursor: pointer;
display: none;
outline: none;
position: relative;
height: 60px;
width: 60px;
z-index: 200;
}
.hamburger-line {
background: #222;
height: 6px;
position: absolute;
left: 0;
transition: all 0.2s ease-out;
width: 100%;
}
.hamburger:hover .hamburger-line {
background: #555;
}
.hamburger-line-top {
top: 3px;
}
.menu-active .hamburger-line-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
.hamburger-line-middle {
top: 50%;
transform: translatey(-50%);
}
.menu-active .hamburger-line-middle {
left: 50%;
opacity: 0;
width: 0;
}
.hamburger-line-bottom {
bottom: 3px;
}
.menu-active .hamburger-line-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
/* nav menu */
.nav-menu {
font-family: 'Londrina Solid', cursive;
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: all 0.25s ease-in;
}
.nav-menu .menu-item a {
color: #222;
display: block;
line-height: 30px;
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
}
.nav-menu .menu-item a:hover {
color: #555;
text-decoration: underline;
}
.drop-down {
z-index: 100;
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: #E4D6FF;
padding: 5px 5px;
list-style: none;
width: 230px;
z-index: 2;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.hamburger {
display: inline-block;
}
}
/* Make sure the thing doesnt move */
/* .nav-menu {
transform: translatey(-100%);
} */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu {
position: fixed;
background: #e4d6ffde;
flex-direction: column;
justify-content: center;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translatey(-100%);
text-align: center;
z-index: 100;
}
.menu-active .nav-menu {
transform: translatey(0%);
opacity: 1;
}
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu .menu-item a {
font-size: 1.5em;
margin: 8px;
}
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.sub-nav {
position: relative;
width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav-link:hover + .sub-nav {
display: block;
}
.sub-nav:hover {
display: block;
}
/* search bar */
.secondary-menu {
display: flex;
margin-top: 9px;
flex-direction: row;
justify-content: space-around;
color: #222;
align-items: center;
align-content: center;
flex-wrap: nowrap;
width: 100%;
}
.search-wrapper {
flex-basis: 75%;
height: 100%;
position: relative;
display: flex;
min-width: 100px;
/* margin-left: 8px; */
z-index: 1;
}
/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
#search-bar {
width: 100%;
padding: 12px 14px;
background-color: transparent;
transition: transform 250ms ease-in-out;
font-family: 'Josefin Sans', sans-serif;
font-size: 0.5em;
color: #222;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 27px 27px;
background-position: 95% center;
border-radius: 10px;
border: 2px solid #222;
transition: all 250ms ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.search__input::placeholder {
color: rgba(87, 87, 86, 0.8);
text-transform: uppercase;
letter-spacing: 1.5px;
}
#search-bar:hover, #search-bar:focus {
padding: 12px 0;
outline: 0;
border: 2px solid transparent;
border-bottom: 2px solid #222;
border-radius: 0;
background-position: 100% center;
}
/* #search-bar:hover, #search-bar:focus {
border: 1.5px solid #009688;
background-color: white;
} */
#cart-wrapper {
display: flex;
flex-basis: 10%;
justify-content: space-between;
padding-bottom: 2px;
}
#cart-icon {
padding-top: 2px;
}
#cart-number {
padding-top: 9px;
font-size: 1em;
font-weight: 100;
}

210
client/public/components/css/notificationbar.css
View File

@@ -1,105 +1,105 @@
.notification-bar {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #00B4F5;
box-shadow: #222 0px 0px 5px;
transition: all 0.3s ease-in;
}
.notification-bar-text {
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
text-align: center;
color: #fff;
padding: 0px 1em;
height: 100%;
line-height: 35px;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.notification-bar-close {
display: inline-block;
padding: 0px 1em;
height: 100%;
line-height: 2em;
color: #fff;
font-size: 1.5em;
font-weight: bold;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.notification-bar-close:hover {
color: #fff;
}
.notification-bar-close:focus {
outline: none;
}
.notification-bar-close:active {
color: #fff;
}
.notification-bar-close:hover {
color: #fff;
}
.notification-bar-close:focus {
outline: none;
}
.notification-toggler {
position: absolute;
right: 2px;
top: 2px;
background: transparent;
border: none;
cursor: pointer;
outline: none;
height: 2em;
width: 2em;
z-index: 100;
transition: all 0.2s ease-in;
}
.cross-line {
background: #222;
box-shadow: #222 0px 0px 2px;
position: absolute;
height: 2px;
left: 0;
width: 100%;
}
#notification-toggler:hover .cross-line {
background: #777;
}
.cross-line-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
.cross-line-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
/* move it further up the screen than the mobile toggler would */
.notification-toggled {
transform: translatey(-200%);
}
/* don's show on mobile or 'small mode' */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.notification-bar {
transform: translatey(-200%);
}
}
.notification-bar {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #00B4F5;
box-shadow: #222 0px 0px 5px;
transition: all 0.3s ease-in;
}
.notification-bar-text {
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
text-align: center;
color: #fff;
padding: 0px 1em;
height: 100%;
line-height: 35px;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.notification-bar-close {
display: inline-block;
padding: 0px 1em;
height: 100%;
line-height: 2em;
color: #fff;
font-size: 1.5em;
font-weight: bold;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.notification-bar-close:hover {
color: #fff;
}
.notification-bar-close:focus {
outline: none;
}
.notification-bar-close:active {
color: #fff;
}
.notification-bar-close:hover {
color: #fff;
}
.notification-bar-close:focus {
outline: none;
}
.notification-toggler {
position: absolute;
right: 2px;
top: 2px;
background: transparent;
border: none;
cursor: pointer;
outline: none;
height: 2em;
width: 2em;
z-index: 100;
transition: all 0.2s ease-in;
}
.cross-line {
background: #222;
box-shadow: #222 0px 0px 2px;
position: absolute;
height: 2px;
left: 0;
width: 100%;
}
#notification-toggler:hover .cross-line {
background: #777;
}
.cross-line-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
.cross-line-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
/* move it further up the screen than the mobile toggler would */
.notification-toggled {
transform: translatey(-200%);
}
/* don's show on mobile or 'small mode' */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.notification-bar {
transform: translatey(-200%);
}
}

56
client/public/components/navbar.mjs
View File

@@ -1,28 +1,28 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class NavBar extends Component {
static __IDENTIFY() { return 'navbar'; }
constructor() {
super(NavBar);
}
Render() {
return {
template: SideLoad('./components/templates/navbar.html'),
style: SideLoad('./components/css/navbar.css'),
};
}
OnceRendered() {
const menuToggler = document.querySelector('navbar-component').shadowRoot.querySelector('#menu-toggler');
const navMenu = document.querySelector('navbar-component').shadowRoot.querySelector('.navbar');
menuToggler.addEventListener('click', function () {
menuToggler.classList.toggle('menu-active');
navMenu.classList.toggle('menu-active');
});
}
}
RegisterComponent(NavBar);
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class NavBar extends Component {
static __IDENTIFY() { return 'navbar'; }
constructor() {
super(NavBar);
}
Render() {
return {
template: SideLoad('./components/templates/navbar.html'),
style: SideLoad('./components/css/navbar.css'),
};
}
OnceRendered() {
const menuToggler = document.querySelector('navbar-component').shadowRoot.querySelector('#menu-toggler');
const navMenu = document.querySelector('navbar-component').shadowRoot.querySelector('.navbar');
menuToggler.addEventListener('click', function () {
menuToggler.classList.toggle('menu-active');
navMenu.classList.toggle('menu-active');
});
}
}
RegisterComponent(NavBar);

56
client/public/components/notificationbar.mjs
View File

@@ -1,28 +1,28 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class NotificationBar extends Component {
static __IDENTIFY() { return 'notificationbar'; }
constructor() {
super(NotificationBar);
}
Render() {
return {
template: SideLoad('./components/templates/notificationbar.html'),
style: SideLoad('./components/css/notificationbar.css'),
};
}
OnceRendered() {
// expect only one notification bar on the dom (otherwise this won't work)
const notificationToggler = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-toggler');
const notificationBar = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-bar');
notificationToggler.addEventListener('click', () => {
notificationBar.classList.add('notification-toggled');
});
}
}
RegisterComponent(NotificationBar);
import { RegisterComponent, Component, SideLoad } from './components.mjs';
class NotificationBar extends Component {
static __IDENTIFY() { return 'notificationbar'; }
constructor() {
super(NotificationBar);
}
Render() {
return {
template: SideLoad('./components/templates/notificationbar.html'),
style: SideLoad('./components/css/notificationbar.css'),
};
}
OnceRendered() {
// expect only one notification bar on the dom (otherwise this won't work)
const notificationToggler = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-toggler');
const notificationBar = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-bar');
notificationToggler.addEventListener('click', () => {
notificationBar.classList.add('notification-toggled');
});
}
}
RegisterComponent(NotificationBar);

96
client/public/components/product-list.mjs
View File

@@ -1,48 +1,48 @@
import { RegisterComponent, Component } from './components.mjs';
class ProductList extends Component {
static __IDENTIFY() { return 'product-list'; }
constructor() {
super(ProductList);
}
async Render() {
const route = this.state.getroute;
const products = await fetch(route).then(response => response.json());
return {
template: `
<h1>{this.state.title}</h1>
<div class="product-list">
${products.data.map(product => {
return `<compact-listing-component name="${product.name}"
desc="${product.description}"
image="${product.image}"
price="${product.price}"></compact-listing-component>`;
})}
</div>
`,
style: `
.product-list {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 800px;
}
`,
state: {
...this.getState,
products,
},
};
}
OnceRendered() {
}
}
RegisterComponent(ProductList);
import { RegisterComponent, Component } from './components.mjs';
class ProductList extends Component {
static __IDENTIFY() { return 'product-list'; }
constructor() {
super(ProductList);
}
async Render() {
const route = this.state.getroute;
const products = await fetch(route).then(response => response.json());
return {
template: `
<h1>{this.state.title}</h1>
<div class="product-list">
${products.data.map(product => {
return `<compact-listing-component name="${product.name}"
desc="${product.description}"
image="${product.image}"
price="${product.price}"></compact-listing-component>`;
})}
</div>
`,
style: `
.product-list {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 800px;
}
`,
state: {
...this.getState,
products,
},
};
}
OnceRendered() {
}
}
RegisterComponent(ProductList);

62
client/public/components/storefront.mjs
View File

@@ -1,31 +1,31 @@
import { RegisterComponent, Component } from './components.mjs';
class StoreFront extends Component {
static __IDENTIFY() { return 'storefront'; }
constructor() {
super(StoreFront);
}
Render() {
return {
template: `
<product-list-component id="featured"
title="Featured Lego Sets"
getroute="/api/sets/featured">
</product-list-component>
`,
style: `
product-list-component {
display: block;
margin: 0 auto;
}`,
};
}
OnceRendered() {
}
}
RegisterComponent(StoreFront);
import { RegisterComponent, Component } from './components.mjs';
class StoreFront extends Component {
static __IDENTIFY() { return 'storefront'; }
constructor() {
super(StoreFront);
}
Render() {
return {
template: `
<product-list-component id="featured"
title="Featured Lego Sets"
getroute="/api/sets/featured">
</product-list-component>
`,
style: `
product-list-component {
display: block;
margin: 0 auto;
}`,
};
}
OnceRendered() {
}
}
RegisterComponent(StoreFront);

92
client/public/components/templates/navbar.html
View File

@@ -1,46 +1,46 @@
<nav class="navbar">
<div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
<button id="menu-toggler" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<ul class="primary-menu menu nav-menu">
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
</ul>
<ul class="secondary-menu menu push-down">
<span class="search-wrapper">
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
</span>
<img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="27px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-wrapper">
<img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="30px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
</ul>
</div>
</nav>
<nav class="navbar">
<div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
<button id="menu-toggler" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<ul class="primary-menu menu nav-menu">
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
</ul>
<ul class="secondary-menu menu push-down">
<span class="search-wrapper">
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
</span>
<img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="27px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-wrapper">
<img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="30px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
</ul>
</div>
</nav>

18
client/public/components/templates/notificationbar.html
View File

@@ -1,9 +1,9 @@
<div class="notification-bar">
<div class="notification-bar-text">
{this.state.notification}
</div>
<button class="notification-toggler">
<span class="cross-line cross-line-top"></span>
<span class="cross-line cross-line-bottom"></span>
</button>
</div>
<div class="notification-bar">
<div class="notification-bar-text">
{this.state.notification}
</div>
<button class="notification-toggler">
<span class="cross-line cross-line-top"></span>
<span class="cross-line cross-line-bottom"></span>
</button>
</div>

104
client/public/global.css
View File

@@ -1,52 +1,52 @@
body {
font-family: 'Josefin Sans', sans-serif;
/* all EM in the document is based off this DONT TOUCH */
/* it's also kinda the default so you can touch it if you want */
/* BODY TEXT SHOULD BE 1EM */
font-size: 16px;
color: #222;
text-decoration: none;
background-color: #D7C2FF;
display: block;
margin-left: auto;
margin-right: auto;
transition: all 250ms ease-in;
}
limited-margin {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
max-width: 1400px;
}
content-margin {
position: relative;
display: inherit;
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1300px;
}
/* responsive sidebar stop scrolling */
/* also making sure this is applied any time it's on a mobile device */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
limited-margin {
width: 90%;
padding-left: 1em;
padding-right: 1em;
}
content-margin {
width: 90%;
padding-left: 2em;
padding-right: 2em;
}
}
#top-picks {
font-size: 1em;
}
body {
font-family: 'Josefin Sans', sans-serif;
/* all EM in the document is based off this DONT TOUCH */
/* it's also kinda the default so you can touch it if you want */
/* BODY TEXT SHOULD BE 1EM */
font-size: 16px;
color: #222;
text-decoration: none;
background-color: #D7C2FF;
display: block;
margin-left: auto;
margin-right: auto;
transition: all 250ms ease-in;
}
limited-margin {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
max-width: 1400px;
}
content-margin {
position: relative;
display: inherit;
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1300px;
}
/* responsive sidebar stop scrolling */
/* also making sure this is applied any time it's on a mobile device */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
limited-margin {
width: 90%;
padding-left: 1em;
padding-right: 1em;
}
content-margin {
width: 90%;
padding-left: 2em;
padding-right: 2em;
}
}
#top-picks {
font-size: 1em;
}

88
client/public/index.html
View File

@@ -1,44 +1,44 @@
<html>
<head>
<title>LegoLog Home!</title>
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- ask rich about loading fonts elsewhere -->
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script type="module" src="components/components.mjs"></script>
<script type="module" src="components/navbar.mjs"></script>
<script type="module" src="components/notificationbar.mjs"></script>
<script type="module" src="components/storefront.mjs"></script>
<script type="module" src="components/product-list.mjs"></script>
<script type="module" src="components/compact-listing.mjs"></script>
<script type="module" src="index.mjs"></script>
</head>
<body>
<notificationbar-component notification="15:03:04 - New Limited Time Offer, Get Any Lego Set for £10 Using Code LEGO10"></notificationbar-component>
<limited-margin>
<navbar-component></navbar-component>
<storefront-component></storefront-component>
<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->
<!-- <canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas> -->
</limited-margin>
</body>
<html>
<head>
<title>LegoLog Home!</title>
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- ask rich about loading fonts elsewhere -->
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<script type="module" src="components/components.mjs"></script>
<script type="module" src="components/navbar.mjs"></script>
<script type="module" src="components/notificationbar.mjs"></script>
<script type="module" src="components/storefront.mjs"></script>
<script type="module" src="components/product-list.mjs"></script>
<script type="module" src="components/compact-listing.mjs"></script>
<script type="module" src="index.mjs"></script>
</head>
<body>
<notificationbar-component notification="15:03:04 - New Limited Time Offer, Get Any Lego Set for £10 Using Code LEGO10"></notificationbar-component>
<limited-margin>
<navbar-component></navbar-component>
<storefront-component></storefront-component>
<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->
<!-- <canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas>
<canvas id="webglviewer" width="300" height="300"></canvas> -->
</limited-margin>
</body>

26
client/public/index.mjs
View File

@@ -1,13 +1,13 @@
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
async function main() {
// await RendererPreInit();
// const canvas = document.querySelectorAll('#webglviewer');
// for (let i = 0; i < canvas.length; i++) {
// const Renderer = new BrickRenderer(canvas[i]);
// }
}
window.onload = main;
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
async function main() {
// await RendererPreInit();
// const canvas = document.querySelectorAll('#webglviewer');
// for (let i = 0; i < canvas.length; i++) {
// const Renderer = new BrickRenderer(canvas[i]);
// }
}
window.onload = main;

38
db/hashtester.js
View File

@@ -1,19 +1,19 @@
const md5 = require('md5');
const fs = require('fs');
let filename = '5241-1.png';
const start = Date.now();
filename = filename.split('.png')[0];
const hash = md5(filename);
console.log(hash);
const bucket = hash.substring(0, 4);
const file = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${filename}.png`;
console.log(fs.existsSync(file));
const delta = Date.now() - start;
console.log(`${delta}ms`);
const md5 = require('md5');
const fs = require('fs');
let filename = '5241-1.png';
const start = Date.now();
filename = filename.split('.png')[0];
const hash = md5(filename);
console.log(hash);
const bucket = hash.substring(0, 4);
const file = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${filename}.png`;
console.log(fs.existsSync(file));
const delta = Date.now() - start;
console.log(`${delta}ms`);

94
db/imagesorter.js
View File

@@ -1,47 +1,47 @@
// sorts images
// Take the file name `2336p68.png`, which is a Lego "Cockpit Space Nose",
// after a simple MD5 hash, the result is:
// ```text
// "d2ef319ea58566b55070e06096165cb8"
// ^^^^
// ```
// Using the first four characters in the hash, we can allocate images
// into buckets for storage and quick retreval. This acts very similar
// to a hash table implemented in the filesystem.
const md5 = require('md5');
const fs = require('fs');
fs.readdir('./image/', (files) => {
files.forEach((file) => {
file = file.split('.png')[0];
const hash = md5(file);
const bucket = hash.substring(0, 4);
const newFile = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${file}.png`;
// if directory doesn't exist, create it
if (!fs.existsSync('./image/')) {
fs.mkdirSync('./image/');
}
if (!fs.existsSync(`./image/${bucket[0]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/`);
}
fs.rename(`./image/${file}.png`, newFile, (err) => {
if (err) {
console.log(err);
}
});
});
});
// sorts images
// Take the file name `2336p68.png`, which is a Lego "Cockpit Space Nose",
// after a simple MD5 hash, the result is:
// ```text
// "d2ef319ea58566b55070e06096165cb8"
// ^^^^
// ```
// Using the first four characters in the hash, we can allocate images
// into buckets for storage and quick retreval. This acts very similar
// to a hash table implemented in the filesystem.
const md5 = require('md5');
const fs = require('fs');
fs.readdir('./image/', (files) => {
files.forEach((file) => {
file = file.split('.png')[0];
const hash = md5(file);
const bucket = hash.substring(0, 4);
const newFile = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${file}.png`;
// if directory doesn't exist, create it
if (!fs.existsSync('./image/')) {
fs.mkdirSync('./image/');
}
if (!fs.existsSync(`./image/${bucket[0]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`);
}
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/`);
}
fs.rename(`./image/${file}.png`, newFile, (err) => {
if (err) {
console.log(err);
}
});
});
});

128
db/imagestealer.js
View File

@@ -1,64 +1,64 @@
// https://www.bricklink.com/v2/catalog/catalogitem.page?P=bb0031#T=C
// download image from bricklink for every item in the tab-delimited database Parts.txt
const fs = require('fs');
const axios = require('axios');
// For sets make sets.txt
const parts = fs.readFileSync('res/Parts.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
async function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function downloadImage(url, filename) {
try {
const res = await axios.get(url, {
method: 'GET',
headers: { 'User-Agent':'Chrome/96.0.4664.175' },
responseType: 'stream',
});
if (!res.data) {
console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`);
return;
}
return new Promise((resolve, reject) => {
res.data.pipe(fs.createWriteStream(filename));
res.data.on('end', () => {
console.log('downloaded file ' + filename);
fs.appendFileSync('saved.txt', `${url}\n`);
resolve();
});
res.data.on('error', () => {
console.log('error downloading file ' + filename);
fs.appendFileSync('error.txt', `${url}\n`);
resolve();
});
});
} catch (e) {
console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`);
}
}
async function main() {
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
// for sets use https://img.bricklink.com/ItemImage/SL/${part[2]}.png
// for for pieces use https://img.bricklink.com/ItemImage/PL/${part[2]}.png
// https://img.bricklink.com/ItemImage/PL/3962a.png
const url = `https://img.bricklink.com/ItemImage/PL/${part[2]}.png`;
const filename = `res/image/${part[2]}.png`;
await downloadImage(url, filename);
// await timeout(10); // let's not get rate limited
console.log(`${i}/${parts.length} ${url}`);
}
}
main();
// https://www.bricklink.com/v2/catalog/catalogitem.page?P=bb0031#T=C
// download image from bricklink for every item in the tab-delimited database Parts.txt
const fs = require('fs');
const axios = require('axios');
// For sets make sets.txt
const parts = fs.readFileSync('res/Parts.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
async function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function downloadImage(url, filename) {
try {
const res = await axios.get(url, {
method: 'GET',
headers: { 'User-Agent':'Chrome/96.0.4664.175' },
responseType: 'stream',
});
if (!res.data) {
console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`);
return;
}
return new Promise((resolve, reject) => {
res.data.pipe(fs.createWriteStream(filename));
res.data.on('end', () => {
console.log('downloaded file ' + filename);
fs.appendFileSync('saved.txt', `${url}\n`);
resolve();
});
res.data.on('error', () => {
console.log('error downloading file ' + filename);
fs.appendFileSync('error.txt', `${url}\n`);
resolve();
});
});
} catch (e) {
console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`);
}
}
async function main() {
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
// for sets use https://img.bricklink.com/ItemImage/SL/${part[2]}.png
// for for pieces use https://img.bricklink.com/ItemImage/PL/${part[2]}.png
// https://img.bricklink.com/ItemImage/PL/3962a.png
const url = `https://img.bricklink.com/ItemImage/PL/${part[2]}.png`;
const filename = `res/image/${part[2]}.png`;
await downloadImage(url, filename);
// await timeout(10); // let's not get rate limited
console.log(`${i}/${parts.length} ${url}`);
}
}
main();

2
db/res/Parts-pretty.txt.REMOVED.git-id
View File

@@ -1 +1 @@
3b27f19e055dd9833ebe941c015e664c6d11bf24
f7b44bb9273dc89697f668fff44ca0bbc6f1db01

2
db/res/Sets-pretty.txt.REMOVED.git-id
View File

@@ -1 +1 @@
9c56afc83cd2484cbe2958a5fd8d0cfa5d52bc80
0ff11948bb9f33e7073cdd44d548d1134b3461bf

35244
db/res/Sets.txt
View File

File diff suppressed because it is too large Load Diff

4062
db/res/categories-pretty.txt
View File

File diff suppressed because it is too large Load Diff

2032
db/res/categories.txt
View File

File diff suppressed because it is too large Load Diff

242026
db/res/codes-pretty.txt
View File

File diff suppressed because it is too large Load Diff

121012
db/res/codes.txt
View File

File diff suppressed because it is too large Load Diff

754
db/res/colors-pretty.txt
View File

@@ -1,377 +1,377 @@
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| Color ID | Color Name | RGB | Type | Parts | In Sets | Wanted | For Sale | Year From | Year To |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 0 | (Not Applicable) | | N/A | 4587 | 12360 | 62547 | 10990 | 1954 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 41 | Aqua | BCE5DC | Solid | 82 | 60 | 1233 | 116 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 11 | Black | 212121 | Solid | 10925 | 11692 | 15454 | 11229 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 7 | Blue | 0057A6 | Solid | 3811 | 7844 | 6792 | 4199 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 97 | Blue-Violet | 506CEF | Solid | 38 | 18 | 709 | 64 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 36 | Bright Green | 10CB31 | Solid | 588 | 1738 | 2222 | 671 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 105 | Bright Light Blue | BCD1ED | Solid | 373 | 477 | 1412 | 422 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 110 | Bright Light Orange | FFC700 | Solid | 1011 | 1429 | 2547 | 1094 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 103 | Bright Light Yellow | FEED83 | Solid | 391 | 696 | 1870 | 437 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 104 | Bright Pink | F7BCDA | Solid | 555 | 1074 | 1458 | 613 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 8 | Brown | 532115 | Solid | 570 | 1082 | 3110 | 921 | 1974 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 227 | Clikits Lavender | E0AAD9 | Solid | 10 | 12 | 182 | 12 | 2005 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 220 | Coral | FF8172 | Solid | 138 | 196 | 690 | 140 | 2019 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 153 | Dark Azure | 009FE0 | Solid | 614 | 771 | 1749 | 651 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 63 | Dark Blue | 243757 | Solid | 2022 | 1903 | 4012 | 2107 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 109 | Dark Blue-Violet | 2032B0 | Solid | 9 | 7 | 783 | 16 | 2004 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 85 | Dark Bluish Gray | 595D60 | Solid | 3642 | 5932 | 7063 | 4036 | 1991 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 120 | Dark Brown | 330000 | Solid | 681 | 1480 | 2640 | 735 | 2008 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 10 | Dark Gray | 6B5A5A | Solid | 1029 | 1688 | 3791 | 1432 | 1961 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 80 | Dark Green | 2E5543 | Solid | 829 | 920 | 2816 | 910 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 225 | Dark Nougat | E78B3E | Solid | 3 | 10 | 570 | 18 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 68 | Dark Orange | B35408 | Solid | 667 | 1498 | 2169 | 741 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 47 | Dark Pink | EF5BB3 | Solid | 701 | 1109 | 1516 | 768 | 1994 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 89 | Dark Purple | 5F2683 | Solid | 911 | 1075 | 2067 | 992 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 59 | Dark Red | 6A0E15 | Solid | 1522 | 1644 | 3671 | 1614 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 231 | Dark Salmon | FF6326 | Solid | 5 | 4 | 58 | 4 | 2003 | 2003 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 69 | Dark Tan | B89869 | Solid | 979 | 2081 | 2855 | 1035 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 39 | Dark Turquoise | 00A29F | Solid | 521 | 570 | 1498 | 593 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 161 | Dark Yellow | DD982E | Solid | 4 | 4 | 523 | 19 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 29 | Earth Orange | E6881D | Solid | 37 | 87 | 752 | 55 | 1982 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 106 | Fabuland Brown | B3694E | Solid | 7 | 26 | 1040 | 21 | 1979 | 1997 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 160 | Fabuland Orange | EF9121 | Solid | 2 | 3 | 412 | 3 | 1983 | 1987 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 6 | Green | 00923D | Solid | 1931 | 4950 | 4408 | 2217 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 154 | Lavender | D3BDE3 | Solid | 290 | 397 | 867 | 344 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 152 | Light Aqua | D8EFDD | Solid | 410 | 450 | 988 | 430 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 62 | Light Blue | C8D9E1 | Solid | 39 | 30 | 765 | 107 | 1950 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 86 | Light Bluish Gray | AFB5C7 | Solid | 4136 | 6435 | 7609 | 4719 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 9 | Light Gray | 9C9C9C | Solid | 1853 | 3192 | 5152 | 2393 | 1954 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 38 | Light Green | A5DBB5 | Solid | 67 | 61 | 554 | 111 | 1992 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 35 | Light Lime | ECEEBD | Solid | 20 | 16 | 349 | 46 | 1992 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 90 | Light Nougat | FECCB0 | Solid | 1573 | 1521 | 2971 | 1559 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 32 | Light Orange | F7AD63 | Solid | 15 | 16 | 391 | 55 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 56 | Light Pink | FFE1FF | Solid | 3 | 4 | 429 | 52 | 1999 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 93 | Light Purple | DA70D6 | Solid | 26 | 15 | 493 | 60 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 26 | Light Salmon | FCC7B7 | Solid | 50 | 21 | 426 | 57 | 1997 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 40 | Light Turquoise | 00C5BC | Solid | 49 | 39 | 618 | 76 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 44 | Light Violet | C9CAE2 | Solid | 70 | 39 | 333 | 86 | 1994 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 33 | Light Yellow | FFE383 | Solid | 96 | 73 | 1100 | 155 | 1994 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 34 | Lime | C4E000 | Solid | 1594 | 2306 | 2734 | 1736 | 1982 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 72 | Maersk Blue | 7DC1D8 | Solid | 84 | 14 | 588 | 100 | 1974 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 71 | Magenta | B72276 | Solid | 532 | 844 | 1383 | 580 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 156 | Medium Azure | 6ACEE0 | Solid | 764 | 1202 | 1715 | 828 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 42 | Medium Blue | 82ADD8 | Solid | 779 | 1068 | 1990 | 886 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 91 | Medium Brown | 774125 | Solid | 40 | 28 | 1328 | 75 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 94 | Medium Dark Pink | F785B1 | Solid | 14 | 7 | 288 | 53 | 1992 | 1996 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 37 | Medium Green | 62F58E | Solid | 121 | 102 | 639 | 135 | 1950 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 157 | Medium Lavender | C689D9 | Solid | 431 | 583 | 975 | 450 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 76 | Medium Lime | DFE000 | Solid | 64 | 36 | 438 | 77 | 1998 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 150 | Medium Nougat | E3A05B | Solid | 812 | 1284 | 1936 | 848 | 2010 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 31 | Medium Orange | FFA531 | Solid | 139 | 116 | 929 | 180 | 1950 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 73 | Medium Violet | 9391E4 | Solid | 16 | 21 | 307 | 19 | 1999 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 166 | Neon Green | DBF355 | Solid | | | 322 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 165 | Neon Orange | FA5947 | Solid | | | 292 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 236 | Neon Yellow | FFFC00 | Solid | 36 | 11 | 60 | 27 | 2022 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 28 | Nougat | FFAF7D | Solid | 202 | 245 | 1199 | 232 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 155 | Olive Green | ABA953 | Solid | 500 | 417 | 1913 | 542 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 4 | Orange | FF7E14 | Solid | 1881 | 3119 | 3863 | 2061 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 23 | Pink | FFC0CB | Solid | 120 | 79 | 883 | 216 | 1991 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 24 | Purple | A5499C | Solid | 140 | 129 | 1287 | 249 | 1996 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 5 | Red | B30006 | Solid | 7256 | 9914 | 11158 | 7714 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 88 | Reddish Brown | 89351D | Solid | 1900 | 3882 | 3999 | 2131 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 27 | Rust | B22222 | Solid | 9 | 13 | 1326 | 27 | 1989 | 2001 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 25 | Salmon | FF7D5D | Solid | 85 | 27 | 395 | 89 | 1997 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 55 | Sand Blue | 8899AB | Solid | 617 | 545 | 1862 | 671 | 2001 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 48 | Sand Green | A2BFA3 | Solid | 584 | 594 | 1762 | 625 | 1964 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 54 | Sand Purple | B57DA5 | Solid | 20 | 5 | 383 | 24 | 2001 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 58 | Sand Red | 8C6B6B | Solid | 39 | 18 | 428 | 48 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 87 | Sky Blue | 8AD4E1 | Solid | 29 | 25 | 646 | 43 | 2003 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 2 | Tan | EED9A4 | Solid | 2200 | 4291 | 4916 | 2448 | 1958 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 99 | Very Light Bluish Gray | E4E8E8 | Solid | 51 | 48 | 1844 | 97 | 2004 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 49 | Very Light Gray | E8E8E8 | Solid | 21 | 23 | 1196 | 67 | 1997 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 96 | Very Light Orange | E6C05D | Solid | 1 | 2 | 383 | 14 | 2000 | 2000 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 43 | Violet | 3448A4 | Solid | 79 | 44 | 517 | 96 | 1992 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 1 | White | FFFFFF | Solid | 13369 | 9998 | 19160 | 13546 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 3 | Yellow | FFE001 | Solid | 6385 | 9723 | 9968 | 7259 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 158 | Yellowish Green | E7F2A7 | Solid | 165 | 234 | 649 | 186 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 113 | Trans-Aqua | B7C8BF | Transparent | 38 | 38 | 375 | 51 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 13 | Trans-Black | 939484 | Transparent | 438 | 1693 | 1354 | 506 | 1999 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 108 | Trans-Bright Green | 10Cb31 | Transparent | 153 | 448 | 770 | 190 | 2006 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 12 | Trans-Clear | EEEEEE | Transparent | 945 | 4755 | 2856 | 1184 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 14 | Trans-Dark Blue | 00296B | Transparent | 255 | 1625 | 1231 | 318 | 1978 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 50 | Trans-Dark Pink | CE1d9b | Transparent | 222 | 643 | 777 | 267 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 20 | Trans-Green | 217625 | Transparent | 134 | 1423 | 810 | 182 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 15 | Trans-Light Blue | 68BCC5 | Transparent | 750 | 2679 | 1818 | 886 | 1985 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 226 | Trans-Light Bright Green | 34EF55 | Transparent | 26 | 18 | 117 | 41 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 221 | Trans-Light Green | 94E5AB | Transparent | 11 | 5 | 135 | 15 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 164 | Trans-Light Orange | E99A3A | Transparent | 42 | 22 | 327 | 82 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 114 | Trans-Light Purple | B97AB1 | Transparent | 20 | 18 | 197 | 30 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 74 | Trans-Medium Blue | 7384A5 | Transparent | 105 | 207 | 855 | 151 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 234 | Trans-Medium Purple | 9C41B6 | Transparent | 38 | 36 | 49 | 43 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 16 | Trans-Neon Green | C0F500 | Transparent | 232 | 1116 | 939 | 288 | 1990 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 18 | Trans-Neon Orange | FF4231 | Transparent | 224 | 1032 | 953 | 323 | 1993 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 121 | Trans-Neon Yellow | FFD700 | Transparent | 27 | 34 | 378 | 71 | 2001 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 98 | Trans-Orange | D04010 | Transparent | 194 | 1821 | 844 | 265 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 107 | Trans-Pink | FF8298 | Transparent | 68 | 44 | 243 | 89 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 51 | Trans-Purple | 5525B7 | Transparent | 127 | 340 | 720 | 161 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 17 | Trans-Red | 9C0010 | Transparent | 205 | 3550 | 1134 | 278 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 19 | Trans-Yellow | EBF72D | Transparent | 205 | 2368 | 1006 | 267 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 57 | Chrome Antique Brass | 645a4c | Chrome | 3 | 16 | 329 | 3 | 2001 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 122 | Chrome Black | 544E4F | Chrome | 11 | 1 | 1080 | 14 | 2009 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 52 | Chrome Blue | 5C66A4 | Chrome | 5 | 14 | 381 | 12 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 21 | Chrome Gold | f1f2e1 | Chrome | 52 | 278 | 1488 | 58 | 1989 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 64 | Chrome Green | 3CB371 | Chrome | 1 | 2 | 347 | 6 | 1999 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 82 | Chrome Pink | aa4d8e | Chrome | 1 | 10 | 195 | 7 | 2001 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 22 | Chrome Silver | DCDCDC | Chrome | 105 | 561 | 2081 | 184 | 1966 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 84 | Copper | C66921 | Pearl | 58 | 74 | 968 | 87 | 2001 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 81 | Flat Dark Gold | AD7118 | Pearl | 42 | 42 | 824 | 127 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 95 | Flat Silver | 8D949C | Pearl | 906 | 2649 | 2675 | 1055 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 78 | Metal Blue | 5686AE | Pearl | 40 | 22 | 347 | 48 | 2002 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 77 | Pearl Dark Gray | 666660 | Pearl | 645 | 1013 | 2588 | 722 | 2002 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 115 | Pearl Gold | E79E1D | Pearl | 967 | 2033 | 2533 | 1057 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 61 | Pearl Light Gold | E7AE5A | Pearl | 16 | 9 | 384 | 59 | 2000 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 66 | Pearl Light Gray | ACB7C0 | Pearl | 425 | 625 | 1580 | 601 | 1993 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 119 | Pearl Very Light Gray | D4D2CD | Pearl | 14 | 10 | 508 | 43 | 2002 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 83 | Pearl White | FFFFFF | Pearl | 3 | 5 | 444 | 14 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 235 | Reddish Gold | E7891B | Pearl | 2 | 4 | 12 | 2 | 2003 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 229 | Satin Trans-Black | 939484 | Satin | 4 | 9 | 22 | 4 | 2020 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 233 | Satin Trans-Bright Green | 7fe15b | Satin | 3 | 2 | 9 | 1 | 2021 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 232 | Satin Trans-Dark Blue | 1552e2 | Satin | 6 | 4 | 19 | 5 | 2021 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 224 | Satin Trans-Dark Pink | CE1d9b | Satin | 7 | 16 | 33 | 5 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 223 | Satin Trans-Light Blue | 68BCC5 | Satin | 24 | 46 | 76 | 31 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 230 | Satin Trans-Purple | 8320B7 | Satin | 1 | 5 | 20 | 2 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 228 | Satin White | FFFFFF | Satin | 10 | 23 | 124 | 10 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 65 | Metallic Gold | B8860B | Metallic | 105 | 249 | 1278 | 184 | 1997 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 70 | Metallic Green | bdb573 | Metallic | 26 | 7 | 335 | 36 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 67 | Metallic Silver | C0C0C0 | Metallic | 178 | 647 | 2103 | 262 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 46 | Glow In Dark Opaque | d4d5c9 | Milky | 40 | 87 | 592 | 105 | 1990 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 118 | Glow In Dark Trans | bdc6ad | Milky | 16 | 22 | 322 | 20 | 2005 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 159 | Glow In Dark White | d9d9d9 | Milky | 56 | 67 | 853 | 72 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 60 | Milky White | d4d3dd | Milky | 26 | 144 | 512 | 66 | 1963 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 101 | Glitter Trans-Clear | b2adaa | Glitter | 16 | 27 | 150 | 19 | 1999 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 100 | Glitter Trans-Dark Pink | CE1d9b | Glitter | 12 | 37 | 125 | 15 | 1999 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 162 | Glitter Trans-Light Blue | 68BCC5 | Glitter | 16 | 25 | 106 | 20 | 2015 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 163 | Glitter Trans-Neon Green | C0F500 | Glitter | 1 | 8 | 89 | 1 | 2015 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 222 | Glitter Trans-Orange | D04010 | Glitter | 1 | 1 | 45 | 1 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 102 | Glitter Trans-Purple | 3A2B82 | Glitter | 10 | 48 | 119 | 15 | 2000 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 116 | Speckle Black-Copper | 5F4E47 | Speckle | 5 | 3 | 124 | 6 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 151 | Speckle Black-Gold | AB9421 | Speckle | 2 | 4 | 172 | 5 | 2010 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 111 | Speckle Black-Silver | 7C7E7C | Speckle | 15 | 49 | 175 | 19 | 2005 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 117 | Speckle DBGray-Silver | 4A6363 | Speckle | 5 | 7 | 184 | 8 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 142 | Mx Aqua Green | 27867E | Modulex | | | 20 | 12 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 128 | Mx Black | 000000 | Modulex | | | 154 | 158 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 132 | Mx Brown | 907450 | Modulex | | | 30 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 133 | Mx Buff | DEC69C | Modulex | | | 36 | 33 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 126 | Mx Charcoal Gray | 595D60 | Modulex | | | 13 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 149 | Mx Clear | FFFFFF | Modulex | | | 53 | 38 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 214 | Mx Foil Dark Blue | 0057A6 | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 210 | Mx Foil Dark Gray | 595D60 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 212 | Mx Foil Dark Green | 006400 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 215 | Mx Foil Light Blue | 68AECE | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 211 | Mx Foil Light Gray | 9C9C9C | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 213 | Mx Foil Light Green | 7DB538 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 219 | Mx Foil Orange | F7AD63 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 217 | Mx Foil Red | 8B0000 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 216 | Mx Foil Violet | 4B0082 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 218 | Mx Foil Yellow | FED557 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 139 | Mx Lemon | BDC618 | Modulex | | | 12 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 124 | Mx Light Bluish Gray | AfB5C7 | Modulex | | | 13 | 4 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 125 | Mx Light Gray | 9C9C9C | Modulex | | | 56 | 51 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 136 | Mx Light Orange | F7AD63 | Modulex | | | 12 | 7 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 137 | Mx Light Yellow | FFE371 | Modulex | | | 14 | 15 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 144 | Mx Medium Blue | 61AFFF | Modulex | | | 15 | 10 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 138 | Mx Ochre Yellow | FED557 | Modulex | | | 18 | 18 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 140 | Mx Olive Green | 7C9051 | Modulex | | | 20 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 135 | Mx Orange | F47B30 | Modulex | | | 17 | 25 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 145 | Mx Pastel Blue | 68AECE | Modulex | | | 21 | 23 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 141 | Mx Pastel Green | 7DB538 | Modulex | | | 27 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 148 | Mx Pink | F785B1 | Modulex | | | 12 | 20 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 130 | Mx Pink Red | F45C40 | Modulex | | | 12 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 129 | Mx Red | B52C20 | Modulex | | | 24 | 29 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 146 | Mx Teal Blue | 467083 | Modulex | | | 16 | 14 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 134 | Mx Terracotta | 5C5030 | Modulex | | | 24 | 32 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 143 | Mx Tile Blue | 0057A6 | Modulex | | | 37 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 131 | Mx Tile Brown | 330000 | Modulex | | | 111 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 127 | Mx Tile Gray | 6B5A5A | Modulex | | | 41 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 147 | Mx Violet | BD7D85 | Modulex | | | 18 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 123 | Mx White | FFFFFF | Modulex | | | 419 | 411 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| Color ID | Color Name | RGB | Type | Parts | In Sets | Wanted | For Sale | Year From | Year To |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 0 | (Not Applicable) | | N/A | 4587 | 12360 | 62547 | 10990 | 1954 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 41 | Aqua | BCE5DC | Solid | 82 | 60 | 1233 | 116 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 11 | Black | 212121 | Solid | 10925 | 11692 | 15454 | 11229 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 7 | Blue | 0057A6 | Solid | 3811 | 7844 | 6792 | 4199 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 97 | Blue-Violet | 506CEF | Solid | 38 | 18 | 709 | 64 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 36 | Bright Green | 10CB31 | Solid | 588 | 1738 | 2222 | 671 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 105 | Bright Light Blue | BCD1ED | Solid | 373 | 477 | 1412 | 422 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 110 | Bright Light Orange | FFC700 | Solid | 1011 | 1429 | 2547 | 1094 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 103 | Bright Light Yellow | FEED83 | Solid | 391 | 696 | 1870 | 437 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 104 | Bright Pink | F7BCDA | Solid | 555 | 1074 | 1458 | 613 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 8 | Brown | 532115 | Solid | 570 | 1082 | 3110 | 921 | 1974 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 227 | Clikits Lavender | E0AAD9 | Solid | 10 | 12 | 182 | 12 | 2005 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 220 | Coral | FF8172 | Solid | 138 | 196 | 690 | 140 | 2019 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 153 | Dark Azure | 009FE0 | Solid | 614 | 771 | 1749 | 651 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 63 | Dark Blue | 243757 | Solid | 2022 | 1903 | 4012 | 2107 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 109 | Dark Blue-Violet | 2032B0 | Solid | 9 | 7 | 783 | 16 | 2004 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 85 | Dark Bluish Gray | 595D60 | Solid | 3642 | 5932 | 7063 | 4036 | 1991 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 120 | Dark Brown | 330000 | Solid | 681 | 1480 | 2640 | 735 | 2008 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 10 | Dark Gray | 6B5A5A | Solid | 1029 | 1688 | 3791 | 1432 | 1961 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 80 | Dark Green | 2E5543 | Solid | 829 | 920 | 2816 | 910 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 225 | Dark Nougat | E78B3E | Solid | 3 | 10 | 570 | 18 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 68 | Dark Orange | B35408 | Solid | 667 | 1498 | 2169 | 741 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 47 | Dark Pink | EF5BB3 | Solid | 701 | 1109 | 1516 | 768 | 1994 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 89 | Dark Purple | 5F2683 | Solid | 911 | 1075 | 2067 | 992 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 59 | Dark Red | 6A0E15 | Solid | 1522 | 1644 | 3671 | 1614 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 231 | Dark Salmon | FF6326 | Solid | 5 | 4 | 58 | 4 | 2003 | 2003 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 69 | Dark Tan | B89869 | Solid | 979 | 2081 | 2855 | 1035 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 39 | Dark Turquoise | 00A29F | Solid | 521 | 570 | 1498 | 593 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 161 | Dark Yellow | DD982E | Solid | 4 | 4 | 523 | 19 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 29 | Earth Orange | E6881D | Solid | 37 | 87 | 752 | 55 | 1982 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 106 | Fabuland Brown | B3694E | Solid | 7 | 26 | 1040 | 21 | 1979 | 1997 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 160 | Fabuland Orange | EF9121 | Solid | 2 | 3 | 412 | 3 | 1983 | 1987 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 6 | Green | 00923D | Solid | 1931 | 4950 | 4408 | 2217 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 154 | Lavender | D3BDE3 | Solid | 290 | 397 | 867 | 344 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 152 | Light Aqua | D8EFDD | Solid | 410 | 450 | 988 | 430 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 62 | Light Blue | C8D9E1 | Solid | 39 | 30 | 765 | 107 | 1950 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 86 | Light Bluish Gray | AFB5C7 | Solid | 4136 | 6435 | 7609 | 4719 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 9 | Light Gray | 9C9C9C | Solid | 1853 | 3192 | 5152 | 2393 | 1954 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 38 | Light Green | A5DBB5 | Solid | 67 | 61 | 554 | 111 | 1992 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 35 | Light Lime | ECEEBD | Solid | 20 | 16 | 349 | 46 | 1992 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 90 | Light Nougat | FECCB0 | Solid | 1573 | 1521 | 2971 | 1559 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 32 | Light Orange | F7AD63 | Solid | 15 | 16 | 391 | 55 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 56 | Light Pink | FFE1FF | Solid | 3 | 4 | 429 | 52 | 1999 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 93 | Light Purple | DA70D6 | Solid | 26 | 15 | 493 | 60 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 26 | Light Salmon | FCC7B7 | Solid | 50 | 21 | 426 | 57 | 1997 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 40 | Light Turquoise | 00C5BC | Solid | 49 | 39 | 618 | 76 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 44 | Light Violet | C9CAE2 | Solid | 70 | 39 | 333 | 86 | 1994 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 33 | Light Yellow | FFE383 | Solid | 96 | 73 | 1100 | 155 | 1994 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 34 | Lime | C4E000 | Solid | 1594 | 2306 | 2734 | 1736 | 1982 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 72 | Maersk Blue | 7DC1D8 | Solid | 84 | 14 | 588 | 100 | 1974 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 71 | Magenta | B72276 | Solid | 532 | 844 | 1383 | 580 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 156 | Medium Azure | 6ACEE0 | Solid | 764 | 1202 | 1715 | 828 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 42 | Medium Blue | 82ADD8 | Solid | 779 | 1068 | 1990 | 886 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 91 | Medium Brown | 774125 | Solid | 40 | 28 | 1328 | 75 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 94 | Medium Dark Pink | F785B1 | Solid | 14 | 7 | 288 | 53 | 1992 | 1996 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 37 | Medium Green | 62F58E | Solid | 121 | 102 | 639 | 135 | 1950 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 157 | Medium Lavender | C689D9 | Solid | 431 | 583 | 975 | 450 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 76 | Medium Lime | DFE000 | Solid | 64 | 36 | 438 | 77 | 1998 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 150 | Medium Nougat | E3A05B | Solid | 812 | 1284 | 1936 | 848 | 2010 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 31 | Medium Orange | FFA531 | Solid | 139 | 116 | 929 | 180 | 1950 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 73 | Medium Violet | 9391E4 | Solid | 16 | 21 | 307 | 19 | 1999 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 166 | Neon Green | DBF355 | Solid | | | 322 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 165 | Neon Orange | FA5947 | Solid | | | 292 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 236 | Neon Yellow | FFFC00 | Solid | 36 | 11 | 60 | 27 | 2022 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 28 | Nougat | FFAF7D | Solid | 202 | 245 | 1199 | 232 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 155 | Olive Green | ABA953 | Solid | 500 | 417 | 1913 | 542 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 4 | Orange | FF7E14 | Solid | 1881 | 3119 | 3863 | 2061 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 23 | Pink | FFC0CB | Solid | 120 | 79 | 883 | 216 | 1991 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 24 | Purple | A5499C | Solid | 140 | 129 | 1287 | 249 | 1996 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 5 | Red | B30006 | Solid | 7256 | 9914 | 11158 | 7714 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 88 | Reddish Brown | 89351D | Solid | 1900 | 3882 | 3999 | 2131 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 27 | Rust | B22222 | Solid | 9 | 13 | 1326 | 27 | 1989 | 2001 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 25 | Salmon | FF7D5D | Solid | 85 | 27 | 395 | 89 | 1997 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 55 | Sand Blue | 8899AB | Solid | 617 | 545 | 1862 | 671 | 2001 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 48 | Sand Green | A2BFA3 | Solid | 584 | 594 | 1762 | 625 | 1964 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 54 | Sand Purple | B57DA5 | Solid | 20 | 5 | 383 | 24 | 2001 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 58 | Sand Red | 8C6B6B | Solid | 39 | 18 | 428 | 48 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 87 | Sky Blue | 8AD4E1 | Solid | 29 | 25 | 646 | 43 | 2003 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 2 | Tan | EED9A4 | Solid | 2200 | 4291 | 4916 | 2448 | 1958 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 99 | Very Light Bluish Gray | E4E8E8 | Solid | 51 | 48 | 1844 | 97 | 2004 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 49 | Very Light Gray | E8E8E8 | Solid | 21 | 23 | 1196 | 67 | 1997 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 96 | Very Light Orange | E6C05D | Solid | 1 | 2 | 383 | 14 | 2000 | 2000 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 43 | Violet | 3448A4 | Solid | 79 | 44 | 517 | 96 | 1992 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 1 | White | FFFFFF | Solid | 13369 | 9998 | 19160 | 13546 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 3 | Yellow | FFE001 | Solid | 6385 | 9723 | 9968 | 7259 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 158 | Yellowish Green | E7F2A7 | Solid | 165 | 234 | 649 | 186 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 113 | Trans-Aqua | B7C8BF | Transparent | 38 | 38 | 375 | 51 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 13 | Trans-Black | 939484 | Transparent | 438 | 1693 | 1354 | 506 | 1999 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 108 | Trans-Bright Green | 10Cb31 | Transparent | 153 | 448 | 770 | 190 | 2006 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 12 | Trans-Clear | EEEEEE | Transparent | 945 | 4755 | 2856 | 1184 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 14 | Trans-Dark Blue | 00296B | Transparent | 255 | 1625 | 1231 | 318 | 1978 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 50 | Trans-Dark Pink | CE1d9b | Transparent | 222 | 643 | 777 | 267 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 20 | Trans-Green | 217625 | Transparent | 134 | 1423 | 810 | 182 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 15 | Trans-Light Blue | 68BCC5 | Transparent | 750 | 2679 | 1818 | 886 | 1985 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 226 | Trans-Light Bright Green | 34EF55 | Transparent | 26 | 18 | 117 | 41 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 221 | Trans-Light Green | 94E5AB | Transparent | 11 | 5 | 135 | 15 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 164 | Trans-Light Orange | E99A3A | Transparent | 42 | 22 | 327 | 82 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 114 | Trans-Light Purple | B97AB1 | Transparent | 20 | 18 | 197 | 30 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 74 | Trans-Medium Blue | 7384A5 | Transparent | 105 | 207 | 855 | 151 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 234 | Trans-Medium Purple | 9C41B6 | Transparent | 38 | 36 | 49 | 43 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 16 | Trans-Neon Green | C0F500 | Transparent | 232 | 1116 | 939 | 288 | 1990 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 18 | Trans-Neon Orange | FF4231 | Transparent | 224 | 1032 | 953 | 323 | 1993 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 121 | Trans-Neon Yellow | FFD700 | Transparent | 27 | 34 | 378 | 71 | 2001 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 98 | Trans-Orange | D04010 | Transparent | 194 | 1821 | 844 | 265 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 107 | Trans-Pink | FF8298 | Transparent | 68 | 44 | 243 | 89 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 51 | Trans-Purple | 5525B7 | Transparent | 127 | 340 | 720 | 161 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 17 | Trans-Red | 9C0010 | Transparent | 205 | 3550 | 1134 | 278 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 19 | Trans-Yellow | EBF72D | Transparent | 205 | 2368 | 1006 | 267 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 57 | Chrome Antique Brass | 645a4c | Chrome | 3 | 16 | 329 | 3 | 2001 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 122 | Chrome Black | 544E4F | Chrome | 11 | 1 | 1080 | 14 | 2009 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 52 | Chrome Blue | 5C66A4 | Chrome | 5 | 14 | 381 | 12 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 21 | Chrome Gold | f1f2e1 | Chrome | 52 | 278 | 1488 | 58 | 1989 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 64 | Chrome Green | 3CB371 | Chrome | 1 | 2 | 347 | 6 | 1999 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 82 | Chrome Pink | aa4d8e | Chrome | 1 | 10 | 195 | 7 | 2001 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 22 | Chrome Silver | DCDCDC | Chrome | 105 | 561 | 2081 | 184 | 1966 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 84 | Copper | C66921 | Pearl | 58 | 74 | 968 | 87 | 2001 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 81 | Flat Dark Gold | AD7118 | Pearl | 42 | 42 | 824 | 127 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 95 | Flat Silver | 8D949C | Pearl | 906 | 2649 | 2675 | 1055 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 78 | Metal Blue | 5686AE | Pearl | 40 | 22 | 347 | 48 | 2002 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 77 | Pearl Dark Gray | 666660 | Pearl | 645 | 1013 | 2588 | 722 | 2002 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 115 | Pearl Gold | E79E1D | Pearl | 967 | 2033 | 2533 | 1057 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 61 | Pearl Light Gold | E7AE5A | Pearl | 16 | 9 | 384 | 59 | 2000 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 66 | Pearl Light Gray | ACB7C0 | Pearl | 425 | 625 | 1580 | 601 | 1993 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 119 | Pearl Very Light Gray | D4D2CD | Pearl | 14 | 10 | 508 | 43 | 2002 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 83 | Pearl White | FFFFFF | Pearl | 3 | 5 | 444 | 14 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 235 | Reddish Gold | E7891B | Pearl | 2 | 4 | 12 | 2 | 2003 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 229 | Satin Trans-Black | 939484 | Satin | 4 | 9 | 22 | 4 | 2020 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 233 | Satin Trans-Bright Green | 7fe15b | Satin | 3 | 2 | 9 | 1 | 2021 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 232 | Satin Trans-Dark Blue | 1552e2 | Satin | 6 | 4 | 19 | 5 | 2021 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 224 | Satin Trans-Dark Pink | CE1d9b | Satin | 7 | 16 | 33 | 5 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 223 | Satin Trans-Light Blue | 68BCC5 | Satin | 24 | 46 | 76 | 31 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 230 | Satin Trans-Purple | 8320B7 | Satin | 1 | 5 | 20 | 2 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 228 | Satin White | FFFFFF | Satin | 10 | 23 | 124 | 10 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 65 | Metallic Gold | B8860B | Metallic | 105 | 249 | 1278 | 184 | 1997 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 70 | Metallic Green | bdb573 | Metallic | 26 | 7 | 335 | 36 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 67 | Metallic Silver | C0C0C0 | Metallic | 178 | 647 | 2103 | 262 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 46 | Glow In Dark Opaque | d4d5c9 | Milky | 40 | 87 | 592 | 105 | 1990 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 118 | Glow In Dark Trans | bdc6ad | Milky | 16 | 22 | 322 | 20 | 2005 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 159 | Glow In Dark White | d9d9d9 | Milky | 56 | 67 | 853 | 72 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 60 | Milky White | d4d3dd | Milky | 26 | 144 | 512 | 66 | 1963 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 101 | Glitter Trans-Clear | b2adaa | Glitter | 16 | 27 | 150 | 19 | 1999 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 100 | Glitter Trans-Dark Pink | CE1d9b | Glitter | 12 | 37 | 125 | 15 | 1999 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 162 | Glitter Trans-Light Blue | 68BCC5 | Glitter | 16 | 25 | 106 | 20 | 2015 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 163 | Glitter Trans-Neon Green | C0F500 | Glitter | 1 | 8 | 89 | 1 | 2015 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 222 | Glitter Trans-Orange | D04010 | Glitter | 1 | 1 | 45 | 1 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 102 | Glitter Trans-Purple | 3A2B82 | Glitter | 10 | 48 | 119 | 15 | 2000 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 116 | Speckle Black-Copper | 5F4E47 | Speckle | 5 | 3 | 124 | 6 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 151 | Speckle Black-Gold | AB9421 | Speckle | 2 | 4 | 172 | 5 | 2010 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 111 | Speckle Black-Silver | 7C7E7C | Speckle | 15 | 49 | 175 | 19 | 2005 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 117 | Speckle DBGray-Silver | 4A6363 | Speckle | 5 | 7 | 184 | 8 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 142 | Mx Aqua Green | 27867E | Modulex | | | 20 | 12 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 128 | Mx Black | 000000 | Modulex | | | 154 | 158 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 132 | Mx Brown | 907450 | Modulex | | | 30 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 133 | Mx Buff | DEC69C | Modulex | | | 36 | 33 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 126 | Mx Charcoal Gray | 595D60 | Modulex | | | 13 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 149 | Mx Clear | FFFFFF | Modulex | | | 53 | 38 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 214 | Mx Foil Dark Blue | 0057A6 | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 210 | Mx Foil Dark Gray | 595D60 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 212 | Mx Foil Dark Green | 006400 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 215 | Mx Foil Light Blue | 68AECE | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 211 | Mx Foil Light Gray | 9C9C9C | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 213 | Mx Foil Light Green | 7DB538 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 219 | Mx Foil Orange | F7AD63 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 217 | Mx Foil Red | 8B0000 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 216 | Mx Foil Violet | 4B0082 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 218 | Mx Foil Yellow | FED557 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 139 | Mx Lemon | BDC618 | Modulex | | | 12 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 124 | Mx Light Bluish Gray | AfB5C7 | Modulex | | | 13 | 4 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 125 | Mx Light Gray | 9C9C9C | Modulex | | | 56 | 51 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 136 | Mx Light Orange | F7AD63 | Modulex | | | 12 | 7 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 137 | Mx Light Yellow | FFE371 | Modulex | | | 14 | 15 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 144 | Mx Medium Blue | 61AFFF | Modulex | | | 15 | 10 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 138 | Mx Ochre Yellow | FED557 | Modulex | | | 18 | 18 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 140 | Mx Olive Green | 7C9051 | Modulex | | | 20 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 135 | Mx Orange | F47B30 | Modulex | | | 17 | 25 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 145 | Mx Pastel Blue | 68AECE | Modulex | | | 21 | 23 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 141 | Mx Pastel Green | 7DB538 | Modulex | | | 27 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 148 | Mx Pink | F785B1 | Modulex | | | 12 | 20 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 130 | Mx Pink Red | F45C40 | Modulex | | | 12 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 129 | Mx Red | B52C20 | Modulex | | | 24 | 29 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 146 | Mx Teal Blue | 467083 | Modulex | | | 16 | 14 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 134 | Mx Terracotta | 5C5030 | Modulex | | | 24 | 32 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 143 | Mx Tile Blue | 0057A6 | Modulex | | | 37 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 131 | Mx Tile Brown | 330000 | Modulex | | | 111 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 127 | Mx Tile Gray | 6B5A5A | Modulex | | | 41 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 147 | Mx Violet | BD7D85 | Modulex | | | 18 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 123 | Mx White | FFFFFF | Modulex | | | 419 | 411 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|

378
db/res/colors.txt
View File

@@ -1,189 +1,189 @@
Color ID Color Name RGB Type Parts In Sets Wanted For Sale Year From Year To
0 (Not Applicable) N/A 4587 12360 62547 10990 1954 2022
41 Aqua BCE5DC Solid 82 60 1233 116 1998 2006
11 Black 212121 Solid 10925 11692 15454 11229 1957 2022
7 Blue 0057A6 Solid 3811 7844 6792 4199 1950 2022
97 Blue-Violet 506CEF Solid 38 18 709 64 2004 2005
36 Bright Green 10CB31 Solid 588 1738 2222 671 1950 2022
105 Bright Light Blue BCD1ED Solid 373 477 1412 422 2004 2022
110 Bright Light Orange FFC700 Solid 1011 1429 2547 1094 2000 2022
103 Bright Light Yellow FEED83 Solid 391 696 1870 437 2004 2022
104 Bright Pink F7BCDA Solid 555 1074 1458 613 2003 2022
8 Brown 532115 Solid 570 1082 3110 921 1974 2006
227 Clikits Lavender E0AAD9 Solid 10 12 182 12 2005 2005
220 Coral FF8172 Solid 138 196 690 140 2019 2022
153 Dark Azure 009FE0 Solid 614 771 1749 651 2000 2022
63 Dark Blue 243757 Solid 2022 1903 4012 2107 1961 2022
109 Dark Blue-Violet 2032B0 Solid 9 7 783 16 2004 2006
85 Dark Bluish Gray 595D60 Solid 3642 5932 7063 4036 1991 2022
120 Dark Brown 330000 Solid 681 1480 2640 735 2008 2022
10 Dark Gray 6B5A5A Solid 1029 1688 3791 1432 1961 2006
80 Dark Green 2E5543 Solid 829 920 2816 910 1961 2022
225 Dark Nougat E78B3E Solid 3 10 570 18 2001 2004
68 Dark Orange B35408 Solid 667 1498 2169 741 1979 2022
47 Dark Pink EF5BB3 Solid 701 1109 1516 768 1994 2022
89 Dark Purple 5F2683 Solid 911 1075 2067 992 2000 2022
59 Dark Red 6A0E15 Solid 1522 1644 3671 1614 1961 2022
231 Dark Salmon FF6326 Solid 5 4 58 4 2003 2003
69 Dark Tan B89869 Solid 979 2081 2855 1035 1961 2022
39 Dark Turquoise 00A29F Solid 521 570 1498 593 1998 2022
161 Dark Yellow DD982E Solid 4 4 523 19 2004 2005
29 Earth Orange E6881D Solid 37 87 752 55 1982 2006
106 Fabuland Brown B3694E Solid 7 26 1040 21 1979 1997
160 Fabuland Orange EF9121 Solid 2 3 412 3 1983 1987
6 Green 00923D Solid 1931 4950 4408 2217 1949 2022
154 Lavender D3BDE3 Solid 290 397 867 344 2011 2022
152 Light Aqua D8EFDD Solid 410 450 988 430 2011 2022
62 Light Blue C8D9E1 Solid 39 30 765 107 1950 2007
86 Light Bluish Gray AFB5C7 Solid 4136 6435 7609 4719 1993 2022
9 Light Gray 9C9C9C Solid 1853 3192 5152 2393 1954 2021
38 Light Green A5DBB5 Solid 67 61 554 111 1992 2005
35 Light Lime ECEEBD Solid 20 16 349 46 1992 2007
90 Light Nougat FECCB0 Solid 1573 1521 2971 1559 2004 2022
32 Light Orange F7AD63 Solid 15 16 391 55 1998 2004
56 Light Pink FFE1FF Solid 3 4 429 52 1999 2007
93 Light Purple DA70D6 Solid 26 15 493 60 2003 2006
26 Light Salmon FCC7B7 Solid 50 21 426 57 1997 2002
40 Light Turquoise 00C5BC Solid 49 39 618 76 1998 2004
44 Light Violet C9CAE2 Solid 70 39 333 86 1994 2004
33 Light Yellow FFE383 Solid 96 73 1100 155 1994 2011
34 Lime C4E000 Solid 1594 2306 2734 1736 1982 2022
72 Maersk Blue 7DC1D8 Solid 84 14 588 100 1974 2011
71 Magenta B72276 Solid 532 844 1383 580 2000 2022
156 Medium Azure 6ACEE0 Solid 764 1202 1715 828 2012 2022
42 Medium Blue 82ADD8 Solid 779 1068 1990 886 1949 2022
91 Medium Brown 774125 Solid 40 28 1328 75 2002 2006
94 Medium Dark Pink F785B1 Solid 14 7 288 53 1992 1996
37 Medium Green 62F58E Solid 121 102 639 135 1950 2004
157 Medium Lavender C689D9 Solid 431 583 975 450 2012 2022
76 Medium Lime DFE000 Solid 64 36 438 77 1998 2005
150 Medium Nougat E3A05B Solid 812 1284 1936 848 2010 2022
31 Medium Orange FFA531 Solid 139 116 929 180 1950 2008
73 Medium Violet 9391E4 Solid 16 21 307 19 1999 2005
166 Neon Green DBF355 Solid 322 6
165 Neon Orange FA5947 Solid 292 6
236 Neon Yellow FFFC00 Solid 36 11 60 27 2022 2022
28 Nougat FFAF7D Solid 202 245 1199 232 1979 2022
155 Olive Green ABA953 Solid 500 417 1913 542 2012 2022
4 Orange FF7E14 Solid 1881 3119 3863 2061 1993 2022
23 Pink FFC0CB Solid 120 79 883 216 1991 2005
24 Purple A5499C Solid 140 129 1287 249 1996 2008
5 Red B30006 Solid 7256 9914 11158 7714 1949 2022
88 Reddish Brown 89351D Solid 1900 3882 3999 2131 1961 2022
27 Rust B22222 Solid 9 13 1326 27 1989 2001
25 Salmon FF7D5D Solid 85 27 395 89 1997 1999
55 Sand Blue 8899AB Solid 617 545 1862 671 2001 2022
48 Sand Green A2BFA3 Solid 584 594 1762 625 1964 2022
54 Sand Purple B57DA5 Solid 20 5 383 24 2001 2002
58 Sand Red 8C6B6B Solid 39 18 428 48 2001 2004
87 Sky Blue 8AD4E1 Solid 29 25 646 43 2003 2007
2 Tan EED9A4 Solid 2200 4291 4916 2448 1958 2022
99 Very Light Bluish Gray E4E8E8 Solid 51 48 1844 97 2004 2013
49 Very Light Gray E8E8E8 Solid 21 23 1196 67 1997 2004
96 Very Light Orange E6C05D Solid 1 2 383 14 2000 2000
43 Violet 3448A4 Solid 79 44 517 96 1992 2004
1 White FFFFFF Solid 13369 9998 19160 13546 1949 2022
3 Yellow FFE001 Solid 6385 9723 9968 7259 1949 2022
158 Yellowish Green E7F2A7 Solid 165 234 649 186 2012 2022
113 Trans-Aqua B7C8BF Transparent 38 38 375 51 2003 2006
13 Trans-Black 939484 Transparent 438 1693 1354 506 1999 2022
108 Trans-Bright Green 10Cb31 Transparent 153 448 770 190 2006 2022
12 Trans-Clear EEEEEE Transparent 945 4755 2856 1184 1950 2022
14 Trans-Dark Blue 00296B Transparent 255 1625 1231 318 1978 2022
50 Trans-Dark Pink CE1d9b Transparent 222 643 777 267 1998 2022
20 Trans-Green 217625 Transparent 134 1423 810 182 1969 2022
15 Trans-Light Blue 68BCC5 Transparent 750 2679 1818 886 1985 2022
226 Trans-Light Bright Green 34EF55 Transparent 26 18 117 41 2003 2006
221 Trans-Light Green 94E5AB Transparent 11 5 135 15 2005 2006
164 Trans-Light Orange E99A3A Transparent 42 22 327 82 2003 2006
114 Trans-Light Purple B97AB1 Transparent 20 18 197 30 2005 2006
74 Trans-Medium Blue 7384A5 Transparent 105 207 855 151 2001 2018
234 Trans-Medium Purple 9C41B6 Transparent 38 36 49 43 2003 2006
16 Trans-Neon Green C0F500 Transparent 232 1116 939 288 1990 2022
18 Trans-Neon Orange FF4231 Transparent 224 1032 953 323 1993 2021
121 Trans-Neon Yellow FFD700 Transparent 27 34 378 71 2001 2006
98 Trans-Orange D04010 Transparent 194 1821 844 265 2003 2022
107 Trans-Pink FF8298 Transparent 68 44 243 89 2003 2006
51 Trans-Purple 5525B7 Transparent 127 340 720 161 2000 2022
17 Trans-Red 9C0010 Transparent 205 3550 1134 278 1969 2022
19 Trans-Yellow EBF72D Transparent 205 2368 1006 267 1969 2022
57 Chrome Antique Brass 645a4c Chrome 3 16 329 3 2001 2005
122 Chrome Black 544E4F Chrome 11 1 1080 14 2009 2009
52 Chrome Blue 5C66A4 Chrome 5 14 381 12 1998 2006
21 Chrome Gold f1f2e1 Chrome 52 278 1488 58 1989 2021
64 Chrome Green 3CB371 Chrome 1 2 347 6 1999 1999
82 Chrome Pink aa4d8e Chrome 1 10 195 7 2001 2007
22 Chrome Silver DCDCDC Chrome 105 561 2081 184 1966 2018
84 Copper C66921 Pearl 58 74 968 87 2001 2020
81 Flat Dark Gold AD7118 Pearl 42 42 824 127 2002 2006
95 Flat Silver 8D949C Pearl 906 2649 2675 1055 1998 2022
78 Metal Blue 5686AE Pearl 40 22 347 48 2002 2009
77 Pearl Dark Gray 666660 Pearl 645 1013 2588 722 2002 2022
115 Pearl Gold E79E1D Pearl 967 2033 2533 1057 2004 2022
61 Pearl Light Gold E7AE5A Pearl 16 9 384 59 2000 2006
66 Pearl Light Gray ACB7C0 Pearl 425 625 1580 601 1993 2013
119 Pearl Very Light Gray D4D2CD Pearl 14 10 508 43 2002 2004
83 Pearl White FFFFFF Pearl 3 5 444 14 2003 2006
235 Reddish Gold E7891B Pearl 2 4 12 2 2003 2005
229 Satin Trans-Black 939484 Satin 4 9 22 4 2020 2021
233 Satin Trans-Bright Green 7fe15b Satin 3 2 9 1 2021 2022
232 Satin Trans-Dark Blue 1552e2 Satin 6 4 19 5 2021 2022
224 Satin Trans-Dark Pink CE1d9b Satin 7 16 33 5 2020 2022
223 Satin Trans-Light Blue 68BCC5 Satin 24 46 76 31 2020 2022
230 Satin Trans-Purple 8320B7 Satin 1 5 20 2 2020 2020
228 Satin White FFFFFF Satin 10 23 124 10 2020 2022
65 Metallic Gold B8860B Metallic 105 249 1278 184 1997 2022
70 Metallic Green bdb573 Metallic 26 7 335 36 2001 2018
67 Metallic Silver C0C0C0 Metallic 178 647 2103 262 1957 2022
46 Glow In Dark Opaque d4d5c9 Milky 40 87 592 105 1990 2011
118 Glow In Dark Trans bdc6ad Milky 16 22 322 20 2005 2011
159 Glow In Dark White d9d9d9 Milky 56 67 853 72 2012 2022
60 Milky White d4d3dd Milky 26 144 512 66 1963 2008
101 Glitter Trans-Clear b2adaa Glitter 16 27 150 19 1999 2021
100 Glitter Trans-Dark Pink CE1d9b Glitter 12 37 125 15 1999 2021
162 Glitter Trans-Light Blue 68BCC5 Glitter 16 25 106 20 2015 2021
163 Glitter Trans-Neon Green C0F500 Glitter 1 8 89 1 2015 2018
222 Glitter Trans-Orange D04010 Glitter 1 1 45 1 2020 2020
102 Glitter Trans-Purple 3A2B82 Glitter 10 48 119 15 2000 2021
116 Speckle Black-Copper 5F4E47 Speckle 5 3 124 6 2006 2006
151 Speckle Black-Gold AB9421 Speckle 2 4 172 5 2010 2011
111 Speckle Black-Silver 7C7E7C Speckle 15 49 175 19 2005 2013
117 Speckle DBGray-Silver 4A6363 Speckle 5 7 184 8 2006 2006
142 Mx Aqua Green 27867E Modulex 20 12
128 Mx Black 000000 Modulex 154 158
132 Mx Brown 907450 Modulex 30 30
133 Mx Buff DEC69C Modulex 36 33
126 Mx Charcoal Gray 595D60 Modulex 13 8
149 Mx Clear FFFFFF Modulex 53 38
214 Mx Foil Dark Blue 0057A6 Modulex 2 1
210 Mx Foil Dark Gray 595D60 Modulex 1 1
212 Mx Foil Dark Green 006400 Modulex 1
215 Mx Foil Light Blue 68AECE Modulex 2 1
211 Mx Foil Light Gray 9C9C9C Modulex 1
213 Mx Foil Light Green 7DB538 Modulex 1 1
219 Mx Foil Orange F7AD63 Modulex 1 1
217 Mx Foil Red 8B0000 Modulex 1 1
216 Mx Foil Violet 4B0082 Modulex 1
218 Mx Foil Yellow FED557 Modulex 1
139 Mx Lemon BDC618 Modulex 12 21
124 Mx Light Bluish Gray AfB5C7 Modulex 13 4
125 Mx Light Gray 9C9C9C Modulex 56 51
136 Mx Light Orange F7AD63 Modulex 12 7
137 Mx Light Yellow FFE371 Modulex 14 15
144 Mx Medium Blue 61AFFF Modulex 15 10
138 Mx Ochre Yellow FED557 Modulex 18 18
140 Mx Olive Green 7C9051 Modulex 20 21
135 Mx Orange F47B30 Modulex 17 25
145 Mx Pastel Blue 68AECE Modulex 21 23
141 Mx Pastel Green 7DB538 Modulex 27 30
148 Mx Pink F785B1 Modulex 12 20
130 Mx Pink Red F45C40 Modulex 12 6
129 Mx Red B52C20 Modulex 24 29
146 Mx Teal Blue 467083 Modulex 16 14
134 Mx Terracotta 5C5030 Modulex 24 32
143 Mx Tile Blue 0057A6 Modulex 37
131 Mx Tile Brown 330000 Modulex 111
127 Mx Tile Gray 6B5A5A Modulex 41
147 Mx Violet BD7D85 Modulex 18 8
123 Mx White FFFFFF Modulex 419 411
Color ID Color Name RGB Type Parts In Sets Wanted For Sale Year From Year To
0 (Not Applicable) N/A 4587 12360 62547 10990 1954 2022
41 Aqua BCE5DC Solid 82 60 1233 116 1998 2006
11 Black 212121 Solid 10925 11692 15454 11229 1957 2022
7 Blue 0057A6 Solid 3811 7844 6792 4199 1950 2022
97 Blue-Violet 506CEF Solid 38 18 709 64 2004 2005
36 Bright Green 10CB31 Solid 588 1738 2222 671 1950 2022
105 Bright Light Blue BCD1ED Solid 373 477 1412 422 2004 2022
110 Bright Light Orange FFC700 Solid 1011 1429 2547 1094 2000 2022
103 Bright Light Yellow FEED83 Solid 391 696 1870 437 2004 2022
104 Bright Pink F7BCDA Solid 555 1074 1458 613 2003 2022
8 Brown 532115 Solid 570 1082 3110 921 1974 2006
227 Clikits Lavender E0AAD9 Solid 10 12 182 12 2005 2005
220 Coral FF8172 Solid 138 196 690 140 2019 2022
153 Dark Azure 009FE0 Solid 614 771 1749 651 2000 2022
63 Dark Blue 243757 Solid 2022 1903 4012 2107 1961 2022
109 Dark Blue-Violet 2032B0 Solid 9 7 783 16 2004 2006
85 Dark Bluish Gray 595D60 Solid 3642 5932 7063 4036 1991 2022
120 Dark Brown 330000 Solid 681 1480 2640 735 2008 2022
10 Dark Gray 6B5A5A Solid 1029 1688 3791 1432 1961 2006
80 Dark Green 2E5543 Solid 829 920 2816 910 1961 2022
225 Dark Nougat E78B3E Solid 3 10 570 18 2001 2004
68 Dark Orange B35408 Solid 667 1498 2169 741 1979 2022
47 Dark Pink EF5BB3 Solid 701 1109 1516 768 1994 2022
89 Dark Purple 5F2683 Solid 911 1075 2067 992 2000 2022
59 Dark Red 6A0E15 Solid 1522 1644 3671 1614 1961 2022
231 Dark Salmon FF6326 Solid 5 4 58 4 2003 2003
69 Dark Tan B89869 Solid 979 2081 2855 1035 1961 2022
39 Dark Turquoise 00A29F Solid 521 570 1498 593 1998 2022
161 Dark Yellow DD982E Solid 4 4 523 19 2004 2005
29 Earth Orange E6881D Solid 37 87 752 55 1982 2006
106 Fabuland Brown B3694E Solid 7 26 1040 21 1979 1997
160 Fabuland Orange EF9121 Solid 2 3 412 3 1983 1987
6 Green 00923D Solid 1931 4950 4408 2217 1949 2022
154 Lavender D3BDE3 Solid 290 397 867 344 2011 2022
152 Light Aqua D8EFDD Solid 410 450 988 430 2011 2022
62 Light Blue C8D9E1 Solid 39 30 765 107 1950 2007
86 Light Bluish Gray AFB5C7 Solid 4136 6435 7609 4719 1993 2022
9 Light Gray 9C9C9C Solid 1853 3192 5152 2393 1954 2021
38 Light Green A5DBB5 Solid 67 61 554 111 1992 2005
35 Light Lime ECEEBD Solid 20 16 349 46 1992 2007
90 Light Nougat FECCB0 Solid 1573 1521 2971 1559 2004 2022
32 Light Orange F7AD63 Solid 15 16 391 55 1998 2004
56 Light Pink FFE1FF Solid 3 4 429 52 1999 2007
93 Light Purple DA70D6 Solid 26 15 493 60 2003 2006
26 Light Salmon FCC7B7 Solid 50 21 426 57 1997 2002
40 Light Turquoise 00C5BC Solid 49 39 618 76 1998 2004
44 Light Violet C9CAE2 Solid 70 39 333 86 1994 2004
33 Light Yellow FFE383 Solid 96 73 1100 155 1994 2011
34 Lime C4E000 Solid 1594 2306 2734 1736 1982 2022
72 Maersk Blue 7DC1D8 Solid 84 14 588 100 1974 2011
71 Magenta B72276 Solid 532 844 1383 580 2000 2022
156 Medium Azure 6ACEE0 Solid 764 1202 1715 828 2012 2022
42 Medium Blue 82ADD8 Solid 779 1068 1990 886 1949 2022
91 Medium Brown 774125 Solid 40 28 1328 75 2002 2006
94 Medium Dark Pink F785B1 Solid 14 7 288 53 1992 1996
37 Medium Green 62F58E Solid 121 102 639 135 1950 2004
157 Medium Lavender C689D9 Solid 431 583 975 450 2012 2022
76 Medium Lime DFE000 Solid 64 36 438 77 1998 2005
150 Medium Nougat E3A05B Solid 812 1284 1936 848 2010 2022
31 Medium Orange FFA531 Solid 139 116 929 180 1950 2008
73 Medium Violet 9391E4 Solid 16 21 307 19 1999 2005
166 Neon Green DBF355 Solid 322 6
165 Neon Orange FA5947 Solid 292 6
236 Neon Yellow FFFC00 Solid 36 11 60 27 2022 2022
28 Nougat FFAF7D Solid 202 245 1199 232 1979 2022
155 Olive Green ABA953 Solid 500 417 1913 542 2012 2022
4 Orange FF7E14 Solid 1881 3119 3863 2061 1993 2022
23 Pink FFC0CB Solid 120 79 883 216 1991 2005
24 Purple A5499C Solid 140 129 1287 249 1996 2008
5 Red B30006 Solid 7256 9914 11158 7714 1949 2022
88 Reddish Brown 89351D Solid 1900 3882 3999 2131 1961 2022
27 Rust B22222 Solid 9 13 1326 27 1989 2001
25 Salmon FF7D5D Solid 85 27 395 89 1997 1999
55 Sand Blue 8899AB Solid 617 545 1862 671 2001 2022
48 Sand Green A2BFA3 Solid 584 594 1762 625 1964 2022
54 Sand Purple B57DA5 Solid 20 5 383 24 2001 2002
58 Sand Red 8C6B6B Solid 39 18 428 48 2001 2004
87 Sky Blue 8AD4E1 Solid 29 25 646 43 2003 2007
2 Tan EED9A4 Solid 2200 4291 4916 2448 1958 2022
99 Very Light Bluish Gray E4E8E8 Solid 51 48 1844 97 2004 2013
49 Very Light Gray E8E8E8 Solid 21 23 1196 67 1997 2004
96 Very Light Orange E6C05D Solid 1 2 383 14 2000 2000
43 Violet 3448A4 Solid 79 44 517 96 1992 2004
1 White FFFFFF Solid 13369 9998 19160 13546 1949 2022
3 Yellow FFE001 Solid 6385 9723 9968 7259 1949 2022
158 Yellowish Green E7F2A7 Solid 165 234 649 186 2012 2022
113 Trans-Aqua B7C8BF Transparent 38 38 375 51 2003 2006
13 Trans-Black 939484 Transparent 438 1693 1354 506 1999 2022
108 Trans-Bright Green 10Cb31 Transparent 153 448 770 190 2006 2022
12 Trans-Clear EEEEEE Transparent 945 4755 2856 1184 1950 2022
14 Trans-Dark Blue 00296B Transparent 255 1625 1231 318 1978 2022
50 Trans-Dark Pink CE1d9b Transparent 222 643 777 267 1998 2022
20 Trans-Green 217625 Transparent 134 1423 810 182 1969 2022
15 Trans-Light Blue 68BCC5 Transparent 750 2679 1818 886 1985 2022
226 Trans-Light Bright Green 34EF55 Transparent 26 18 117 41 2003 2006
221 Trans-Light Green 94E5AB Transparent 11 5 135 15 2005 2006
164 Trans-Light Orange E99A3A Transparent 42 22 327 82 2003 2006
114 Trans-Light Purple B97AB1 Transparent 20 18 197 30 2005 2006
74 Trans-Medium Blue 7384A5 Transparent 105 207 855 151 2001 2018
234 Trans-Medium Purple 9C41B6 Transparent 38 36 49 43 2003 2006
16 Trans-Neon Green C0F500 Transparent 232 1116 939 288 1990 2022
18 Trans-Neon Orange FF4231 Transparent 224 1032 953 323 1993 2021
121 Trans-Neon Yellow FFD700 Transparent 27 34 378 71 2001 2006
98 Trans-Orange D04010 Transparent 194 1821 844 265 2003 2022
107 Trans-Pink FF8298 Transparent 68 44 243 89 2003 2006
51 Trans-Purple 5525B7 Transparent 127 340 720 161 2000 2022
17 Trans-Red 9C0010 Transparent 205 3550 1134 278 1969 2022
19 Trans-Yellow EBF72D Transparent 205 2368 1006 267 1969 2022
57 Chrome Antique Brass 645a4c Chrome 3 16 329 3 2001 2005
122 Chrome Black 544E4F Chrome 11 1 1080 14 2009 2009
52 Chrome Blue 5C66A4 Chrome 5 14 381 12 1998 2006
21 Chrome Gold f1f2e1 Chrome 52 278 1488 58 1989 2021
64 Chrome Green 3CB371 Chrome 1 2 347 6 1999 1999
82 Chrome Pink aa4d8e Chrome 1 10 195 7 2001 2007
22 Chrome Silver DCDCDC Chrome 105 561 2081 184 1966 2018
84 Copper C66921 Pearl 58 74 968 87 2001 2020
81 Flat Dark Gold AD7118 Pearl 42 42 824 127 2002 2006
95 Flat Silver 8D949C Pearl 906 2649 2675 1055 1998 2022
78 Metal Blue 5686AE Pearl 40 22 347 48 2002 2009
77 Pearl Dark Gray 666660 Pearl 645 1013 2588 722 2002 2022
115 Pearl Gold E79E1D Pearl 967 2033 2533 1057 2004 2022
61 Pearl Light Gold E7AE5A Pearl 16 9 384 59 2000 2006
66 Pearl Light Gray ACB7C0 Pearl 425 625 1580 601 1993 2013
119 Pearl Very Light Gray D4D2CD Pearl 14 10 508 43 2002 2004
83 Pearl White FFFFFF Pearl 3 5 444 14 2003 2006
235 Reddish Gold E7891B Pearl 2 4 12 2 2003 2005
229 Satin Trans-Black 939484 Satin 4 9 22 4 2020 2021
233 Satin Trans-Bright Green 7fe15b Satin 3 2 9 1 2021 2022
232 Satin Trans-Dark Blue 1552e2 Satin 6 4 19 5 2021 2022
224 Satin Trans-Dark Pink CE1d9b Satin 7 16 33 5 2020 2022
223 Satin Trans-Light Blue 68BCC5 Satin 24 46 76 31 2020 2022
230 Satin Trans-Purple 8320B7 Satin 1 5 20 2 2020 2020
228 Satin White FFFFFF Satin 10 23 124 10 2020 2022
65 Metallic Gold B8860B Metallic 105 249 1278 184 1997 2022
70 Metallic Green bdb573 Metallic 26 7 335 36 2001 2018
67 Metallic Silver C0C0C0 Metallic 178 647 2103 262 1957 2022
46 Glow In Dark Opaque d4d5c9 Milky 40 87 592 105 1990 2011
118 Glow In Dark Trans bdc6ad Milky 16 22 322 20 2005 2011
159 Glow In Dark White d9d9d9 Milky 56 67 853 72 2012 2022
60 Milky White d4d3dd Milky 26 144 512 66 1963 2008
101 Glitter Trans-Clear b2adaa Glitter 16 27 150 19 1999 2021
100 Glitter Trans-Dark Pink CE1d9b Glitter 12 37 125 15 1999 2021
162 Glitter Trans-Light Blue 68BCC5 Glitter 16 25 106 20 2015 2021
163 Glitter Trans-Neon Green C0F500 Glitter 1 8 89 1 2015 2018
222 Glitter Trans-Orange D04010 Glitter 1 1 45 1 2020 2020
102 Glitter Trans-Purple 3A2B82 Glitter 10 48 119 15 2000 2021
116 Speckle Black-Copper 5F4E47 Speckle 5 3 124 6 2006 2006
151 Speckle Black-Gold AB9421 Speckle 2 4 172 5 2010 2011
111 Speckle Black-Silver 7C7E7C Speckle 15 49 175 19 2005 2013
117 Speckle DBGray-Silver 4A6363 Speckle 5 7 184 8 2006 2006
142 Mx Aqua Green 27867E Modulex 20 12
128 Mx Black 000000 Modulex 154 158
132 Mx Brown 907450 Modulex 30 30
133 Mx Buff DEC69C Modulex 36 33
126 Mx Charcoal Gray 595D60 Modulex 13 8
149 Mx Clear FFFFFF Modulex 53 38
214 Mx Foil Dark Blue 0057A6 Modulex 2 1
210 Mx Foil Dark Gray 595D60 Modulex 1 1
212 Mx Foil Dark Green 006400 Modulex 1
215 Mx Foil Light Blue 68AECE Modulex 2 1
211 Mx Foil Light Gray 9C9C9C Modulex 1
213 Mx Foil Light Green 7DB538 Modulex 1 1
219 Mx Foil Orange F7AD63 Modulex 1 1
217 Mx Foil Red 8B0000 Modulex 1 1
216 Mx Foil Violet 4B0082 Modulex 1
218 Mx Foil Yellow FED557 Modulex 1
139 Mx Lemon BDC618 Modulex 12 21
124 Mx Light Bluish Gray AfB5C7 Modulex 13 4
125 Mx Light Gray 9C9C9C Modulex 56 51
136 Mx Light Orange F7AD63 Modulex 12 7
137 Mx Light Yellow FFE371 Modulex 14 15
144 Mx Medium Blue 61AFFF Modulex 15 10
138 Mx Ochre Yellow FED557 Modulex 18 18
140 Mx Olive Green 7C9051 Modulex 20 21
135 Mx Orange F47B30 Modulex 17 25
145 Mx Pastel Blue 68AECE Modulex 21 23
141 Mx Pastel Green 7DB538 Modulex 27 30
148 Mx Pink F785B1 Modulex 12 20
130 Mx Pink Red F45C40 Modulex 12 6
129 Mx Red B52C20 Modulex 24 29
146 Mx Teal Blue 467083 Modulex 16 14
134 Mx Terracotta 5C5030 Modulex 24 32
143 Mx Tile Blue 0057A6 Modulex 37
131 Mx Tile Brown 330000 Modulex 111
127 Mx Tile Gray 6B5A5A Modulex 41
147 Mx Violet BD7D85 Modulex 18 8
123 Mx White FFFFFF Modulex 419 411

102
db/setstealer.js
View File

@@ -1,51 +1,51 @@
// scrapes bricklink for the every piece and amounts in a set of lego
const fs = require('fs');
const axios = require('axios');
// For sets make sets.txt
const sets = fs.readFileSync('res/Sets.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
// output format:
// setid: { pieceid: amount, pieceid: amount, ... }
async function post(url) {
// axios return HTML from website
try {
const res = await axios.get(url, {
method: 'POST',
headers: { 'User-Agent': 'Chrome/96.0.4664.175' },
});
return res.data.toString();
} catch (e) {
fs.appendFileSync('error-set.txt', `${url}\n`);
console.log(`Failed to download ${url}`);
}
}
async function main() {
// sometimes fails on minifigures - doesn't matter though, it's correct enough
const regex = /class=".*?IV_ITEM".*?if \(brickList\["(.*?)"]\).*?nbsp;(.*?)&nbsp;/g;
const output = {};
for (let i = 0; i < sets.length; i++) {
const set = sets[i];
const data = await post(`https://www.bricklink.com/catalogItemInv.asp?S=${set[2]}`);
output[set[2]] = {};
let pieceCount = 0;
let m;
while ((m = regex.exec(data)) !== null) {
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
pieceCount += parseInt(m[2]);
output[set[2]] = { ...output[set[2]], [m[1]]: parseInt(m[2]) };
}
console.log(`${i}/${sets.length} ${set[2]} has ${pieceCount} pieces`);
fs.writeFileSync('res/sets.json', JSON.stringify(output));
}
}
main();
// scrapes bricklink for the every piece and amounts in a set of lego
const fs = require('fs');
const axios = require('axios');
// For sets make sets.txt
const sets = fs.readFileSync('res/Sets.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
// output format:
// setid: { pieceid: amount, pieceid: amount, ... }
async function post(url) {
// axios return HTML from website
try {
const res = await axios.get(url, {
method: 'POST',
headers: { 'User-Agent': 'Chrome/96.0.4664.175' },
});
return res.data.toString();
} catch (e) {
fs.appendFileSync('error-set.txt', `${url}\n`);
console.log(`Failed to download ${url}`);
}
}
async function main() {
// sometimes fails on minifigures - doesn't matter though, it's correct enough
const regex = /class=".*?IV_ITEM".*?if \(brickList\["(.*?)"]\).*?nbsp;(.*?)&nbsp;/g;
const output = {};
for (let i = 0; i < sets.length; i++) {
const set = sets[i];
const data = await post(`https://www.bricklink.com/catalogItemInv.asp?S=${set[2]}`);
output[set[2]] = {};
let pieceCount = 0;
let m;
while ((m = regex.exec(data)) !== null) {
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
pieceCount += parseInt(m[2]);
output[set[2]] = { ...output[set[2]], [m[1]]: parseInt(m[2]) };
}
console.log(`${i}/${sets.length} ${set[2]} has ${pieceCount} pieces`);
fs.writeFileSync('res/sets.json', JSON.stringify(output));
}
}
main();

180
docs/API.md
View File

@@ -1,90 +1,90 @@
# API Documentation
ALL API REQUESTS WILL BE PREFIXED WITH /api/
ALL AUTHENTICATION RELATED REQUESTS WILL BE PREFIXED WITH /api/auth/
this is because the API has no state so middleware will authenticate
automatically every request
## Routes
| Type | Route | Queries | Auth? | Notes |
| --- | --- | --- | -- | --- |
| GET | /api/search/ | query, page | no | |
| GET | /api/bricks/ | query, page | no | |
| GET | /api/sets/ | query, page | no | |
| GET | /api/sets/featured | page | no | |
| GET | /api/brick/:id/ | | no | |
| GET | /api/set/:id/ | | no | |
| GET | /api/cdn/:id/ | | no | |
| PUT | /api/auth/login/ | | yes | |
| POST | /api/auth/signup/ | | yes | |
| GET | /api/auth/orders/ | | yes | |
| GET | /api/auth/basket/ | | yes | |
| PUT | /api/auth/basket/:id | quantity | yes | |
| POST | /api/auth/basket/:id | | yes | manipulate basket content |
| DEL | /api/auth/basket/:id | quantity | yes | if no id, delete whole |
| DEL | /api/auth/basket/ | | yes | if no id, delete whole |
## Query structure
### /api/search/
### /api/bricks/
GET
Response Object
```json
{
}
```
### /api/sets/
### /api/brick/:id/
### /api/set/:id/
### /api/cdn/:id/
### /api/auth/login/
### /api/auth/signup/
Request Body
```json
{
}
```
Response Object
```json
{
}
```
### /api/auth/orders/
### /api/auth/basket/
## Response Structure
```js
{
error: false
result: {
// defined in the response description for each route
}
}
```
## Error Structure
```js
{
error: {
short: "Error doing x",
long: "y needs to be z",
}
}
```
# API Documentation
ALL API REQUESTS WILL BE PREFIXED WITH /api/
ALL AUTHENTICATION RELATED REQUESTS WILL BE PREFIXED WITH /api/auth/
this is because the API has no state so middleware will authenticate
automatically every request
## Routes
| Type | Route | Queries | Auth? | Notes |
| --- | --- | --- | -- | --- |
| GET | /api/search/ | query, page | no | |
| GET | /api/bricks/ | query, page | no | |
| GET | /api/sets/ | query, page | no | |
| GET | /api/sets/featured | page | no | |
| GET | /api/brick/:id/ | | no | |
| GET | /api/set/:id/ | | no | |
| GET | /api/cdn/:id/ | | no | |
| PUT | /api/auth/login/ | | yes | |
| POST | /api/auth/signup/ | | yes | |
| GET | /api/auth/orders/ | | yes | |
| GET | /api/auth/basket/ | | yes | |
| PUT | /api/auth/basket/:id | quantity | yes | |
| POST | /api/auth/basket/:id | | yes | manipulate basket content |
| DEL | /api/auth/basket/:id | quantity | yes | if no id, delete whole |
| DEL | /api/auth/basket/ | | yes | if no id, delete whole |
## Query structure
### /api/search/
### /api/bricks/
GET
Response Object
```json
{
}
```
### /api/sets/
### /api/brick/:id/
### /api/set/:id/
### /api/cdn/:id/
### /api/auth/login/
### /api/auth/signup/
Request Body
```json
{
}
```
Response Object
```json
{
}
```
### /api/auth/orders/
### /api/auth/basket/
## Response Structure
```js
{
error: false
result: {
// defined in the response description for each route
}
}
```
## Error Structure
```js
{
error: {
short: "Error doing x",
long: "y needs to be z",
}
}
```

168
docs/CLIENT-FRAMEWORK.md
View File

@@ -1,84 +1,84 @@
# Client Framework
It is important for the future maintainership of this small website
that the code can easily be understood by the "average" programmer,
of which Rich mentions that 50% of programmers being below average
would mean that any advanced system would not be maintainable.
I chose to write a very simple templating and component library based
off of the new HTMLElement concept to function react-esque without the
burden of transpilation.
Quite simply a component is a class extension of the base class
`Component`, It is expected that this is implemeneted as such with the
other methods filled in.
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
}
```
That is the simplest form a component can be, it won't render but it
will register it's self in the DOM and be accessable with the
`<mycomponent></mycomponent>` tag within the DOM.
In order to get some stuff rendering in there, it is important to
override the `Render` method, returning an object with a template
and a style sheet, or a promise that will resolve these, so they can be
asynchronusly loaded by the framework.
Basic loading
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
Render() {
return {
template: `<div>{this.state.name}</div>`,
style: `div { text-color: red }`,
};
}
}
```
Asynchronus loading
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
Render() {
return {
template: SideLoad('MyComponent.html'),
style: SideLoad('MyComponent.css'),
};
}
}
```
## State
Similarly to React this framework includes a concept for statefulness,
a given component has a state which can be user-defined `this.state.x=`
or an attribute to the component tag in the HTML, or both. When the
state changes, the component is re-renderered.
State is updated with `setState()`.
Within the HTML, any instance of `{this.state.}` will be replaced with
the internal state of the component.
TODO: Global state
# Client Framework
It is important for the future maintainership of this small website
that the code can easily be understood by the "average" programmer,
of which Rich mentions that 50% of programmers being below average
would mean that any advanced system would not be maintainable.
I chose to write a very simple templating and component library based
off of the new HTMLElement concept to function react-esque without the
burden of transpilation.
Quite simply a component is a class extension of the base class
`Component`, It is expected that this is implemeneted as such with the
other methods filled in.
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
}
```
That is the simplest form a component can be, it won't render but it
will register it's self in the DOM and be accessable with the
`<mycomponent></mycomponent>` tag within the DOM.
In order to get some stuff rendering in there, it is important to
override the `Render` method, returning an object with a template
and a style sheet, or a promise that will resolve these, so they can be
asynchronusly loaded by the framework.
Basic loading
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
Render() {
return {
template: `<div>{this.state.name}</div>`,
style: `div { text-color: red }`,
};
}
}
```
Asynchronus loading
```js
class MyComponent extends Component {
static __IDENTIFY() { return 'MyComponent'; }
constructor() {
super(MyComponent);
}
Render() {
return {
template: SideLoad('MyComponent.html'),
style: SideLoad('MyComponent.css'),
};
}
}
```
## State
Similarly to React this framework includes a concept for statefulness,
a given component has a state which can be user-defined `this.state.x=`
or an attribute to the component tag in the HTML, or both. When the
state changes, the component is re-renderered.
State is updated with `setState()`.
Within the HTML, any instance of `{this.state.}` will be replaced with
the internal state of the component.
TODO: Global state

36
docs/CONFIGURATION.md
View File

@@ -1,18 +1,18 @@
# DotEnv
Items suffixed with `_DEV` will automatically replace the non-dev
version of the same item internally
```config
NODE_ENV=dev/prod
PORT=port
PORT_DEV=port
LOG_LEVEL=verbose/debug/warn/info
LOG_TARGET=console/filesystem/network
LOG_PATH=network ip/path
DATABASE_HOST=host/path
DATABASE_HOST_DEV=host/path
```
# DotEnv
Items suffixed with `_DEV` will automatically replace the non-dev
version of the same item internally
```config
NODE_ENV=dev/prod
PORT=port
PORT_DEV=port
LOG_LEVEL=verbose/debug/warn/info
LOG_TARGET=console/filesystem/network
LOG_PATH=network ip/path
DATABASE_HOST=host/path
DATABASE_HOST_DEV=host/path
```

4
jsdoc.json
View File

@@ -1,3 +1,3 @@
{
"plugins": ["plugins/markdown"]
{
"plugins": ["plugins/markdown"]
}

8
src/__test/tests.test.js
View File

@@ -1,4 +1,4 @@
test('Sanity Check', () => {
expect(1 + 1).toBe(2);
});
test('Sanity Check', () => {
expect(1 + 1).toBe(2);
});

52
src/config.js
View File

@@ -1,26 +1,26 @@
const Logger = require('./logger.js');
const dotenv = require('dotenv');
function load() {
Logger.Info('Loading Config...');
const res = dotenv.config();
Logger.Debug(`CONFIG: ${JSON.stringify(res.parsed)}`);
Logger.Debug(`CONFIG: running in ${res.parsed.NODE_ENV} mode`);
// if NODE_ENV is dev, every config item that is dev is made into the actual one so that the
// individual modules do not need to care about hte mode of operation
if (res.parsed.NODE_ENV === 'dev') {
Object.keys(res.parsed).forEach(key => {
if (key.endsWith('_DEV')) {
const newKey = key.substring(0, key.length - 4);
process.env[newKey] = res.parsed[key];
Logger.Debug(`CONFIG KEY: '${newKey}' DEVELOPMENT VALUE: '${process.env[newKey]}'`);
}
});
}
}
module.exports = {
Load: load,
};
const Logger = require('./logger.js');
const dotenv = require('dotenv');
function load() {
Logger.Info('Loading Config...');
const res = dotenv.config();
Logger.Debug(`CONFIG: ${JSON.stringify(res.parsed)}`);
Logger.Debug(`CONFIG: running in ${res.parsed.NODE_ENV} mode`);
// if NODE_ENV is dev, every config item that is dev is made into the actual one so that the
// individual modules do not need to care about hte mode of operation
if (res.parsed.NODE_ENV === 'dev') {
Object.keys(res.parsed).forEach(key => {
if (key.endsWith('_DEV')) {
const newKey = key.substring(0, key.length - 4);
process.env[newKey] = res.parsed[key];
Logger.Debug(`CONFIG KEY: '${newKey}' DEVELOPMENT VALUE: '${process.env[newKey]}'`);
}
});
}
}
module.exports = {
Load: load,
};

126
src/database/database.js
View File

@@ -1,63 +1,63 @@
const Logger = require('../logger.js');
const EntityFramework = require('./psql-entity-framework/entity-relationships.js');
const { Client } = require('pg');
class Database {
constructor() {
this.connection = null;
}
async connect(options) {
Logger.Info('Database Connecting...');
// review options
if (!options) {
options = {
user: process.env.DATABASE_USER,
host: process.env.DATABASE_HOST,
database: process.env.DATABASE_DB,
password: process.env.DATABASE_PASSWORD,
port: process.env.DATABASE_PORT,
};
}
this.options = options;
this.connection = await this.connectToDatabase();
Logger.Info('Database Connected');
}
async connectToDatabase() {
const con = new Promise((resolve, reject) => {
const psqlClient = new Client(this.options);
psqlClient.connect();
psqlClient.query('SELECT NOW()', (err, res) => {
if (err) reject(err);
this.connection = psqlClient;
Logger.Database(`PSQL Time: ${res.rows[0].now}`);
Logger.Database(`Connected to ${this.options.host}`);
resolve(psqlClient);
});
});
await con;
this.ORM = new EntityFramework(this.connection);
return this.connection;
}
async ORMReady() {
await this.ORM.syncModels();
}
get getORM() {
return this.ORM;
}
}
module.exports = {
IDatabase: Database,
DataTypes: require('./psql-entity-framework/types.js'),
DataConstraints: require('./psql-entity-framework/relationships-constraints.js'),
};
const Logger = require('../logger.js');
const EntityFramework = require('./psql-entity-framework/entity-relationships.js');
const { Client } = require('pg');
class Database {
constructor() {
this.connection = null;
}
async connect(options) {
Logger.Info('Database Connecting...');
// review options
if (!options) {
options = {
user: process.env.DATABASE_USER,
host: process.env.DATABASE_HOST,
database: process.env.DATABASE_DB,
password: process.env.DATABASE_PASSWORD,
port: process.env.DATABASE_PORT,
};
}
this.options = options;
this.connection = await this.connectToDatabase();
Logger.Info('Database Connected');
}
async connectToDatabase() {
const con = new Promise((resolve, reject) => {
const psqlClient = new Client(this.options);
psqlClient.connect();
psqlClient.query('SELECT NOW()', (err, res) => {
if (err) reject(err);
this.connection = psqlClient;
Logger.Database(`PSQL Time: ${res.rows[0].now}`);
Logger.Database(`Connected to ${this.options.host}`);
resolve(psqlClient);
});
});
await con;
this.ORM = new EntityFramework(this.connection);
return this.connection;
}
async ORMReady() {
await this.ORM.syncModels();
}
get getORM() {
return this.ORM;
}
}
module.exports = {
IDatabase: Database,
DataTypes: require('./psql-entity-framework/types.js'),
DataConstraints: require('./psql-entity-framework/relationships-constraints.js'),
};

228
src/database/psql-entity-framework/entity-relationships.js
View File

@@ -1,114 +1,114 @@
const Logger = require('../../logger.js');
const DataTypes = require('./types.js');
const DataConstraints = require('./relationships-constraints.js');
const Model = require('./model.js');
/**
* In order to keep the models dynamic and flexible, we need to be able to add
* new models to the database in whatever order the developer wants too. Without
* them worrying about dependancies and such, we can just add them to the database
* in the order they are defined. This class will handle that for us. As well as
* keeping track of the models that have been added to the database.
*/
/**
* @class Database
* @classdesc The Database class is used to create a database instance.
* @param {object} connection - An active instance of a psql database connection
*/
class PSQLObjectRelation {
constructor(psqlConnection) {
Logger.Database('ORM Loading...');
this.connection = psqlConnection;
this.models = [];
// dummyModels are for models that have requested a model that doesn't exist
// the model that doesn't exist will be added here, and once it is added, the
// dummy dependancy will be resolved
this.dummyModels = [];
}
/**
* @function model
* @description Gets a model from the database stash
* @param {string} modelName - The name of the target model
*/
model(modelName) {
// TODO: Resolve the dependancy if it dosen't exist and make a note of it
if (!this.models[modelName]) {
Logger.Database(`Model ${modelName} does not exist, adding to dummyModels`);
if (this.dummyModels[modelName]) {
return this.dummyModels[modelName];
}
const dummy = new Model(modelName, {}, true);
this.dummyModels[modelName] = dummy;
return dummy;
}
return this.models[modelName];
}
/**
* @function addModel
* @description Adds a model to the database stash
* @param {string} name
* @param {object} model
*/
addModel(name, model) {
Logger.Database(`ORM Adding ${name}`);
if (this.models[name]) {
Logger.Error(`Redefinition of model ${name}, ignoring.`);
return;
}
const keys = Object.keys(model);
/**
* Make sure that every property has a type and a conatraints array
* If not, add it
* The structure should always look like:
* property: {
* type: DataTypes.VARCHAR(50),
* constraints: [ DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL ]
* }
*/
keys.forEach(key => {
if (typeof model[key] !== 'object') {
const type = model[key];
model[key] = {
type,
constraints: [],
};
}
if (!model[key].constraints) {
model[key].constraints = [];
}
});
this.models[name] = new Model(name, model);
}
/**
* @function resolveDependants
* @description Resolves all the dependancies for the models that have been added where properties weren't available when they were added
*/
// TODO: Make this more maintainable
resolveDepends() {
}
/**
* @function syncModels
* @description Syncs the models to the database
* ONLY run this after all models are properly added
*/
syncModels() {
Logger.Database('ORM Syncing...');
this.resolveDepends();
console.log(this.models.lego_brick);
}
}
module.exports = PSQLObjectRelation;
const Logger = require('../../logger.js');
const DataTypes = require('./types.js');
const DataConstraints = require('./relationships-constraints.js');
const Model = require('./model.js');
/**
* In order to keep the models dynamic and flexible, we need to be able to add
* new models to the database in whatever order the developer wants too. Without
* them worrying about dependancies and such, we can just add them to the database
* in the order they are defined. This class will handle that for us. As well as
* keeping track of the models that have been added to the database.
*/
/**
* @class Database
* @classdesc The Database class is used to create a database instance.
* @param {object} connection - An active instance of a psql database connection
*/
class PSQLObjectRelation {
constructor(psqlConnection) {
Logger.Database('ORM Loading...');
this.connection = psqlConnection;
this.models = [];
// dummyModels are for models that have requested a model that doesn't exist
// the model that doesn't exist will be added here, and once it is added, the
// dummy dependancy will be resolved
this.dummyModels = [];
}
/**
* @function model
* @description Gets a model from the database stash
* @param {string} modelName - The name of the target model
*/
model(modelName) {
// TODO: Resolve the dependancy if it dosen't exist and make a note of it
if (!this.models[modelName]) {
Logger.Database(`Model ${modelName} does not exist, adding to dummyModels`);
if (this.dummyModels[modelName]) {
return this.dummyModels[modelName];
}
const dummy = new Model(modelName, {}, true);
this.dummyModels[modelName] = dummy;
return dummy;
}
return this.models[modelName];
}
/**
* @function addModel
* @description Adds a model to the database stash
* @param {string} name
* @param {object} model
*/
addModel(name, model) {
Logger.Database(`ORM Adding ${name}`);
if (this.models[name]) {
Logger.Error(`Redefinition of model ${name}, ignoring.`);
return;
}
const keys = Object.keys(model);
/**
* Make sure that every property has a type and a conatraints array
* If not, add it
* The structure should always look like:
* property: {
* type: DataTypes.VARCHAR(50),
* constraints: [ DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL ]
* }
*/
keys.forEach(key => {
if (typeof model[key] !== 'object') {
const type = model[key];
model[key] = {
type,
constraints: [],
};
}
if (!model[key].constraints) {
model[key].constraints = [];
}
});
this.models[name] = new Model(name, model);
}
/**
* @function resolveDependants
* @description Resolves all the dependancies for the models that have been added where properties weren't available when they were added
*/
// TODO: Make this more maintainable
resolveDepends() {
}
/**
* @function syncModels
* @description Syncs the models to the database
* ONLY run this after all models are properly added
*/
syncModels() {
Logger.Database('ORM Syncing...');
this.resolveDepends();
console.log(this.models.lego_brick);
}
}
module.exports = PSQLObjectRelation;

82
src/database/psql-entity-framework/model.js
View File

@@ -1,41 +1,41 @@
const Logger = require('../../logger.js');
const DataTypes = require('./types.js');
/**
* @class Model
* @classdesc The Model class is used to create a model instance.
* @param {string} name - The name of the model
* @param {object} properties - The properties of the model
* @param {boolean} dummy - Whether or not the model is a dummy model
*/
class Model {
constructor(name, properties, dummy = false) {
this.name = name;
this.properties = properties;
this.dummy = dummy;
if (dummy) {
Logger.Database(`Model ${name} is dummy: ${dummy}`);
}
Logger.Database(`Model ${name} created, with properties: ${JSON.stringify(properties)}`);
}
property(name) {
if (this.dummy) {
if (this.properties[name]) {
// THIS;
}
this.properties[name] = {
type: DataTypes.INHERET,
referers: [],
constraints: [],
dummy: true,
};
return 'UNRESOVLED PROPERTY';
}
return this.property[name];
}
}
module.exports = Model;
const Logger = require('../../logger.js');
const DataTypes = require('./types.js');
/**
* @class Model
* @classdesc The Model class is used to create a model instance.
* @param {string} name - The name of the model
* @param {object} properties - The properties of the model
* @param {boolean} dummy - Whether or not the model is a dummy model
*/
class Model {
constructor(name, properties, dummy = false) {
this.name = name;
this.properties = properties;
this.dummy = dummy;
if (dummy) {
Logger.Database(`Model ${name} is dummy: ${dummy}`);
}
Logger.Database(`Model ${name} created, with properties: ${JSON.stringify(properties)}`);
}
property(name) {
if (this.dummy) {
if (this.properties[name]) {
// THIS;
}
this.properties[name] = {
type: DataTypes.INHERET,
referers: [],
constraints: [],
dummy: true,
};
return 'UNRESOVLED PROPERTY';
}
return this.property[name];
}
}
module.exports = Model;

58
src/database/psql-entity-framework/relationships-constraints.js
View File

@@ -1,29 +1,29 @@
class RelationshipTypes {
static get PRIMARY_KEY() {
return 'PRIMARY KEY';
}
static get UNIQUE() {
return 'UNIQUE';
}
static get NOT_NULL() {
return 'NOT NULL';
}
static get REFERENCES() {
return 'REFERENCES';
}
// NOT a string, ER framework will handle this
static FOREIGN_KEY_REF(references) {
return { fk: { ref: references } };
}
// ONE TO ONE RELATIONSHIP, again ER framework will handle this
static FOREIGN_KEY_121(type, references) {
return { fk: { ref: references }, type, constraints: [this.UNIQUE] };
}
}
module.exports = RelationshipTypes;
class RelationshipTypes {
static get PRIMARY_KEY() {
return 'PRIMARY KEY';
}
static get UNIQUE() {
return 'UNIQUE';
}
static get NOT_NULL() {
return 'NOT NULL';
}
static get REFERENCES() {
return 'REFERENCES';
}
// NOT a string, ER framework will handle this
static FOREIGN_KEY_REF(references) {
return { fk: { ref: references } };
}
// ONE TO ONE RELATIONSHIP, again ER framework will handle this
static FOREIGN_KEY_121(type, references) {
return { fk: { ref: references }, type, constraints: [this.UNIQUE] };
}
}
module.exports = RelationshipTypes;

70
src/database/psql-entity-framework/types.js
View File

@@ -1,35 +1,35 @@
class DataTypes {
static get INHERET() {
return 'INHERET';
}
static VARCHAR(length) {
return `VARCHAR(${length})`;
}
static get INTEGER() {
return 'INT';
}
static get BIGINT() {
return 'BIGINT';
}
static get DECIMAL() {
return 'DECIMAL';
}
static get TEXT() {
return 'TEXT';
}
static get BOOLEAN() {
return 'BOOLEAN';
}
static get TIMESTAMP() {
return 'TIMESTAMP WITHOUT TIME ZONE';
}
}
module.exports = DataTypes;
class DataTypes {
static get INHERET() {
return 'INHERET';
}
static VARCHAR(length) {
return `VARCHAR(${length})`;
}
static get INTEGER() {
return 'INT';
}
static get BIGINT() {
return 'BIGINT';
}
static get DECIMAL() {
return 'DECIMAL';
}
static get TEXT() {
return 'TEXT';
}
static get BOOLEAN() {
return 'BOOLEAN';
}
static get TIMESTAMP() {
return 'TIMESTAMP WITHOUT TIME ZONE';
}
}
module.exports = DataTypes;

60
src/index.js
View File

@@ -1,30 +1,30 @@
const Logger = require('./logger.js');
const Config = require('./config.js');
const Server = require('./routes/server.js');
const API = require('./routes/api.js');
const Databse = require('./database/database.js');
const ModelManager = require('./models/model-manager.js');
async function main() {
Config.Load();
await Logger.Init({
logLevel: process.env.LOG_LEVEL,
logToConsole: process.env.LOG_CONSOLE,
logFile: process.env.LOG_FILE,
// networkHost: process.env.LOG_NET_HOST,
// networkPort: process.env.LOG_NET_PORT,
});
Logger.Info('Pre-Init Complete');
// const Database = new Databse.IDatabase();
// await Database.connect();
// ModelManager.Init(Database);
// await Database.ORMReady();
Server.Listen(process.env.PORT);
API.Init();
}
main();
const Logger = require('./logger.js');
const Config = require('./config.js');
const Server = require('./routes/server.js');
const API = require('./routes/api.js');
const Databse = require('./database/database.js');
const ModelManager = require('./models/model-manager.js');
async function main() {
Config.Load();
await Logger.Init({
logLevel: process.env.LOG_LEVEL,
logToConsole: process.env.LOG_CONSOLE,
logFile: process.env.LOG_FILE,
// networkHost: process.env.LOG_NET_HOST,
// networkPort: process.env.LOG_NET_PORT,
});
Logger.Info('Pre-Init Complete');
// const Database = new Databse.IDatabase();
// await Database.connect();
// ModelManager.Init(Database);
// await Database.ORMReady();
Server.Listen(process.env.PORT);
API.Init();
}
main();

336
src/logger.js
View File

@@ -1,168 +1,168 @@
// Better than Log4j2022 for now.
const net = require('net');
const fs = require('fs');
const moment = require('moment');
const clc = require('cli-color');
const LEVEL_VERBOSE = 0;
const LEVEL_DEBUG = 1;
const LEVEL_INFO = 2;
const LEVEL_WARN = 3;
const LEVEL_STICK = 9; // regardless, will log
let DoNetworkLogging = false;
// default values
let Options = {
logLevel: LEVEL_VERBOSE,
logToConsole: true,
logFile: null,
networkHost: null,
networkPort: null,
};
let Socket = null;
function getFormatedTimeString() {
return `[${moment().format('YYYY-MM-DD HH:mm:ss.SSS')}]`;
}
// levelSource is the level that the source will log at ie, if levelSource is
// LEVEL_WARN, it will only log if the current level is at or above LEVEL_WARN.
function internalLog(type, message, cConsoleColour, levelSource) {
if (Options.logToConsole && (Options.logLevel <= levelSource)) {
console.log(`${getFormatedTimeString()} [${cConsoleColour(type)}] ${message}`);
}
const m = `${getFormatedTimeString()} [${type}] ${message}`;
if (Options.logFile) {
fs.appendFileSync(Options.logFile, m + '\n');
}
if (Options.networkHost && DoNetworkLogging) {
Socket.write(m + '\n');
}
if (type === 'PANIC') {
Destroy();
process.exit(1);
}
}
const Info = (...messages) => internalLog('INFO', messages.join(' '), clc.greenBright, LEVEL_INFO);
const Warn = (...messages) => internalLog('WARN', messages.join(' '), clc.yellowBright, LEVEL_WARN);
const Error = (...messages) => internalLog('ERROR', messages.join(' '), clc.redBright, LEVEL_STICK);
const Panic = (...messages) => internalLog('PANIC', messages.join(' '), clc.bgRedBright, LEVEL_STICK);
const Debug = (...messages) => internalLog('DEBUG', messages.join(' '), clc.cyanBright, LEVEL_DEBUG);
const Module = (module, ...messages) => internalLog(`MODULE [${module}]`, ` ${messages.join(' ')}`, clc.blue, LEVEL_INFO);
const Database = (...messages) => internalLog('PSQL', `[DB] ${messages.join(' ')}`, clc.blue, LEVEL_INFO);
const ExpressLogger = (req, res, next) => {
internalLog('HTTP', `[${req.method}] ${req.originalUrl} FROM ${req.headers['x-forwarded-for'] || req.socket.remoteAddress}`, clc.magenta, LEVEL_VERBOSE);
next();
};
function startReconnection() {
const x = setInterval(async () => {
if (Options.networkHost && Options.networkPort && !DoNetworkLogging) {
const success = await initNetworkLogger(Options.networkHost, Options.networkPort);
if (success) {
clearInterval(x);
Info('Logger Reonnected');
}
}
}, 30000);
}
function initNetworkLogger(host, port) {
return new Promise((resolve) => {
Socket = net.connect({
port,
host,
family: 4,
onread: {
// Reuses a 4KiB Buffer for every read from the socket.
buffer: Buffer.alloc(4 * 1024),
callback: function (nread, buf) {
Warn(`LogSocket: ${buf.toString('utf8', 0, nread)}`);
},
},
}, () => {
Info('Logger Connected to Network');
DoNetworkLogging = true;
resolve(true);
}).on('error', (err) => {
Error('Logger Disconnected from Network: ', err);
DoNetworkLogging = false;
resolve(false);
});
});
}
function postInit() {
Socket.on('close', () => {
Error('Logger Network Connection Closed');
DoNetworkLogging = false;
startReconnection();
});
Socket.on('error', (err) => {
Error('Logger Disconnected from Network: ', err);
DoNetworkLogging = false;
startReconnection();
});
}
/**
* Initialises the logger
* Options:
* - logLevel: The level of logging to be used ONLY APPLIES TO CONSOLE.
* - logToConsole: Whether to log to the console.
* - logFile: The file to log to, if provided, will log.
* - networkHost: The address to log to, including port, if provided, will log.
* - networkPort: The port to log to, including port, if provided, will log.
* TODO: SSL
* @param {Object} options
*/
async function Init(options) {
Options = options;
if (Options.logFile) {
fs.openSync(Options.logFile, 'w');
fs.appendFileSync(Options.logFile, 'START OF SESSION' + '\n');
}
if (!Options.networkHost || !Options.networkPort) {
return;
}
await initNetworkLogger(Options.networkHost, Options.networkPort);
postInit();
}
function Destroy() {
if (Options.logFile) {
fs.appendFileSync(Options.logFile, 'END OF SESSION' + '\n');
fs.closeSync(Options.logFile);
}
if (Options.networkHost) {
Socket.destroy();
}
}
module.exports = {
LEVEL_VERBOSE,
LEVEL_DEBUG,
LEVEL_INFO,
LEVEL_WARN,
Init,
Destroy,
Info,
Warn,
Error,
Panic,
Debug,
Module,
Database,
ExpressLogger,
};
// Better than Log4j2022 for now.
const net = require('net');
const fs = require('fs');
const moment = require('moment');
const clc = require('cli-color');
const LEVEL_VERBOSE = 0;
const LEVEL_DEBUG = 1;
const LEVEL_INFO = 2;
const LEVEL_WARN = 3;
const LEVEL_STICK = 9; // regardless, will log
let DoNetworkLogging = false;
// default values
let Options = {
logLevel: LEVEL_VERBOSE,
logToConsole: true,
logFile: null,
networkHost: null,
networkPort: null,
};
let Socket = null;
function getFormatedTimeString() {
return `[${moment().format('YYYY-MM-DD HH:mm:ss.SSS')}]`;
}
// levelSource is the level that the source will log at ie, if levelSource is
// LEVEL_WARN, it will only log if the current level is at or above LEVEL_WARN.
function internalLog(type, message, cConsoleColour, levelSource) {
if (Options.logToConsole && (Options.logLevel <= levelSource)) {
console.log(`${getFormatedTimeString()} [${cConsoleColour(type)}] ${message}`);
}
const m = `${getFormatedTimeString()} [${type}] ${message}`;
if (Options.logFile) {
fs.appendFileSync(Options.logFile, m + '\n');
}
if (Options.networkHost && DoNetworkLogging) {
Socket.write(m + '\n');
}
if (type === 'PANIC') {
Destroy();
process.exit(1);
}
}
const Info = (...messages) => internalLog('INFO', messages.join(' '), clc.greenBright, LEVEL_INFO);
const Warn = (...messages) => internalLog('WARN', messages.join(' '), clc.yellowBright, LEVEL_WARN);
const Error = (...messages) => internalLog('ERROR', messages.join(' '), clc.redBright, LEVEL_STICK);
const Panic = (...messages) => internalLog('PANIC', messages.join(' '), clc.bgRedBright, LEVEL_STICK);
const Debug = (...messages) => internalLog('DEBUG', messages.join(' '), clc.cyanBright, LEVEL_DEBUG);
const Module = (module, ...messages) => internalLog(`MODULE [${module}]`, ` ${messages.join(' ')}`, clc.blue, LEVEL_INFO);
const Database = (...messages) => internalLog('PSQL', `[DB] ${messages.join(' ')}`, clc.blue, LEVEL_INFO);
const ExpressLogger = (req, res, next) => {
internalLog('HTTP', `[${req.method}] ${req.originalUrl} FROM ${req.headers['x-forwarded-for'] || req.socket.remoteAddress}`, clc.magenta, LEVEL_VERBOSE);
next();
};
function startReconnection() {
const x = setInterval(async () => {
if (Options.networkHost && Options.networkPort && !DoNetworkLogging) {
const success = await initNetworkLogger(Options.networkHost, Options.networkPort);
if (success) {
clearInterval(x);
Info('Logger Reonnected');
}
}
}, 30000);
}
function initNetworkLogger(host, port) {
return new Promise((resolve) => {
Socket = net.connect({
port,
host,
family: 4,
onread: {
// Reuses a 4KiB Buffer for every read from the socket.
buffer: Buffer.alloc(4 * 1024),
callback: function (nread, buf) {
Warn(`LogSocket: ${buf.toString('utf8', 0, nread)}`);
},
},
}, () => {
Info('Logger Connected to Network');
DoNetworkLogging = true;
resolve(true);
}).on('error', (err) => {
Error('Logger Disconnected from Network: ', err);
DoNetworkLogging = false;
resolve(false);
});
});
}
function postInit() {
Socket.on('close', () => {
Error('Logger Network Connection Closed');
DoNetworkLogging = false;
startReconnection();
});
Socket.on('error', (err) => {
Error('Logger Disconnected from Network: ', err);
DoNetworkLogging = false;
startReconnection();
});
}
/**
* Initialises the logger
* Options:
* - logLevel: The level of logging to be used ONLY APPLIES TO CONSOLE.
* - logToConsole: Whether to log to the console.
* - logFile: The file to log to, if provided, will log.
* - networkHost: The address to log to, including port, if provided, will log.
* - networkPort: The port to log to, including port, if provided, will log.
* TODO: SSL
* @param {Object} options
*/
async function Init(options) {
Options = options;
if (Options.logFile) {
fs.openSync(Options.logFile, 'w');
fs.appendFileSync(Options.logFile, 'START OF SESSION' + '\n');
}
if (!Options.networkHost || !Options.networkPort) {
return;
}
await initNetworkLogger(Options.networkHost, Options.networkPort);
postInit();
}
function Destroy() {
if (Options.logFile) {
fs.appendFileSync(Options.logFile, 'END OF SESSION' + '\n');
fs.closeSync(Options.logFile);
}
if (Options.networkHost) {
Socket.destroy();
}
}
module.exports = {
LEVEL_VERBOSE,
LEVEL_DEBUG,
LEVEL_INFO,
LEVEL_WARN,
Init,
Destroy,
Info,
Warn,
Error,
Panic,
Debug,
Module,
Database,
ExpressLogger,
};

34
src/models/catagory.js
View File

@@ -1,17 +1,17 @@
const Models = require('./model-manager.js');
const { DataTypes, DataConstraints } = require('../database/database.js');
const { ORM } = Models.Database;
function Init() {
ORM.addModel('catagory', {
id: {
type: DataTypes.INTEGER,
constraints: [DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL],
},
name: DataTypes.VARCHAR(100),
});
}
module.exports = {
Init,
};
const Models = require('./model-manager.js');
const { DataTypes, DataConstraints } = require('../database/database.js');
const { ORM } = Models.Database;
function Init() {
ORM.addModel('catagory', {
id: {
type: DataTypes.INTEGER,
constraints: [DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL],
},
name: DataTypes.VARCHAR(100),
});
}
module.exports = {
Init,
};

48
src/models/lego-brick.js
View File

@@ -1,24 +1,24 @@
const Models = require('./model-manager.js');
const { DataTypes, DataConstraints } = require('../database/database.js');
const { ORM } = Models.Database;
function Init() {
ORM.addModel('lego_brick', {
id: {
type: DataTypes.VARCHAR(50),
constraints: [DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL],
},
catagory: {
type: DataTypes.INTEGER,
constraints: [DataConstraints.FOREIGN_KEY_REF(ORM.model('catagory').property('id'))],
},
date_released: DataTypes.TIMESTAMP,
dimenions_x: DataTypes.DECIMAL,
dimenions_y: DataTypes.DECIMAL,
dimenions_z: DataTypes.DECIMAL,
});
}
module.exports = {
Init,
};
const Models = require('./model-manager.js');
const { DataTypes, DataConstraints } = require('../database/database.js');
const { ORM } = Models.Database;
function Init() {
ORM.addModel('lego_brick', {
id: {
type: DataTypes.VARCHAR(50),
constraints: [DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL],
},
catagory: {
type: DataTypes.INTEGER,
constraints: [DataConstraints.FOREIGN_KEY_REF(ORM.model('catagory').property('id'))],
},
date_released: DataTypes.TIMESTAMP,
dimenions_x: DataTypes.DECIMAL,
dimenions_y: DataTypes.DECIMAL,
dimenions_z: DataTypes.DECIMAL,
});
}
module.exports = {
Init,
};

38
src/models/model-manager.js
View File

@@ -1,19 +1,19 @@
const fs = require('fs');
function Init(databaseInstance) {
module.exports.Database = databaseInstance;
module.exports.Models = {};
const files = fs.readdirSync(__dirname).reverse();
files.forEach(file => {
if (file !== 'model-manager.js') {
const model = require(`./${file}`);
module.exports.Models[file.split('.')[0]] = model;
model.Init();
}
});
}
module.exports = {
Init,
};
const fs = require('fs');
function Init(databaseInstance) {
module.exports.Database = databaseInstance;
module.exports.Models = {};
const files = fs.readdirSync(__dirname).reverse();
files.forEach(file => {
if (file !== 'model-manager.js') {
const model = require(`./${file}`);
module.exports.Models[file.split('.')[0]] = model;
model.Init();
}
});
}
module.exports = {
Init,
};

70
src/routes/api.js
View File

@@ -1,35 +1,35 @@
const Logger = require('../logger.js');
const Server = require('./server.js');
const Bricks = require('./bricks-router.js');
const Sets = require('./sets-router.js');
const Query = require('./query-router.js');
const Auth0 = require('./auth0-router.js');
function Init() {
Server.App.get('/api/search/', []);
Server.App.get('/api/bricks/', Bricks.Query);
Server.App.get('/api/sets/');
Server.App.get('/api/sets/featured/', Sets.Featured);
Server.App.get('/api/brick/:id/');
Server.App.get('/api/set/:id/');
Server.App.get('/api/cdn/:id/');
Server.App.put('/api/auth/login/');
Server.App.post('/api/auth/signup/');
Server.App.get('/api/auth/orders/');
Server.App.get('/api/auth/order/:id/');
Server.App.get('/api/auth/basket/');
Server.App.put('/api/auth/basket/:id/');
Server.App.post('/api/auth/basket/:id/');
Server.App.delete('/api/auth/basket/:id/');
Server.App.delete('/api/auth/basket/');
Logger.Module('API', 'API Routes Initialized');
}
module.exports = {
Init,
};
const Logger = require('../logger.js');
const Server = require('./server.js');
const Bricks = require('./bricks-router.js');
const Sets = require('./sets-router.js');
const Query = require('./query-router.js');
const Auth0 = require('./auth0-router.js');
function Init() {
Server.App.get('/api/search/', []);
Server.App.get('/api/bricks/', Bricks.Query);
Server.App.get('/api/sets/');
Server.App.get('/api/sets/featured/', Sets.Featured);
Server.App.get('/api/brick/:id/');
Server.App.get('/api/set/:id/');
Server.App.get('/api/cdn/:id/');
Server.App.put('/api/auth/login/');
Server.App.post('/api/auth/signup/');
Server.App.get('/api/auth/orders/');
Server.App.get('/api/auth/order/:id/');
Server.App.get('/api/auth/basket/');
Server.App.put('/api/auth/basket/:id/');
Server.App.post('/api/auth/basket/:id/');
Server.App.delete('/api/auth/basket/:id/');
Server.App.delete('/api/auth/basket/');
Logger.Module('API', 'API Routes Initialized');
}
module.exports = {
Init,
};

66
src/routes/bricks-router.js
View File

@@ -1,33 +1,33 @@
const Controller = require('../controllers/brick-controller.js');
function Query(req, res, next) {
const query = req.query;
// Validation
const validation = Controller.ValidateQuery(query);
if (!validation.isValid) {
return res.status(400).json({
error: {
short: validation.error,
long: validation.longError,
},
});
}
// Query
Controller.Query(query, (err, data) => {
if (err) {
return res.status(500).json({
error: err,
});
}
res.json(data);
});
next();
}
module.exports = {
Query,
};
const Controller = require('../controllers/brick-controller.js');
function Query(req, res, next) {
const query = req.query;
// Validation
const validation = Controller.ValidateQuery(query);
if (!validation.isValid) {
return res.status(400).json({
error: {
short: validation.error,
long: validation.longError,
},
});
}
// Query
Controller.Query(query, (err, data) => {
if (err) {
return res.status(500).json({
error: err,
});
}
res.json(data);
});
next();
}
module.exports = {
Query,
};

38
src/routes/server.js
View File

@@ -1,19 +1,19 @@
const Logger = require('../logger.js');
const express = require('express');
const app = express();
function listen(port) {
app.listen(port);
Logger.Info(`Listening on ${port}...`);
Logger.Info('Setting up basic middleware...');
app.use(Logger.ExpressLogger);
app.use(express.static('client/public/'));
}
module.exports = {
App: app,
Listen: listen,
};
const Logger = require('../logger.js');
const express = require('express');
const app = express();
function listen(port) {
app.listen(port);
Logger.Info(`Listening on ${port}...`);
Logger.Info('Setting up basic middleware...');
app.use(Logger.ExpressLogger);
app.use(express.static('client/public/'));
}
module.exports = {
App: app,
Listen: listen,
};

98
src/routes/sets-router.js
View File

@@ -1,49 +1,49 @@
const Controller = require('../controllers/set-controller.js');
function Featured(req, res, next) {
const query = req.query;
res.send(JSON.stringify({
data: [
{
id: '1',
name: 'Brick 1',
description: 'Brick 1 description',
price: '1.00',
image: 'https://via.placeholder.com/300x300',
},
{
id: '2',
name: 'Brick 2',
description: 'Brick 2 description',
price: '2.00',
image: 'https://via.placeholder.com/300x300',
},
{
id: '3',
name: 'Brick 3',
description: 'Brick 3 description',
price: '3.00',
image: 'https://via.placeholder.com/300x300',
},
],
}));
// Validation
// const validation = Controller.ValidateQuery(query);
// if (!validation.isValid) {
// return res.status(400).json({
// error: {
// short: validation.error,
// long: validation.longError,
// },
// });
// }
// next();
}
module.exports = {
Featured,
};
const Controller = require('../controllers/set-controller.js');
function Featured(req, res, next) {
const query = req.query;
res.send(JSON.stringify({
data: [
{
id: '1',
name: 'Brick 1',
description: 'Brick 1 description',
price: '1.00',
image: 'https://via.placeholder.com/300x300',
},
{
id: '2',
name: 'Brick 2',
description: 'Brick 2 description',
price: '2.00',
image: 'https://via.placeholder.com/300x300',
},
{
id: '3',
name: 'Brick 3',
description: 'Brick 3 description',
price: '3.00',
image: 'https://via.placeholder.com/300x300',
},
],
}));
// Validation
// const validation = Controller.ValidateQuery(query);
// if (!validation.isValid) {
// return res.status(400).json({
// error: {
// short: validation.error,
// long: validation.longError,
// },
// });
// }
// next();
}
module.exports = {
Featured,
};