Big additions.

Updated speeds etc for smaller resolution.
Added a squish animation on collision of paddles.
Updated the paddles from here to indicate a hit.
Make use of simple particle system for on hit effects.

src/audio_manager.odin

@@ -31,6 +31,7 @@ Audio_Manager :: struct {
     fade_elapsed_sec:  f32,
     fade_duration_sec: f32,
 }
+
 // ------------------------------------------------------------------------------
 // Lifecycle procs
 // ------------------------------------------------------------------------------
@@ -39,13 +40,13 @@ audio_init :: proc(audio: ^Audio_Manager) {
 	audio.sounds = make(map[Sound_ID]rl.Sound)
 
 	// Load SFX
-    audio.sfx_vol = 0.5
+    audio.sfx_vol = 0.3
 	audio.sounds[.UI_Select] = rl.LoadSound("assets/audio/ui/select.ogg")
 	audio.sounds[.Ball_Collision]  = rl.LoadSound("assets/audio/gameplay/ballhit.ogg")
 
 	// Load Music Stream
     audio.user_music_vol = 0.1
-    audio.current_music_vol = 0.0
+    audio.current_music_vol = 0.1
     audio.fade_state = .None
     audio.music = rl.LoadMusicStream("assets/audio/gameplay/music/track_1.wav")
     audio.music_loaded = true

src/entity.odin

@@ -6,6 +6,7 @@ import rl "vendor:raylib"
 // Generic base structure shared by all world objects.
 // Fields are populated selectively based on entity type.
 // ------------------------------------------------------------------------------
+MAX_TRAILS :: 8
 
 Entity_Type :: enum {
     Player,
@@ -23,17 +24,26 @@ Entity :: struct {
     active:     bool,
     pos:        rl.Vector2,
     shape:      Shape_Type,
+    color:      rl.Color,
+
     // width / height or diameter / diameter
     size:       rl.Vector2,
+
 	// Fixed input speed (paddles)
     speed:      f32,        
     max_speed:  f32,
+
 	// 2D momentum & direction (ball / physics)
     vel:        rl.Vector2,    
     target_y:   f32,
-    reaction_timer: f32
+    reaction_timer: f32,
-}
 
-// ------------------------------------------------------------------------------
+    // animation options
-// @todo: entity dispatchers
+    tween_duration: f32,
-// ------------------------------------------------------------------------------
+    tween_elapsed: f32,
+
+    // trail effect
+    trail_positions: [MAX_TRAILS]rl.Vector2,
+    trail_count:     int,
+    trail_timer:     f32,
+}

src/entity_ball.odin

@@ -1,5 +1,6 @@
 package game
 
+import "core:math"
 import "core:math/rand"
 import rl "vendor:raylib"
 
@@ -8,11 +9,12 @@ init_ball :: proc() -> Entity {
 		type   = .Ball,
 		active = true,
 		pos	   = rl.Vector2{(VIEWPORT_W / 2), (VIEWPORT_H / 2)},
-		speed  = 500,
+		speed  = 100,
-        max_speed = 800,
+        max_speed = 550,
 		vel    = rl.Vector2{0,0},
 		shape  = .Circle,
-		size = rl.Vector2{15, 15}
+		size = rl.Vector2{8, 0},
+        tween_duration = 0.65,
     }
 }
 
