only the card left
This commit is contained in:
parent
8a0b0e5b0f
commit
6aa1dd3f28
41
css/main.css
41
css/main.css
|
@ -93,6 +93,45 @@
|
|||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#bd-connection {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bd-button {
|
||||
background-color: #3E82E5;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bd-button:hover {
|
||||
background-color: rgb(56,117,206);
|
||||
}
|
||||
|
||||
.bd-button:active {
|
||||
background-color: rgb(50,104,183);
|
||||
}
|
||||
|
||||
.bd-footnote {
|
||||
color: #b9bbbe;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bd-button-next,
|
||||
.bd-button-reconnect {
|
||||
margin: 5px 10px 10px 0;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
margin: 0 0 10px 0px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: #202225;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -911,7 +950,7 @@ body .ace_closeButton:active {
|
|||
}
|
||||
|
||||
.bd-pfbtn,
|
||||
.bd-title-button {
|
||||
.bd-button-title {
|
||||
background: #7289da;
|
||||
color: #FFF;
|
||||
border-radius: 5px;
|
||||
|
|
File diff suppressed because one or more lines are too long
12
js/main.js
12
js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -85,7 +85,7 @@ export default class Logger {
|
|||
static _log(module, message, type = "log") {
|
||||
type = Logger.parseType(type);
|
||||
if (!Array.isArray(message)) message = [message];
|
||||
console[type](`%c[${module}]%c`, "color: #3a71c1; font-weight: 700;", "", ...message);
|
||||
console[type](`%c[BandagedBD]%c %c[${module}]%c`, "color: #3E82E5; font-weight: 700;", "color: #3a71c1;", "", ...message);
|
||||
}
|
||||
|
||||
static parseType(type) {
|
||||
|
|
|
@ -58,7 +58,7 @@ export default class ServerCard extends React.Component {
|
|||
),
|
||||
this.state.joined && React.createElement(
|
||||
"button",
|
||||
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN colorGreen-29iAKY", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#3ac15c"}},
|
||||
{type: "button", className: "bd-button button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN colorGreen-29iAKY", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#3ac15c"}},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "ui-button-contents"},
|
||||
|
@ -67,7 +67,7 @@ export default class ServerCard extends React.Component {
|
|||
),
|
||||
server.error && React.createElement(
|
||||
"button",
|
||||
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN disabled-9aF2ug", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#c13a3a"}},
|
||||
{type: "button", className: "bd-button button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN disabled-9aF2ug", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#c13a3a"}},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "ui-button-contents"},
|
||||
|
@ -76,7 +76,7 @@ export default class ServerCard extends React.Component {
|
|||
),
|
||||
!server.error && !this.state.joined && React.createElement(
|
||||
"button",
|
||||
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN", style: {minHeight: "12px", marginTop: "4px"}, onClick: () => {this.join();}},
|
||||
{type: "button", className: "bd-button button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN", style: {minHeight: "12px", marginTop: "4px"}, onClick: () => {this.join();}},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "ui-button-contents"},
|
||||
|
|
|
@ -21,9 +21,13 @@ export default class PublicServersConnection {
|
|||
return SortedGuildStore.guildPositions.includes(id);
|
||||
}
|
||||
|
||||
static search({term = "", category = "All", from = 0} = {}) {
|
||||
static search({term = "", category = "", from = 0} = {}) {
|
||||
return new Promise(resolve => {
|
||||
const query = `?category=${category}&from=${from}${term ? `&term=${term}` : ""}`;
|
||||
const queries = [];
|
||||
if (category) queries.push(`category=${category.replace(/ /g, "%20")}`);
|
||||
if (term) queries.push(`term=${term.replace(/ /g, "%20")}`);
|
||||
if (from) queries.push(`from=${from}`);
|
||||
const query = `?${queries.join("&")}`;
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: `${this.endPoint}${query}`,
|
||||
|
@ -37,7 +41,7 @@ export default class PublicServersConnection {
|
|||
next: next >= data.total ? null : next
|
||||
});
|
||||
},
|
||||
error: resolve(null)
|
||||
error: () => resolve(null)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -78,8 +82,7 @@ export default class PublicServersConnection {
|
|||
withCredentials: true
|
||||
},
|
||||
success: data => {
|
||||
this._accessToken = data.accessToken;
|
||||
console.log(this._accessToken);
|
||||
this._accessToken = data.access_token;
|
||||
resolve(data);
|
||||
},
|
||||
error: () => resolve(false)
|
||||
|
@ -110,7 +113,7 @@ export default class PublicServersConnection {
|
|||
height: 550,
|
||||
backgroundColor: "#282b30",
|
||||
show: true,
|
||||
resizable: false,
|
||||
resizable: true,
|
||||
maximizable: false,
|
||||
minimizable: false,
|
||||
alwaysOnTop: true,
|
||||
|
|
|
@ -7,87 +7,43 @@ const SettingsView = WebpackModules.getByDisplayName("SettingsView");
|
|||
|
||||
export default class PublicServers extends React.Component {
|
||||
|
||||
get categoryButtons() {
|
||||
return ["All", "FPS Games", "MMO Games", "Strategy Games", "MOBA Games", "RPG Games", "Tabletop Games", "Sandbox Games", "Simulation Games", "Music", "Community", "Language", "Programming", "Other"];
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedCategory: "All",
|
||||
title: "Loading...",
|
||||
category: "All",
|
||||
query: "",
|
||||
loading: true,
|
||||
servers: [],
|
||||
next: null,
|
||||
connection: {
|
||||
state: 0,
|
||||
user: null
|
||||
user: null,
|
||||
results: {
|
||||
servers: [],
|
||||
size: 0,
|
||||
from: 0,
|
||||
total: 0,
|
||||
next: null
|
||||
}
|
||||
};
|
||||
this.close = this.close.bind(this);
|
||||
|
||||
this.changeCategory = this.changeCategory.bind(this);
|
||||
this.search = this.search.bind(this);
|
||||
this.searchKeyDown = this.searchKeyDown.bind(this);
|
||||
this.checkConnection = this.checkConnection.bind(this);
|
||||
this.connect = this.connect.bind(this);
|
||||
this.loadNextPage = this.loadNextPage.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.checkConnection();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
search(query, clear) {
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: `${this.endPoint}${query}${query ? "&schema=new" : "?schema=new"}`,
|
||||
success: data => {
|
||||
let servers = data.results.reduce((arr, server) => {
|
||||
server.joined = false;
|
||||
arr.push(server);
|
||||
// arr.push(<ServerCard server={server} join={this.join}/>);
|
||||
return arr;
|
||||
}, []);
|
||||
|
||||
if (!clear) {
|
||||
servers = this.state.servers.concat(servers);
|
||||
}
|
||||
else {
|
||||
//servers.unshift(this.bdServer);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
|
||||
let end = data.size + data.from;
|
||||
data.next = `?from=${end}`;
|
||||
if (this.state.term) data.next += `&term=${this.state.term}`;
|
||||
if (this.state.selectedCategory) data.next += `&category=${this.state.selectedCategory}`;
|
||||
if (end >= data.total) {
|
||||
end = data.total;
|
||||
data.next = null;
|
||||
}
|
||||
|
||||
let title = `Showing 1-${end} of ${data.total} results in ${this.state.selectedCategory}`;
|
||||
if (this.state.term) title += ` for ${this.state.term}`;
|
||||
|
||||
this.setState({
|
||||
loading: false,
|
||||
title: title,
|
||||
servers: servers,
|
||||
next: data.next
|
||||
});
|
||||
|
||||
if (clear) {
|
||||
//console.log(this);
|
||||
// this.refs.sbv.refs.contentScroller.scrollTop = 0;
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
title: "Failed to load servers. Check console for details"
|
||||
});
|
||||
}
|
||||
});
|
||||
async checkConnection() {
|
||||
const userData = await Manager.checkConnection();
|
||||
if (!userData) {
|
||||
return this.setState({loading: true, user: null});
|
||||
}
|
||||
this.setState({user: userData});
|
||||
this.search();
|
||||
}
|
||||
|
||||
async connect() {
|
||||
|
@ -95,22 +51,76 @@ export default class PublicServers extends React.Component {
|
|||
this.checkConnection();
|
||||
}
|
||||
|
||||
get windowOptions() {
|
||||
return {
|
||||
width: 500,
|
||||
height: 550,
|
||||
backgroundColor: "#282b30",
|
||||
show: true,
|
||||
resizable: false,
|
||||
maximizable: false,
|
||||
minimizable: false,
|
||||
alwaysOnTop: true,
|
||||
frame: false,
|
||||
center: false,
|
||||
webPreferences: {
|
||||
nodeIntegration: false
|
||||
}
|
||||
};
|
||||
searchKeyDown(e) {
|
||||
if (this.state.loading || e.which !== 13) return;
|
||||
this.search(e.target.value);
|
||||
}
|
||||
|
||||
async search(term = "", from = 0) {
|
||||
this.setState({query: term, loading: true});
|
||||
const results = await Manager.search({term, category: this.state.category == "All" ? "" : this.state.category, from});
|
||||
if (!results) {
|
||||
return this.setState({results: {
|
||||
servers: [],
|
||||
size: 0,
|
||||
from: 0,
|
||||
total: 0,
|
||||
next: null
|
||||
}});
|
||||
}
|
||||
this.setState({loading: false, results});
|
||||
}
|
||||
|
||||
async changeCategory(id) {
|
||||
if (this.state.loading) return;
|
||||
await new Promise(resolve => this.setState({category: id}, resolve));
|
||||
this.search();
|
||||
}
|
||||
|
||||
loadNextPage() {
|
||||
if (this.state.loading) return;
|
||||
this.search(this.state.query, this.state.results.next);
|
||||
}
|
||||
|
||||
get searchBox() {
|
||||
return React.createElement("input", {onKeyDown: this.searchKeyDown, type: "text", className: "bd-search", placeholder: "Search...", value: this.state.query, maxLength: "50"});
|
||||
}
|
||||
|
||||
get title() {
|
||||
if (!this.state.user) return "Not connected to DiscordServers.com!";
|
||||
if (this.state.loading) return "Loading...";
|
||||
const start = this.state.results.from + 1;
|
||||
const total = this.state.results.total;
|
||||
const end = this.state.results.next ? this.state.results.next : total;
|
||||
let title = `Showing ${start}-${end} of ${total} results in ${this.state.category}`;
|
||||
if (this.state.query) title += ` for ${this.state.query}`;
|
||||
return title;
|
||||
}
|
||||
|
||||
get content() {
|
||||
const connectButton = this.state.user ? null : {title: "Connect", onClick: this.connect};
|
||||
const pinned = this.state.category == "All" || !this.state.user ? this.bdServer : null;
|
||||
const servers = this.state.results.servers.map((server) => {
|
||||
return React.createElement(ServerCard, {key: server.identifier, server: server});
|
||||
});
|
||||
return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}),
|
||||
pinned,
|
||||
servers,
|
||||
this.state.results.next ? this.nextButton : null,
|
||||
this.state.results.servers.length > 0 && React.createElement(SettingsTitle, {text: this.title})];
|
||||
}
|
||||
|
||||
get nextButton() {
|
||||
return React.createElement("button", {type: "button", className: "bd-button bd-button-next", onClick: this.loadNextPage}, this.state.loading ? "Loading" : "Load More");
|
||||
}
|
||||
|
||||
get connection() {
|
||||
const {user} = this.state;
|
||||
if (!user) return React.createElement("div", {id: "bd-connection"});
|
||||
return React.createElement("div", {id: "bd-connection"},
|
||||
React.createElement("div", {className: "bd-footnote"}, `Connected as: `, `${user.username}#${user.discriminator}`),
|
||||
React.createElement("button", {type: "button", className: "bd-button bd-button-reconnect", onClick: this.connect}, "Reconnect")
|
||||
);
|
||||
}
|
||||
|
||||
get bdServer() {
|
||||
|
@ -119,7 +129,7 @@ export default class PublicServers extends React.Component {
|
|||
online: "7500+",
|
||||
members: "20000+",
|
||||
categories: ["community", "programming", "support"],
|
||||
description: "Official BetterDiscord server for support etc",
|
||||
description: "Official BetterDiscord server for plugins, themes, support, etc",
|
||||
identifier: "86004744966914048",
|
||||
iconUrl: "https://cdn.discordapp.com/icons/86004744966914048/292e7f6bfff2b71dfd13e508a859aedd.webp",
|
||||
nativejoin: true,
|
||||
|
@ -129,27 +139,6 @@ export default class PublicServers extends React.Component {
|
|||
return React.createElement(ServerCard, {server: server, pinned: true});
|
||||
}
|
||||
|
||||
get endPoint() {
|
||||
return "https://search.discordservers.com";
|
||||
}
|
||||
|
||||
get joinEndPoint() {
|
||||
return "https://j.discordservers.com";
|
||||
}
|
||||
|
||||
get connectEndPoint() {
|
||||
return "https://join.discordservers.com/connect";
|
||||
}
|
||||
|
||||
async checkConnection() {
|
||||
const userData = await Manager.checkConnection();
|
||||
if (!userData) {
|
||||
return this.setState({loading: true, connection: {state: 1, user: null}});
|
||||
}
|
||||
this.setState({connection: {state: 2, user: userData}});
|
||||
this.search("", true);
|
||||
}
|
||||
|
||||
render() {
|
||||
const categories = this.categoryButtons.map(name => ({
|
||||
section: name,
|
||||
|
@ -158,12 +147,12 @@ export default class PublicServers extends React.Component {
|
|||
})
|
||||
);
|
||||
return React.createElement(SettingsView, {
|
||||
onClose: this.close,
|
||||
onClose: this.props.close,
|
||||
onSetSection: this.changeCategory,
|
||||
section: this.state.selectedCategory,
|
||||
section: this.state.category,
|
||||
sections: [
|
||||
{section: "HEADER", label: "Search"},
|
||||
{section: "CUSTOM", element: () => this.searchInput},
|
||||
{section: "CUSTOM", element: () => this.searchBox},
|
||||
{section: "HEADER", label: "Categories"},
|
||||
...categories,
|
||||
{section: "DIVIDER"},
|
||||
|
@ -173,97 +162,5 @@ export default class PublicServers extends React.Component {
|
|||
],
|
||||
theme: "dark"
|
||||
});
|
||||
// return React.createElement(StandardSidebarView, {id: "pubslayer", ref: "sbv", notice: null, theme: "dark", closeAction: this.close, content: this.content, sidebar: this.sidebar});
|
||||
}
|
||||
|
||||
get searchInput() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{className: "ui-form-item"},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "ui-text-input flex-vertical", style: {width: "172px", marginLeft: "10px"}},
|
||||
React.createElement("input", {onKeyDown: this.searchKeyDown, onChange: () => {}, type: "text", className: "input default", placeholder: "Search...", maxLength: "50"})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
searchKeyDown(e) {
|
||||
if (this.state.loading || e.which !== 13) return;
|
||||
this.setState({
|
||||
loading: true,
|
||||
title: "Loading...",
|
||||
term: e.target.value
|
||||
});
|
||||
let query = `?term=${e.target.value}`;
|
||||
if (this.state.selectedCategory !== "All") {
|
||||
query += `&category=${this.state.selectedCategory}`;
|
||||
}
|
||||
this.search(query, true);
|
||||
}
|
||||
|
||||
get categoryButtons() {
|
||||
return ["All", "FPS Games", "MMO Games", "Strategy Games", "MOBA Games", "RPG Games", "Tabletop Games", "Sandbox Games", "Simulation Games", "Music", "Community", "Language", "Programming", "Other"];
|
||||
}
|
||||
|
||||
changeCategory(id) {
|
||||
if (this.state.loading) return;
|
||||
// this.refs.searchinput.value = "";
|
||||
this.setState({
|
||||
loading: true,
|
||||
selectedCategory: id,
|
||||
title: "Loading...",
|
||||
term: null
|
||||
});
|
||||
if (id === "All") {
|
||||
this.search("", true);
|
||||
return;
|
||||
}
|
||||
this.search(`?category=${this.state.selectedCategory.replace(" ", "%20")}`, true);
|
||||
}
|
||||
|
||||
get content() {
|
||||
const pinned = this.state.selectedCategory == "All" || this.state.connection.state === 1 ? this.bdServer : null;
|
||||
const servers = this.state.servers.map((server) => {
|
||||
return React.createElement(ServerCard, {key: server.identifier, server: server});
|
||||
});
|
||||
return [React.createElement(SettingsTitle, {text: this.state.title}),
|
||||
pinned,
|
||||
servers,
|
||||
this.state.next ? this.nextButton : null,
|
||||
this.state.servers.length > 0 && React.createElement(SettingsTitle, {text: this.state.title})];
|
||||
}
|
||||
|
||||
get nextButton() {
|
||||
return React.createElement("button", {
|
||||
type: "button",
|
||||
onClick: () => {
|
||||
if (this.state.loading) return;
|
||||
this.setState({loading: true});
|
||||
this.search(this.state.next, false);
|
||||
},
|
||||
className: "ui-button filled brand small grow",
|
||||
style: {width: "100%", marginTop: "10px", marginBottom: "10px"}
|
||||
},
|
||||
React.createElement("div", {className: "ui-button-contents"}, this.state.loading ? "Loading" : "Load More")
|
||||
);
|
||||
}
|
||||
|
||||
get connection() {
|
||||
const {connection} = this.state;
|
||||
if (connection.state !== 2) return React.createElement("span", null);
|
||||
|
||||
return React.createElement("span", null,
|
||||
React.createElement("span", {style: {color: "#b9bbbe", fontSize: "10px", marginLeft: "10px"}},
|
||||
"Connected as: ",
|
||||
`${connection.user.username}#${connection.user.discriminator}`
|
||||
),
|
||||
React.createElement("div", {style: {padding: "5px 10px 0 10px"}},
|
||||
React.createElement("button",
|
||||
{style: {width: "100%", minHeight: "20px"}, type: "button", className: "ui-button filled brand small grow"},
|
||||
React.createElement("div", {className: "ui-button-contents", onClick: this.connect}, "Reconnect")
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -111,7 +111,7 @@ export default class PluginCard extends React.Component {
|
|||
website && source && " | ",
|
||||
source && React.createElement("a", {className: "bda-link bda-link-source", href: source, target: "_blank"}, "Source")
|
||||
),
|
||||
this.hasSettings && React.createElement("button", {onClick: this.showSettings, className: "bda-settings-button", disabled: !this.state.checked}, "Settings")
|
||||
this.hasSettings && React.createElement("button", {onClick: this.showSettings, className: "bd-button bd-button-plugin-settings", disabled: !this.state.checked}, "Settings")
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ export default class SettingsTitle extends React.Component {
|
|||
const titleClass = this.props.className ? `${baseClass} ${this.props.className}` : baseClass;
|
||||
return <h2 className={titleClass} onClick={() => {this.props.onClick && this.props.onClick();}}>
|
||||
{this.props.text}
|
||||
{this.props.button && <button className="bd-title-button" onClick={this.props.button.onClick}>{this.props.button.title}</button>}
|
||||
{this.props.button && <button className="bd-button bd-button-title" onClick={this.props.button.onClick}>{this.props.button.title}</button>}
|
||||
{this.props.otherChildren}
|
||||
</h2>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue