90 lines
No EOL
4.5 KiB
JavaScript
90 lines
No EOL
4.5 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 = {
|
|
rear: [
|
|
// Blue Shade
|
|
{ name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
|
|
{ name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
|
|
{ name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
|
|
{ name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
|
|
{ name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
|
|
|
|
// Brown Shade
|
|
{ name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
|
|
|
|
// Gray Shade
|
|
{ name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
|
|
{ name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
|
|
{ name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
|
|
{ name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
|
|
|
|
// Green Shade
|
|
{ name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
|
|
{ name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
|
|
{ name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
|
|
|
|
// Tints Only
|
|
{ name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
|
|
{ name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
|
|
{ name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
|
|
{ name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
|
|
{ name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
|
|
{ name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
|
|
{ name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
|
|
|
|
// No shade or tint
|
|
{ name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
|
|
],
|
|
|
|
windshield: [
|
|
// Blue Shade
|
|
{ name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
|
|
{ name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
|
|
{ name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
|
|
{ name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
|
|
{ name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
|
|
|
|
// Brown Shade
|
|
{ name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
|
|
|
|
// Gray Shade
|
|
{ name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
|
|
{ name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
|
|
{ name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
|
|
{ name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
|
|
|
|
// Green Shade
|
|
{ name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
|
|
{ name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
|
|
{ name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
|
|
|
|
// Tints Only
|
|
{ name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
|
|
{ name: "brown tint", src: "Windshield-NoShade-BrownTint.svg" },
|
|
{ name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
|
|
{ name: "dark gray tint", src: "Windshield-NoShade-DarkGrayTint.svg" },
|
|
{ name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
|
|
{ name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
|
|
{ name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" },
|
|
|
|
// No shade or tint
|
|
{ name: "no shade, no tint", 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) {
|
|
|
|
if (tintMap[glassLocation.toLowerCase()] === undefined) {
|
|
return '';
|
|
}
|
|
|
|
const tintImageSource = tintMap[glassLocation.toLowerCase()].find(item => item.name.toLowerCase() == colorString.toLowerCase())
|
|
|
|
return tintImageSource;
|
|
} |