naming and test

src/App.vue

@@ -7,13 +7,19 @@ import {ConnectedStation} from "./models/connectedStation.ts";
 import {ExtraBranch} from "./models/extraBranch.ts";
 
 onMounted(() => {
-  let extraBranch1: ExtraBranch = new ExtraBranch("Таганско-Краснопресненская", "#800080", 2)
-  let extraStation1: ConnectedStation = new ConnectedStation("Кузнецкий\nмост", extraBranch1)
+  let extraBranch1: ExtraBranch = new ExtraBranch( "#EF161E", 1)
+  let extraStation1: ConnectedStation = new ConnectedStation("Библиотека\nимени Ленина", extraBranch1)
 
-  let station1: Station = new Station("Охотный ряд", false, [], 0)
-  let station2: Station = new Station("Лубянка", true, [extraStation1], 500)
+  let extraBranch4: ExtraBranch = new ExtraBranch( "#00BFFF", 4)
+  let extraStation4: ConnectedStation = new ConnectedStation("Александровский\nсад", extraBranch4)
 
-  let branch: Branch = new Branch('Best','#FF0000', 1, [station1, station2])
+  let extraBranch9: ExtraBranch = new ExtraBranch( "#999999", 9)
+  let extraStation9: ConnectedStation = new ConnectedStation("Боровицкая", extraBranch9)
+
+  let station1: Station = new Station("Смоленская", false, [], 0)
+  let station2: Station = new Station("Арбатская", true, [extraStation1, extraStation9, extraStation4], 500)
+
+  let branch: Branch = new Branch('Арбатско-Покровская линия','#0078BE', 3, [station1, station2])
   let map: Map = new Map(branch)
 
   map.build()

src/models/extraBranch.ts

@@ -1,16 +1,13 @@
 interface ExtraBranchInterface {
-    name: string;
     color: string;
     number: number;
 }
 
 export class ExtraBranch implements ExtraBranchInterface {
-    name: string;
     color: string;
     number: number;
 
-    constructor(name: string, color: string, number: number) {
-        this.name = name;
+    constructor(color: string, number: number) {
         this.color = color;
         this.number = number;
     }

src/models/map.ts

@@ -65,12 +65,12 @@ export class Map implements MetroMap {
         for (let i = 0; i < stations.length; i++) {
             let cx = last + stations[i].step;
             if (stations[i].connectedStations.length > 0) {
-                this.draw.circle(50).fill('#f06').cx(cx).cy(yMax)
+                this.draw.circle(50).fill(this.branch.color).cx(cx).cy(yMax)
                 this.draw.circle(25).fill('white').cx(cx).cy(yMax)
 
                 this.drawConnectedStations(stations[i].connectedStations, stations[i].up, cx, yMax);
             } else {
-                this.draw.rect(15, 50).fill('#f06').cx(cx).cy(yMax)
+                this.draw.rect(15, 50).fill(this.branch.color).cx(cx).cy(yMax)
             }
 
             let textPosition: number = this.getTextPosition(stations[i].up)
@@ -87,11 +87,26 @@ export class Map implements MetroMap {
         this.draw = this.draw.size(window.innerWidth, (window.innerHeight-50) / 2);
         this.draw.clear();
 
+        this.draw.circle(50).fill(this.branch.color).cx(50).cy(50)
+
+        let text = this.draw.text(this.branch.number.toString()).font({ size: 35}).fill('#fff').cx(50).cy(50);
+        text.font({
+            family: 'Onest',
+            weight: '750',
+        })
+
+        let naming = this.draw.text(this.branch.name).font({ size: 35});
+        naming.cx(50 + 40 + (naming.bbox().width / 2)).cy(50);
+        naming.font({
+            family: 'Onest',
+            weight: '750',
+        })
+
         const lineMax = window.innerWidth - 200;
         const yMax = (window.innerHeight-50) / 4;
 
         let line = this.draw.line(200, yMax, lineMax, yMax)
-        line.stroke({ color: '#f06', width: 16})
+        line.stroke({ color: this.branch.color, width: 16})
 
         this.drawStations(this.branch.stations)
     }

src/style.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')