MAPG-83 format area value with decimal separator and superscript in unit

public/static/css/mapguesser.css

@@ -54,6 +54,21 @@ img {
     display: block;
 }
 
+sup, sub {
+    position: relative;
+    font-size: smaller;
+}
+
+sup {
+    vertical-align: top;
+    top: -0.4em;
+}
+
+sub {
+    vertical-align: bottom;
+    bottom: -0.4em;
+}
+
 .mono {
     font-family: 'Roboto Mono', monospace;
 }

src/Controller/MapsController.php

@@ -1,6 +1,4 @@
-<?php
+<?php namespace MapGuesser\Controller;
-
-namespace MapGuesser\Controller;
 
 use MapGuesser\Database\Query\Select;
 use MapGuesser\Database\RawExpression;
@@ -34,7 +32,7 @@ class MapsController implements IController
         while ($map = $result->fetch(IResultSet::FETCH_ASSOC)) {
             $bounds = Bounds::createDirectly($map['bound_south_lat'], $map['bound_west_lng'], $map['bound_north_lat'], $map['bound_east_lng']);
 
-            $map['area'] = $this->formatMapArea($bounds->calculateApproximateArea());
+            $map['area'] = $this->formatMapAreaForHuman($bounds->calculateApproximateArea());
 
             $maps[] = $map;
         }
@@ -43,18 +41,26 @@ class MapsController implements IController
         return new HtmlView('maps', $data);
     }
 
-    private function formatMapArea(float $area): string
+    private function formatMapAreaForHuman(float $area): array
     {
-        //TODO: this should be formatted more properly
-
         if ($area < 100000.0) {
-            return round($area, 0) . ' m^2';
+            $digits = 0;
+            $rounded = round($area, 0);
+            $unit = 'm';
         } elseif ($area < 100000000.0) {
-            return round($area / 1000000.0, 0) . ' km^2';
+            $digits = 0;
+            $rounded = round($area / 1000000.0, 0);
+            $unit = 'km';
         } elseif ($area < 10000000000.0) {
-            return round($area / 1000000.0, -2) . ' km^2';
+            $digits = 0;
+            $rounded = round($area / 1000000.0, -2);
+            $unit = 'km';
         } else {
-            return round($area / 1000000.0, -4) . ' km^2';
+            $digits = 0;
-        }
+            $rounded = round($area / 1000000.0, -4);
+            $unit = 'km';
+        }
+
+        return [number_format($rounded, $digits, '.', ' '), $unit];
     }
 }

views/maps.php

@@ -44,7 +44,7 @@
                                     <path fill-rule="evenodd" d="M12.5 2h-9V1h9v1zm-10 1.5v9h-1v-9h1zm11 9v-9h1v9h-1zM3.5 14h9v1h-9v-1z" />
                                     <path fill-rule="evenodd" d="M14 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
                                 </svg>
-                                ~<?= $map['area'] ?>
+                                ~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
                             </p>
                         </div>
                         <p class="small justify marginTop"><?= $map['description'] ?></p>