<commit_before>import { Component, Input } from '@angular/core';
import {MdGridListModule} from '@angular/material';
import { MovementService } from "../services/movement"
import { Book } from '../models/book';
import * as book from '../actions/puzzle';
import * as _ from "lodash";


@Component({
    selector: 'puzzle',
    template: `
        <!--<bc-book-preview *ngFor="let book of books" [book]="book"></bc-book-preview>-->
        <md-card>
            <md-card-title-group>
                <!--<img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>-->
                <md-card-title>Moves: {{ moves.length }}, Finished: <span ><md-icon  ng-class="md-48" *ngIf=" finished()">done</md-icon></span>{{ finished() }}
                </md-card-title>
                <!--<md-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</md-card-subtitle>-->
            </md-card-title-group>
            <md-card-content>
                <div class="puzzle">
                    <div class="tile" *ngFor="let tile of board" (click)="tileClicked(tile.value)">
                        {{tile.value}}
                    </div>
                </div>
            </md-card-content>
        </md-card>

        <h2>Fringe:</h2>
        <pre>{{ getFringe().board  | json }}</pre>
        <!--<md-card  class="mini" *ngFor="let fringeBoard of getFringe().board">-->
        <!--<md-card-title-group>-->
        <!--<md-card-title>F = g + h = {{ fringeBoard.f }}</md-card-title>-->
        <!--</md-card-title-group>-->
        <!--<md-card-content>-->
        <!--<div class="puzzle-mini">-->
        <!--<div class="tile-mini" *ngFor="let tile of fringeBoard" (click)="tileClicked(tile.value)">-->
        <!--{{tile.value}}-->
        <!--</div>-->
        <!--</div>-->
        <!--</md-card-content>-->
        <!--</md-card>-->


        <h2>Closed:</h2>
        <md-card  class="mini" *ngFor="let closedBoard of getClosed().board">
            <md-card-title-group>
                <md-card-title>F = g + h</md-card-title>
            </md-card-title-group>
            <md-card-content>
                <div class="puzzle-mini">
                    <div class="tile-mini" *ngFor="let tile of closedBoard" (click)="tileClicked(tile.value)">
                        {{tile.value}}
                    </div>
                </div>
            </md-card-content>
        </md-card>


        <!---->
        <!--<pre>{{ getFringe() | json }}</pre>-->

        <!--<h2>Closed:</h2>-->
        <!--<pre>{{ getClosed() | json }}</pre>-->

    `,
    styles: [`
		md-icon{
			font-size:45px;
			height:45px;
			width: 45px;
			color: green;
		}
		.tile {
			width: 80px;<commit_msg>Add red x<commit_after>import { Component, Input } from '@angular/core';
import {MdGridListModule} from '@angular/material';
import { MovementService } from "../services/movement"
import { Book } from '../models/book';
import * as book from '../actions/puzzle';
import * as _ from "lodash";


@Component({
    selector: 'puzzle',
    template: `
        <!--<bc-book-preview *ngFor="let book of books" [book]="book"></bc-book-preview>-->
        <md-card>
            <md-card-title-group>
                <!--<img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>-->
                <md-card-title>Moves: {{ moves.length }}, Finished: 
	                <span ng-class="md-48">
		                <md-icon  class="green" *ngIf=" finished()">done</md-icon>
		                <md-icon  class="red" *ngIf="!finished()">clear</md-icon>
	                </span>{{ finished() }}
                </md-card-title>
                <!--<md-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</md-card-subtitle>-->
            </md-card-title-group>
            <md-card-content>
                <div class="puzzle">
                    <div class="tile" *ngFor="let tile of board" (click)="tileClicked(tile.value)">
                        {{tile.value}}
                    </div>
                </div>
            </md-card-content>
        </md-card>

        <h2>Fringe:</h2>
        <pre>{{ getFringe().board  | json }}</pre>
        <!--<md-card  class="mini" *ngFor="let fringeBoard of getFringe().board">-->
        <!--<md-card-title-group>-->
        <!--<md-card-title>F = g + h = {{ fringeBoard.f }}</md-card-title>-->
        <!--</md-card-title-group>-->
        <!--<md-card-content>-->
        <!--<div class="puzzle-mini">-->
        <!--<div class="tile-mini" *ngFor="let tile of fringeBoard" (click)="tileClicked(tile.value)">-->
        <!--{{tile.value}}-->
        <!--</div>-->
        <!--</div>-->
        <!--</md-card-content>-->
        <!--</md-card>-->


        <h2>Closed:</h2>
        <md-card  class="mini" *ngFor="let closedBoard of getClosed().board">
            <md-card-title-group>
                <md-card-title>F = g + h</md-card-title>
            </md-card-title-group>
            <md-card-content>
                <div class="puzzle-mini">
                    <div class="tile-mini" *ngFor="let tile of closedBoard" (click)="tileClicked(tile.value)">
                        {{tile.value}}
                    </div>
                </div>
            </md-card-content>
        </md-card>


        <!---->
        <!--<pre>{{ getFringe() | json }}</pre>-->

        <!--<h2>Closed:</h2>-->
        <!--<pre>{{ getClosed() | json }}</pre>-->

    `,
    styles: [`
		md-icon{
			 font-size:45px;
			 height:45px;
			 width: 45px;
		 }

		.mat-icon.green{
			color: green;
		}
		.mat-icon.red{
			color: red;
		}
		
		
		.tile {
			width: 80px;
{'fraction_non_alphanumeric': 0.21899641577060933, 'fraction_numerical': 0.0064516129032258064, 'mean_word_length': 1.6614210777300906, 'pattern_counts': {'":': 0, '<': 157, '<?xml version=': 0, '>': 157, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '396443', 'n_tokens_mistral': 1942, 'n_tokens_neox': 1764, 'n_words': 316}