96 lines
4.7 KiB
JavaScript
96 lines
4.7 KiB
JavaScript
// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible.
|
|
// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
|
|
// See vehicle-parts for implementation example.
|
|
const tintMap = {
|
|
other: [
|
|
// Blue Shade
|
|
{ name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" },
|
|
{ name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" },
|
|
{ name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" },
|
|
{ name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" },
|
|
{ name: "clear, blue shade", src: "Glass-BlueShade-NoTint.svg" },
|
|
|
|
// Brown Shade
|
|
{ name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" },
|
|
|
|
// Gray Shade
|
|
{ name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" },
|
|
{ name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" },
|
|
{ name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" },
|
|
{ name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" },
|
|
|
|
// Green Shade
|
|
{ name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" },
|
|
{ name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" },
|
|
{ name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" },
|
|
|
|
// Tints Only
|
|
{ name: "blue tint privacy", src: "Glass-NoShade-BlueTint.svg" },
|
|
{ name: "bronze tint", src: "Glass-NoShade-BrownTint.svg" },
|
|
{ name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
|
|
{ name: "privacy, black frame", src: "Glass-NoShade-Privacy.svg" },
|
|
{ name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
|
|
{ name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
|
|
{ name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" },
|
|
{ name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
|
|
{ name: "green tint privacy", src: "Glass-NoShade-Privacy.svg" },
|
|
|
|
// No shade or tint
|
|
{ name: "clear", src: "Glass-NoShade-NoTint.svg" },
|
|
],
|
|
|
|
windshield: [
|
|
// Blue Shade
|
|
{ name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" },
|
|
{ name: "bronze tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" },
|
|
{ name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" },
|
|
{ name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" },
|
|
{ name: "clear, blue shade", src: "Windshield-BlueShade-NoTint.svg" },
|
|
|
|
// Brown Shade
|
|
{ name: "bronze tint, bronze shade", src: "Windshield-BrownShade-BrownTint.svg" },
|
|
|
|
// Gray Shade
|
|
{ name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" },
|
|
{ name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" },
|
|
{ name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" },
|
|
{ name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" },
|
|
|
|
// Green Shade
|
|
{ name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" },
|
|
{ name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" },
|
|
{ name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" },
|
|
|
|
// Tints Only
|
|
{ name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
|
|
{ name: "bronze tint", src: "Windshield-NoShade-BrownTint.svg" },
|
|
{ name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
|
|
{ name: "privacy, black frame", src: "Windshield-NoShade-Privacy.svg" },
|
|
{ name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
|
|
{ name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
|
|
{ name: "gray tint privacy", src: "Windshield-NoShade-GrayTint.svg" },
|
|
|
|
// No shade or tint
|
|
{ name: "clear", src: "Windshield-NoShade-NoTint.svg" },
|
|
],
|
|
};
|
|
|
|
// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint')
|
|
// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist.
|
|
// Returns undefined if no items are found.
|
|
export function getTintImage(glassLocation, colorString) {
|
|
// Windshield glass has special images, all other glass uses the same though.
|
|
if (glassLocation?.toLowerCase() !== "windshield") {
|
|
glassLocation = "other";
|
|
}
|
|
|
|
if (tintMap[glassLocation.toLowerCase()] === undefined) {
|
|
return "";
|
|
}
|
|
|
|
const tintImageSource = tintMap[glassLocation.toLowerCase()].find(
|
|
(item) => item.name.toLowerCase() == colorString.toLowerCase()
|
|
);
|
|
|
|
return tintImageSource;
|
|
}
|