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 NODE_ENV=dev
PORT=80 PORT=80
PORT_DEV=8080 PORT_DEV=8080
LOG_LEVEL=0 LOG_LEVEL=0
LOG_CONSOLE=true LOG_CONSOLE=true
LOG_PATH=logs.log LOG_PATH=logs.log
LOG_NET_HOST=127.0.0.1 LOG_NET_HOST=127.0.0.1
LOG_NET_PORT=21 LOG_NET_PORT=21
DATABASE_HOST=localhost DATABASE_HOST=localhost
DATABASE_PORT=5432 DATABASE_PORT=5432
DATABASE_DB=legolog DATABASE_DB=legolog
DATABASE_DB_DEV=legologdev DATABASE_DB_DEV=legologdev
DATABASE_USER=postgres DATABASE_USER=postgres
DATABASE_PASSWORD=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/ node_modules/
logs.log logs.log
db/image/*/ db/image/*/

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

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

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

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

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

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

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

@@ -1,130 +1,130 @@
import { mat4, vec3 } from './glm/glm.mjs'; import { mat4, vec3 } from './glm/glm.mjs';
import Shader from './shader.mjs'; import Shader from './shader.mjs';
import Box from './box.mjs'; import Box from './box.mjs';
import LoadObj from './wavefront-obj.mjs'; import LoadObj from './wavefront-obj.mjs';
let BasicVsource, BasicFSource; let BasicVsource, BasicFSource;
let LegoStudObjSource, LegoStudObjParseResult; let LegoStudObjSource, LegoStudObjParseResult;
export async function RendererPreInit() { export async function RendererPreInit() {
BasicFSource = await fetch('./brick-renderer/basic.fs').then(r => r.text()); BasicFSource = await fetch('./brick-renderer/basic.fs').then(r => r.text());
BasicVsource = await fetch('./brick-renderer/basic.vs').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()); LegoStudObjSource = await fetch('./res/lego_stud.obj').then(r => r.text());
LegoStudObjParseResult = LoadObj(LegoStudObjSource); LegoStudObjParseResult = LoadObj(LegoStudObjSource);
console.log(LegoStudObjParseResult); console.log(LegoStudObjParseResult);
} }
class BaseRenderer { class BaseRenderer {
constructor(canvas) { constructor(canvas) {
this.canvas = canvas; this.canvas = canvas;
this.gl = canvas.getContext('webgl2'); this.gl = canvas.getContext('webgl2');
this.gl.viewport(0, 0, canvas.width, canvas.height); this.gl.viewport(0, 0, canvas.width, canvas.height);
this.gl.clearColor(0.84313, 0.76078, 1.0, 1.0); this.gl.clearColor(0.84313, 0.76078, 1.0, 1.0);
this.gl.enable(this.gl.DEPTH_TEST); this.gl.enable(this.gl.DEPTH_TEST);
this.shader = new Shader(this.gl, BasicVsource, BasicFSource); this.shader = new Shader(this.gl, BasicVsource, BasicFSource);
this.shader.link(); this.shader.link();
WebGLDebugUtils.init(this.gl); WebGLDebugUtils.init(this.gl);
} }
} }
export class BrickRenderer extends BaseRenderer { export class BrickRenderer extends BaseRenderer {
constructor(canvas, options) { constructor(canvas, options) {
super(canvas); super(canvas);
this.angleX = 0; this.angleX = 0;
this.angleY = 0; this.angleY = 0;
// random number between 0 and 0.1 // random number between 0 and 0.1
this.dx = Math.random() * 0.09; this.dx = Math.random() * 0.09;
this.dy = Math.random() * 0.09; this.dy = Math.random() * 0.09;
///////////////////////// /////////////////////////
// TESTING LEGO STUDS // // TESTING LEGO STUDS //
this.VAO = this.gl.createVertexArray(); this.VAO = this.gl.createVertexArray();
this.gl.bindVertexArray(this.VAO); this.gl.bindVertexArray(this.VAO);
this.VBO = this.gl.createBuffer(); this.VBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.VBO); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.VBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.vertices, this.gl.STATIC_DRAW); 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.vertexAttribPointer(0, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(0); this.gl.enableVertexAttribArray(0);
const nVBO = this.gl.createBuffer(); const nVBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, nVBO); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, nVBO);
this.gl.bufferData(this.gl.ARRAY_BUFFER, LegoStudObjParseResult.normals, this.gl.STATIC_DRAW); 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.vertexAttribPointer(1, 3, this.gl.FLOAT, false, 0, 0);
this.gl.enableVertexAttribArray(1); this.gl.enableVertexAttribArray(1);
this.EBO = this.gl.createBuffer(); this.EBO = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO); this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, LegoStudObjParseResult.indices, this.gl.STATIC_DRAW); this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, LegoStudObjParseResult.indices, this.gl.STATIC_DRAW);
// TESTING LEGO STUDS // // TESTING LEGO STUDS //
///////////////////////// /////////////////////////
this.sceneUniformLocation = this.shader.getUniformBlock('SceneUniforms'); this.sceneUniformLocation = this.shader.getUniformBlock('SceneUniforms');
this.modelMatrixLocation = this.shader.getUniform('uView'); this.modelMatrixLocation = this.shader.getUniform('uView');
this.shader.attatch(); this.shader.attatch();
this.boxObj = new Box(this.gl, { dimensions: [0.5, 0.6, 0.5] }); this.boxObj = new Box(this.gl, { dimensions: [0.5, 0.6, 0.5] });
this.boxObj.create(); this.boxObj.create();
const projMatrix = mat4.create(); const projMatrix = mat4.create();
mat4.perspective(projMatrix, Math.PI / 2, this.gl.drawingBufferWidth / this.gl.drawingBufferHeight, 0.1, 10.0); mat4.perspective(projMatrix, Math.PI / 2, this.gl.drawingBufferWidth / this.gl.drawingBufferHeight, 0.1, 10.0);
const viewMatrix = mat4.create(); const viewMatrix = mat4.create();
const eyePosition = vec3.fromValues(1, 1, 1); const eyePosition = vec3.fromValues(1, 1, 1);
mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0)); mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
const viewProjMatrix = mat4.create(); const viewProjMatrix = mat4.create();
mat4.multiply(viewProjMatrix, projMatrix, viewMatrix); mat4.multiply(viewProjMatrix, projMatrix, viewMatrix);
const lightPosition = vec3.fromValues(1, 1, 0.5); const lightPosition = vec3.fromValues(1, 1, 0.5);
this.modelMatrix = mat4.create(); this.modelMatrix = mat4.create();
this.rotateXMatrix = mat4.create(); this.rotateXMatrix = mat4.create();
this.rotateYMatrix = mat4.create(); this.rotateYMatrix = mat4.create();
const sceneUniformData = new Float32Array(24); const sceneUniformData = new Float32Array(24);
sceneUniformData.set(viewProjMatrix); sceneUniformData.set(viewProjMatrix);
sceneUniformData.set(eyePosition, 16); sceneUniformData.set(eyePosition, 16);
sceneUniformData.set(lightPosition, 20); sceneUniformData.set(lightPosition, 20);
const sceneUniformBuffer = this.gl.createBuffer(); const sceneUniformBuffer = this.gl.createBuffer();
this.gl.bindBufferBase(this.gl.UNIFORM_BUFFER, 0, sceneUniformBuffer); this.gl.bindBufferBase(this.gl.UNIFORM_BUFFER, 0, sceneUniformBuffer);
this.gl.bufferData(this.gl.UNIFORM_BUFFER, sceneUniformData, this.gl.STATIC_DRAW); this.gl.bufferData(this.gl.UNIFORM_BUFFER, sceneUniformData, this.gl.STATIC_DRAW);
requestAnimationFrame(this.draw.bind(this)); requestAnimationFrame(this.draw.bind(this));
} }
draw() { draw() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.angleX += this.dx; this.angleX += this.dx;
this.angleY += this.dy; this.angleY += this.dy;
mat4.fromXRotation(this.rotateXMatrix, this.angleX); mat4.fromXRotation(this.rotateXMatrix, this.angleX);
mat4.fromYRotation(this.rotateYMatrix, this.angleY); mat4.fromYRotation(this.rotateYMatrix, this.angleY);
mat4.multiply(this.modelMatrix, this.rotateXMatrix, this.rotateYMatrix); mat4.multiply(this.modelMatrix, this.rotateXMatrix, this.rotateYMatrix);
this.gl.uniformMatrix4fv(this.modelMatrixLocation, false, this.modelMatrix); this.gl.uniformMatrix4fv(this.modelMatrixLocation, false, this.modelMatrix);
this.gl.bindVertexArray(this.VAO); this.gl.bindVertexArray(this.VAO);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.EBO); 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.gl.drawElements(this.gl.TRIANGLES, LegoStudObjParseResult.indices.length * 3, this.gl.UNSIGNED_SHORT, 0);
// this.boxObj.bind(); // this.boxObj.bind();
// this.gl.drawArrays(this.gl.TRIANGLES, 0, this.boxObj.vertexCount); // this.gl.drawArrays(this.gl.TRIANGLES, 0, this.boxObj.vertexCount);
if (this.gl.getError() !== this.gl.NO_ERROR) { if (this.gl.getError() !== this.gl.NO_ERROR) {
console.error(WebGLDebugUtils.glEnumToString(this.gl.getError())); console.error(WebGLDebugUtils.glEnumToString(this.gl.getError()));
} }
requestAnimationFrame(this.draw.bind(this)); 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'; import { mat4, vec3, vec4 } from './glm/glm.mjs';
export class Material { export class Material {
constructor(gl, colour = [0.89019607843, 0.0, 0.00392156862], shininess = 20.0) { constructor(gl, colour = [0.89019607843, 0.0, 0.00392156862], shininess = 20.0) {
this.gl = gl; this.gl = gl;
this.colour = colour; this.colour = colour;
this.shininess = shininess; this.shininess = shininess;
} }
} }
export class Renderable { export class Renderable {
constructor(gl, shader, material = new Material()) { constructor(gl, shader, material = new Material()) {
this.gl = gl; this.gl = gl;
// TODO: Get these from the shader // TODO: Get these from the shader
this.attributeLocations = { this.attributeLocations = {
position: 0, position: 0,
normal: 1, normal: 1,
}; };
this.buffers = { this.buffers = {
vertexBuffer: null, vertexBuffer: null,
normalBuffer: null, normalBuffer: null,
faceBuffer: null, faceBuffer: null,
}; };
this.data = { this.data = {
verticies: [], verticies: [],
normals: [], normals: [],
faces: [], faces: [],
}; };
this.shader = shader; this.shader = shader;
this.material = material; this.material = material;
this.uniforms = { this.uniforms = {
modelMatrix: mat4.create(), modelMatrix: mat4.create(),
u_modelMatrix: null, u_modelMatrix: null,
viewMatrix: mat4.create(), viewMatrix: mat4.create(),
u_viewMatrix: null, u_viewMatrix: null,
projectionMatrix: mat4.create(), projectionMatrix: mat4.create(),
u_projectionMatrix: null, u_projectionMatrix: null,
lightPosition: vec3.create(), lightPosition: vec3.create(),
u_lightPosition: null, u_lightPosition: null,
ambientLightColor: vec3.fromValues(0.2, 0.2, 0.2), ambientLightColor: vec3.fromValues(0.2, 0.2, 0.2),
u_ambientLightColor: null, u_ambientLightColor: null,
diffuseLightColor: vec3.fromValues(0.8, 0.8, 0.8), diffuseLightColor: vec3.fromValues(0.8, 0.8, 0.8),
u_diffuseLightColor: null, u_diffuseLightColor: null,
specularLightColor: vec3.fromValues(1.0, 1.0, 1.0), specularLightColor: vec3.fromValues(1.0, 1.0, 1.0),
u_specularLightColor: null, u_specularLightColor: null,
lightIntensity: 1.0, lightIntensity: 1.0,
u_lightIntensity: null, u_lightIntensity: null,
ambientIntensity: 1.0, ambientIntensity: 1.0,
u_ambientIntensity: null, u_ambientIntensity: null,
}; };
} }
} }
export class LegoBrickRenderable { export class LegoBrickRenderable {
} }

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

