-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(market): can list items on market, market interface
- Loading branch information
Showing
31 changed files
with
791 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
159 changes: 159 additions & 0 deletions
159
client/src/app/components/modals/market/market.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,159 @@ | ||
<ion-header> | ||
<ion-toolbar> | ||
<ion-title>Steelrose Market</ion-title> | ||
|
||
<ion-buttons slot="end"> | ||
<ion-button (click)="myListings()" [strong]="true" color="secondary"> | ||
My Listings | ||
</ion-button> | ||
|
||
<ion-button (click)="close()" [strong]="true">Close</ion-button> | ||
</ion-buttons> | ||
</ion-toolbar> | ||
</ion-header> | ||
|
||
<ion-content class="ion-padding"> | ||
<ion-row> | ||
<ion-col size="4"> | ||
<ion-row> | ||
<ion-col> | ||
<ion-card> | ||
<ion-card-header> | ||
<ion-card-title>Rarities</ion-card-title> | ||
</ion-card-header> | ||
|
||
<ion-card-content> | ||
<ion-row> | ||
<ion-col size="4" *ngFor="let rarity of rarities"> | ||
<ion-button | ||
expand="block" | ||
[color]="searchRarities[rarity] ? 'secondary' : 'medium'" | ||
(click)="toggleRarity(rarity)" | ||
> | ||
{{ rarity }} | ||
</ion-button> | ||
</ion-col> | ||
</ion-row> | ||
</ion-card-content> | ||
</ion-card> | ||
</ion-col> | ||
</ion-row> | ||
|
||
<ion-row> | ||
<ion-col> | ||
<ion-card> | ||
<ion-card-header> | ||
<ion-card-title>Item Types</ion-card-title> | ||
</ion-card-header> | ||
|
||
<ion-card-content> | ||
<ion-row> | ||
<ion-col size="4" *ngFor="let type of itemTypes"> | ||
<ion-button | ||
expand="block" | ||
[color]="searchTypes[type] ? 'secondary' : 'medium'" | ||
(click)="toggleType(type)" | ||
> | ||
{{ type }} | ||
</ion-button> | ||
</ion-col> | ||
</ion-row> | ||
</ion-card-content> | ||
</ion-card> | ||
</ion-col> | ||
</ion-row> | ||
|
||
<ion-row> | ||
<ion-col> | ||
<ion-card> | ||
<ion-card-header> | ||
<ion-card-title>Filters</ion-card-title> | ||
</ion-card-header> | ||
|
||
<ion-card-content> | ||
<ion-list> | ||
<ion-item> | ||
<ion-input | ||
label="Item Name" | ||
labelPlacement="stacked" | ||
type="text" | ||
placeholder="Item Name" | ||
[(ngModel)]="searchName" | ||
></ion-input> | ||
</ion-item> | ||
|
||
<ion-item> | ||
<ion-input | ||
label="Minimum Level" | ||
labelPlacement="stacked" | ||
type="number" | ||
placeholder="Minimum Level" | ||
[(ngModel)]="searchLevelMin" | ||
></ion-input> | ||
</ion-item> | ||
|
||
<ion-item> | ||
<ion-input | ||
label="Maximum Level" | ||
labelPlacement="stacked" | ||
type="number" | ||
placeholder="Maximum Level" | ||
[(ngModel)]="searchLevelMax" | ||
></ion-input> | ||
</ion-item> | ||
|
||
<ion-item> | ||
<ion-input | ||
label="Minimum Coin Cost" | ||
labelPlacement="stacked" | ||
type="number" | ||
placeholder="Minimum Coin Cost" | ||
[(ngModel)]="searchCostMin" | ||
></ion-input> | ||
</ion-item> | ||
|
||
<ion-item> | ||
<ion-input | ||
label="Maximum Coin Cost" | ||
labelPlacement="stacked" | ||
type="number" | ||
placeholder="Maximum Coin Cost" | ||
[(ngModel)]="searchCostMax" | ||
></ion-input> | ||
</ion-item> | ||
</ion-list> | ||
</ion-card-content> | ||
</ion-card> | ||
</ion-col> | ||
</ion-row> | ||
|
||
<ion-row> | ||
<ion-col> | ||
<ion-button expand="block" color="primary" (click)="search()"> | ||
Search | ||
</ion-button> | ||
</ion-col> | ||
</ion-row> | ||
</ion-col> | ||
|
||
<ion-col size="8"> | ||
<ion-row> | ||
<ion-col> | ||
<ion-card> | ||
<ion-card-header> | ||
<ion-card-title>Market Results</ion-card-title> | ||
</ion-card-header> | ||
|
||
<ion-card-content *ngIf="marketItems.length === 0"> | ||
There are no search results at this time. | ||
</ion-card-content> | ||
|
||
<ion-card-content *ngIf="marketItems.length > 0"> | ||
{{ marketItems | json }} | ||
</ion-card-content> | ||
</ion-card> | ||
</ion-col> | ||
</ion-row> | ||
</ion-col> | ||
</ion-row> | ||
</ion-content> |
Empty file.
63 changes: 63 additions & 0 deletions
63
client/src/app/components/modals/market/market.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
import { IMarketItem, Rarity } from '@interfaces'; | ||
import { ModalController } from '@ionic/angular'; | ||
|
||
@Component({ | ||
selector: 'app-market', | ||
templateUrl: './market.component.html', | ||
styleUrls: ['./market.component.scss'], | ||
}) | ||
export class MarketModalComponent implements OnInit { | ||
public readonly rarities: Rarity[] = [ | ||
'Common', | ||
'Uncommon', | ||
'Unusual', | ||
'Rare', | ||
'Masterful', | ||
'Arcane', | ||
'Epic', | ||
'Divine', | ||
'Unique', | ||
]; | ||
|
||
public readonly itemTypes = [ | ||
'Weapons', | ||
'Armors', | ||
'Accessories', | ||
'Collectibles', | ||
'Resources', | ||
]; | ||
|
||
public marketItems: IMarketItem[] = []; | ||
|
||
public searchRarities: Record<string, boolean> = {}; | ||
public searchTypes: Record<string, boolean> = {}; | ||
|
||
public searchName = ''; | ||
public searchLevelMin = 0; | ||
public searchLevelMax = 0; | ||
public searchCostMin = 0; | ||
public searchCostMax = 0; | ||
|
||
constructor(private modalCtrl: ModalController) {} | ||
|
||
ngOnInit() { | ||
this.search(); | ||
} | ||
|
||
close() { | ||
this.modalCtrl.dismiss(); | ||
} | ||
|
||
public toggleRarity(rarity: Rarity) { | ||
this.searchRarities[rarity] = !this.searchRarities[rarity]; | ||
} | ||
|
||
public toggleType(type: string) { | ||
this.searchTypes[type] = !this.searchTypes[type]; | ||
} | ||
|
||
public myListings() {} | ||
|
||
public search() {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,15 @@ | ||
import { inject } from '@angular/core'; | ||
import { IAttachmentHelpers } from '@interfaces'; | ||
import { ContentService } from '@services/content.service'; | ||
import { NotifyService } from '@services/notify.service'; | ||
import { PlayerService } from '@services/player.service'; | ||
import { VisualService } from '@services/visual.service'; | ||
|
||
export function getStateHelpers(): IAttachmentHelpers { | ||
return { | ||
visual: inject(VisualService), | ||
notify: inject(NotifyService), | ||
player: inject(PlayerService), | ||
content: inject(ContentService), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.