only the card left

This commit is contained in:
Zack Rauen 2019-06-21 00:32:59 -04:00
parent 8a0b0e5b0f
commit 6aa1dd3f28
10 changed files with 159 additions and 220 deletions

View File

@ -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;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
js/main.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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) {

View File

@ -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"},

View File

@ -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,

View File

@ -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")
)
)
);
}
}

View File

@ -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")
)
);
}

View File

@ -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>;
}