@@ -1,127 +1,127 @@
export default class Shader { export default class Shader {
constructor(gl, vSource, fSource) { constructor(gl, vSource, fSource) {
this.gl = gl; this.gl = gl;
this.vSource = vSource; this.vSource = vSource;
this.fSource = fSource; this.fSource = fSource;
this.uniformBlockNum = 0; this.uniformBlockNum = 0;
this.shaderProgram = 123; this.shaderProgram = 123;
this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER);
this.gl.shaderSource(this.vShader, this.vSource); this.gl.shaderSource(this.vShader, this.vSource);
this.gl.compileShader(this.vShader); this.gl.compileShader(this.vShader);
if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) { if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.vShader)); console.error(this.gl.getShaderInfoLog(this.vShader));
} }
this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.gl.shaderSource(this.fShader, this.fSource); this.gl.shaderSource(this.fShader, this.fSource);
this.gl.compileShader(this.fShader); this.gl.compileShader(this.fShader);
if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) { if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) {
console.error(this.gl.getShaderInfoLog(this.fShader)); console.error(this.gl.getShaderInfoLog(this.fShader));
} }
} }
get vertexShader() { get vertexShader() {
return this.vShader; return this.vShader;
} }
get fragmentShader() { get fragmentShader() {
return this.fShader; return this.fShader;
} }
get program() { get program() {
return this.shaderProgram; return this.shaderProgram;
} }
getUniformBlock(name) { getUniformBlock(name) {
const location = this.gl.getUniformBlockIndex(this.shaderProgram, name); const location = this.gl.getUniformBlockIndex(this.shaderProgram, name);
this.gl.uniformBlockBinding(this.shaderProgram, location, this.uniformBlockNum); this.gl.uniformBlockBinding(this.shaderProgram, location, this.uniformBlockNum);
this.uniformBlockNum++; this.uniformBlockNum++;
return location; return location;
} }
getUniform(name) { getUniform(name) {
return this.gl.getUniformLocation(this.shaderProgram, name); return this.gl.getUniformLocation(this.shaderProgram, name);
} }
attribLocation(location, name) { attribLocation(location, name) {
this.gl.bindAttribLocation(this.shaderProgram, location, name); this.gl.bindAttribLocation(this.shaderProgram, location, name);
} }
setUniform(uniform, value) { setUniform(uniform, value) {
switch (uniform.type) { switch (uniform.type) {
case this.gl.FLOAT: case this.gl.FLOAT:
this.gl.uniform1f(uniform, value); this.gl.uniform1f(uniform, value);
break; break;
case this.gl.FLOAT_VEC2: case this.gl.FLOAT_VEC2:
this.gl.uniform2f(uniform, value[0], value[1]); this.gl.uniform2f(uniform, value[0], value[1]);
break; break;
case this.gl.FLOAT_VEC3: case this.gl.FLOAT_VEC3:
this.gl.uniform3f(uniform, value[0], value[1], value[2]); this.gl.uniform3f(uniform, value[0], value[1], value[2]);
break; break;
case this.gl.FLOAT_VEC4: case this.gl.FLOAT_VEC4:
this.gl.uniform4f(uniform, value[0], value[1], value[2], value[3]); this.gl.uniform4f(uniform, value[0], value[1], value[2], value[3]);
break; break;
case this.gl.INT: case this.gl.INT:
this.gl.uniform1i(uniform, value); this.gl.uniform1i(uniform, value);
break; break;
case this.gl.INT_VEC2: case this.gl.INT_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]); this.gl.uniform2i(uniform, value[0], value[1]);
break; break;
case this.gl.INT_VEC3: case this.gl.INT_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]); this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break; break;
case this.gl.INT_VEC4: case this.gl.INT_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]); this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break; break;
case this.gl.BOOL: case this.gl.BOOL:
this.gl.uniform1i(uniform, value); this.gl.uniform1i(uniform, value);
break; break;
case this.gl.BOOL_VEC2: case this.gl.BOOL_VEC2:
this.gl.uniform2i(uniform, value[0], value[1]); this.gl.uniform2i(uniform, value[0], value[1]);
break; break;
case this.gl.BOOL_VEC3: case this.gl.BOOL_VEC3:
this.gl.uniform3i(uniform, value[0], value[1], value[2]); this.gl.uniform3i(uniform, value[0], value[1], value[2]);
break; break;
case this.gl.BOOL_VEC4: case this.gl.BOOL_VEC4:
this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]); this.gl.uniform4i(uniform, value[0], value[1], value[2], value[3]);
break; break;
case this.gl.FLOAT_MAT2: case this.gl.FLOAT_MAT2:
this.gl.uniformMatrix2fv(uniform, false, value); this.gl.uniformMatrix2fv(uniform, false, value);
break; break;
case this.gl.FLOAT_MAT3: case this.gl.FLOAT_MAT3:
this.gl.uniformMatrix3fv(uniform, false, value); this.gl.uniformMatrix3fv(uniform, false, value);
break; break;
case this.gl.FLOAT_MAT4: case this.gl.FLOAT_MAT4:
this.gl.uniformMatrix4fv(uniform, false, value); this.gl.uniformMatrix4fv(uniform, false, value);
break; break;
case this.gl.SAMPLER_2D: case this.gl.SAMPLER_2D:
this.gl.uniform1i(uniform, value); this.gl.uniform1i(uniform, value);
break; break;
case this.gl.SAMPLER_CUBE: case this.gl.SAMPLER_CUBE:
this.gl.uniform1i(uniform, value); this.gl.uniform1i(uniform, value);
break; break;
default: default:
console.error(`Unsupported uniform type ${uniform.type}`); console.error(`Unsupported uniform type ${uniform.type}`);
} }
} }
link() { link() {
this.shaderProgram = this.gl.createProgram(); this.shaderProgram = this.gl.createProgram();
this.gl.attachShader(this.shaderProgram, this.vShader); this.gl.attachShader(this.shaderProgram, this.vShader);
this.gl.attachShader(this.shaderProgram, this.fShader); this.gl.attachShader(this.shaderProgram, this.fShader);
this.gl.linkProgram(this.shaderProgram); this.gl.linkProgram(this.shaderProgram);
if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) { if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
console.error(this.gl.getProgramParameter(this.shaderProgram)); console.error(this.gl.getProgramParameter(this.shaderProgram));
} }
} }
attatch() { attatch() {
this.gl.useProgram(this.shaderProgram); 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 // Looseley based on https://webglfundamentals.org/webgl/lessons/webgl-load-obj.html
// returns verticies, normals and indicies // returns verticies, normals and indicies
// (texture coordinates are for nerds) // (texture coordinates are for nerds)
export default function LoadObj(objText) { export default function LoadObj(objText) {
const lines = objText.split('\n'); const lines = objText.split('\n');
const v = []; const v = [];
const vn = []; const vn = [];
const f = []; const f = [];
const fn = []; const fn = [];
for (const line of lines) { for (const line of lines) {
const words = line.split(' '); const words = line.split(' ');
if (words[0] === 'v') { if (words[0] === 'v') {
// verticies // verticies
const x = parseFloat(words[1]); const x = parseFloat(words[1]);
const y = parseFloat(words[2]); const y = parseFloat(words[2]);
const z = parseFloat(words[3]); const z = parseFloat(words[3]);
const vert = [x, y, z]; const vert = [x, y, z];
v.push(vert); v.push(vert);
} else if (words[0] === 'vn') { } else if (words[0] === 'vn') {
// normals // normals
const nx = parseFloat(words[1]); const nx = parseFloat(words[1]);
const ny = parseFloat(words[2]); const ny = parseFloat(words[2]);
const nz = parseFloat(words[3]); const nz = parseFloat(words[3]);
const n = [nx, ny, nz]; const n = [nx, ny, nz];
vn.push(n); vn.push(n);
} else if (words[0] === 'f') { } else if (words[0] === 'f') {
// indicies // indicies
const pos = []; const pos = [];
const nor = []; const nor = [];
for (let i = 1; i < words.length; i++) { for (let i = 1; i < words.length; i++) {
const face = words[i].split('//'); const face = words[i].split('//');
const v = parseInt(face[0]); const v = parseInt(face[0]);
const n = parseInt(face[1]); const n = parseInt(face[1]);
pos.push(v); pos.push(v);
nor.push(n); nor.push(n);
} }
f.push(pos); f.push(pos);
fn.push(nor); fn.push(nor);
} }
} }
return { return {
vertices: v, vertices: v,
normals: vn, normals: vn,
indices: f, indices: f,
normalIndicies: fn, 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'; import { RegisterComponent, Component, SideLoad } from './components.mjs';
class CompactProductListing extends Component { class CompactProductListing extends Component {
static __IDENTIFY() { return 'compact-listing'; } static __IDENTIFY() { return 'compact-listing'; }
constructor() { constructor() {
super(CompactProductListing); super(CompactProductListing);
} }
Render() { Render() {
return { return {
template: ` template: `
{this.state.name} {this.state.name}
{this.state.desc} {this.state.desc}
£{this.state.price} £{this.state.price}
<img src="{this.state.image}"></img> <img src="{this.state.image}"></img>
`, `,
style: ` style: `
compact-listing-component { compact-listing-component {
display: flex; display: flex;
} }
`, `,
}; };
} }
OnceRendered() { OnceRendered() {
} }
} }
RegisterComponent(CompactProductListing); RegisterComponent(CompactProductListing);

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

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

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

@@ -1,266 +1,266 @@
.navbar { .navbar {
position: sticky; position: sticky;
display: flex; display: flex;
font-family: 'Josefin Sans', sans-serif; font-family: 'Josefin Sans', sans-serif;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 2.3em; font-size: 2.3em;
margin: auto; margin: auto;
padding-top: 1em; padding-top: 1em;
color: #222; color: #222;
} }
.push-right { .push-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: auto; margin-left: auto;
text-align: right; text-align: right;
} }
.push-down { .push-down {
align-self: flex-end; align-self: flex-end;
flex-basis: 100%; flex-basis: 100%;
margin-top: auto; margin-top: auto;
} }
.logo { .logo {
flex-grow: 2; flex-grow: 2;
transform: translatey(-40%); transform: translatey(-40%);
} }
.hamburger { .hamburger {
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
display: none; display: none;
outline: none; outline: none;
position: relative; position: relative;
height: 60px; height: 60px;
width: 60px; width: 60px;
z-index: 200; z-index: 200;
} }
.hamburger-line { .hamburger-line {
background: #222; background: #222;
height: 6px; height: 6px;
position: absolute; position: absolute;
left: 0; left: 0;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
width: 100%; width: 100%;
} }
.hamburger:hover .hamburger-line { .hamburger:hover .hamburger-line {
background: #555; background: #555;
} }
.hamburger-line-top { .hamburger-line-top {
top: 3px; top: 3px;
} }
.menu-active .hamburger-line-top { .menu-active .hamburger-line-top {
top: 50%; top: 50%;
transform: rotate(45deg) translatey(-50%); transform: rotate(45deg) translatey(-50%);
} }
.hamburger-line-middle { .hamburger-line-middle {
top: 50%; top: 50%;
transform: translatey(-50%); transform: translatey(-50%);
} }
.menu-active .hamburger-line-middle { .menu-active .hamburger-line-middle {
left: 50%; left: 50%;
opacity: 0; opacity: 0;
width: 0; width: 0;
} }
.hamburger-line-bottom { .hamburger-line-bottom {
bottom: 3px; bottom: 3px;
} }
.menu-active .hamburger-line-bottom { .menu-active .hamburger-line-bottom {
bottom: 50%; bottom: 50%;
transform: rotate(-45deg) translatey(50%); transform: rotate(-45deg) translatey(50%);
} }
/* nav menu */ /* nav menu */
.nav-menu { .nav-menu {
font-family: 'Londrina Solid', cursive; font-family: 'Londrina Solid', cursive;
display: flex; display: flex;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: all 0.25s ease-in; transition: all 0.25s ease-in;
} }
.nav-menu .menu-item a { .nav-menu .menu-item a {
color: #222; color: #222;
display: block; display: block;
line-height: 30px; line-height: 30px;
margin: 0px 10px; margin: 0px 10px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
} }
.nav-menu .menu-item a:hover { .nav-menu .menu-item a:hover {
color: #555; color: #555;
text-decoration: underline; text-decoration: underline;
} }
.drop-down { .drop-down {
z-index: 100; z-index: 100;
} }
.sub-nav { .sub-nav {
border: 1px solid #ccc; border: 1px solid #ccc;
display: none; display: none;
position: absolute; position: absolute;
background-color: #E4D6FF; background-color: #E4D6FF;
padding: 5px 5px; padding: 5px 5px;
list-style: none; list-style: none;
width: 230px; width: 230px;
z-index: 2; z-index: 2;
} }
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.hamburger { .hamburger {
display: inline-block; display: inline-block;
} }
} }
/* Make sure the thing doesnt move */ /* Make sure the thing doesnt move */
/* .nav-menu { /* .nav-menu {
transform: translatey(-100%); transform: translatey(-100%);
} */ } */
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu { .nav-menu {
position: fixed; position: fixed;
background: #e4d6ffde; background: #e4d6ffde;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: translatey(-100%); transform: translatey(-100%);
text-align: center; text-align: center;
z-index: 100; z-index: 100;
} }
.menu-active .nav-menu { .menu-active .nav-menu {
transform: translatey(0%); transform: translatey(0%);
opacity: 1; opacity: 1;
} }
} }
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu .menu-item a { .nav-menu .menu-item a {
font-size: 1.5em; font-size: 1.5em;
margin: 8px; margin: 8px;
} }
} }
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.sub-nav { .sub-nav {
position: relative; position: relative;
width: 100%; width: 100%;
display: none; display: none;
background-color: rgba(0, 0, 0, 0.20); background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box; box-sizing: border-box;
} }
} }
.nav-link:hover + .sub-nav { .nav-link:hover + .sub-nav {
display: block; display: block;
} }
.sub-nav:hover { .sub-nav:hover {
display: block; display: block;
} }
/* search bar */ /* search bar */
.secondary-menu { .secondary-menu {
display: flex; display: flex;
margin-top: 9px; margin-top: 9px;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
color: #222; color: #222;
align-items: center; align-items: center;
align-content: center; align-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
} }
.search-wrapper { .search-wrapper {
flex-basis: 75%; flex-basis: 75%;
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; display: flex;
min-width: 100px; min-width: 100px;
/* margin-left: 8px; */ /* margin-left: 8px; */
z-index: 1; z-index: 1;
} }
/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */ /* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
#search-bar { #search-bar {
width: 100%; width: 100%;
padding: 12px 14px; padding: 12px 14px;
background-color: transparent; background-color: transparent;
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
font-family: 'Josefin Sans', sans-serif; font-family: 'Josefin Sans', sans-serif;
font-size: 0.5em; font-size: 0.5em;
color: #222; color: #222;
background-color: transparent; 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-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-repeat: no-repeat;
background-size: 27px 27px; background-size: 27px 27px;
background-position: 95% center; background-position: 95% center;
border-radius: 10px; border-radius: 10px;
border: 2px solid #222; border: 2px solid #222;
transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
backface-visibility: hidden; backface-visibility: hidden;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.search__input::placeholder { .search__input::placeholder {
color: rgba(87, 87, 86, 0.8); color: rgba(87, 87, 86, 0.8);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 1.5px;
} }
#search-bar:hover, #search-bar:focus { #search-bar:hover, #search-bar:focus {
padding: 12px 0; padding: 12px 0;
outline: 0; outline: 0;
border: 2px solid transparent; border: 2px solid transparent;
border-bottom: 2px solid #222; border-bottom: 2px solid #222;
border-radius: 0; border-radius: 0;
background-position: 100% center; background-position: 100% center;
} }
/* #search-bar:hover, #search-bar:focus { /* #search-bar:hover, #search-bar:focus {
border: 1.5px solid #009688; border: 1.5px solid #009688;
background-color: white; background-color: white;
} */ } */
#cart-wrapper { #cart-wrapper {
display: flex; display: flex;
flex-basis: 10%; flex-basis: 10%;
justify-content: space-between; justify-content: space-between;
padding-bottom: 2px; padding-bottom: 2px;
} }
#cart-icon { #cart-icon {
padding-top: 2px; padding-top: 2px;
} }
#cart-number { #cart-number {
padding-top: 9px; padding-top: 9px;
font-size: 1em; font-size: 1em;
font-weight: 100; font-weight: 100;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

