react view race

src/demos/neat/racing/raceView.tsx

@@ -33,7 +33,7 @@ export class RaceView extends React.Component<{}, RaceViewState> {
 			<div style={styles.content}>
 				<canvas width={1012} height={750} />
 				<div style={styles.statistics}>
-					<Statistic style={{marginLeft: 30}} title="Generation" value={this.state.generation}/>
+					<Statistic title="Generation" value={this.state.generation}/>
 					<Statistic title="Fitness" value={Math.floor(this.state.fitness * 100) / 100}/>
 					<Statistic title="Time" value={this.state.raceTime}/>
 				</div>
@@ -42,11 +42,10 @@ export class RaceView extends React.Component<{}, RaceViewState> {
 	}
 
 	startAlgorithm = () => {
-		// gameService.start();
 		gameService.start(((gameState) => {
 			this.setState({
 				generation: gameState.generation,
-				fitness: 0,
+				fitness: gameState.fitness,
 				raceTime: gameState.raceTime
 			});
 		}));
@@ -77,6 +76,7 @@ const styles: CssStyleSheet = {
 		display: "flex",
 		flexDirection: "column",
 		alignItems: "center",
-		justifyContent: "space-around"
+		justifyContent: "space-around",
+		padding: "0 10px"
 	}
 };

src/demos/neat/racing/services/gameService.ts

@@ -8,7 +8,7 @@ const dt = 20;
 interface GameState {
 	generation: number;
 	raceTime: number;
-	population: Population<number>;
+	fitness: number;
 }
 export class GameService {
 
@@ -18,6 +18,7 @@ export class GameService {
 	carsBrainsPop: Population<number> = new Population([]);
 	raceDuration: number = dt * 600;
 	map: Map = new Map([], []);
+	bestFitness = 0;
 	onUpdate?: (state: GameState) => void;
 
 	constructor(private drawService: DrawService, private raceService: RaceService) {}
@@ -35,7 +36,7 @@ export class GameService {
 
 	update = () => {
 		if (this.raceTime > this.raceDuration) {
-			this.raceService.onRaceEnded();
+			this.bestFitness = this.raceService.onRaceEnded();
 			this.generation ++;
 			this.raceTime = 0;
 		}
@@ -44,7 +45,11 @@ export class GameService {
 		this.drawService.update(this.map, this.raceService.cars);
 		this.raceTime = this.raceTime + dt;
 		if (this.onUpdate) {
-			this.onUpdate({ generation: this.generation, raceTime: this.raceTime, population: this.carsBrainsPop });
+			this.onUpdate({
+				generation: this.generation,
+				raceTime: this.raceTime,
+				fitness: this.bestFitness
+			});
 		}
 		requestAnimationFrame(this.update);
 	}

src/demos/neat/racing/services/raceService.ts

@@ -56,17 +56,21 @@ export class RaceService {
 		});
 	}
 
-	onRaceEnded = () => {
+	onRaceEnded = (): number => {
 		/**
 		 * Called on every race timeout
 		 */
+		const bestFitness = this.getBestFitness();
+
 		this.carsPop = this.carsPop.createNextGeneration();
 		this.cars = this.carsPop.candidates.map(
 			it => new Car(startPositionX, startPositionY, Network.fromWeights(it.genes, layersSizes))
 		);
 		this.carsPop.candidates.map((it, i) => {
 			it.fitness = this.fitness(i);
 		});
+
+		return bestFitness;
 	}
 
 	mutate = (genes: number[]) => {
@@ -77,6 +81,11 @@ export class RaceService {
 	}
 
 	fitness = (index: number) => () => {
-		return this.cars[index].checkPoints * 1000;
+		return this.cars[index].checkPoints;
+	}
+
+	getBestFitness = () => {
+		this.carsPop.candidates.sort((a, b) => b.fitness(b.genes) - a.fitness(a.genes));
+		return this.carsPop.candidates[0].fitness(this.carsPop.candidates[0].genes);
 	}
 }