7678ea2de0
Added missing tints from FMG If we don't have a tint image in the tint map don't error out just hide the image. (Same Functionality as FMG)
91 lines
4.7 KiB
JavaScript
91 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 = Object.freeze({
|
|
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-GreenTint.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.
|
|
const getTintImage = (glassLocation, colorString) => {
|
|
// Windshield glass has special images, all other glass uses the same though.
|
|
const glassLoc = (glassLocation.toLowerCase() !== 'windshield') ? 'other' : 'windshield';
|
|
if (tintMap[glassLoc] === undefined) {
|
|
return '';
|
|
}
|
|
|
|
return tintMap[glassLoc].find((item) => item.name.toLowerCase() === colorString.toLowerCase());
|
|
};
|
|
|
|
export default getTintImage;
|