Branding page mod names

26 files changed, 9 insertions, 2 deletions

diff --git a/apps/website/public/media/branding/mods/behindyou.png b/apps/website/public/media/branding/mods/behind_you.png
index 3efaba1..3efaba1 100644
--- a/apps/website/public/media/branding/mods/behindyou.png
+++ b/apps/website/public/media/branding/mods/behind_you.png
diff --git a/apps/website/public/media/branding/mods/behindyou.svg b/apps/website/public/media/branding/mods/behind_you.svg
index ae052e9..ae052e9 100644
--- a/apps/website/public/media/branding/mods/behindyou.svg
+++ b/apps/website/public/media/branding/mods/behind_you.svg
diff --git a/apps/website/public/media/branding/mods/crashpatch.png b/apps/website/public/media/branding/mods/crash_patch.png
index e886ab5..e886ab5 100644
--- a/apps/website/public/media/branding/mods/crashpatch.png
+++ b/apps/website/public/media/branding/mods/crash_patch.png
diff --git a/apps/website/public/media/branding/mods/crashpatch.svg b/apps/website/public/media/branding/mods/crash_patch.svg
index 8b16dbe..8b16dbe 100644
--- a/apps/website/public/media/branding/mods/crashpatch.svg
+++ b/apps/website/public/media/branding/mods/crash_patch.svg
diff --git a/apps/website/public/media/branding/mods/damagetint.png b/apps/website/public/media/branding/mods/damage_tint.png
index 1623b27..1623b27 100644
--- a/apps/website/public/media/branding/mods/damagetint.png
+++ b/apps/website/public/media/branding/mods/damage_tint.png
diff --git a/apps/website/public/media/branding/mods/damagetint.svg b/apps/website/public/media/branding/mods/damage_tint.svg
index f3d6e6a..f3d6e6a 100644
--- a/apps/website/public/media/branding/mods/damagetint.svg
+++ b/apps/website/public/media/branding/mods/damage_tint.svg
diff --git a/apps/website/public/media/branding/mods/evergreenhud.png b/apps/website/public/media/branding/mods/evergreen_h_u_d.png
index 3a65534..3a65534 100644
--- a/apps/website/public/media/branding/mods/evergreenhud.png
+++ b/apps/website/public/media/branding/mods/evergreen_h_u_d.png
diff --git a/apps/website/public/media/branding/mods/evergreenhud.svg b/apps/website/public/media/branding/mods/evergreen_h_u_d.svg
index 1fa9bf8..1fa9bf8 100644
--- a/apps/website/public/media/branding/mods/evergreenhud.svg
+++ b/apps/website/public/media/branding/mods/evergreen_h_u_d.svg
diff --git a/apps/website/public/media/branding/mods/glintcolorizer.png b/apps/website/public/media/branding/mods/glint_colorizer.png
index 35f7c1e..35f7c1e 100644
--- a/apps/website/public/media/branding/mods/glintcolorizer.png
+++ b/apps/website/public/media/branding/mods/glint_colorizer.png
diff --git a/apps/website/public/media/branding/mods/glintcolorizer.svg b/apps/website/public/media/branding/mods/glint_colorizer.svg
index cb2e936..cb2e936 100644
--- a/apps/website/public/media/branding/mods/glintcolorizer.svg
+++ b/apps/website/public/media/branding/mods/glint_colorizer.svg
diff --git a/apps/website/public/media/branding/mods/overflowanimations.png b/apps/website/public/media/branding/mods/overflow_animations.png
index 4a30a98..4a30a98 100644
--- a/apps/website/public/media/branding/mods/overflowanimations.png
+++ b/apps/website/public/media/branding/mods/overflow_animations.png
diff --git a/apps/website/public/media/branding/mods/overflowanimations.svg b/apps/website/public/media/branding/mods/overflow_animations.svg
index 7b0ee7c..7b0ee7c 100644
--- a/apps/website/public/media/branding/mods/overflowanimations.svg
+++ b/apps/website/public/media/branding/mods/overflow_animations.svg
diff --git a/apps/website/public/media/branding/mods/polyblur.png b/apps/website/public/media/branding/mods/poly_blur.png
index 2601d36..2601d36 100644
--- a/apps/website/public/media/branding/mods/polyblur.png
+++ b/apps/website/public/media/branding/mods/poly_blur.png
diff --git a/apps/website/public/media/branding/mods/polyblur.svg b/apps/website/public/media/branding/mods/poly_blur.svg
index 5bdf35a..5bdf35a 100644
--- a/apps/website/public/media/branding/mods/polyblur.svg
+++ b/apps/website/public/media/branding/mods/poly_blur.svg
diff --git a/apps/website/public/media/branding/mods/polynametag.png b/apps/website/public/media/branding/mods/poly_nametag.png
index 78cc53a..78cc53a 100644
--- a/apps/website/public/media/branding/mods/polynametag.png
+++ b/apps/website/public/media/branding/mods/poly_nametag.png
diff --git a/apps/website/public/media/branding/mods/polynametag.svg b/apps/website/public/media/branding/mods/poly_nametag.svg
index cc71c3d..cc71c3d 100644
--- a/apps/website/public/media/branding/mods/polynametag.svg
+++ b/apps/website/public/media/branding/mods/poly_nametag.svg
diff --git a/apps/website/public/media/branding/mods/polysprint.png b/apps/website/public/media/branding/mods/poly_sprint.png
index 71636ff..71636ff 100644
--- a/apps/website/public/media/branding/mods/polysprint.png
+++ b/apps/website/public/media/branding/mods/poly_sprint.png
diff --git a/apps/website/public/media/branding/mods/polysprint.svg b/apps/website/public/media/branding/mods/poly_sprint.svg
index f2df018..f2df018 100644
--- a/apps/website/public/media/branding/mods/polysprint.svg
+++ b/apps/website/public/media/branding/mods/poly_sprint.svg
diff --git a/apps/website/public/media/branding/mods/polytime.png b/apps/website/public/media/branding/mods/poly_time.png
index 0876d4e..0876d4e 100644
--- a/apps/website/public/media/branding/mods/polytime.png
+++ b/apps/website/public/media/branding/mods/poly_time.png
diff --git a/apps/website/public/media/branding/mods/polytime.svg b/apps/website/public/media/branding/mods/poly_time.svg
index e27f996..e27f996 100644
--- a/apps/website/public/media/branding/mods/polytime.svg
+++ b/apps/website/public/media/branding/mods/poly_time.svg
diff --git a/apps/website/public/media/branding/mods/polyweather.png b/apps/website/public/media/branding/mods/poly_weather.png
index 2439f6e..2439f6e 100644
--- a/apps/website/public/media/branding/mods/polyweather.png
+++ b/apps/website/public/media/branding/mods/poly_weather.png
diff --git a/apps/website/public/media/branding/mods/polyweather.svg b/apps/website/public/media/branding/mods/poly_weather.svg
index 58b52cc..58b52cc 100644
--- a/apps/website/public/media/branding/mods/polyweather.svg
+++ b/apps/website/public/media/branding/mods/poly_weather.svg
diff --git a/apps/website/public/media/branding/mods/vanillahud.png b/apps/website/public/media/branding/mods/vanilla_h_u_d.png
index 08a249c..08a249c 100644
--- a/apps/website/public/media/branding/mods/vanillahud.png
+++ b/apps/website/public/media/branding/mods/vanilla_h_u_d.png
diff --git a/apps/website/public/media/branding/mods/vanillahud.svg b/apps/website/public/media/branding/mods/vanilla_h_u_d.svg
index a9ad1fa..a9ad1fa 100644
--- a/apps/website/public/media/branding/mods/vanillahud.svg
+++ b/apps/website/public/media/branding/mods/vanilla_h_u_d.svg
diff --git a/apps/website/src/components/page/branding/BrandingImage.astro b/apps/website/src/components/page/branding/BrandingImage.astro
index f85364d..e112691 100644
--- a/apps/website/src/components/page/branding/BrandingImage.astro
+++ b/apps/website/src/components/page/branding/BrandingImage.astro
@@ -2,6 +2,7 @@
 interface Props {
 	type: 'badges' | 'logos' | 'mods'
 	name: string
+	nameFormatted?: string
 	altText?: string
 	extensions?: ('png' | 'svg')[]
 	maxWidth?: number
@@ -12,6 +13,7 @@ const {
 	name,
 	type,
 	altText,
+	nameFormatted,
 	background = 'white',
 	maxWidth = 300,
 	extensions = ['png', 'svg'],
@@ -27,4 +29,5 @@ const path = `/media/branding/${type}/${name}`;
 		))}
 	</div>
 	<img style={`max-width: ${maxWidth}px;`} src={`${path}.svg`} alt={altText}>