104
client/public/global.css
View File

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

88
client/public/index.html
View File

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

26
client/public/index.mjs
View File

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

38
db/hashtester.js
View File

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

94
db/imagesorter.js
View File

@@ -1,47 +1,47 @@
// sorts images // sorts images
// Take the file name `2336p68.png`, which is a Lego "Cockpit Space Nose", // Take the file name `2336p68.png`, which is a Lego "Cockpit Space Nose",
// after a simple MD5 hash, the result is: // after a simple MD5 hash, the result is:
// ```text // ```text
// "d2ef319ea58566b55070e06096165cb8" // "d2ef319ea58566b55070e06096165cb8"
// ^^^^ // ^^^^
// ``` // ```
// Using the first four characters in the hash, we can allocate images // Using the first four characters in the hash, we can allocate images
// into buckets for storage and quick retreval. This acts very similar // into buckets for storage and quick retreval. This acts very similar
// to a hash table implemented in the filesystem. // to a hash table implemented in the filesystem.
const md5 = require('md5'); const md5 = require('md5');
const fs = require('fs'); const fs = require('fs');
fs.readdir('./image/', (files) => { fs.readdir('./image/', (files) => {
files.forEach((file) => { files.forEach((file) => {
file = file.split('.png')[0]; file = file.split('.png')[0];
const hash = md5(file); const hash = md5(file);
const bucket = hash.substring(0, 4); const bucket = hash.substring(0, 4);
const newFile = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${file}.png`; const newFile = `./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/${file}.png`;
// if directory doesn't exist, create it // if directory doesn't exist, create it
if (!fs.existsSync('./image/')) { if (!fs.existsSync('./image/')) {
fs.mkdirSync('./image/'); fs.mkdirSync('./image/');
} }
if (!fs.existsSync(`./image/${bucket[0]}/`)) { if (!fs.existsSync(`./image/${bucket[0]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/`); fs.mkdirSync(`./image/${bucket[0]}/`);
} }
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/`)) { if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/`)) {
fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/`); fs.mkdirSync(`./image/${bucket[0]}/${bucket[1]}/`);
} }
if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`)) { if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/`)) {
fs.mkdirSync(`./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]}/`)) { if (!fs.existsSync(`./image/${bucket[0]}/${bucket[1]}/${bucket[2]}/${bucket[3]}/`)) {
fs.mkdirSync(`./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) => { fs.rename(`./image/${file}.png`, newFile, (err) => {
if (err) { if (err) {
console.log(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 // 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 // download image from bricklink for every item in the tab-delimited database Parts.txt
const fs = require('fs'); const fs = require('fs');
const axios = require('axios'); const axios = require('axios');
// For sets make sets.txt // For sets make sets.txt
const parts = fs.readFileSync('res/Parts.txt', 'utf8').toString().split('\n').map((i) => i.split('\t')); const parts = fs.readFileSync('res/Parts.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
async function timeout(ms) { async function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }
async function downloadImage(url, filename) { async function downloadImage(url, filename) {
try { try {
const res = await axios.get(url, { const res = await axios.get(url, {
method: 'GET', method: 'GET',
headers: { 'User-Agent':'Chrome/96.0.4664.175' }, headers: { 'User-Agent':'Chrome/96.0.4664.175' },
responseType: 'stream', responseType: 'stream',
}); });
if (!res.data) { if (!res.data) {
console.log(`${filename} failed to start downloading`); console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`); fs.appendFileSync('error.txt', `${url}\n`);
return; return;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
res.data.pipe(fs.createWriteStream(filename)); res.data.pipe(fs.createWriteStream(filename));
res.data.on('end', () => { res.data.on('end', () => {
console.log('downloaded file ' + filename); console.log('downloaded file ' + filename);
fs.appendFileSync('saved.txt', `${url}\n`); fs.appendFileSync('saved.txt', `${url}\n`);
resolve(); resolve();
}); });
res.data.on('error', () => { res.data.on('error', () => {
console.log('error downloading file ' + filename); console.log('error downloading file ' + filename);
fs.appendFileSync('error.txt', `${url}\n`); fs.appendFileSync('error.txt', `${url}\n`);
resolve(); resolve();
}); });
}); });
} catch (e) { } catch (e) {
console.log(`${filename} failed to start downloading`); console.log(`${filename} failed to start downloading`);
fs.appendFileSync('error.txt', `${url}\n`); fs.appendFileSync('error.txt', `${url}\n`);
} }
} }
async function main() { async function main() {
for (let i = 0; i < parts.length; i++) { for (let i = 0; i < parts.length; i++) {
const part = parts[i]; const part = parts[i];
// for sets use https://img.bricklink.com/ItemImage/SL/${part[2]}.png // 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 // for for pieces use https://img.bricklink.com/ItemImage/PL/${part[2]}.png
// https://img.bricklink.com/ItemImage/PL/3962a.png // https://img.bricklink.com/ItemImage/PL/3962a.png
const url = `https://img.bricklink.com/ItemImage/PL/${part[2]}.png`; const url = `https://img.bricklink.com/ItemImage/PL/${part[2]}.png`;
const filename = `res/image/${part[2]}.png`; const filename = `res/image/${part[2]}.png`;
await downloadImage(url, filename); await downloadImage(url, filename);
// await timeout(10); // let's not get rate limited // await timeout(10); // let's not get rate limited
console.log(`${i}/${parts.length} ${url}`); console.log(`${i}/${parts.length} ${url}`);
} }
} }
main(); 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 | | 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 | | 0 | (Not Applicable) | | N/A | 4587 | 12360 | 62547 | 10990 | 1954 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 41 | Aqua | BCE5DC | Solid | 82 | 60 | 1233 | 116 | 1998 | 2006 | | 41 | Aqua | BCE5DC | Solid | 82 | 60 | 1233 | 116 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 11 | Black | 212121 | Solid | 10925 | 11692 | 15454 | 11229 | 1957 | 2022 | | 11 | Black | 212121 | Solid | 10925 | 11692 | 15454 | 11229 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 7 | Blue | 0057A6 | Solid | 3811 | 7844 | 6792 | 4199 | 1950 | 2022 | | 7 | Blue | 0057A6 | Solid | 3811 | 7844 | 6792 | 4199 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 97 | Blue-Violet | 506CEF | Solid | 38 | 18 | 709 | 64 | 2004 | 2005 | | 97 | Blue-Violet | 506CEF | Solid | 38 | 18 | 709 | 64 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 36 | Bright Green | 10CB31 | Solid | 588 | 1738 | 2222 | 671 | 1950 | 2022 | | 36 | Bright Green | 10CB31 | Solid | 588 | 1738 | 2222 | 671 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 105 | Bright Light Blue | BCD1ED | Solid | 373 | 477 | 1412 | 422 | 2004 | 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 | | 110 | Bright Light Orange | FFC700 | Solid | 1011 | 1429 | 2547 | 1094 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 103 | Bright Light Yellow | FEED83 | Solid | 391 | 696 | 1870 | 437 | 2004 | 2022 | | 103 | Bright Light Yellow | FEED83 | Solid | 391 | 696 | 1870 | 437 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 104 | Bright Pink | F7BCDA | Solid | 555 | 1074 | 1458 | 613 | 2003 | 2022 | | 104 | Bright Pink | F7BCDA | Solid | 555 | 1074 | 1458 | 613 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 8 | Brown | 532115 | Solid | 570 | 1082 | 3110 | 921 | 1974 | 2006 | | 8 | Brown | 532115 | Solid | 570 | 1082 | 3110 | 921 | 1974 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 227 | Clikits Lavender | E0AAD9 | Solid | 10 | 12 | 182 | 12 | 2005 | 2005 | | 227 | Clikits Lavender | E0AAD9 | Solid | 10 | 12 | 182 | 12 | 2005 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 220 | Coral | FF8172 | Solid | 138 | 196 | 690 | 140 | 2019 | 2022 | | 220 | Coral | FF8172 | Solid | 138 | 196 | 690 | 140 | 2019 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 153 | Dark Azure | 009FE0 | Solid | 614 | 771 | 1749 | 651 | 2000 | 2022 | | 153 | Dark Azure | 009FE0 | Solid | 614 | 771 | 1749 | 651 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 63 | Dark Blue | 243757 | Solid | 2022 | 1903 | 4012 | 2107 | 1961 | 2022 | | 63 | Dark Blue | 243757 | Solid | 2022 | 1903 | 4012 | 2107 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 109 | Dark Blue-Violet | 2032B0 | Solid | 9 | 7 | 783 | 16 | 2004 | 2006 | | 109 | Dark Blue-Violet | 2032B0 | Solid | 9 | 7 | 783 | 16 | 2004 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 85 | Dark Bluish Gray | 595D60 | Solid | 3642 | 5932 | 7063 | 4036 | 1991 | 2022 | | 85 | Dark Bluish Gray | 595D60 | Solid | 3642 | 5932 | 7063 | 4036 | 1991 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 120 | Dark Brown | 330000 | Solid | 681 | 1480 | 2640 | 735 | 2008 | 2022 | | 120 | Dark Brown | 330000 | Solid | 681 | 1480 | 2640 | 735 | 2008 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 10 | Dark Gray | 6B5A5A | Solid | 1029 | 1688 | 3791 | 1432 | 1961 | 2006 | | 10 | Dark Gray | 6B5A5A | Solid | 1029 | 1688 | 3791 | 1432 | 1961 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 80 | Dark Green | 2E5543 | Solid | 829 | 920 | 2816 | 910 | 1961 | 2022 | | 80 | Dark Green | 2E5543 | Solid | 829 | 920 | 2816 | 910 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 225 | Dark Nougat | E78B3E | Solid | 3 | 10 | 570 | 18 | 2001 | 2004 | | 225 | Dark Nougat | E78B3E | Solid | 3 | 10 | 570 | 18 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 68 | Dark Orange | B35408 | Solid | 667 | 1498 | 2169 | 741 | 1979 | 2022 | | 68 | Dark Orange | B35408 | Solid | 667 | 1498 | 2169 | 741 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 47 | Dark Pink | EF5BB3 | Solid | 701 | 1109 | 1516 | 768 | 1994 | 2022 | | 47 | Dark Pink | EF5BB3 | Solid | 701 | 1109 | 1516 | 768 | 1994 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 89 | Dark Purple | 5F2683 | Solid | 911 | 1075 | 2067 | 992 | 2000 | 2022 | | 89 | Dark Purple | 5F2683 | Solid | 911 | 1075 | 2067 | 992 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 59 | Dark Red | 6A0E15 | Solid | 1522 | 1644 | 3671 | 1614 | 1961 | 2022 | | 59 | Dark Red | 6A0E15 | Solid | 1522 | 1644 | 3671 | 1614 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 231 | Dark Salmon | FF6326 | Solid | 5 | 4 | 58 | 4 | 2003 | 2003 | | 231 | Dark Salmon | FF6326 | Solid | 5 | 4 | 58 | 4 | 2003 | 2003 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 69 | Dark Tan | B89869 | Solid | 979 | 2081 | 2855 | 1035 | 1961 | 2022 | | 69 | Dark Tan | B89869 | Solid | 979 | 2081 | 2855 | 1035 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 39 | Dark Turquoise | 00A29F | Solid | 521 | 570 | 1498 | 593 | 1998 | 2022 | | 39 | Dark Turquoise | 00A29F | Solid | 521 | 570 | 1498 | 593 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 161 | Dark Yellow | DD982E | Solid | 4 | 4 | 523 | 19 | 2004 | 2005 | | 161 | Dark Yellow | DD982E | Solid | 4 | 4 | 523 | 19 | 2004 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 29 | Earth Orange | E6881D | Solid | 37 | 87 | 752 | 55 | 1982 | 2006 | | 29 | Earth Orange | E6881D | Solid | 37 | 87 | 752 | 55 | 1982 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 106 | Fabuland Brown | B3694E | Solid | 7 | 26 | 1040 | 21 | 1979 | 1997 | | 106 | Fabuland Brown | B3694E | Solid | 7 | 26 | 1040 | 21 | 1979 | 1997 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 160 | Fabuland Orange | EF9121 | Solid | 2 | 3 | 412 | 3 | 1983 | 1987 | | 160 | Fabuland Orange | EF9121 | Solid | 2 | 3 | 412 | 3 | 1983 | 1987 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 6 | Green | 00923D | Solid | 1931 | 4950 | 4408 | 2217 | 1949 | 2022 | | 6 | Green | 00923D | Solid | 1931 | 4950 | 4408 | 2217 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 154 | Lavender | D3BDE3 | Solid | 290 | 397 | 867 | 344 | 2011 | 2022 | | 154 | Lavender | D3BDE3 | Solid | 290 | 397 | 867 | 344 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 152 | Light Aqua | D8EFDD | Solid | 410 | 450 | 988 | 430 | 2011 | 2022 | | 152 | Light Aqua | D8EFDD | Solid | 410 | 450 | 988 | 430 | 2011 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 62 | Light Blue | C8D9E1 | Solid | 39 | 30 | 765 | 107 | 1950 | 2007 | | 62 | Light Blue | C8D9E1 | Solid | 39 | 30 | 765 | 107 | 1950 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 86 | Light Bluish Gray | AFB5C7 | Solid | 4136 | 6435 | 7609 | 4719 | 1993 | 2022 | | 86 | Light Bluish Gray | AFB5C7 | Solid | 4136 | 6435 | 7609 | 4719 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 9 | Light Gray | 9C9C9C | Solid | 1853 | 3192 | 5152 | 2393 | 1954 | 2021 | | 9 | Light Gray | 9C9C9C | Solid | 1853 | 3192 | 5152 | 2393 | 1954 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 38 | Light Green | A5DBB5 | Solid | 67 | 61 | 554 | 111 | 1992 | 2005 | | 38 | Light Green | A5DBB5 | Solid | 67 | 61 | 554 | 111 | 1992 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 35 | Light Lime | ECEEBD | Solid | 20 | 16 | 349 | 46 | 1992 | 2007 | | 35 | Light Lime | ECEEBD | Solid | 20 | 16 | 349 | 46 | 1992 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 90 | Light Nougat | FECCB0 | Solid | 1573 | 1521 | 2971 | 1559 | 2004 | 2022 | | 90 | Light Nougat | FECCB0 | Solid | 1573 | 1521 | 2971 | 1559 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 32 | Light Orange | F7AD63 | Solid | 15 | 16 | 391 | 55 | 1998 | 2004 | | 32 | Light Orange | F7AD63 | Solid | 15 | 16 | 391 | 55 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 56 | Light Pink | FFE1FF | Solid | 3 | 4 | 429 | 52 | 1999 | 2007 | | 56 | Light Pink | FFE1FF | Solid | 3 | 4 | 429 | 52 | 1999 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 93 | Light Purple | DA70D6 | Solid | 26 | 15 | 493 | 60 | 2003 | 2006 | | 93 | Light Purple | DA70D6 | Solid | 26 | 15 | 493 | 60 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 26 | Light Salmon | FCC7B7 | Solid | 50 | 21 | 426 | 57 | 1997 | 2002 | | 26 | Light Salmon | FCC7B7 | Solid | 50 | 21 | 426 | 57 | 1997 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 40 | Light Turquoise | 00C5BC | Solid | 49 | 39 | 618 | 76 | 1998 | 2004 | | 40 | Light Turquoise | 00C5BC | Solid | 49 | 39 | 618 | 76 | 1998 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 44 | Light Violet | C9CAE2 | Solid | 70 | 39 | 333 | 86 | 1994 | 2004 | | 44 | Light Violet | C9CAE2 | Solid | 70 | 39 | 333 | 86 | 1994 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 33 | Light Yellow | FFE383 | Solid | 96 | 73 | 1100 | 155 | 1994 | 2011 | | 33 | Light Yellow | FFE383 | Solid | 96 | 73 | 1100 | 155 | 1994 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 34 | Lime | C4E000 | Solid | 1594 | 2306 | 2734 | 1736 | 1982 | 2022 | | 34 | Lime | C4E000 | Solid | 1594 | 2306 | 2734 | 1736 | 1982 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 72 | Maersk Blue | 7DC1D8 | Solid | 84 | 14 | 588 | 100 | 1974 | 2011 | | 72 | Maersk Blue | 7DC1D8 | Solid | 84 | 14 | 588 | 100 | 1974 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 71 | Magenta | B72276 | Solid | 532 | 844 | 1383 | 580 | 2000 | 2022 | | 71 | Magenta | B72276 | Solid | 532 | 844 | 1383 | 580 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 156 | Medium Azure | 6ACEE0 | Solid | 764 | 1202 | 1715 | 828 | 2012 | 2022 | | 156 | Medium Azure | 6ACEE0 | Solid | 764 | 1202 | 1715 | 828 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 42 | Medium Blue | 82ADD8 | Solid | 779 | 1068 | 1990 | 886 | 1949 | 2022 | | 42 | Medium Blue | 82ADD8 | Solid | 779 | 1068 | 1990 | 886 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 91 | Medium Brown | 774125 | Solid | 40 | 28 | 1328 | 75 | 2002 | 2006 | | 91 | Medium Brown | 774125 | Solid | 40 | 28 | 1328 | 75 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 94 | Medium Dark Pink | F785B1 | Solid | 14 | 7 | 288 | 53 | 1992 | 1996 | | 94 | Medium Dark Pink | F785B1 | Solid | 14 | 7 | 288 | 53 | 1992 | 1996 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 37 | Medium Green | 62F58E | Solid | 121 | 102 | 639 | 135 | 1950 | 2004 | | 37 | Medium Green | 62F58E | Solid | 121 | 102 | 639 | 135 | 1950 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 157 | Medium Lavender | C689D9 | Solid | 431 | 583 | 975 | 450 | 2012 | 2022 | | 157 | Medium Lavender | C689D9 | Solid | 431 | 583 | 975 | 450 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 76 | Medium Lime | DFE000 | Solid | 64 | 36 | 438 | 77 | 1998 | 2005 | | 76 | Medium Lime | DFE000 | Solid | 64 | 36 | 438 | 77 | 1998 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 150 | Medium Nougat | E3A05B | Solid | 812 | 1284 | 1936 | 848 | 2010 | 2022 | | 150 | Medium Nougat | E3A05B | Solid | 812 | 1284 | 1936 | 848 | 2010 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 31 | Medium Orange | FFA531 | Solid | 139 | 116 | 929 | 180 | 1950 | 2008 | | 31 | Medium Orange | FFA531 | Solid | 139 | 116 | 929 | 180 | 1950 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 73 | Medium Violet | 9391E4 | Solid | 16 | 21 | 307 | 19 | 1999 | 2005 | | 73 | Medium Violet | 9391E4 | Solid | 16 | 21 | 307 | 19 | 1999 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 166 | Neon Green | DBF355 | Solid | | | 322 | 6 | | | | 166 | Neon Green | DBF355 | Solid | | | 322 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 165 | Neon Orange | FA5947 | Solid | | | 292 | 6 | | | | 165 | Neon Orange | FA5947 | Solid | | | 292 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 236 | Neon Yellow | FFFC00 | Solid | 36 | 11 | 60 | 27 | 2022 | 2022 | | 236 | Neon Yellow | FFFC00 | Solid | 36 | 11 | 60 | 27 | 2022 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 28 | Nougat | FFAF7D | Solid | 202 | 245 | 1199 | 232 | 1979 | 2022 | | 28 | Nougat | FFAF7D | Solid | 202 | 245 | 1199 | 232 | 1979 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 155 | Olive Green | ABA953 | Solid | 500 | 417 | 1913 | 542 | 2012 | 2022 | | 155 | Olive Green | ABA953 | Solid | 500 | 417 | 1913 | 542 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 4 | Orange | FF7E14 | Solid | 1881 | 3119 | 3863 | 2061 | 1993 | 2022 | | 4 | Orange | FF7E14 | Solid | 1881 | 3119 | 3863 | 2061 | 1993 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 23 | Pink | FFC0CB | Solid | 120 | 79 | 883 | 216 | 1991 | 2005 | | 23 | Pink | FFC0CB | Solid | 120 | 79 | 883 | 216 | 1991 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 24 | Purple | A5499C | Solid | 140 | 129 | 1287 | 249 | 1996 | 2008 | | 24 | Purple | A5499C | Solid | 140 | 129 | 1287 | 249 | 1996 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 5 | Red | B30006 | Solid | 7256 | 9914 | 11158 | 7714 | 1949 | 2022 | | 5 | Red | B30006 | Solid | 7256 | 9914 | 11158 | 7714 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 88 | Reddish Brown | 89351D | Solid | 1900 | 3882 | 3999 | 2131 | 1961 | 2022 | | 88 | Reddish Brown | 89351D | Solid | 1900 | 3882 | 3999 | 2131 | 1961 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 27 | Rust | B22222 | Solid | 9 | 13 | 1326 | 27 | 1989 | 2001 | | 27 | Rust | B22222 | Solid | 9 | 13 | 1326 | 27 | 1989 | 2001 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 25 | Salmon | FF7D5D | Solid | 85 | 27 | 395 | 89 | 1997 | 1999 | | 25 | Salmon | FF7D5D | Solid | 85 | 27 | 395 | 89 | 1997 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 55 | Sand Blue | 8899AB | Solid | 617 | 545 | 1862 | 671 | 2001 | 2022 | | 55 | Sand Blue | 8899AB | Solid | 617 | 545 | 1862 | 671 | 2001 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 48 | Sand Green | A2BFA3 | Solid | 584 | 594 | 1762 | 625 | 1964 | 2022 | | 48 | Sand Green | A2BFA3 | Solid | 584 | 594 | 1762 | 625 | 1964 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 54 | Sand Purple | B57DA5 | Solid | 20 | 5 | 383 | 24 | 2001 | 2002 | | 54 | Sand Purple | B57DA5 | Solid | 20 | 5 | 383 | 24 | 2001 | 2002 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 58 | Sand Red | 8C6B6B | Solid | 39 | 18 | 428 | 48 | 2001 | 2004 | | 58 | Sand Red | 8C6B6B | Solid | 39 | 18 | 428 | 48 | 2001 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 87 | Sky Blue | 8AD4E1 | Solid | 29 | 25 | 646 | 43 | 2003 | 2007 | | 87 | Sky Blue | 8AD4E1 | Solid | 29 | 25 | 646 | 43 | 2003 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 2 | Tan | EED9A4 | Solid | 2200 | 4291 | 4916 | 2448 | 1958 | 2022 | | 2 | Tan | EED9A4 | Solid | 2200 | 4291 | 4916 | 2448 | 1958 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 99 | Very Light Bluish Gray | E4E8E8 | Solid | 51 | 48 | 1844 | 97 | 2004 | 2013 | | 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 | | 49 | Very Light Gray | E8E8E8 | Solid | 21 | 23 | 1196 | 67 | 1997 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 96 | Very Light Orange | E6C05D | Solid | 1 | 2 | 383 | 14 | 2000 | 2000 | | 96 | Very Light Orange | E6C05D | Solid | 1 | 2 | 383 | 14 | 2000 | 2000 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 43 | Violet | 3448A4 | Solid | 79 | 44 | 517 | 96 | 1992 | 2004 | | 43 | Violet | 3448A4 | Solid | 79 | 44 | 517 | 96 | 1992 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 1 | White | FFFFFF | Solid | 13369 | 9998 | 19160 | 13546 | 1949 | 2022 | | 1 | White | FFFFFF | Solid | 13369 | 9998 | 19160 | 13546 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 3 | Yellow | FFE001 | Solid | 6385 | 9723 | 9968 | 7259 | 1949 | 2022 | | 3 | Yellow | FFE001 | Solid | 6385 | 9723 | 9968 | 7259 | 1949 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 158 | Yellowish Green | E7F2A7 | Solid | 165 | 234 | 649 | 186 | 2012 | 2022 | | 158 | Yellowish Green | E7F2A7 | Solid | 165 | 234 | 649 | 186 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 113 | Trans-Aqua | B7C8BF | Transparent | 38 | 38 | 375 | 51 | 2003 | 2006 | | 113 | Trans-Aqua | B7C8BF | Transparent | 38 | 38 | 375 | 51 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 13 | Trans-Black | 939484 | Transparent | 438 | 1693 | 1354 | 506 | 1999 | 2022 | | 13 | Trans-Black | 939484 | Transparent | 438 | 1693 | 1354 | 506 | 1999 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 108 | Trans-Bright Green | 10Cb31 | Transparent | 153 | 448 | 770 | 190 | 2006 | 2022 | | 108 | Trans-Bright Green | 10Cb31 | Transparent | 153 | 448 | 770 | 190 | 2006 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 12 | Trans-Clear | EEEEEE | Transparent | 945 | 4755 | 2856 | 1184 | 1950 | 2022 | | 12 | Trans-Clear | EEEEEE | Transparent | 945 | 4755 | 2856 | 1184 | 1950 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 14 | Trans-Dark Blue | 00296B | Transparent | 255 | 1625 | 1231 | 318 | 1978 | 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 | | 50 | Trans-Dark Pink | CE1d9b | Transparent | 222 | 643 | 777 | 267 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 20 | Trans-Green | 217625 | Transparent | 134 | 1423 | 810 | 182 | 1969 | 2022 | | 20 | Trans-Green | 217625 | Transparent | 134 | 1423 | 810 | 182 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 15 | Trans-Light Blue | 68BCC5 | Transparent | 750 | 2679 | 1818 | 886 | 1985 | 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 | | 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 | | 221 | Trans-Light Green | 94E5AB | Transparent | 11 | 5 | 135 | 15 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 164 | Trans-Light Orange | E99A3A | Transparent | 42 | 22 | 327 | 82 | 2003 | 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 | | 114 | Trans-Light Purple | B97AB1 | Transparent | 20 | 18 | 197 | 30 | 2005 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 74 | Trans-Medium Blue | 7384A5 | Transparent | 105 | 207 | 855 | 151 | 2001 | 2018 | | 74 | Trans-Medium Blue | 7384A5 | Transparent | 105 | 207 | 855 | 151 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 234 | Trans-Medium Purple | 9C41B6 | Transparent | 38 | 36 | 49 | 43 | 2003 | 2006 | | 234 | Trans-Medium Purple | 9C41B6 | Transparent | 38 | 36 | 49 | 43 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 16 | Trans-Neon Green | C0F500 | Transparent | 232 | 1116 | 939 | 288 | 1990 | 2022 | | 16 | Trans-Neon Green | C0F500 | Transparent | 232 | 1116 | 939 | 288 | 1990 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 18 | Trans-Neon Orange | FF4231 | Transparent | 224 | 1032 | 953 | 323 | 1993 | 2021 | | 18 | Trans-Neon Orange | FF4231 | Transparent | 224 | 1032 | 953 | 323 | 1993 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 121 | Trans-Neon Yellow | FFD700 | Transparent | 27 | 34 | 378 | 71 | 2001 | 2006 | | 121 | Trans-Neon Yellow | FFD700 | Transparent | 27 | 34 | 378 | 71 | 2001 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 98 | Trans-Orange | D04010 | Transparent | 194 | 1821 | 844 | 265 | 2003 | 2022 | | 98 | Trans-Orange | D04010 | Transparent | 194 | 1821 | 844 | 265 | 2003 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 107 | Trans-Pink | FF8298 | Transparent | 68 | 44 | 243 | 89 | 2003 | 2006 | | 107 | Trans-Pink | FF8298 | Transparent | 68 | 44 | 243 | 89 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 51 | Trans-Purple | 5525B7 | Transparent | 127 | 340 | 720 | 161 | 2000 | 2022 | | 51 | Trans-Purple | 5525B7 | Transparent | 127 | 340 | 720 | 161 | 2000 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 17 | Trans-Red | 9C0010 | Transparent | 205 | 3550 | 1134 | 278 | 1969 | 2022 | | 17 | Trans-Red | 9C0010 | Transparent | 205 | 3550 | 1134 | 278 | 1969 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 19 | Trans-Yellow | EBF72D | Transparent | 205 | 2368 | 1006 | 267 | 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 | | 57 | Chrome Antique Brass | 645a4c | Chrome | 3 | 16 | 329 | 3 | 2001 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 122 | Chrome Black | 544E4F | Chrome | 11 | 1 | 1080 | 14 | 2009 | 2009 | | 122 | Chrome Black | 544E4F | Chrome | 11 | 1 | 1080 | 14 | 2009 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 52 | Chrome Blue | 5C66A4 | Chrome | 5 | 14 | 381 | 12 | 1998 | 2006 | | 52 | Chrome Blue | 5C66A4 | Chrome | 5 | 14 | 381 | 12 | 1998 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 21 | Chrome Gold | f1f2e1 | Chrome | 52 | 278 | 1488 | 58 | 1989 | 2021 | | 21 | Chrome Gold | f1f2e1 | Chrome | 52 | 278 | 1488 | 58 | 1989 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 64 | Chrome Green | 3CB371 | Chrome | 1 | 2 | 347 | 6 | 1999 | 1999 | | 64 | Chrome Green | 3CB371 | Chrome | 1 | 2 | 347 | 6 | 1999 | 1999 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 82 | Chrome Pink | aa4d8e | Chrome | 1 | 10 | 195 | 7 | 2001 | 2007 | | 82 | Chrome Pink | aa4d8e | Chrome | 1 | 10 | 195 | 7 | 2001 | 2007 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 22 | Chrome Silver | DCDCDC | Chrome | 105 | 561 | 2081 | 184 | 1966 | 2018 | | 22 | Chrome Silver | DCDCDC | Chrome | 105 | 561 | 2081 | 184 | 1966 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 84 | Copper | C66921 | Pearl | 58 | 74 | 968 | 87 | 2001 | 2020 | | 84 | Copper | C66921 | Pearl | 58 | 74 | 968 | 87 | 2001 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 81 | Flat Dark Gold | AD7118 | Pearl | 42 | 42 | 824 | 127 | 2002 | 2006 | | 81 | Flat Dark Gold | AD7118 | Pearl | 42 | 42 | 824 | 127 | 2002 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 95 | Flat Silver | 8D949C | Pearl | 906 | 2649 | 2675 | 1055 | 1998 | 2022 | | 95 | Flat Silver | 8D949C | Pearl | 906 | 2649 | 2675 | 1055 | 1998 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 78 | Metal Blue | 5686AE | Pearl | 40 | 22 | 347 | 48 | 2002 | 2009 | | 78 | Metal Blue | 5686AE | Pearl | 40 | 22 | 347 | 48 | 2002 | 2009 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 77 | Pearl Dark Gray | 666660 | Pearl | 645 | 1013 | 2588 | 722 | 2002 | 2022 | | 77 | Pearl Dark Gray | 666660 | Pearl | 645 | 1013 | 2588 | 722 | 2002 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 115 | Pearl Gold | E79E1D | Pearl | 967 | 2033 | 2533 | 1057 | 2004 | 2022 | | 115 | Pearl Gold | E79E1D | Pearl | 967 | 2033 | 2533 | 1057 | 2004 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 61 | Pearl Light Gold | E7AE5A | Pearl | 16 | 9 | 384 | 59 | 2000 | 2006 | | 61 | Pearl Light Gold | E7AE5A | Pearl | 16 | 9 | 384 | 59 | 2000 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 66 | Pearl Light Gray | ACB7C0 | Pearl | 425 | 625 | 1580 | 601 | 1993 | 2013 | | 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 | | 119 | Pearl Very Light Gray | D4D2CD | Pearl | 14 | 10 | 508 | 43 | 2002 | 2004 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 83 | Pearl White | FFFFFF | Pearl | 3 | 5 | 444 | 14 | 2003 | 2006 | | 83 | Pearl White | FFFFFF | Pearl | 3 | 5 | 444 | 14 | 2003 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 235 | Reddish Gold | E7891B | Pearl | 2 | 4 | 12 | 2 | 2003 | 2005 | | 235 | Reddish Gold | E7891B | Pearl | 2 | 4 | 12 | 2 | 2003 | 2005 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 229 | Satin Trans-Black | 939484 | Satin | 4 | 9 | 22 | 4 | 2020 | 2021 | | 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 | | 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 | | 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 | | 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 | | 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 | | 230 | Satin Trans-Purple | 8320B7 | Satin | 1 | 5 | 20 | 2 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 228 | Satin White | FFFFFF | Satin | 10 | 23 | 124 | 10 | 2020 | 2022 | | 228 | Satin White | FFFFFF | Satin | 10 | 23 | 124 | 10 | 2020 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 65 | Metallic Gold | B8860B | Metallic | 105 | 249 | 1278 | 184 | 1997 | 2022 | | 65 | Metallic Gold | B8860B | Metallic | 105 | 249 | 1278 | 184 | 1997 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 70 | Metallic Green | bdb573 | Metallic | 26 | 7 | 335 | 36 | 2001 | 2018 | | 70 | Metallic Green | bdb573 | Metallic | 26 | 7 | 335 | 36 | 2001 | 2018 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 67 | Metallic Silver | C0C0C0 | Metallic | 178 | 647 | 2103 | 262 | 1957 | 2022 | | 67 | Metallic Silver | C0C0C0 | Metallic | 178 | 647 | 2103 | 262 | 1957 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 46 | Glow In Dark Opaque | d4d5c9 | Milky | 40 | 87 | 592 | 105 | 1990 | 2011 | | 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 | | 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 | | 159 | Glow In Dark White | d9d9d9 | Milky | 56 | 67 | 853 | 72 | 2012 | 2022 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 60 | Milky White | d4d3dd | Milky | 26 | 144 | 512 | 66 | 1963 | 2008 | | 60 | Milky White | d4d3dd | Milky | 26 | 144 | 512 | 66 | 1963 | 2008 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 101 | Glitter Trans-Clear | b2adaa | Glitter | 16 | 27 | 150 | 19 | 1999 | 2021 | | 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 | | 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 | | 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 | | 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 | | 222 | Glitter Trans-Orange | D04010 | Glitter | 1 | 1 | 45 | 1 | 2020 | 2020 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 102 | Glitter Trans-Purple | 3A2B82 | Glitter | 10 | 48 | 119 | 15 | 2000 | 2021 | | 102 | Glitter Trans-Purple | 3A2B82 | Glitter | 10 | 48 | 119 | 15 | 2000 | 2021 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 116 | Speckle Black-Copper | 5F4E47 | Speckle | 5 | 3 | 124 | 6 | 2006 | 2006 | | 116 | Speckle Black-Copper | 5F4E47 | Speckle | 5 | 3 | 124 | 6 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 151 | Speckle Black-Gold | AB9421 | Speckle | 2 | 4 | 172 | 5 | 2010 | 2011 | | 151 | Speckle Black-Gold | AB9421 | Speckle | 2 | 4 | 172 | 5 | 2010 | 2011 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 111 | Speckle Black-Silver | 7C7E7C | Speckle | 15 | 49 | 175 | 19 | 2005 | 2013 | | 111 | Speckle Black-Silver | 7C7E7C | Speckle | 15 | 49 | 175 | 19 | 2005 | 2013 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 117 | Speckle DBGray-Silver | 4A6363 | Speckle | 5 | 7 | 184 | 8 | 2006 | 2006 | | 117 | Speckle DBGray-Silver | 4A6363 | Speckle | 5 | 7 | 184 | 8 | 2006 | 2006 |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 142 | Mx Aqua Green | 27867E | Modulex | | | 20 | 12 | | | | 142 | Mx Aqua Green | 27867E | Modulex | | | 20 | 12 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 128 | Mx Black | 000000 | Modulex | | | 154 | 158 | | | | 128 | Mx Black | 000000 | Modulex | | | 154 | 158 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 132 | Mx Brown | 907450 | Modulex | | | 30 | 30 | | | | 132 | Mx Brown | 907450 | Modulex | | | 30 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 133 | Mx Buff | DEC69C | Modulex | | | 36 | 33 | | | | 133 | Mx Buff | DEC69C | Modulex | | | 36 | 33 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 126 | Mx Charcoal Gray | 595D60 | Modulex | | | 13 | 8 | | | | 126 | Mx Charcoal Gray | 595D60 | Modulex | | | 13 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 149 | Mx Clear | FFFFFF | Modulex | | | 53 | 38 | | | | 149 | Mx Clear | FFFFFF | Modulex | | | 53 | 38 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 214 | Mx Foil Dark Blue | 0057A6 | Modulex | | | 2 | 1 | | | | 214 | Mx Foil Dark Blue | 0057A6 | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 210 | Mx Foil Dark Gray | 595D60 | Modulex | | | 1 | 1 | | | | 210 | Mx Foil Dark Gray | 595D60 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 212 | Mx Foil Dark Green | 006400 | Modulex | | | 1 | | | | | 212 | Mx Foil Dark Green | 006400 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 215 | Mx Foil Light Blue | 68AECE | Modulex | | | 2 | 1 | | | | 215 | Mx Foil Light Blue | 68AECE | Modulex | | | 2 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 211 | Mx Foil Light Gray | 9C9C9C | Modulex | | | 1 | | | | | 211 | Mx Foil Light Gray | 9C9C9C | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 213 | Mx Foil Light Green | 7DB538 | Modulex | | | 1 | 1 | | | | 213 | Mx Foil Light Green | 7DB538 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 219 | Mx Foil Orange | F7AD63 | Modulex | | | 1 | 1 | | | | 219 | Mx Foil Orange | F7AD63 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 217 | Mx Foil Red | 8B0000 | Modulex | | | 1 | 1 | | | | 217 | Mx Foil Red | 8B0000 | Modulex | | | 1 | 1 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 216 | Mx Foil Violet | 4B0082 | Modulex | | | 1 | | | | | 216 | Mx Foil Violet | 4B0082 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 218 | Mx Foil Yellow | FED557 | Modulex | | | 1 | | | | | 218 | Mx Foil Yellow | FED557 | Modulex | | | 1 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 139 | Mx Lemon | BDC618 | Modulex | | | 12 | 21 | | | | 139 | Mx Lemon | BDC618 | Modulex | | | 12 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 124 | Mx Light Bluish Gray | AfB5C7 | Modulex | | | 13 | 4 | | | | 124 | Mx Light Bluish Gray | AfB5C7 | Modulex | | | 13 | 4 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 125 | Mx Light Gray | 9C9C9C | Modulex | | | 56 | 51 | | | | 125 | Mx Light Gray | 9C9C9C | Modulex | | | 56 | 51 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 136 | Mx Light Orange | F7AD63 | Modulex | | | 12 | 7 | | | | 136 | Mx Light Orange | F7AD63 | Modulex | | | 12 | 7 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 137 | Mx Light Yellow | FFE371 | Modulex | | | 14 | 15 | | | | 137 | Mx Light Yellow | FFE371 | Modulex | | | 14 | 15 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 144 | Mx Medium Blue | 61AFFF | Modulex | | | 15 | 10 | | | | 144 | Mx Medium Blue | 61AFFF | Modulex | | | 15 | 10 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 138 | Mx Ochre Yellow | FED557 | Modulex | | | 18 | 18 | | | | 138 | Mx Ochre Yellow | FED557 | Modulex | | | 18 | 18 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 140 | Mx Olive Green | 7C9051 | Modulex | | | 20 | 21 | | | | 140 | Mx Olive Green | 7C9051 | Modulex | | | 20 | 21 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 135 | Mx Orange | F47B30 | Modulex | | | 17 | 25 | | | | 135 | Mx Orange | F47B30 | Modulex | | | 17 | 25 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 145 | Mx Pastel Blue | 68AECE | Modulex | | | 21 | 23 | | | | 145 | Mx Pastel Blue | 68AECE | Modulex | | | 21 | 23 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 141 | Mx Pastel Green | 7DB538 | Modulex | | | 27 | 30 | | | | 141 | Mx Pastel Green | 7DB538 | Modulex | | | 27 | 30 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 148 | Mx Pink | F785B1 | Modulex | | | 12 | 20 | | | | 148 | Mx Pink | F785B1 | Modulex | | | 12 | 20 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 130 | Mx Pink Red | F45C40 | Modulex | | | 12 | 6 | | | | 130 | Mx Pink Red | F45C40 | Modulex | | | 12 | 6 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 129 | Mx Red | B52C20 | Modulex | | | 24 | 29 | | | | 129 | Mx Red | B52C20 | Modulex | | | 24 | 29 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 146 | Mx Teal Blue | 467083 | Modulex | | | 16 | 14 | | | | 146 | Mx Teal Blue | 467083 | Modulex | | | 16 | 14 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 134 | Mx Terracotta | 5C5030 | Modulex | | | 24 | 32 | | | | 134 | Mx Terracotta | 5C5030 | Modulex | | | 24 | 32 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 143 | Mx Tile Blue | 0057A6 | Modulex | | | 37 | | | | | 143 | Mx Tile Blue | 0057A6 | Modulex | | | 37 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 131 | Mx Tile Brown | 330000 | Modulex | | | 111 | | | | | 131 | Mx Tile Brown | 330000 | Modulex | | | 111 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 127 | Mx Tile Gray | 6B5A5A | Modulex | | | 41 | | | | | 127 | Mx Tile Gray | 6B5A5A | Modulex | | | 41 | | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 147 | Mx Violet | BD7D85 | Modulex | | | 18 | 8 | | | | 147 | Mx Violet | BD7D85 | Modulex | | | 18 | 8 | | |
|----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------| |----------|--------------------------|--------|-------------|-------|---------|--------|----------|-----------|---------|
| 123 | Mx White | FFFFFF | Modulex | | | 419 | 411 | | | | 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 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 0 (Not Applicable) N/A 4587 12360 62547 10990 1954 2022
41 Aqua BCE5DC Solid 82 60 1233 116 1998 2006 41 Aqua BCE5DC Solid 82 60 1233 116 1998 2006
11 Black 212121 Solid 10925 11692 15454 11229 1957 2022 11 Black 212121 Solid 10925 11692 15454 11229 1957 2022
7 Blue 0057A6 Solid 3811 7844 6792 4199 1950 2022 7 Blue 0057A6 Solid 3811 7844 6792 4199 1950 2022
97 Blue-Violet 506CEF Solid 38 18 709 64 2004 2005 97 Blue-Violet 506CEF Solid 38 18 709 64 2004 2005
36 Bright Green 10CB31 Solid 588 1738 2222 671 1950 2022 36 Bright Green 10CB31 Solid 588 1738 2222 671 1950 2022
105 Bright Light Blue BCD1ED Solid 373 477 1412 422 2004 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 110 Bright Light Orange FFC700 Solid 1011 1429 2547 1094 2000 2022
103 Bright Light Yellow FEED83 Solid 391 696 1870 437 2004 2022 103 Bright Light Yellow FEED83 Solid 391 696 1870 437 2004 2022
104 Bright Pink F7BCDA Solid 555 1074 1458 613 2003 2022 104 Bright Pink F7BCDA Solid 555 1074 1458 613 2003 2022
8 Brown 532115 Solid 570 1082 3110 921 1974 2006 8 Brown 532115 Solid 570 1082 3110 921 1974 2006
227 Clikits Lavender E0AAD9 Solid 10 12 182 12 2005 2005 227 Clikits Lavender E0AAD9 Solid 10 12 182 12 2005 2005
220 Coral FF8172 Solid 138 196 690 140 2019 2022 220 Coral FF8172 Solid 138 196 690 140 2019 2022
153 Dark Azure 009FE0 Solid 614 771 1749 651 2000 2022 153 Dark Azure 009FE0 Solid 614 771 1749 651 2000 2022
63 Dark Blue 243757 Solid 2022 1903 4012 2107 1961 2022 63 Dark Blue 243757 Solid 2022 1903 4012 2107 1961 2022
109 Dark Blue-Violet 2032B0 Solid 9 7 783 16 2004 2006 109 Dark Blue-Violet 2032B0 Solid 9 7 783 16 2004 2006
85 Dark Bluish Gray 595D60 Solid 3642 5932 7063 4036 1991 2022 85 Dark Bluish Gray 595D60 Solid 3642 5932 7063 4036 1991 2022
120 Dark Brown 330000 Solid 681 1480 2640 735 2008 2022 120 Dark Brown 330000 Solid 681 1480 2640 735 2008 2022
10 Dark Gray 6B5A5A Solid 1029 1688 3791 1432 1961 2006 10 Dark Gray 6B5A5A Solid 1029 1688 3791 1432 1961 2006
80 Dark Green 2E5543 Solid 829 920 2816 910 1961 2022 80 Dark Green 2E5543 Solid 829 920 2816 910 1961 2022
225 Dark Nougat E78B3E Solid 3 10 570 18 2001 2004 225 Dark Nougat E78B3E Solid 3 10 570 18 2001 2004
68 Dark Orange B35408 Solid 667 1498 2169 741 1979 2022 68 Dark Orange B35408 Solid 667 1498 2169 741 1979 2022
47 Dark Pink EF5BB3 Solid 701 1109 1516 768 1994 2022 47 Dark Pink EF5BB3 Solid 701 1109 1516 768 1994 2022
89 Dark Purple 5F2683 Solid 911 1075 2067 992 2000 2022 89 Dark Purple 5F2683 Solid 911 1075 2067 992 2000 2022
59 Dark Red 6A0E15 Solid 1522 1644 3671 1614 1961 2022 59 Dark Red 6A0E15 Solid 1522 1644 3671 1614 1961 2022
231 Dark Salmon FF6326 Solid 5 4 58 4 2003 2003 231 Dark Salmon FF6326 Solid 5 4 58 4 2003 2003
69 Dark Tan B89869 Solid 979 2081 2855 1035 1961 2022 69 Dark Tan B89869 Solid 979 2081 2855 1035 1961 2022
39 Dark Turquoise 00A29F Solid 521 570 1498 593 1998 2022 39 Dark Turquoise 00A29F Solid 521 570 1498 593 1998 2022
161 Dark Yellow DD982E Solid 4 4 523 19 2004 2005 161 Dark Yellow DD982E Solid 4 4 523 19 2004 2005
29 Earth Orange E6881D Solid 37 87 752 55 1982 2006 29 Earth Orange E6881D Solid 37 87 752 55 1982 2006
106 Fabuland Brown B3694E Solid 7 26 1040 21 1979 1997 106 Fabuland Brown B3694E Solid 7 26 1040 21 1979 1997
160 Fabuland Orange EF9121 Solid 2 3 412 3 1983 1987 160 Fabuland Orange EF9121 Solid 2 3 412 3 1983 1987
6 Green 00923D Solid 1931 4950 4408 2217 1949 2022 6 Green 00923D Solid 1931 4950 4408 2217 1949 2022
154 Lavender D3BDE3 Solid 290 397 867 344 2011 2022 154 Lavender D3BDE3 Solid 290 397 867 344 2011 2022
152 Light Aqua D8EFDD Solid 410 450 988 430 2011 2022 152 Light Aqua D8EFDD Solid 410 450 988 430 2011 2022
62 Light Blue C8D9E1 Solid 39 30 765 107 1950 2007 62 Light Blue C8D9E1 Solid 39 30 765 107 1950 2007
86 Light Bluish Gray AFB5C7 Solid 4136 6435 7609 4719 1993 2022 86 Light Bluish Gray AFB5C7 Solid 4136 6435 7609 4719 1993 2022
9 Light Gray 9C9C9C Solid 1853 3192 5152 2393 1954 2021 9 Light Gray 9C9C9C Solid 1853 3192 5152 2393 1954 2021
38 Light Green A5DBB5 Solid 67 61 554 111 1992 2005 38 Light Green A5DBB5 Solid 67 61 554 111 1992 2005
35 Light Lime ECEEBD Solid 20 16 349 46 1992 2007 35 Light Lime ECEEBD Solid 20 16 349 46 1992 2007
90 Light Nougat FECCB0 Solid 1573 1521 2971 1559 2004 2022 90 Light Nougat FECCB0 Solid 1573 1521 2971 1559 2004 2022
32 Light Orange F7AD63 Solid 15 16 391 55 1998 2004 32 Light Orange F7AD63 Solid 15 16 391 55 1998 2004
56 Light Pink FFE1FF Solid 3 4 429 52 1999 2007 56 Light Pink FFE1FF Solid 3 4 429 52 1999 2007
93 Light Purple DA70D6 Solid 26 15 493 60 2003 2006 93 Light Purple DA70D6 Solid 26 15 493 60 2003 2006
26 Light Salmon FCC7B7 Solid 50 21 426 57 1997 2002 26 Light Salmon FCC7B7 Solid 50 21 426 57 1997 2002
40 Light Turquoise 00C5BC Solid 49 39 618 76 1998 2004 40 Light Turquoise 00C5BC Solid 49 39 618 76 1998 2004
44 Light Violet C9CAE2 Solid 70 39 333 86 1994 2004 44 Light Violet C9CAE2 Solid 70 39 333 86 1994 2004
33 Light Yellow FFE383 Solid 96 73 1100 155 1994 2011 33 Light Yellow FFE383 Solid 96 73 1100 155 1994 2011
34 Lime C4E000 Solid 1594 2306 2734 1736 1982 2022 34 Lime C4E000 Solid 1594 2306 2734 1736 1982 2022
72 Maersk Blue 7DC1D8 Solid 84 14 588 100 1974 2011 72 Maersk Blue 7DC1D8 Solid 84 14 588 100 1974 2011
71 Magenta B72276 Solid 532 844 1383 580 2000 2022 71 Magenta B72276 Solid 532 844 1383 580 2000 2022
156 Medium Azure 6ACEE0 Solid 764 1202 1715 828 2012 2022 156 Medium Azure 6ACEE0 Solid 764 1202 1715 828 2012 2022
42 Medium Blue 82ADD8 Solid 779 1068 1990 886 1949 2022 42 Medium Blue 82ADD8 Solid 779 1068 1990 886 1949 2022
91 Medium Brown 774125 Solid 40 28 1328 75 2002 2006 91 Medium Brown 774125 Solid 40 28 1328 75 2002 2006
94 Medium Dark Pink F785B1 Solid 14 7 288 53 1992 1996 94 Medium Dark Pink F785B1 Solid 14 7 288 53 1992 1996
37 Medium Green 62F58E Solid 121 102 639 135 1950 2004 37 Medium Green 62F58E Solid 121 102 639 135 1950 2004
157 Medium Lavender C689D9 Solid 431 583 975 450 2012 2022 157 Medium Lavender C689D9 Solid 431 583 975 450 2012 2022
76 Medium Lime DFE000 Solid 64 36 438 77 1998 2005 76 Medium Lime DFE000 Solid 64 36 438 77 1998 2005
150 Medium Nougat E3A05B Solid 812 1284 1936 848 2010 2022 150 Medium Nougat E3A05B Solid 812 1284 1936 848 2010 2022
31 Medium Orange FFA531 Solid 139 116 929 180 1950 2008 31 Medium Orange FFA531 Solid 139 116 929 180 1950 2008
73 Medium Violet 9391E4 Solid 16 21 307 19 1999 2005 73 Medium Violet 9391E4 Solid 16 21 307 19 1999 2005
166 Neon Green DBF355 Solid 322 6 166 Neon Green DBF355 Solid 322 6
165 Neon Orange FA5947 Solid 292 6 165 Neon Orange FA5947 Solid 292 6
236 Neon Yellow FFFC00 Solid 36 11 60 27 2022 2022 236 Neon Yellow FFFC00 Solid 36 11 60 27 2022 2022
28 Nougat FFAF7D Solid 202 245 1199 232 1979 2022 28 Nougat FFAF7D Solid 202 245 1199 232 1979 2022
155 Olive Green ABA953 Solid 500 417 1913 542 2012 2022 155 Olive Green ABA953 Solid 500 417 1913 542 2012 2022
4 Orange FF7E14 Solid 1881 3119 3863 2061 1993 2022 4 Orange FF7E14 Solid 1881 3119 3863 2061 1993 2022
23 Pink FFC0CB Solid 120 79 883 216 1991 2005 23 Pink FFC0CB Solid 120 79 883 216 1991 2005
24 Purple A5499C Solid 140 129 1287 249 1996 2008 24 Purple A5499C Solid 140 129 1287 249 1996 2008
5 Red B30006 Solid 7256 9914 11158 7714 1949 2022 5 Red B30006 Solid 7256 9914 11158 7714 1949 2022
88 Reddish Brown 89351D Solid 1900 3882 3999 2131 1961 2022 88 Reddish Brown 89351D Solid 1900 3882 3999 2131 1961 2022
27 Rust B22222 Solid 9 13 1326 27 1989 2001 27 Rust B22222 Solid 9 13 1326 27 1989 2001
25 Salmon FF7D5D Solid 85 27 395 89 1997 1999 25 Salmon FF7D5D Solid 85 27 395 89 1997 1999
55 Sand Blue 8899AB Solid 617 545 1862 671 2001 2022 55 Sand Blue 8899AB Solid 617 545 1862 671 2001 2022
48 Sand Green A2BFA3 Solid 584 594 1762 625 1964 2022 48 Sand Green A2BFA3 Solid 584 594 1762 625 1964 2022
54 Sand Purple B57DA5 Solid 20 5 383 24 2001 2002 54 Sand Purple B57DA5 Solid 20 5 383 24 2001 2002
58 Sand Red 8C6B6B Solid 39 18 428 48 2001 2004 58 Sand Red 8C6B6B Solid 39 18 428 48 2001 2004
87 Sky Blue 8AD4E1 Solid 29 25 646 43 2003 2007 87 Sky Blue 8AD4E1 Solid 29 25 646 43 2003 2007
2 Tan EED9A4 Solid 2200 4291 4916 2448 1958 2022 2 Tan EED9A4 Solid 2200 4291 4916 2448 1958 2022
99 Very Light Bluish Gray E4E8E8 Solid 51 48 1844 97 2004 2013 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 49 Very Light Gray E8E8E8 Solid 21 23 1196 67 1997 2004
96 Very Light Orange E6C05D Solid 1 2 383 14 2000 2000 96 Very Light Orange E6C05D Solid 1 2 383 14 2000 2000
43 Violet 3448A4 Solid 79 44 517 96 1992 2004 43 Violet 3448A4 Solid 79 44 517 96 1992 2004
1 White FFFFFF Solid 13369 9998 19160 13546 1949 2022 1 White FFFFFF Solid 13369 9998 19160 13546 1949 2022
3 Yellow FFE001 Solid 6385 9723 9968 7259 1949 2022 3 Yellow FFE001 Solid 6385 9723 9968 7259 1949 2022
158 Yellowish Green E7F2A7 Solid 165 234 649 186 2012 2022 158 Yellowish Green E7F2A7 Solid 165 234 649 186 2012 2022
113 Trans-Aqua B7C8BF Transparent 38 38 375 51 2003 2006 113 Trans-Aqua B7C8BF Transparent 38 38 375 51 2003 2006
13 Trans-Black 939484 Transparent 438 1693 1354 506 1999 2022 13 Trans-Black 939484 Transparent 438 1693 1354 506 1999 2022
108 Trans-Bright Green 10Cb31 Transparent 153 448 770 190 2006 2022 108 Trans-Bright Green 10Cb31 Transparent 153 448 770 190 2006 2022
12 Trans-Clear EEEEEE Transparent 945 4755 2856 1184 1950 2022 12 Trans-Clear EEEEEE Transparent 945 4755 2856 1184 1950 2022
14 Trans-Dark Blue 00296B Transparent 255 1625 1231 318 1978 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 50 Trans-Dark Pink CE1d9b Transparent 222 643 777 267 1998 2022
20 Trans-Green 217625 Transparent 134 1423 810 182 1969 2022 20 Trans-Green 217625 Transparent 134 1423 810 182 1969 2022
15 Trans-Light Blue 68BCC5 Transparent 750 2679 1818 886 1985 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 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 221 Trans-Light Green 94E5AB Transparent 11 5 135 15 2005 2006
164 Trans-Light Orange E99A3A Transparent 42 22 327 82 2003 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 114 Trans-Light Purple B97AB1 Transparent 20 18 197 30 2005 2006
74 Trans-Medium Blue 7384A5 Transparent 105 207 855 151 2001 2018 74 Trans-Medium Blue 7384A5 Transparent 105 207 855 151 2001 2018
234 Trans-Medium Purple 9C41B6 Transparent 38 36 49 43 2003 2006 234 Trans-Medium Purple 9C41B6 Transparent 38 36 49 43 2003 2006
16 Trans-Neon Green C0F500 Transparent 232 1116 939 288 1990 2022 16 Trans-Neon Green C0F500 Transparent 232 1116 939 288 1990 2022
18 Trans-Neon Orange FF4231 Transparent 224 1032 953 323 1993 2021 18 Trans-Neon Orange FF4231 Transparent 224 1032 953 323 1993 2021
121 Trans-Neon Yellow FFD700 Transparent 27 34 378 71 2001 2006 121 Trans-Neon Yellow FFD700 Transparent 27 34 378 71 2001 2006
98 Trans-Orange D04010 Transparent 194 1821 844 265 2003 2022 98 Trans-Orange D04010 Transparent 194 1821 844 265 2003 2022
107 Trans-Pink FF8298 Transparent 68 44 243 89 2003 2006 107 Trans-Pink FF8298 Transparent 68 44 243 89 2003 2006
51 Trans-Purple 5525B7 Transparent 127 340 720 161 2000 2022 51 Trans-Purple 5525B7 Transparent 127 340 720 161 2000 2022
17 Trans-Red 9C0010 Transparent 205 3550 1134 278 1969 2022 17 Trans-Red 9C0010 Transparent 205 3550 1134 278 1969 2022
19 Trans-Yellow EBF72D Transparent 205 2368 1006 267 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 57 Chrome Antique Brass 645a4c Chrome 3 16 329 3 2001 2005
122 Chrome Black 544E4F Chrome 11 1 1080 14 2009 2009 122 Chrome Black 544E4F Chrome 11 1 1080 14 2009 2009
52 Chrome Blue 5C66A4 Chrome 5 14 381 12 1998 2006 52 Chrome Blue 5C66A4 Chrome 5 14 381 12 1998 2006
21 Chrome Gold f1f2e1 Chrome 52 278 1488 58 1989 2021 21 Chrome Gold f1f2e1 Chrome 52 278 1488 58 1989 2021
64 Chrome Green 3CB371 Chrome 1 2 347 6 1999 1999 64 Chrome Green 3CB371 Chrome 1 2 347 6 1999 1999
82 Chrome Pink aa4d8e Chrome 1 10 195 7 2001 2007 82 Chrome Pink aa4d8e Chrome 1 10 195 7 2001 2007
22 Chrome Silver DCDCDC Chrome 105 561 2081 184 1966 2018 22 Chrome Silver DCDCDC Chrome 105 561 2081 184 1966 2018
84 Copper C66921 Pearl 58 74 968 87 2001 2020 84 Copper C66921 Pearl 58 74 968 87 2001 2020
81 Flat Dark Gold AD7118 Pearl 42 42 824 127 2002 2006 81 Flat Dark Gold AD7118 Pearl 42 42 824 127 2002 2006
95 Flat Silver 8D949C Pearl 906 2649 2675 1055 1998 2022 95 Flat Silver 8D949C Pearl 906 2649 2675 1055 1998 2022
78 Metal Blue 5686AE Pearl 40 22 347 48 2002 2009 78 Metal Blue 5686AE Pearl 40 22 347 48 2002 2009
77 Pearl Dark Gray 666660 Pearl 645 1013 2588 722 2002 2022 77 Pearl Dark Gray 666660 Pearl 645 1013 2588 722 2002 2022
115 Pearl Gold E79E1D Pearl 967 2033 2533 1057 2004 2022 115 Pearl Gold E79E1D Pearl 967 2033 2533 1057 2004 2022
61 Pearl Light Gold E7AE5A Pearl 16 9 384 59 2000 2006 61 Pearl Light Gold E7AE5A Pearl 16 9 384 59 2000 2006
66 Pearl Light Gray ACB7C0 Pearl 425 625 1580 601 1993 2013 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 119 Pearl Very Light Gray D4D2CD Pearl 14 10 508 43 2002 2004
83 Pearl White FFFFFF Pearl 3 5 444 14 2003 2006 83 Pearl White FFFFFF Pearl 3 5 444 14 2003 2006
235 Reddish Gold E7891B Pearl 2 4 12 2 2003 2005 235 Reddish Gold E7891B Pearl 2 4 12 2 2003 2005
229 Satin Trans-Black 939484 Satin 4 9 22 4 2020 2021 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 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 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 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 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 230 Satin Trans-Purple 8320B7 Satin 1 5 20 2 2020 2020
228 Satin White FFFFFF Satin 10 23 124 10 2020 2022 228 Satin White FFFFFF Satin 10 23 124 10 2020 2022
65 Metallic Gold B8860B Metallic 105 249 1278 184 1997 2022 65 Metallic Gold B8860B Metallic 105 249 1278 184 1997 2022
70 Metallic Green bdb573 Metallic 26 7 335 36 2001 2018 70 Metallic Green bdb573 Metallic 26 7 335 36 2001 2018
67 Metallic Silver C0C0C0 Metallic 178 647 2103 262 1957 2022 67 Metallic Silver C0C0C0 Metallic 178 647 2103 262 1957 2022
46 Glow In Dark Opaque d4d5c9 Milky 40 87 592 105 1990 2011 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 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 159 Glow In Dark White d9d9d9 Milky 56 67 853 72 2012 2022
60 Milky White d4d3dd Milky 26 144 512 66 1963 2008 60 Milky White d4d3dd Milky 26 144 512 66 1963 2008
101 Glitter Trans-Clear b2adaa Glitter 16 27 150 19 1999 2021 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 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 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 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 222 Glitter Trans-Orange D04010 Glitter 1 1 45 1 2020 2020
102 Glitter Trans-Purple 3A2B82 Glitter 10 48 119 15 2000 2021 102 Glitter Trans-Purple 3A2B82 Glitter 10 48 119 15 2000 2021
116 Speckle Black-Copper 5F4E47 Speckle 5 3 124 6 2006 2006 116 Speckle Black-Copper 5F4E47 Speckle 5 3 124 6 2006 2006
151 Speckle Black-Gold AB9421 Speckle 2 4 172 5 2010 2011 151 Speckle Black-Gold AB9421 Speckle 2 4 172 5 2010 2011
111 Speckle Black-Silver 7C7E7C Speckle 15 49 175 19 2005 2013 111 Speckle Black-Silver 7C7E7C Speckle 15 49 175 19 2005 2013
117 Speckle DBGray-Silver 4A6363 Speckle 5 7 184 8 2006 2006 117 Speckle DBGray-Silver 4A6363 Speckle 5 7 184 8 2006 2006
142 Mx Aqua Green 27867E Modulex 20 12 142 Mx Aqua Green 27867E Modulex 20 12
128 Mx Black 000000 Modulex 154 158 128 Mx Black 000000 Modulex 154 158
132 Mx Brown 907450 Modulex 30 30 132 Mx Brown 907450 Modulex 30 30
133 Mx Buff DEC69C Modulex 36 33 133 Mx Buff DEC69C Modulex 36 33
126 Mx Charcoal Gray 595D60 Modulex 13 8 126 Mx Charcoal Gray 595D60 Modulex 13 8
149 Mx Clear FFFFFF Modulex 53 38 149 Mx Clear FFFFFF Modulex 53 38
214 Mx Foil Dark Blue 0057A6 Modulex 2 1 214 Mx Foil Dark Blue 0057A6 Modulex 2 1
210 Mx Foil Dark Gray 595D60 Modulex 1 1 210 Mx Foil Dark Gray 595D60 Modulex 1 1
212 Mx Foil Dark Green 006400 Modulex 1 212 Mx Foil Dark Green 006400 Modulex 1
215 Mx Foil Light Blue 68AECE Modulex 2 1 215 Mx Foil Light Blue 68AECE Modulex 2 1
211 Mx Foil Light Gray 9C9C9C Modulex 1 211 Mx Foil Light Gray 9C9C9C Modulex 1
213 Mx Foil Light Green 7DB538 Modulex 1 1 213 Mx Foil Light Green 7DB538 Modulex 1 1
219 Mx Foil Orange F7AD63 Modulex 1 1 219 Mx Foil Orange F7AD63 Modulex 1 1
217 Mx Foil Red 8B0000 Modulex 1 1 217 Mx Foil Red 8B0000 Modulex 1 1
216 Mx Foil Violet 4B0082 Modulex 1 216 Mx Foil Violet 4B0082 Modulex 1
218 Mx Foil Yellow FED557 Modulex 1 218 Mx Foil Yellow FED557 Modulex 1
139 Mx Lemon BDC618 Modulex 12 21 139 Mx Lemon BDC618 Modulex 12 21
124 Mx Light Bluish Gray AfB5C7 Modulex 13 4 124 Mx Light Bluish Gray AfB5C7 Modulex 13 4
125 Mx Light Gray 9C9C9C Modulex 56 51 125 Mx Light Gray 9C9C9C Modulex 56 51
136 Mx Light Orange F7AD63 Modulex 12 7 136 Mx Light Orange F7AD63 Modulex 12 7
137 Mx Light Yellow FFE371 Modulex 14 15 137 Mx Light Yellow FFE371 Modulex 14 15
144 Mx Medium Blue 61AFFF Modulex 15 10 144 Mx Medium Blue 61AFFF Modulex 15 10
138 Mx Ochre Yellow FED557 Modulex 18 18 138 Mx Ochre Yellow FED557 Modulex 18 18
140 Mx Olive Green 7C9051 Modulex 20 21 140 Mx Olive Green 7C9051 Modulex 20 21
135 Mx Orange F47B30 Modulex 17 25 135 Mx Orange F47B30 Modulex 17 25
145 Mx Pastel Blue 68AECE Modulex 21 23 145 Mx Pastel Blue 68AECE Modulex 21 23
141 Mx Pastel Green 7DB538 Modulex 27 30 141 Mx Pastel Green 7DB538 Modulex 27 30
148 Mx Pink F785B1 Modulex 12 20 148 Mx Pink F785B1 Modulex 12 20
130 Mx Pink Red F45C40 Modulex 12 6 130 Mx Pink Red F45C40 Modulex 12 6
129 Mx Red B52C20 Modulex 24 29 129 Mx Red B52C20 Modulex 24 29
146 Mx Teal Blue 467083 Modulex 16 14 146 Mx Teal Blue 467083 Modulex 16 14
134 Mx Terracotta 5C5030 Modulex 24 32 134 Mx Terracotta 5C5030 Modulex 24 32
143 Mx Tile Blue 0057A6 Modulex 37 143 Mx Tile Blue 0057A6 Modulex 37
131 Mx Tile Brown 330000 Modulex 111 131 Mx Tile Brown 330000 Modulex 111
127 Mx Tile Gray 6B5A5A Modulex 41 127 Mx Tile Gray 6B5A5A Modulex 41
147 Mx Violet BD7D85 Modulex 18 8 147 Mx Violet BD7D85 Modulex 18 8
123 Mx White FFFFFF Modulex 419 411 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 // scrapes bricklink for the every piece and amounts in a set of lego
const fs = require('fs'); const fs = require('fs');
const axios = require('axios'); const axios = require('axios');
// For sets make sets.txt // For sets make sets.txt
const sets = fs.readFileSync('res/Sets.txt', 'utf8').toString().split('\n').map((i) => i.split('\t')); const sets = fs.readFileSync('res/Sets.txt', 'utf8').toString().split('\n').map((i) => i.split('\t'));
// output format: // output format:
// setid: { pieceid: amount, pieceid: amount, ... } // setid: { pieceid: amount, pieceid: amount, ... }
async function post(url) { async function post(url) {
// axios return HTML from website // axios return HTML from website
try { try {
const res = await axios.get(url, { const res = await axios.get(url, {
method: 'POST', method: 'POST',
headers: { 'User-Agent': 'Chrome/96.0.4664.175' }, headers: { 'User-Agent': 'Chrome/96.0.4664.175' },
}); });
return res.data.toString(); return res.data.toString();
} catch (e) { } catch (e) {
fs.appendFileSync('error-set.txt', `${url}\n`); fs.appendFileSync('error-set.txt', `${url}\n`);
console.log(`Failed to download ${url}`); console.log(`Failed to download ${url}`);
} }
} }
async function main() { async function main() {
// sometimes fails on minifigures - doesn't matter though, it's correct enough // sometimes fails on minifigures - doesn't matter though, it's correct enough
const regex = /class=".*?IV_ITEM".*?if \(brickList\["(.*?)"]\).*?nbsp;(.*?)&nbsp;/g; const regex = /class=".*?IV_ITEM".*?if \(brickList\["(.*?)"]\).*?nbsp;(.*?)&nbsp;/g;
const output = {}; const output = {};
for (let i = 0; i < sets.length; i++) { for (let i = 0; i < sets.length; i++) {
const set = sets[i]; const set = sets[i];
const data = await post(`https://www.bricklink.com/catalogItemInv.asp?S=${set[2]}`); const data = await post(`https://www.bricklink.com/catalogItemInv.asp?S=${set[2]}`);
output[set[2]] = {}; output[set[2]] = {};
let pieceCount = 0; let pieceCount = 0;
let m; let m;
while ((m = regex.exec(data)) !== null) { while ((m = regex.exec(data)) !== null) {
if (m.index === regex.lastIndex) { if (m.index === regex.lastIndex) {
regex.lastIndex++; regex.lastIndex++;
} }
pieceCount += parseInt(m[2]); pieceCount += parseInt(m[2]);
output[set[2]] = { ...output[set[2]], [m[1]]: parseInt(m[2]) }; output[set[2]] = { ...output[set[2]], [m[1]]: parseInt(m[2]) };
} }
console.log(`${i}/${sets.length} ${set[2]} has ${pieceCount} pieces`); console.log(`${i}/${sets.length} ${set[2]} has ${pieceCount} pieces`);
fs.writeFileSync('res/sets.json', JSON.stringify(output)); fs.writeFileSync('res/sets.json', JSON.stringify(output));
} }
} }
main(); main();

