feat: display version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xwars-web",
-  "version": "0.0.0",
+  "version": "0.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/home/home.component.html

@@ -1,5 +1,6 @@
 <div id="home" class="flex column full-size center">
     <h1>The Great X Wars</h1>
+    <p id="version-data">Version {{version}}</p>
     <div id="navigation" class="flex column center">
         <a class="button" routerLink="/play">Play</a>
         <a class="button" routerLink="/about">About</a>

src/app/home/home.component.scss

@@ -1,3 +1,11 @@
+@use '../../variables';
+
+#version-data
+{
+    color: variables.$button-foreground;
+    transform: translateY(-3rem);
+}
+
 #navigation
 {
     gap: 1.5rem;

src/app/home/home.component.ts

@@ -1,15 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
+import packageData from '../../../package.json';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class HomeComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+export class HomeComponent {
+    protected version: string = packageData.version;
 }

tsconfig.json

@@ -14,6 +14,8 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "target": "ES2022",
     "module": "es2020",
     "lib": [