 Crafty.c 'StageEnd',
   init: ->
-    @requires '2D, DOM, Text, HUD, Delay'
+    @requires '2D, Canvas, HUD, Delay, Color'
 
   stageEnd: (level) ->
     @lineNr = 0
-    this.attr w: 640, z: 1
-      .css 'textAlign', 'center'
+
+    this.attr(
+      w: 580
+      h: 200
+      alpha: 0.2
+    )
+    .positionHud(
+      x: 40
+      y: 130
+      z: 90
+    )
+    .color('#000000')
+
+    c = Crafty.e('Text, DOM').attr(
+      x: @x
+      y: @y + 10
+      w: @w
+      z: 91
+    ).css 'textAlign', 'center'
       .text "Stage #{level.data.stage} Cleared: #{level.data.title}"
-      .positionHud(
-        x: @x,
-        y: 60,
-        z: -1
-      )
       .textColor('#FFFFFF')
       .textFont({
         size: '12px',
         weight: 'bold',
         family: 'Courier new'
-      }).delay((i) ->
-        switch @lineNr
-          when 0
-            @showPlayerHeaders()
-            @showAccuracy level
-          when 2 then @showShotsFired level
-          when 3 then @showEnemiesKilled level
-          when 4 then @showLives level
-          when 5 then @showWeaponXP level
-          when 6 then @showTotals level
-          when 7 then level.data.stageFinished = yes
-      , 1000, 6)
+      })
+    @attach c
+
+    @delay((i) ->
+      switch @lineNr
+        when 0
+          @showPlayerHeaders()
+          @showAccuracy level
+          level.data.stageFinished = yes
+        when 2 then @showShotsFired level
+        when 3 then @showEnemiesKilled level
+        when 4 then @showLives level
+        when 5 then @showWeaponXP level
+        when 6 then @showTotals level
+    , 2000, 6)
 
   showPlayerHeaders: ->
     cells = ['']

        cells.push "#{value}%"

        score = Math.round(value * 100)
        cells.push "#{score}"
        @stats.bonus += score
      else
        cells.push ''

        value = @ship?.primaryWeapon?.xp ? 0
        cells.push "#{value}"
        score = Math.round(value * 10)
        cells.push score
        @stats.bonus += score
      else
        cells.push ''
