Skip to content

Commit

Permalink
New Replays: Fix misc bugs
Browse files Browse the repository at this point in the history 
Specifically, the bugs fixed are to searches not updating correctly.
  • Loading branch information
@Zarel
Zarel committed Nov 2, 2023
1 parent c99981e commit 5e638d4
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 46 deletions.
10 changes: 6 additions & 4 deletions website/replays/src/replays-battle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
} | null | undefined = undefined;
battle: Battle | null;
speed = 'normal';
keyCode = '0';
/** debug purposes */
lastUsedKeyCode = '0';
turnView: boolean | string = false;
autofocusTurnView: 'select' | 'end' | null = null;
override componentDidMount() {
Expand Down Expand Up @@ -143,7 +144,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
}
keyPressed = (e: KeyboardEvent) => {
// @ts-ignore
this.keyCode = `${e.keyCode}`;
this.lastUsedKeyCode = `${e.keyCode}`;
if (e.ctrlKey || e.metaKey || e.altKey) return;
if (e.keyCode === 27 && this.turnView) { // Esc
this.closeTurn();
return;
Expand Down Expand Up @@ -190,8 +192,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
);
}
break;
case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57:
case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105:
case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: // 0-9
case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105: // numpad 0-9
this.turnView = String.fromCharCode(e.keyCode - (e.keyCode >= 96 ? 48 : 0));
if (this.turnView === '0') this.turnView = '10';
this.autofocusTurnView = 'end';
Expand Down
95 changes: 53 additions & 42 deletions website/replays/src/replays.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ class SearchPanel extends preact.Component<{id: string}> {
});
this.updateSearch(Net.decodeQuery(this.props.id));
}
override componentDidUpdate() {
override componentDidUpdate(previousProps: this['props']) {
if (this.props.id === previousProps.id) return;
const query = Net.decodeQuery(this.props.id);
const page = parseInt(query.page || '1');
const byRating = (query.sort === 'rating');
Expand Down Expand Up @@ -111,7 +112,7 @@ class SearchPanel extends preact.Component<{id: string}> {
});
}
modLink(overrides: {page?: number, sort?: string}) {
const newPage = this.page + (overrides.page || 0);
const newPage = (overrides.page !== undefined ? this.page + overrides.page : 1);
return './?' + Net.encodeQuery({
user: this.user || undefined,
format: this.format || undefined,
Expand Down Expand Up @@ -185,46 +186,56 @@ class SearchPanel extends preact.Component<{id: string}> {
</a>
</li>))}
</ul>;
return <div class={PSRouter.showingRight() ? 'sidebar' : ''}><section class="section first-section">
<h1>Search replays</h1>
<form onSubmit={this.submitForm}>
<p>
<label>Username:<br />
<input type="search" class="textbox" name="user" placeholder="(blank = any user)" size={20} /> {}
{this.loggedInUser && <button type="button" class="button" onClick={this.searchLoggedIn}>{this.loggedInUser}'s replays</button>}</label>
</p>
<p>
<label>Format:<br />
<input type="search" class="textbox" name="format" placeholder="(blank = any format)" size={30} /></label>
</p>
<p>
<label class="checkbox inline"><input type="radio" name="private" value="" /> Public</label> {}
<label class="checkbox inline"><input type="radio" name="private" value="1" /> Private (your own replays only)</label>
</p>
<p>
<button type="submit" class="button"><i class="fa fa-search" aria-hidden></i> <strong>Search</strong></button> {}
{activelySearching && <button class="button" onClick={this.cancelForm}>Cancel</button>}
</p>
{activelySearching && <h1 aria-label="Results"></h1>}
{activelySearching && this.format && !this.user && <p>
Sort by: {}
<a href={this.modLink({sort: 'date', page: 1})} class={`button button-first${this.byRating ? '' : ' disabled'}`}>Date</a>
<a href={this.modLink({sort: 'rating', page: 1})} class={`button button-last${this.byRating ? ' disabled' : ''}`}>Rating</a>
</p>}
{activelySearching && this.page > 1 && <p class="pagelink">
<a href={this.modLink({page: -1})} class="button"><i class="fa fa-caret-up"></i><br />Page {this.page - 1}</a>
</p>}
{activelySearching && searchResults}
{activelySearching && (this.results?.length || 0) > 50 && <p class="pagelink">
<a href={this.modLink({page: 1})} class="button">Page {this.page + 1}<br /><i class="fa fa-caret-down"></i></a>
</p>}
</form>
</section>{!activelySearching && <FeaturedReplays />}{!activelySearching && <section class="section">
<h1>Recent replays</h1>
<ul class="linklist">
{searchResults}
</ul>
</section>}</div>;
return <div class={PSRouter.showingRight() ? 'sidebar' : ''}>
<section class="section first-section">
<h1>Search replays</h1>
<form onSubmit={this.submitForm}>
<p>
<label>
Username:<br />
<input type="search" class="textbox" name="user" placeholder="(blank = any user)" size={20} /> {}
{this.loggedInUser && <button type="button" class="button" onClick={this.searchLoggedIn}>{this.loggedInUser}'s replays</button>}
</label>
</p>
<p>
<label>Format:<br />
<input type="search" class="textbox" name="format" placeholder="(blank = any format)" size={30} /></label>
</p>
<p>
<label class="checkbox inline"><input type="radio" name="private" value="" /> Public</label> {}
<label class="checkbox inline"><input type="radio" name="private" value="1" /> Private (your own replays only)</label>
</p>
<p>
<button type="submit" class="button"><i class="fa fa-search" aria-hidden></i> <strong>Search</strong></button> {}
{activelySearching && <button class="button" onClick={this.cancelForm}>Cancel</button>}
</p>
{activelySearching && <h1 aria-label="Results"></h1>}
{activelySearching && this.format && !this.user && <p>
Sort by: {}
<a href={this.modLink({sort: 'date'})} class={`button button-first${this.byRating ? '' : ' disabled'}`}>
Date
</a>
<a href={this.modLink({sort: 'rating'})} class={`button button-last${this.byRating ? ' disabled' : ''}`}>
Rating
</a>
</p>}
{activelySearching && this.page > 1 && <p class="pagelink">
<a href={this.modLink({page: -1})} class="button"><i class="fa fa-caret-up"></i><br />Page {this.page - 1}</a>
</p>}
{activelySearching && searchResults}
{activelySearching && (this.results?.length || 0) > 50 && <p class="pagelink">
<a href={this.modLink({page: 1})} class="button">Page {this.page + 1}<br /><i class="fa fa-caret-down"></i></a>
</p>}
</form>
</section>
{!activelySearching && <FeaturedReplays />}
{!activelySearching && <section class="section">
<h1>Recent replays</h1>
<ul class="linklist">
{searchResults}
</ul>
</section>}
</div>;
}
}

Expand Down

0 comments on commit 5e638d4

Please sign in to comment.