+	{nameFormatted && <span class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-50 text-xxs">{nameFormatted}</span>}
 </div>
diff --git a/apps/website/src/pages/branding.astro b/apps/website/src/pages/branding.astro
index d1e05b4..e367f3b 100644
--- a/apps/website/src/pages/branding.astro
+++ b/apps/website/src/pages/branding.astro
@@ -5,7 +5,11 @@ import Section from '@components/base/Section.astro';
 import BrandingImage from '@components/page/branding/BrandingImage.astro';
 import Layout from '@layouts/Layout.astro';
 
-const mods = ['behindyou', 'chatting', 'crashpatch', 'damagetint', 'evergreenhud', 'glintcolorizer', 'keystrokes', 'overflowanimations', 'polyblur', 'polynametag', 'polysprint', 'polytime', 'polyweather', 'vanillahud'];
+const mods = ['behind_you', 'chatting', 'crash_patch', 'damage_tint', 'evergreen_h_u_d', 'glint_colorizer', 'keystrokes', 'overflow_animations', 'poly_blur', 'poly_nametag', 'poly_sprint', 'poly_time', 'poly_weather', 'vanilla_h_u_d'];
+
+function formatModName(name: string): string {
+	return name.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+}
 ---
 
 <Layout>
@@ -105,7 +109,7 @@ const mods = ['behindyou', 'chatting', 'crashpatch', 'damagetint', 'evergreenhud
 			</Paragraph>
 			<div class="my-4 flex flex-row flex-wrap gap-2 text-white">
 				{mods.map(mod => (
-					<BrandingImage background="transparent" name={mod} type="mods" />
+					<BrandingImage nameFormatted={formatModName(mod)} background="transparent" name={mod} type="mods" />
 				))}
 			</div>
 		</div>