Skip to content

Commit

Permalink
solo mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkrees
dkrees committed Nov 9, 2022
1 parent b351403 commit 1af519a
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 156 deletions.
4 changes: 2 additions & 2 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
</ion-menu-toggle> -->

<ion-item>
<ion-segment color="light" mode="ios" value="solo">
<ion-segment color="light" mode="ios" [(ngModel)]="mode" (ionChange)="soloModeChange($event)">
<ion-segment-button value="solo">
<ion-label>Solo</ion-label>
</ion-segment-button>
<ion-segment-button value="2-player">
<ion-segment-button value="twoPlayer">
<ion-label>2 Player</ion-label>
</ion-segment-button>
</ion-segment>
Expand Down
44 changes: 26 additions & 18 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,47 @@
import { Component, OnInit } from '@angular/core';
import { Climate } from './climate/climate.component';
import { CrownService } from './crown.service';
import { CrownService, Mode } from './crown.service';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {

public climates: {title: string; value: Climate; icon: string; selected: boolean}[] = [
{ title: 'Bull', value: 'bull', icon: 'mail', selected: false },
{ title: 'Stag', value: 'stag', icon: 'paper-plane', selected: false },
{ title: 'Lion', value: 'lion', icon: 'heart', selected: false },
{ title: 'Bear', value: 'bear', icon: 'archive', selected: false },
{ title: 'Peacock', value: 'peacock', icon: 'trash', selected: false },
];
// public climates: {title: string; value: Climate; icon: string; selected: boolean}[] = [
// { title: 'Bull', value: 'bull', icon: 'mail', selected: false },
// { title: 'Stag', value: 'stag', icon: 'paper-plane', selected: false },
// { title: 'Lion', value: 'lion', icon: 'heart', selected: false },
// { title: 'Bear', value: 'bear', icon: 'archive', selected: false },
// { title: 'Peacock', value: 'peacock', icon: 'trash', selected: false },
// ];

climate: Climate = 'lion';
// climate: Climate = 'lion';
mode: Mode;

constructor(
private crownService: CrownService
) {}

ngOnInit(): void {

const currentClimate = this.climates.find(({value}) => value === this.climate);
this.selectedClimate(currentClimate);
// const currentClimate = this.climates.find(({value}) => value === this.climate);
// this.selectedClimate(currentClimate);

this.crownService.getSoloMode().subscribe((solo: Mode) => {
this.mode = solo;
});
}

selectedClimate(climate: {title: string; value: Climate; icon: string; selected: boolean}) {
this.climates.forEach(item => {
item.selected = false;
});
climate.selected = true;
this.crownService.setClimate(climate.value);
soloModeChange(e: Event) {
this.crownService.setSoloMode(this.mode);
}

// selectedClimate(climate: {title: string; value: Climate; icon: string; selected: boolean}) {
// this.climates.forEach(item => {
// item.selected = false;
// });
// climate.selected = true;
// this.crownService.setClimate(climate.value);
// }
}
3 changes: 3 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
Expand All @@ -14,6 +16,7 @@ import { AppRoutingModule } from './app-routing.module';
],
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
Expand Down
12 changes: 12 additions & 0 deletions src/app/crown.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { Climate } from './climate/climate.component';

export type Mode = 'solo' | 'twoPlayer';