180
docs/API.md
View File

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

168
docs/CLIENT-FRAMEWORK.md
View File

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

36
docs/CONFIGURATION.md
View File

@@ -1,18 +1,18 @@
# DotEnv # DotEnv
Items suffixed with `_DEV` will automatically replace the non-dev Items suffixed with `_DEV` will automatically replace the non-dev
version of the same item internally version of the same item internally
```config ```config
NODE_ENV=dev/prod NODE_ENV=dev/prod
PORT=port PORT=port
PORT_DEV=port PORT_DEV=port
LOG_LEVEL=verbose/debug/warn/info LOG_LEVEL=verbose/debug/warn/info
LOG_TARGET=console/filesystem/network LOG_TARGET=console/filesystem/network
LOG_PATH=network ip/path LOG_PATH=network ip/path
DATABASE_HOST=host/path DATABASE_HOST=host/path
DATABASE_HOST_DEV=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', () => { test('Sanity Check', () => {
expect(1 + 1).toBe(2); expect(1 + 1).toBe(2);
}); });

52
src/config.js
View File

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

126
src/database/database.js
View File

@@ -1,63 +1,63 @@
const Logger = require('../logger.js'); const Logger = require('../logger.js');
const EntityFramework = require('./psql-entity-framework/entity-relationships.js'); const EntityFramework = require('./psql-entity-framework/entity-relationships.js');
const { Client } = require('pg'); const { Client } = require('pg');
class Database { class Database {
constructor() { constructor() {
this.connection = null; this.connection = null;
} }
async connect(options) { async connect(options) {
Logger.Info('Database Connecting...'); Logger.Info('Database Connecting...');
// review options // review options
if (!options) { if (!options) {
options = { options = {
user: process.env.DATABASE_USER, user: process.env.DATABASE_USER,
host: process.env.DATABASE_HOST, host: process.env.DATABASE_HOST,
database: process.env.DATABASE_DB, database: process.env.DATABASE_DB,
password: process.env.DATABASE_PASSWORD, password: process.env.DATABASE_PASSWORD,
port: process.env.DATABASE_PORT, port: process.env.DATABASE_PORT,
}; };
} }
this.options = options; this.options = options;
this.connection = await this.connectToDatabase(); this.connection = await this.connectToDatabase();
Logger.Info('Database Connected'); Logger.Info('Database Connected');
} }
async connectToDatabase() { async connectToDatabase() {
const con = new Promise((resolve, reject) => { const con = new Promise((resolve, reject) => {
const psqlClient = new Client(this.options); const psqlClient = new Client(this.options);
psqlClient.connect(); psqlClient.connect();
psqlClient.query('SELECT NOW()', (err, res) => { psqlClient.query('SELECT NOW()', (err, res) => {
if (err) reject(err); if (err) reject(err);
this.connection = psqlClient; this.connection = psqlClient;
Logger.Database(`PSQL Time: ${res.rows[0].now}`); Logger.Database(`PSQL Time: ${res.rows[0].now}`);
Logger.Database(`Connected to ${this.options.host}`); Logger.Database(`Connected to ${this.options.host}`);
resolve(psqlClient); resolve(psqlClient);
}); });
}); });
await con; await con;
this.ORM = new EntityFramework(this.connection); this.ORM = new EntityFramework(this.connection);
return this.connection; return this.connection;
} }
async ORMReady() { async ORMReady() {
await this.ORM.syncModels(); await this.ORM.syncModels();
} }
get getORM() { get getORM() {
return this.ORM; return this.ORM;
} }
} }
module.exports = { module.exports = {
IDatabase: Database, IDatabase: Database,
DataTypes: require('./psql-entity-framework/types.js'), DataTypes: require('./psql-entity-framework/types.js'),
DataConstraints: require('./psql-entity-framework/relationships-constraints.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 Logger = require('../../logger.js');
const DataTypes = require('./types.js'); const DataTypes = require('./types.js');
const DataConstraints = require('./relationships-constraints.js'); const DataConstraints = require('./relationships-constraints.js');
const Model = require('./model.js'); const Model = require('./model.js');
/** /**
* In order to keep the models dynamic and flexible, we need to be able to add * 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 * 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 * 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 * 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. * keeping track of the models that have been added to the database.
*/ */
/** /**
* @class Database * @class Database
* @classdesc The Database class is used to create a database instance. * @classdesc The Database class is used to create a database instance.
* @param {object} connection - An active instance of a psql database connection * @param {object} connection - An active instance of a psql database connection
*/ */
class PSQLObjectRelation { class PSQLObjectRelation {
constructor(psqlConnection) { constructor(psqlConnection) {
Logger.Database('ORM Loading...'); Logger.Database('ORM Loading...');
this.connection = psqlConnection; this.connection = psqlConnection;
this.models = []; this.models = [];
// dummyModels are for models that have requested a model that doesn't exist // 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 // the model that doesn't exist will be added here, and once it is added, the
// dummy dependancy will be resolved // dummy dependancy will be resolved
this.dummyModels = []; this.dummyModels = [];
} }
/** /**
* @function model * @function model
* @description Gets a model from the database stash * @description Gets a model from the database stash
* @param {string} modelName - The name of the target model * @param {string} modelName - The name of the target model
*/ */
model(modelName) { model(modelName) {
// TODO: Resolve the dependancy if it dosen't exist and make a note of it // TODO: Resolve the dependancy if it dosen't exist and make a note of it
if (!this.models[modelName]) { if (!this.models[modelName]) {
Logger.Database(`Model ${modelName} does not exist, adding to dummyModels`); Logger.Database(`Model ${modelName} does not exist, adding to dummyModels`);
if (this.dummyModels[modelName]) { if (this.dummyModels[modelName]) {
return this.dummyModels[modelName]; return this.dummyModels[modelName];
} }
const dummy = new Model(modelName, {}, true); const dummy = new Model(modelName, {}, true);
this.dummyModels[modelName] = dummy; this.dummyModels[modelName] = dummy;
return dummy; return dummy;
} }
return this.models[modelName]; return this.models[modelName];
} }
/** /**
* @function addModel * @function addModel
* @description Adds a model to the database stash * @description Adds a model to the database stash
* @param {string} name * @param {string} name
* @param {object} model * @param {object} model
*/ */
addModel(name, model) { addModel(name, model) {
Logger.Database(`ORM Adding ${name}`); Logger.Database(`ORM Adding ${name}`);
if (this.models[name]) { if (this.models[name]) {
Logger.Error(`Redefinition of model ${name}, ignoring.`); Logger.Error(`Redefinition of model ${name}, ignoring.`);
return; return;
} }
const keys = Object.keys(model); const keys = Object.keys(model);
/** /**
* Make sure that every property has a type and a conatraints array * Make sure that every property has a type and a conatraints array
* If not, add it * If not, add it
* The structure should always look like: * The structure should always look like:
* property: { * property: {
* type: DataTypes.VARCHAR(50), * type: DataTypes.VARCHAR(50),
* constraints: [ DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL ] * constraints: [ DataConstraints.PRIMARY_KEY, DataConstraints.NOT_NULL ]
* } * }
*/ */
keys.forEach(key => { keys.forEach(key => {
if (typeof model[key] !== 'object') { if (typeof model[key] !== 'object') {
const type = model[key]; const type = model[key];
model[key] = { model[key] = {
type, type,
constraints: [], constraints: [],
}; };
} }
if (!model[key].constraints) { if (!model[key].constraints) {
model[key].constraints = []; model[key].constraints = [];
} }
}); });
this.models[name] = new Model(name, model); this.models[name] = new Model(name, model);
} }
/** /**
* @function resolveDependants * @function resolveDependants
* @description Resolves all the dependancies for the models that have been added where properties weren't available when they were added * @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 // TODO: Make this more maintainable
resolveDepends() { resolveDepends() {
} }
/** /**
* @function syncModels * @function syncModels
* @description Syncs the models to the database * @description Syncs the models to the database
* ONLY run this after all models are properly added * ONLY run this after all models are properly added
*/ */
syncModels() { syncModels() {
Logger.Database('ORM Syncing...'); Logger.Database('ORM Syncing...');
this.resolveDepends(); this.resolveDepends();
console.log(this.models.lego_brick); console.log(this.models.lego_brick);
} }
} }
module.exports = PSQLObjectRelation; module.exports = PSQLObjectRelation;

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

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

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

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

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

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

60
src/index.js
View File

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

336
src/logger.js
View File

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

34
src/models/catagory.js
View File

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

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

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

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

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

70
src/routes/api.js
View File

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

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

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

38
src/routes/server.js
View File

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

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

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