@@ -26,10 +28,15 @@ serve_ball :: proc(ball: ^Entity) {
 reset_ball :: proc(ball: ^Entity) {
     ball.pos = rl.Vector2{(VIEWPORT_W / 2), (VIEWPORT_H / 2)}
     ball.vel = rl.Vector2{0,0}
-    ball.speed  = 500
+    ball.speed  = 300
 }
 
 update_ball :: proc(ball: ^Entity, level: ^Level, dt: f32) {
+    // squish animation check
+    if ball.tween_elapsed < ball.tween_duration {
+        ball.tween_elapsed += dt
+    }
+
    // first check the level timer are we waiting to serve?
    if level.serve_timer > 0 {
         level.serve_timer -= dt
@@ -41,14 +48,30 @@ update_ball :: proc(ball: ^Entity, level: ^Level, dt: f32) {
         return
    } 
 
+    // Update trail history buffer
+    update_ball_trail(ball, dt)
+
     radius := ball.size.x
     field_bounds := level.field_bounds
 
     // paddle collisions detection (player then enemy)
     if check_ball_paddle_collision(ball, level.player) {
+        level.player.color = rl.Color{255,255,255,255}
+        ball.tween_elapsed = 0.0
         resolve_collision(ball, level.player, true)
+        spawn_max_speed_sparks(&level.particles, level.player, ball.pos.y, true)
+
+        // if ball.speed >= ball.max_speed - 100 {
+        //     spawn_max_speed_sparks(&level.particles, ball.pos, true)
+        // }
     } else if check_ball_paddle_collision(ball, level.opponent) {
+        level.opponent.color = rl.Color{255,255,255,255}
+        ball.tween_elapsed = 0.0
         resolve_collision(ball, level.opponent, false)
+        spawn_max_speed_sparks(&level.particles, level.opponent, ball.pos.y, false)
+    } else {
+        level.opponent.color = rl.Color{255,255,255,0}
+        level.player.color = rl.Color{255,255,255,0}
     }
 
     // bounds collision detection
@@ -56,13 +79,13 @@ update_ball :: proc(ball: ^Entity, level: ^Level, dt: f32) {
     if ball.pos.y <= field_bounds.y + ball.size.x { ball.vel.y = -ball.vel.y } 
 
     if ball.pos.x >= (field_bounds.x + field_bounds.width) - ball.size.x { 
-        increment_score(&level.score_player, level.score_win, true)
+        increment_score(&level.score_player, level.score_win, true, ball)
         reset_ball(ball)
         level.serve_timer = level.wait_time
     }
 
     if ball.pos.x <= field_bounds.x + ball.size.x { 
-        increment_score(&level.score_enemy, level.score_win, false)
+        increment_score(&level.score_enemy, level.score_win, false, ball)
         reset_ball(ball)
         level.serve_timer = level.wait_time
     }
@@ -82,14 +105,17 @@ check_ball_paddle_collision :: proc(ball: ^Entity, paddle: Entity) -> bool {
     return collided 
 }
 
-increment_score :: proc(score_side: ^int, max_score: int, player: bool) {
+increment_score :: proc(score_side: ^int, max_score: int, player: bool, ball: ^Entity) {
     score_side^ += 1
-    if score_side^ == max_score do emit_event(Game_Over_Data{player})
+    if score_side^ == max_score {
+        emit_event(Game_Over_Data{player})
+        ball.trail_count = 0
+    }
 }
 
 increment_speed :: proc(ball: ^Entity) {
     if ball.speed <= ball.max_speed {
-        ball.speed += 100
+        ball.speed += 45
         ball.vel = rl.Vector2Normalize({ball.vel.x, ball.vel.y}) * ball.speed
     }
 }
@@ -121,6 +147,100 @@ resolve_collision :: proc(ball: ^Entity, paddle: Entity, is_player: bool) {
     }
 }
 
+update_ball_trail :: proc(ball: ^Entity, dt: f32) {
+    if ball.speed < 300 {
+        ball.trail_count = 0
+        return 
+    } 
+
+    ball.trail_timer += dt
+    // get pos every 20ms
+    sample_rate :=  f32(0.02)
+
+    if ball.trail_timer >= sample_rate {
+        ball.trail_timer = 0.0
+
+        // shift old pos back
+        for i := MAX_TRAILS - 1; i > 0; i -= 1 {
+            ball.trail_positions[i] = ball.trail_positions[i - 1]
+        }
+
+        // store new pos
+        ball.trail_positions[0] = ball.pos
+        if ball.trail_count < MAX_TRAILS {
+            ball.trail_count += 1
+        }
+    }
+}
+
+spawn_max_speed_sparks :: proc(particles: ^[dynamic]Particle, paddle: Entity, ball_y: f32, is_player: bool) {
+    count := 12
+
+    impact_x := is_player ? (paddle.pos.x + paddle.size.x) : paddle.pos.x
+    impact_y := clamp(ball_y, paddle.pos.y, paddle.pos.y + paddle.size.y)
+    impact_pos := rl.Vector2{impact_x, impact_y}
+
+    for _ in 0 ..< count {
+        // Direct sparks outward from the paddle face
+        base_angle := is_player ? f32(0.0) : rl.PI // 0 rad = right, PI rad = left
+        spread     := (f32(rand.float32()) - 0.5) * 1.2
+        angle      := base_angle + spread
+
+        speed := f32(rand.float32() * 180.0 + 100.0)
+
+        append(particles, Particle{
+            pos      = impact_pos,
+            vel      = {math.cos(angle) * speed, math.sin(angle) * speed},
+            color    = rl.SKYBLUE,
+            life     = 0.25,
+            max_life = 0.25,
+            size     = f32(rand.float32() * 2.0 + 1.5),
+        })
+    }
+}
+
+render_ball_trail :: proc(ball: Entity) {
+    if ball.trail_count == 0 do return
+
+    base_radius := ball.size.x
+
+    for i in 0 ..< ball.trail_count {
+        pos := ball.trail_positions[i]
+
+        // Farther back in history = smaller and fainter
+        progress := f32(i + 1) / f32(ball.trail_count) // 0.0 -> 1.0
+        
+        radius := base_radius * (1.0 - (progress * 0.6)) // Shrinks slightly
+        alpha  := u8(180.0 * (1.0 - progress))           // Fades out
+
+        trail_color := rl.Color{rl.MAROON.r, rl.MAROON.g, rl.MAROON.b, alpha}
+
+        rl.DrawCircleV(pos, radius, trail_color)
+    }
+}
+
 render_ball :: proc(ball: Entity, field_bounds: rl.Rectangle) { 
-	rl.DrawCircleV(ball.pos, ball.size.x, rl.MAROON)
+    render_ball_trail(ball)
+
+    radius_x := ball.size.x
+    radius_y := ball.size.x
+
+    // if animation active
+    if ball.tween_elapsed < ball.tween_duration {
+        radius_x = rl.EaseBackOut(
+            ball.tween_elapsed,
+            5.0,
+            ball.size.x - 5.0,
+            ball.tween_duration
+        )
+
+        radius_y = rl.EaseBackOut(
+            ball.tween_elapsed,
+            12.0,
+            ball.size.x - 12.0,
+            ball.tween_duration
+        )
+    }
+
+    rl.DrawEllipse(i32(ball.pos.x), i32(ball.pos.y), radius_x, radius_y, rl.MAROON)
 }

src/entity_opponent.odin

@@ -9,9 +9,9 @@ init_opponent :: proc() -> Entity {
 		type   = .Opponent,
 		active = true,
 		pos	   = rl.Vector2{0,0},
-		speed = 800,
+		speed = 250,
 		shape  = .Rectangle,
-		size = rl.Vector2{30, 150}
+		size = rl.Vector2{16, 64}
 	}	
 }
 
@@ -27,7 +27,7 @@ update_opponent :: proc(self: ^Entity, ball: Entity, bounds: rl.Rectangle, dt: f
     		// center of ball - center of paddle gives the target
     		self.target_y = (ball.pos.y + (ball.size.y / 2)) - (self.size.y / 2) + error_offset 
 
-    		self.reaction_timer = 0.20
+    		self.reaction_timer = 0.15
     	}
     } else {
     	// ball going away get back to middle of screen
@@ -49,5 +49,12 @@ update_opponent :: proc(self: ^Entity, ball: Entity, bounds: rl.Rectangle, dt: f
 }
 
 render_opponent :: proc(self: Entity, field_bounds: rl.Rectangle) { 
-	rl.DrawRectangleV(self.pos, self.size, rl.BLACK)
+    opp_rec := rl.Rectangle{
+        x      = self.pos.x - 5,
+        y      = self.pos.y,
+        width  = self.size.x,
+        height = self.size.y,
+    }
+    rl.DrawRectangleRounded(opp_rec, 2.0, 120, self.color)
+    rl.DrawRectangleRoundedLinesEx(opp_rec, 2.0, 120, 1.0, rl.WHITE)
 }

src/entity_player.odin

@@ -8,13 +8,12 @@ init_player :: proc() -> Entity {
 		type   = .Player,
 		active = true,
 		pos	   = rl.Vector2{0,0},
-		speed = 800,
+		speed = 250,
 		shape  = .Rectangle,
-		size = rl.Vector2{30, 150}
+		size = rl.Vector2{16, 64}
 	}	
 }
 
-
 update_player :: proc(player: ^Entity, input: Input_Event, bounds: rl.Rectangle, dt: f32,) {
     // move direction is captured and calculated + normalized from input manager
     // Apply Movement (Frame-rate independent)
@@ -28,5 +27,7 @@ update_player :: proc(player: ^Entity, input: Input_Event, bounds: rl.Rectangle,
 }
 
 render_player :: proc(player: Entity, field_bounds: rl.Rectangle) {
-	rl.DrawRectangleV(player.pos, player.size, rl.BLACK)
+    player_rec := rl.Rectangle{player.pos.x + 5, player.pos.y, player.size.x, player.size.y}
+    rl.DrawRectangleRounded(player_rec, 2.0, 120, player.color)
+    rl.DrawRectangleRoundedLinesEx(player_rec, 2.0, 120, 1.0, rl.WHITE)
 }

src/game.odin

@@ -3,8 +3,10 @@ package game
 import "core:strings"
 import rl "vendor:raylib"
 
-VIEWPORT_W   :: 1280
+// VIEWPORT_W   :: 1280
-VIEWPORT_H   :: 720
+// VIEWPORT_H   :: 720
+VIEWPORT_W   :: 640
+VIEWPORT_H   :: 360
 WINDOW_TITLE :: "Pong"
 
 Resolution :: struct {
@@ -23,6 +25,7 @@ RESOLUTIONS := [?]Resolution{
 
 Game :: struct {
     viewport:     rl.RenderTexture2D,
+    bg_texture:   rl.Texture2D, 
     scene_stack:  [dynamic]Scene,
     should_close: bool,
     audio:        Audio_Manager,
@@ -61,6 +64,18 @@ game_init :: proc(game: ^Game) {
 
     game.scene_stack = make([dynamic]Scene, 0, 8)
     game.viewport = rl.LoadRenderTexture(VIEWPORT_W, VIEWPORT_H)
+
+    // Force nearest neighbor point filtering on the viewport texture
+    rl.SetTextureFilter(game.viewport.texture, .POINT)
+
+    // Generate soft CRT background radial texture once on startup
+    bg_center := rl.Color{22, 28, 36, 255}
+    bg_corner := rl.Color{6, 8, 12, 255}
+    bg_img    := rl.GenImageGradientRadial(VIEWPORT_W, VIEWPORT_H, 0.3, bg_center, bg_corner)
+    game.bg_texture = rl.LoadTextureFromImage(bg_img)
+    rl.UnloadImage(bg_img) // Free CPU memory
+    // rl.SetTextureFilter(game.bg_texture, .BILINEAR)
+
     game.should_close = false
     set_root_scene(game, make_main_menu()) 
 }
@@ -86,7 +101,7 @@ game_render :: proc(game: ^Game) {
     rl.ClearBackground(rl.BLACK)
 
     rl.BeginTextureMode(game.viewport)
-        rl.ClearBackground(rl.BLACK)
+        rl.DrawTexture(game.bg_texture, 0, 0, rl.WHITE)        
 
         // @note: fine for now but probably not a good idea...
         // Render all scenes in the stack from bottom to top
@@ -98,6 +113,7 @@ game_render :: proc(game: ^Game) {
 
     render_game_to_window(game)
 
+    rl.DrawFPS(10, game.window_h - 20)
     rl.EndDrawing()
 }
 
@@ -105,6 +121,7 @@ game_render :: proc(game: ^Game) {
 game_quit :: proc(game: ^Game) {
     audio_manager_quit(&game.audio)
 
+    rl.UnloadTexture(game.bg_texture)
     rl.UnloadRenderTexture(game.viewport)
     delete(GLOBAL_EVENTS)
     delete(game.scene_stack)
@@ -149,4 +166,5 @@ render_game_to_window :: proc(game: ^Game) {
         0,
         rl.WHITE,
     ) 
+
 }

src/level_manager.odin

@@ -4,11 +4,18 @@ import "core:fmt"
 import rl "vendor:raylib"
 
 // ------------------------------------------------------------------------------
-// LEVEL specifics
+// LEVEL Specifics
 // ------------------------------------------------------------------------------
-FIELD_BORDER :: 3
+FIELD_BORDER    :: 2
 SERVE_WAIT_TIME :: 1.0
 
+// ------------------------------------------------------------------------------
+// HUD Styling Constants
+// ------------------------------------------------------------------------------
+HUD_FONT_SIZE    :: 10.0
+HUD_FONT_SPACING :: 1.0
+HUD_PADDING      :: 4.0
+
 Level :: struct {
     field_bounds: rl.Rectangle,
     player:       Entity,
@@ -19,12 +26,10 @@ Level :: struct {
     score_player: int,
     score_enemy:  int,
     score_win:    int,
+    particles:    [dynamic]Particle,
 }
 
 init_level :: proc() -> Level {
-    // positions work off viewport resolution, 
-    // independent of target display size
-    // 10% padding around the field 
     pad_x := f32(VIEWPORT_W) * 0.10
     pad_y := f32(VIEWPORT_H) * 0.10
 
@@ -53,18 +58,28 @@ init_level :: proc() -> Level {
         score_win    = 1,
         score_player = 0,
         score_enemy  = 0,
+        particles    = make([dynamic]Particle),
     }
 }
 
+// Free memory allocated by dynamic slice fields in the level struct
+cleanup_level :: proc(level: ^Level) {
+    delete(level.particles)
+}
+
 update_level :: proc(level: ^Level, input: Input_Event, dt: f32) {
     update_ball(&level.ball, level, dt)
     update_player(&level.player, input, level.field_bounds, dt)
     update_opponent(&level.opponent, level.ball, level.field_bounds, dt)
+    update_particles(&level.particles, dt)
 }
 
 render_level :: proc(level: Level) {
-    rl.DrawRectangleRec(level.field_bounds, rl.DARKGRAY)
+    rl.BeginBlendMode(.ADDITIVE)
-    rl.DrawRectangleLinesEx(level.field_bounds, FIELD_BORDER, rl.RAYWHITE)
+    // Draw outward field glow
+    render_field_outward_glow(level.field_bounds, FIELD_BORDER, rl.WHITE)
+    render_particles(level.particles)
+    rl.EndBlendMode()
 
     center_x := f32(VIEWPORT_W) / 2.0
     start_pos := rl.Vector2{center_x, level.field_bounds.y + FIELD_BORDER}
@@ -76,31 +91,42 @@ render_level :: proc(level: Level) {
     render_ball(level.ball, level.field_bounds)
 }
 
+render_field_outward_glow :: proc(bounds: rl.Rectangle, line_thickness: f32, glow_color: rl.Color) {
+    rl.DrawRectangleLinesEx(bounds, line_thickness, glow_color)
+
+    glow_layers := 24
+    glow_step   := f32(1.0)
+
+    for i in 1 ..= glow_layers {
+        offset := f32(i) * glow_step
+
+        outer_rec := rl.Rectangle{
+            x      = bounds.x - offset,
+            y      = bounds.y - offset,
+            width  = bounds.width + (offset * 2.0),
+            height = bounds.height + (offset * 2.0),
+        }
+
+        alpha := u8(155.0 / f32(i * i))
+        layer_color := rl.Color{glow_color.r, glow_color.g, glow_color.b, alpha}
+
+        rl.DrawRectangleLinesEx(outer_rec, line_thickness, layer_color)
+    }
+}
+
 render_hud :: proc(level: Level) {
-    // 2 spacing, 20 font size, 5 padding
     font := rl.GetFontDefault()
 
-    // player one id
+    p1_size := rl.MeasureTextEx(font, "PLAYER 1", HUD_FONT_SIZE, HUD_FONT_SPACING)
-    p1_size := rl.MeasureTextEx(font, "PLAYER 1", 20, 2)
+    p1_pos  := rl.Vector2{HUD_PADDING, HUD_PADDING}
-    p1_box  := rl.Rectangle{5, 5, p1_size.x, p1_size.y}
+    rl.DrawTextEx(font, "PLAYER 1", p1_pos, HUD_FONT_SIZE, HUD_FONT_SPACING, rl.WHITE)
-    p1_pos  := rl.Vector2{p1_box.x, p1_box.y}
-    rl.DrawTextEx(font, "PLAYER 1", p1_pos, 20, 2, rl.WHITE)
-    // rl.DrawRectangleLinesEx(p1_box, 1.0, rl.RED)
 
-    // opponent id
+    opp_size := rl.MeasureTextEx(font, "COMPUTER", HUD_FONT_SIZE, HUD_FONT_SPACING)
-    opp_size := rl.MeasureTextEx(font, "COMPUTER", 20, 2)
+    opp_pos  := rl.Vector2{f32(VIEWPORT_W) - HUD_PADDING - opp_size.x, HUD_PADDING}
-    opp_box  := rl.Rectangle{(VIEWPORT_W - 5 - opp_size.x), 5, (opp_size.x), (opp_size.y)}
+    rl.DrawTextEx(font, "COMPUTER", opp_pos, HUD_FONT_SIZE, HUD_FONT_SPACING, rl.WHITE)
-    opp_pos  := rl.Vector2{opp_box.x, opp_box.y}
-    rl.DrawTextEx(font, "COMPUTER", opp_pos, 20, 2, rl.WHITE)
 
-    // score box
-    // Format the score dynamically into a C-string allocated on the temp allocator
     score_text := fmt.ctprintf("%d : %d", level.score_player, level.score_enemy)
-    score_size := rl.MeasureTextEx(font, score_text, 20, 2)
+    score_size := rl.MeasureTextEx(font, score_text, HUD_FONT_SIZE, HUD_FONT_SPACING)
-    score_box  := rl.Rectangle{(VIEWPORT_W / 2 - score_size.x / 2), 5, (score_size.x), (score_size.y)}
+    score_pos  := rl.Vector2{(f32(VIEWPORT_W) * 0.5) - (score_size.x * 0.5), HUD_PADDING}
-    score_pos  := rl.Vector2{score_box.x, score_box.y}
+    rl.DrawTextEx(font, score_text, score_pos, HUD_FONT_SIZE, HUD_FONT_SPACING, rl.WHITE)
-    rl.DrawTextEx(font, score_text, score_pos, 20, 2, rl.WHITE)
-
-    // game name
-    // rl.DrawRectangleLines(VIEWPORT_W / 2 - 50, VIEWPORT_H - 50, 100, 50, rl.RED)
 }

src/particle_manager.odin

@@ -0,0 +1,40 @@
+package game
+
+import rl "vendor:raylib"
+
+Particle :: struct {
+	pos:   rl.Vector2,
+	vel:   rl.Vector2,
+	color: rl.Color,
+	life:  f32,
+	max_life: f32,
+	size:  f32
+}
+
+update_particles :: proc(particles: ^[dynamic]Particle, dt: f32) {
+	#reverse for &p, i in particles {
+		p.life -= dt	
+		if p.life <= 0 {
+			unordered_remove(particles, i)
+			continue
+		}
+
+		// update live particles
+		p.pos += p.vel * dt
+
+		// times the velocitt so we can slow it down over time
+		p.vel *= 0.92 
+	}	
+}
+
+render_particles :: proc(particles: [dynamic]Particle) {
+	rl.BeginBlendMode(.ADDITIVE)
+
+	for p in particles {
+		alpha := u8(255 * (p.life / p.max_life))
+		col := rl.Color{p.color.r, p.color.g, p.color.b, alpha}
+		rl.DrawRectangleV(p.pos, {p.size, p.size}, col)
+	}
+
+	rl.EndBlendMode()
+}

src/scene_manager.odin

@@ -27,11 +27,22 @@ push_scene :: proc(game: ^Game, scene: Scene) {
 
 pop_scene :: proc(game: ^Game) {
     if len(game.scene_stack) > 1 {
+        top_index := len(game.scene_stack) - 1
+        destroy_scene(&game.scene_stack[top_index])
         pop(&game.scene_stack)
     }
 }
 
+destroy_scene :: proc(scene: ^Scene) {
+    if level, ok := &scene.level.?; ok {
+        cleanup_level(level)
+    }
+}
+
 set_root_scene :: proc(game: ^Game, root_scene: Scene) {
+    for &scene in game.scene_stack {
+        destroy_scene(&scene)
+    }
     clear(&game.scene_stack)
     append(&game.scene_stack, root_scene)
 }
@@ -90,6 +101,18 @@ scene_render :: proc(scene: ^Scene) {
     }
 }
 
+// ------------------------------------------------------------------------------
+// UI Layout & Styling Constants
+// ------------------------------------------------------------------------------
+UI_TITLE_FONT_SIZE    :: 20
+UI_LABEL_FONT_SIZE    :: 10
+UI_TITLE_PADDING      :: 10.0
+UI_ITEM_HEIGHT        :: 20.0
+UI_ITEM_SPACING       :: 8.0
+UI_ITEM_BORDER_THICK  :: 2.0
+UI_TOP_MARGIN_DEFAULT :: 60.0
+UI_TOP_MARGIN_LIST    :: 75.0
+
 // ------------------------------------------------------------------------------
 // UI Definitions
 // ------------------------------------------------------------------------------
@@ -128,7 +151,7 @@ UI_Menu :: struct {
     selected_index: int,
 }
 
-get_canvas_item_rec :: proc(canvas: Canvas, index: int, top_margin: f32 = 120) -> rl.Rectangle {
+get_canvas_item_rec :: proc(canvas: Canvas, index: int, top_margin: f32 = UI_TOP_MARGIN_DEFAULT) -> rl.Rectangle {
     y_pos := (canvas.bounds.y + top_margin) + (f32(index) * (canvas.item_height + canvas.item_spaceing))
     width_value := (canvas.bounds.width * 0.5)
 
@@ -143,26 +166,26 @@ get_canvas_item_rec :: proc(canvas: Canvas, index: int, top_margin: f32 = 120) -
 list_menu_items :: proc(canvas: Canvas, menu: UI_Menu) {
     for i in 0 ..< menu.count {
         item := menu.items[i]
-        item_rec := get_canvas_item_rec(canvas, i, top_margin = 150.0)
+        item_rec := get_canvas_item_rec(canvas, i, top_margin = UI_TOP_MARGIN_LIST)
 
         is_selected := (i == menu.selected_index)
         border_color := is_selected ? rl.ORANGE : rl.DARKGRAY
         text_color   := is_selected ? rl.ORANGE : rl.WHITE
 
-        rl.DrawRectangleLinesEx(item_rec, 3, border_color)
+        rl.DrawRectangleLinesEx(item_rec, UI_ITEM_BORDER_THICK, border_color)
 
         #partial switch v in item {
         case UI_Button:  
-            text_width := rl.MeasureText(v.label, 20)
+            text_width := rl.MeasureText(v.label, UI_LABEL_FONT_SIZE)
             text_x := i32(item_rec.x + item_rec.width * 0.5) - (text_width / 2)
-            text_y := i32(item_rec.y + (item_rec.height * 0.5)) - 10
+            text_y := i32(item_rec.y + (item_rec.height * 0.5)) - (UI_LABEL_FONT_SIZE / 2)
-            rl.DrawText(v.label, text_x, text_y, 20, text_color)
+            rl.DrawText(v.label, text_x, text_y, UI_LABEL_FONT_SIZE, text_color)
 
         case UI_Slider:
             slider_rec := item_rec
-            text_width := rl.MeasureText(v.label, 20)
+            text_width := rl.MeasureText(v.label, UI_LABEL_FONT_SIZE)
-            slider_rec.x = slider_rec.x + f32(text_width)
+            slider_rec.x = slider_rec.x + f32(text_width * 2)
-            slider_rec.width = (slider_rec.width - f32(text_width))
+            slider_rec.width = (slider_rec.width - f32(text_width * 2))
 
             rl.GuiSlider(
                 bounds = slider_rec,
@@ -174,14 +197,13 @@ list_menu_items :: proc(canvas: Canvas, menu: UI_Menu) {
             )
 
         case UI_Selector:
-            // draw label left half
+            lbl_y := i32(item_rec.y + (item_rec.height * 0.5)) - (UI_LABEL_FONT_SIZE / 2)
-            lbl_y := i32(item_rec.y + (item_rec.height * 0.5)) - 10
+            rl.DrawText(v.label, i32(item_rec.x + 8), lbl_y, UI_LABEL_FONT_SIZE, text_color)
-            rl.DrawText(v.label, i32(item_rec.x + 15), lbl_y, 20, text_color)
 
             display_str := fmt.ctprintf("< %s >", v.value_label)
-            str_w := rl.MeasureText(display_str, 20)
+            str_w := rl.MeasureText(display_str, UI_LABEL_FONT_SIZE)
-            val_x := i32(item_rec.x + item_rec.width) - str_w - 15
+            val_x := i32(item_rec.x + item_rec.width) - str_w - 8
-            rl.DrawText(display_str, val_x, lbl_y, 20, text_color)
+            rl.DrawText(display_str, val_x, lbl_y, UI_LABEL_FONT_SIZE, text_color)
         }
     }
 }
@@ -200,9 +222,9 @@ make_main_menu :: proc() -> Scene {
         type = .Main_Menu,
         canvas = Canvas{
             bounds        = rl.Rectangle{0, 0, VIEWPORT_W, VIEWPORT_H},
-            padding       = 20,
+            padding       = UI_TITLE_PADDING,
-            item_height   = 40,
+            item_height   = UI_ITEM_HEIGHT,
-            item_spaceing = 15,
+            item_spaceing = UI_ITEM_SPACING,
             menu = UI_Menu{
                 items          = ui_items,
                 count          = 3,
@@ -219,12 +241,10 @@ render_main_menu :: proc(scene: Scene) {
     menu, menu_ok := canvas.menu.?
     assert(menu_ok, "render_main_menu: Canvas is missing a UI_Menu component")
 
-    rl.DrawRectangleRec(canvas.bounds, rl.BLACK)
-
     t_text: cstring = "PONG"
-    t_width := rl.MeasureText(t_text, 40)
+    t_width := rl.MeasureText(t_text, UI_TITLE_FONT_SIZE)
     t_x := i32(canvas.bounds.width * 0.5) - (t_width / 2)
-    rl.DrawText(t_text, t_x, i32(canvas.padding), 40, rl.WHITE)
+    rl.DrawText(t_text, t_x, i32(canvas.padding), UI_TITLE_FONT_SIZE, rl.WHITE)
 
     list_menu_items(canvas, menu)
 }
@@ -271,9 +291,9 @@ make_pause_overlay :: proc() -> Scene {
         type   = .Pause_Menu,
         canvas = Canvas{
             bounds        = rl.Rectangle{0, 0, VIEWPORT_W, VIEWPORT_H},
-            padding       = 20,
+            padding       = UI_TITLE_PADDING,
-            item_height   = 40,
+            item_height   = UI_ITEM_HEIGHT,
-            item_spaceing = 15,
+            item_spaceing = UI_ITEM_SPACING,
             menu = UI_Menu{
                 items          = ui_items,
                 count          = 3,
@@ -294,9 +314,9 @@ render_pause_menu :: proc(scene: Scene) {
     rl.DrawRectangleRec(canvas.bounds, rl.Color{0, 0, 0, 200})
 
     t_text: cstring = "PAUSE MENU"
-    t_width := rl.MeasureText(t_text, 40)
+    t_width := rl.MeasureText(t_text, UI_TITLE_FONT_SIZE)
     t_x := i32(canvas.bounds.width * 0.5) - (t_width / 2)
-    rl.DrawText(t_text, t_x, i32(canvas.padding), 40, rl.WHITE)
+    rl.DrawText(t_text, t_x, i32(canvas.padding), UI_TITLE_FONT_SIZE, rl.WHITE)
 
     list_menu_items(canvas, menu)
 }
@@ -344,12 +364,12 @@ make_settings_menu :: proc(audio: ^Audio_Manager, current_res_label: cstring) ->
             value_label = current_res_label,
         },
         2 = UI_Slider{
-            label = "Music Volume",
+            label = "Music ",
             value = &audio.user_music_vol,
             step  = 0.1,
         },
         3 = UI_Slider{
-            label = "SFX Volume",
+            label = "SFX  ",
             value = &audio.sfx_vol,
             step  = 0.1,
         },
@@ -359,9 +379,9 @@ make_settings_menu :: proc(audio: ^Audio_Manager, current_res_label: cstring) ->
         type   = .Settings_Menu,
         canvas = Canvas{
             bounds        = rl.Rectangle{0, 0, VIEWPORT_W, VIEWPORT_H},
-            padding       = 20,
+            padding       = UI_TITLE_PADDING,
-            item_height   = 40,
+            item_height   = UI_ITEM_HEIGHT,
-            item_spaceing = 15,
+            item_spaceing = UI_ITEM_SPACING,
             menu = UI_Menu{
                 items          = ui_items,
                 count          = 4,
@@ -378,13 +398,10 @@ render_settings_menu :: proc(scene: Scene) {
     menu, menu_ok := canvas.menu.?
     assert(menu_ok, "render_settings_menu: Canvas is missing a UI_Menu component")
 
-    // Dark semi-transparent overlay
-    rl.DrawRectangleRec(canvas.bounds, rl.Color{0, 0, 0, 255})
-
     t_text: cstring = "SETTINGS"
-    t_width := rl.MeasureText(t_text, 40)
+    t_width := rl.MeasureText(t_text, UI_TITLE_FONT_SIZE)
     t_x := i32(canvas.bounds.width * 0.5) - (t_width / 2)
-    rl.DrawText(t_text, t_x, i32(canvas.padding), 40, rl.WHITE)
+    rl.DrawText(t_text, t_x, i32(canvas.padding), UI_TITLE_FONT_SIZE, rl.WHITE)
 
     list_menu_items(canvas, menu)
 }
@@ -451,9 +468,9 @@ make_game_over_overlay :: proc(winner_is_player: bool) -> Scene {
         winner_is_player = winner_is_player,
         canvas = Canvas{
             bounds        = rl.Rectangle{0, 0, VIEWPORT_W, VIEWPORT_H},
-            padding       = 20,
+            padding       = UI_TITLE_PADDING,
-            item_height   = 40,
+            item_height   = UI_ITEM_HEIGHT,
-            item_spaceing = 15,
+            item_spaceing = UI_ITEM_SPACING,
             menu = UI_Menu{
                 items          = ui_items,
                 count          = 2,
@@ -473,10 +490,10 @@ render_game_over :: proc(scene: Scene) {
     rl.DrawRectangleRec(canvas.bounds, rl.Color{0, 0, 0, 220})
 
     t_text: cstring = scene.winner_is_player ? "YOU WIN!" : "GAME OVER"
-    t_width := rl.MeasureText(t_text, 40)
+    t_width := rl.MeasureText(t_text, UI_TITLE_FONT_SIZE)
     t_x := i32(canvas.bounds.width * 0.5) - (t_width / 2)
     text_color := scene.winner_is_player ? rl.GREEN : rl.RED
-    rl.DrawText(t_text, t_x, i32(canvas.padding), 40, text_color)
+    rl.DrawText(t_text, t_x, i32(canvas.padding), UI_TITLE_FONT_SIZE, text_color)
 
     list_menu_items(canvas, menu)
 }