Old Chou's Treasure Solver (#178)

Adding Solver

Co-authored-by: Michael Fuller <[email protected]>

src/app/app-routing.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { MapComponent } from './map/map.component';
+import { OldChouTreasureComponent } from './old-chou-treasure/old-chou-treasure.component';
 import { PuzzleListingComponent } from './puzzle-listing/puzzle-listing.component';
 import { PuzzleViewComponent } from './puzzle-view/puzzle-view.component';
 
 const routes: Routes = [
+  { path: 'oldchoutreasure', component: OldChouTreasureComponent },
   { path: 'puzzle/:puzzleId', component: PuzzleViewComponent },
   { path: 'list/:island', component: PuzzleListingComponent },
   { path: 'map', component: MapComponent },

src/app/app.component.html

@@ -52,6 +52,22 @@
           </div>
         </li>
 
+        <li class="nav-item dropdown" dropdown>
+          <span
+            class="nav-link active dropdown-toggle"
+            id="navbardrop2"
+            data-toggle="dropdown"
+            dropdownToggle
+          >
+            Other
+          </span>
+          <div class="dropdown-menu" *dropdownMenu>
+            <a class="dropdown-item" href="#" routerLink="/oldchoutreasure"
+              >Old Chou's Treasure</a
+            >
+          </div>
+        </li>
+
         <li class="nav-item active">
           <a
             class="nav-link"

src/app/app.module.ts

@@ -40,6 +40,10 @@ import { PuzzleSolutionComponent } from './puzzle-solution/puzzle-solution.compo
 import { HomeComponent } from './home/home.component';
 import { PuzzleListingComponent } from './puzzle-listing/puzzle-listing.component';
 import { MapKeyComponent } from './map-key/map-key.component';
+import { OldChouTreasureComponent } from './old-chou-treasure/old-chou-treasure.component';
+import { OldChouTreasureButtonComponent } from './old-chou-treasure-button/old-chou-treasure-button.component';
+import { OldChouTreasureRowComponent } from './old-chou-treasure-row/old-chou-treasure-row.component';
+import { OldChouTreasureAreaComponent } from './old-chou-treasure-area/old-chou-treasure-area.component';
 
 @NgModule({
   declarations: [
@@ -52,6 +56,10 @@ import { MapKeyComponent } from './map-key/map-key.component';
     HomeComponent,
     PuzzleListingComponent,
     MapKeyComponent,
+    OldChouTreasureComponent,
+    OldChouTreasureButtonComponent,
+    OldChouTreasureRowComponent,
+    OldChouTreasureAreaComponent,
   ],
   imports: [
     BrowserModule,

src/app/old-chou-treasure-area/old-chou-treasure-area.component.html

@@ -0,0 +1,25 @@
+<app-old-chou-treasure-row
+  [y]="0"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-row>
+<app-old-chou-treasure-row
+  [y]="1"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-row>
+<app-old-chou-treasure-row
+  [y]="2"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-row>
+<app-old-chou-treasure-row
+  [y]="3"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-row>
+<app-old-chou-treasure-row
+  [y]="4"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-row>

src/app/old-chou-treasure-area/old-chou-treasure-area.component.scss

@@ -0,0 +1,5 @@
+app-old-chou-treasure-row {
+    display: block;
+    line-height: 0;
+    white-space: nowrap;
+}

src/app/old-chou-treasure-area/old-chou-treasure-area.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OldChouTreasureAreaComponent } from './old-chou-treasure-area.component';
+
+describe('OldChouTreasureAreaComponent', () => {
+  let component: OldChouTreasureAreaComponent;
+  let fixture: ComponentFixture<OldChouTreasureAreaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OldChouTreasureAreaComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OldChouTreasureAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/old-chou-treasure-area/old-chou-treasure-area.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChouTreasureGrid } from '../shared/chou-treasure-grid';
+
+@Component({
+  selector: 'app-old-chou-treasure-area',
+  templateUrl: './old-chou-treasure-area.component.html',
+  styleUrls: ['./old-chou-treasure-area.component.scss'],
+})
+export class OldChouTreasureAreaComponent implements OnInit {
+  constructor() {}
+
+  @Input()
+  public config: ChouTreasureGrid | undefined;
+
+  @Output()
+  cellClicked: EventEmitter<number> = new EventEmitter<number>();
+
+  ngOnInit(): void {}
+
+  cellClickEvent(index: number) {
+    this.cellClicked.emit(index);
+  }
+}

src/app/old-chou-treasure-button/old-chou-treasure-button.component.html

@@ -0,0 +1,4 @@
+<button #thebutton mode="unknown" (click)="buttonPressed()">
+  <span class="icon"></span>
+  <span class="text">{{ label }}</span>
+</button>

src/app/old-chou-treasure-button/old-chou-treasure-button.component.scss

@@ -0,0 +1,60 @@
+button {
+    display: inline-block;
+    width: 96px;
+    height: 96px;
+    background-color: burlywood;
+    position: relative;
+}
+
+button span.icon {
+    width: 96px;
+    height: 96px;
+    display:block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+button span.text {
+    width: 96px;
+    height: 9px;
+    display:block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    font-size: 12px;
+}
+
+button[mode=empty] span.icon {
+    background-image: url(/assets/chou/empty.png);
+}
+
+button[mode=cabbage] span.icon {
+    background-image: url(/assets/chou/cabbage.png);
+}
+
+button[mode=iron] span.icon {
+    background-image: url(/assets/chou/iron.png);
+    background-size: 70%;
+}
+
+button[mode=barrel] span.icon {
+    background-image: url(/assets/chou/barrel.png);
+    background-size: 80%;
+}
+
+button[mode=question] span.icon {
+    background-image: url(/assets/chou/question.png);
+    background-size: 70%;
+}
+
+button[mode=unknown] span.icon {
+    background-image: url(/assets/chou/unknown.png);
+}
+
+button[mode=safe] span.icon {
+    background-image: url(/assets/chou/safe.png);
+    background-size: 70%;
+}

src/app/old-chou-treasure-button/old-chou-treasure-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OldChouTreasureButtonComponent } from './old-chou-treasure-button.component';
+
+describe('OldChouTreasureButtonComponent', () => {
+  let component: OldChouTreasureButtonComponent;
+  let fixture: ComponentFixture<OldChouTreasureButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OldChouTreasureButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OldChouTreasureButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/old-chou-treasure-button/old-chou-treasure-button.component.ts

@@ -0,0 +1,94 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { ChouTreasureGrid } from '../shared/chou-treasure-grid';
+import { ChouTreasureTypes } from '../shared/chou-treasure-types';
+
+@Component({
+  selector: 'app-old-chou-treasure-button',
+  templateUrl: './old-chou-treasure-button.component.html',
+  styleUrls: ['./old-chou-treasure-button.component.scss'],
+})
+export class OldChouTreasureButtonComponent implements OnInit {
+  public label: String = '?';
+
+  @ViewChild('thebutton', { read: ElementRef, static: false })
+  public thebutton: ElementRef;
+
+  @Input()
+  public y: number = 0;
+
+  @Input()
+  public x: number = 0;
+
+  public _config: ChouTreasureGrid | undefined;
+
+  @Output()
+  cellClicked: EventEmitter<number> = new EventEmitter<number>();
+
+  @Input() set config(newConfig: ChouTreasureGrid | undefined) {
+    this._config = newConfig;
+    if (this._config) {
+      let value = this._config!.grid![this.y][this.x];
+
+      let mode = '';
+
+      switch (value) {
+        case ChouTreasureTypes.BOMB:
+          this.label = 'BOMB';
+          mode = 'barrel';
+
+          break;
+        case ChouTreasureTypes.CABBAGE:
+          this.label = 'CABBAGE';
+          mode = 'cabbage';
+          break;
+        case ChouTreasureTypes.EMPTY:
+          this.label = 'EMPTY';
+          mode = 'empty';
+          break;
+        case ChouTreasureTypes.ORE:
+          this.label = 'ORE';
+          mode = 'iron';
+          break;
+        case ChouTreasureTypes.POTENTIAL_BOMB:
+          this.label = '?BOMB?';
+          mode = 'question';
+          break;
+        case ChouTreasureTypes.SAFE_SPOT:
+          this.label = 'SAFE';
+          mode = 'safe';
+          break;
+        case ChouTreasureTypes.TREASURE:
+          this.label = 'TREASURE';
+          mode = 'safe';
+          break;
+        case ChouTreasureTypes.UNKNOWN:
+          this.label = '???';
+          mode = 'unknown';
+          break;
+      }
+
+      if (this.thebutton && this.thebutton.nativeElement) {
+        this.thebutton.nativeElement.setAttribute('mode', mode);
+      }
+    } else {
+      this.label = '?';
+    }
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  buttonPressed() {
+    console.log('C1');
+    this.cellClicked.emit(this.y * 5 + this.x);
+  }
+}

src/app/old-chou-treasure-row/old-chou-treasure-row.component.html

@@ -0,0 +1,30 @@
+<app-old-chou-treasure-button
+  [x]="0"
+  [y]="y"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-button>
+<app-old-chou-treasure-button
+  [x]="1"
+  [y]="y"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-button>
+<app-old-chou-treasure-button
+  [x]="2"
+  [y]="y"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-button>
+<app-old-chou-treasure-button
+  [x]="3"
+  [y]="y"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-button>
+<app-old-chou-treasure-button
+  [x]="4"
+  [y]="y"
+  [config]="config"
+  (cellClicked)="cellClickEvent($event)"
+></app-old-chou-treasure-button>

src/app/old-chou-treasure-row/old-chou-treasure-row.component.scss

@@ -0,0 +1,5 @@
+app-old-chou-treasure-button {
+    display: inline-block;
+    width: 96px;
+    height: 96px;
+}

src/app/old-chou-treasure-row/old-chou-treasure-row.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OldChouTreasureRowComponent } from './old-chou-treasure-row.component';
+
+describe('OldChouTreasureRowComponent', () => {
+  let component: OldChouTreasureRowComponent;
+  let fixture: ComponentFixture<OldChouTreasureRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OldChouTreasureRowComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OldChouTreasureRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});