@Injectable({
providedIn: 'root'
})
Expand All @@ -11,6 +13,7 @@ export class CrownService {
// crownClimate$: Observable<Climate>;
// private climateSubject: Subject<Climate>;
crownClimate: BehaviorSubject<Climate> = new BehaviorSubject('lion');
soloMode: BehaviorSubject<Mode> = new BehaviorSubject('solo');

constructor(
private http: HttpClient
Expand All @@ -31,4 +34,13 @@ export class CrownService {
getClimate(): Observable<Climate> {
return this.crownClimate.asObservable();
}

setSoloMode(mode: Mode) {
console.log('setting solo mode to:', mode);
this.soloMode.next(mode);
}

getSoloMode(): Observable<Mode> {
return this.soloMode.asObservable();
}
}
97 changes: 50 additions & 47 deletions src/app/folder/folder.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,56 +53,59 @@

<ion-list lines="none">
<ng-container *ngFor="let step of crownActions.steps">
<ion-item *ngIf="step.heading || step.action || step.description || step.note" [color]="step.actingPlayer ? 'light' : ''">
<ion-label class="ion-text-wrap">
<ion-text color="dark">
<h2 *ngIf="step.heading">{{ step.heading | uppercase }}</h2>
<h4 *ngIf="step.action">{{ step.action }}</h4>
<p *ngFor="let description of step.description">{{ description }}</p>
</ion-text>
</ion-label>
<ion-note *ngIf="step.note" slot="helper" class="ion-text-wrap">
<ion-text><i>{{ step.note }}</i></ion-text>
</ion-note>
</ion-item>
<ng-container *ngIf="(mode === step.mode) || !step.mode">
<ion-item *ngIf="step.heading || step.action || step.description || step.note" [color]="step.actingPlayer ? 'light' : ''">
<ion-label class="ion-text-wrap">
<ion-text color="dark">
<h2 *ngIf="step.heading">{{ step.heading | uppercase }}</h2>
<h4 *ngIf="step.action">{{ step.action }}</h4>
<p *ngFor="let description of step.description">{{ description }}</p>
</ion-text>
</ion-label>
<ion-note *ngIf="step.note" slot="helper" class="ion-text-wrap">
<ion-text color="dark"><i>{{ step.note }}</i></ion-text>
</ion-note>
</ion-item>

<ion-item *ngIf="step.bullets">
<ion-label class="ion-text-wrap">
<ul>
<li *ngFor="let bullet of step.bullets">
<ion-text color="dark">{{ bullet }}</ion-text>
</li>
</ul>
</ion-label>
</ion-item>
<ion-item *ngIf="step.bullets">
<ion-label class="ion-text-wrap">
<ul>
<li *ngFor="let bullet of step.bullets">
<ion-text color="dark">{{ bullet }}</ion-text>
</li>
</ul>
</ion-label>
</ion-item>

<app-promise *ngIf="step.promise" [promise]="step.promise"></app-promise>

<ion-list *ngIf="step.climate" lines="full">
<ng-container *ngFor="let crownClimate of step.climate[climate]">
<ion-item *ngIf="crownClimate.description">
<ion-label class="ion-text-wrap">
<ion-text color="dark">
{{ crownClimate.description }}
</ion-text>
</ion-label>
<ion-note *ngIf="crownClimate.note" slot="helper" class="ion-text-wrap">
<ion-text><i>{{ crownClimate.note }}</i></ion-text>
</ion-note>
</ion-item>
<ion-item *ngIf="crownClimate.numbered?.length">
<ion-label>
<ol>
<li *ngFor="let item of crownClimate.numbered" class="ion-text-wrap">
<p>{{ item }}</p>
</li>
</ol>
</ion-label>
</ion-item>
<app-promise *ngIf="crownClimate.promise" [promise]="crownClimate.promise"></app-promise>
</ng-container>
</ion-list>
<app-promise *ngIf="step.promise" [promise]="step.promise"></app-promise>

<ion-list *ngIf="step.climate" lines="full">
<ng-container *ngFor="let crownClimate of step.climate[climate]">
<ng-container *ngIf="(mode === crownClimate.mode) || !crownClimate.mode">
<ion-item *ngIf="crownClimate.description">
<ion-label class="ion-text-wrap">
<ion-text color="dark">
{{ crownClimate.description }}
</ion-text>
</ion-label>
<ion-note *ngIf="crownClimate.note" slot="helper" class="ion-text-wrap">
<ion-text><i>{{ crownClimate.note }}</i></ion-text>
</ion-note>
</ion-item>
<ion-item *ngIf="crownClimate.numbered?.length">
<ion-label>
<ol>
<li *ngFor="let item of crownClimate.numbered" class="ion-text-wrap">
<p>{{ item }}</p>
</li>
</ol>
</ion-label>
</ion-item>
<app-promise *ngIf="crownClimate.promise" [promise]="crownClimate.promise"></app-promise>
</ng-container>
</ng-container>
</ion-list>
</ng-container>
</ng-container>

</ion-list>
Expand Down
Loading

0 comments on commit 1af519a

Please sign in to comment.