-
+ 
+
);
}
return (
-
+
+ data-ad-layout={ adLayout }
+ data-ad-format={ adFormat }
+ data-full-width-responsive={ fullWidthResponsive }>
);
}
diff --git a/app/src/components/DiscordInvite/index.tsx b/app/src/components/DiscordInvite/index.tsx
new file mode 100644
index 000000000..ce5824d01
--- /dev/null
+++ b/app/src/components/DiscordInvite/index.tsx
@@ -0,0 +1,117 @@
+/* eslint no-use-before-define: off */
+/* eslint no-undef: off */
+
+import React, { Component } from "react";
+import { styles, colors, CStyleSheet } from "./styles";
+
+export const inviteLink = "https://discord.com/oauth2/authorize?client_id=748971236276699247&permissions=8&scope=bot";
+
+export default class DiscordInvite extends Component {
+
+ // Initialize default props
+ static defaultProps = {
+ palette: "dark"
+ };
+
+ __mounted = false;
+
+ // Initialize component
+ constructor(props: Props) {
+
+ // Create component
+ super(props);
+
+ // Initialize state
+ this.state = { success: null };
+
+ }
+
+ // Fetch state from API
+ fetchState(): void {
+
+ // Get guild id from props
+ const { guild } = this.props;
+
+ // Make API request to my server
+ fetch(`https://api.joshmerlino.me/v1/joshobot/guild?guild=${guild}`)
+ .then(resp => resp.json())
+ .then(newState => this.setState({ ...newState, success: true }))
+ .finally(() => {
+ if (this.__mounted) {
+ setTimeout(() => this.fetchState(), 5000);
+ }
+ });
+
+ }
+
+ // On component mount
+ componentDidMount(): void {
+ this.__mounted = true;
+ this.fetchState();
+ }
+
+ componentWillUnmount(): void {
+ this.__mounted = false;
+ }
+
+ // Draw element
+ render(): JSX.Element | null {
+
+ // Destructure
+ const { state, props } = this;
+
+ // Get style from palette
+ const { palette } = props;
+ const style = styles({ palette });
+ const scheme = colors(palette);
+
+ // If state is pending (awaiting API response)
+ if (state === null || state.success === null) {
+ return (
+ {
+
+ // Get color scheme from props
+ const scheme = colors(palette);
+
+ return {
+
+ "root": {
+ backgroundColor: scheme.background,
+ userSelect: "none",
+ boxSizing: "border-box",
+ display: "inline-block",
+ borderRadius: "4px",
+ padding: "16px",
+ minHeight: "109px",
+ width: "432px"
+ },
+
+ "title": {
+ color: scheme.header,
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ fontFamily: "Uni Sans Heavy CAPS",
+ textTransform: "uppercase",
+ textRendering: "optimizeLegibility",
+ margin: "0px",
+ marginBottom: "12px",
+ fontWeight: 500,
+ fontSize: "13px"
+ },
+
+ "body": {
+ display: "flex",
+ flexFlow: "row nowrap"
+ },
+
+ "icon": {
+ position: "relative",
+ backgroundClip: "padding-box",
+ backgroundColor: "none",
+ backgroundPosition: "50%",
+ backgroundSize: "100% auto",
+ backgroundRepeat: "no-repeat",
+ borderRadius: "15px",
+ height: "50px",
+ width: "50px",
+ marginRight: "16px",
+ flex: "0 0 auto"
+ },
+
+ "name": {
+ color: scheme.name,
+ margin: "0px",
+ padding: "0px",
+ border: "0px",
+ fontWeight: 600,
+ fontStyle: "inherit",
+ fontFamily: "Google Sans, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: "14px",
+ verticalAlign: "baseline",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ marginBottom: "2px",
+ cursor: "pointer",
+ display: "flex",
+ flex: "1 1 auto",
+ minWidth: "0px",
+ lineHeight: "30px"
+ },
+
+ "memberCount": {
+ color: scheme.subheader,
+ flex: "0 1 auto",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ margin: "0px",
+ padding: "0px",
+ border: "0px",
+ fontSize: "14px",
+ verticalAlign: "top",
+ lineHeight: "8px",
+ fontWeight: 600,
+ fontFamily: "Arial, sans-serif"
+ },
+
+ "memberCountDisplay": {
+ marginLeft: "12px",
+ marginRight: "8px",
+ position: "relative"
+ },
+
+ "joinLink": {
+ height: "40px",
+ paddingLeft: "20px",
+ paddingRight: "20px",
+ alignSelf: "center",
+ marginLeft: "auto",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ flex: "0 0 auto",
+ border: "none",
+ boxSizing: "border-box",
+ userSelect: "none",
+ borderRadius: "3px",
+ fontSize: "14px",
+ fontWeight: 600,
+ color: "#fff",
+ backgroundColor: scheme.button,
+ outline: "none",
+ fontFamily: "Whitney,Helvetica Neue,Helvetica,Arial,sans-serif",
+ textDecoration: "none",
+ lineHeight: "38px",
+ verticalAlign: "baseline",
+ position: "relative",
+ cursor: "pointer"
+ },
+
+ "error": {
+ color: "#ed4244"
+ },
+
+ "blurple": {
+ backgroundColor: "#5865f2"
+ }
+
+ };
+}
+
+export function CStyleSheet({ scheme }: { scheme: Palette }): JSX.Element {
+ return (
+
+ );
+}
diff --git a/app/src/components/DiscordInvite/types.d.ts b/app/src/components/DiscordInvite/types.d.ts
new file mode 100644
index 000000000..833228085
--- /dev/null
+++ b/app/src/components/DiscordInvite/types.d.ts
@@ -0,0 +1,32 @@
+declare type ColorScheme = "light" | "dark";
+
+declare interface Props {
+ palette: ColorScheme;
+ guild: string;
+}
+
+declare interface APIResponse {
+ success: boolean;
+ status?: string;
+ error?: string;
+ name: string;
+ owner: string;
+ verified: boolean;
+ region: string,
+ id: string;
+ memberCount: number;
+ memberOnline: number;
+ bannerURL: null,
+ iconURL: string;
+ inviteCodes: string[];
+}
+
+declare interface Palette {
+ background: string;
+ header: string;
+ subheader: string;
+ name: string;
+ inactive: string;
+ active: string;
+ button: string;
+}
diff --git a/web/ts/components/Drawer.tsx b/app/src/components/Drawer.tsx
similarity index 75%
rename from web/ts/components/Drawer.tsx
rename to app/src/components/Drawer.tsx
index 6b90d9c51..d0f108c0f 100644
--- a/web/ts/components/Drawer.tsx
+++ b/app/src/components/Drawer.tsx
@@ -1,21 +1,19 @@
-import { Drawer, ListSubheader } from "photoncss/lib/react";
-import React from "react";
-import { getGameID, slug } from "../src/gameHash";
-import games, { Game } from "../../games";
-import app from "../src/app";
-import { DrawerEntry } from "./DrawerEntry";
-
-export default function Component(): JSX.Element {
- return (
-
- 
-
-Home
-
-Games { games.length } Games
- { games
- .sort((a: Game, b: Game) => a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1)
- .map((game: Game, key) => {game.name} )}
-
- );
-}
+import { Drawer, ListSubheader } from "photoncss/lib/react";
+import { getGameID, slug } from "../util/gameHash";
+import games, { Game } from "../../games";
+import { DrawerEntry } from "./DrawerEntry";
+
+export default function Component(): JSX.Element {
+ return (
+
+ 
+
+Home
+
+Games { games.length } Games
+ { games
+ .sort((a: Game, b: Game) => a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1)
+ .map((game: Game, key) => {game.name} )}
+
+ );
+}
diff --git a/web/ts/components/DrawerEntry.tsx b/app/src/components/DrawerEntry.tsx
similarity index 96%
rename from web/ts/components/DrawerEntry.tsx
rename to app/src/components/DrawerEntry.tsx
index 38cb70513..f4d2f3846 100644
--- a/web/ts/components/DrawerEntry.tsx
+++ b/app/src/components/DrawerEntry.tsx
@@ -1,39 +1,39 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { ListItem, TextIcon } from "photoncss/lib/react";
-import { Waves } from "photoncss";
-import classnames from "classnames";
-import Photon from "photoncss";
-
-export type DrawerEntryProps = { to: string, icon: string, children: React.ReactNode, external?: boolean };
-
-export function DrawerEntry({ to, icon, children, external }: DrawerEntryProps): JSX.Element {
-
- const [ active, setState ] = useState(false);
- const shouldBeActive = (): boolean => location.pathname.toLowerCase() === to.toLowerCase();
-
- useEffect(function() {
- Waves.init();
- const iv = setInterval(function() {
- const state = shouldBeActive();
- if (active !== state) setState(state);
- });
- return (): void => clearInterval(iv);
- });
-
- if (external === true) return (
-
- {icon}
- }>{children}
-
- );
-
- return (
- Photon.Drawer("#drawer").close() }>
- {icon}
- }>{children}
-
- );
-}
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { ListItem, TextIcon } from "photoncss/lib/react";
+import { Waves } from "photoncss";
+import classnames from "classnames";
+import Photon from "photoncss";
+
+export type DrawerEntryProps = { to: string, icon: string, children: React.ReactNode, external?: boolean };
+
+export function DrawerEntry({ to, icon, children, external }: DrawerEntryProps): JSX.Element {
+
+ const [ active, setState ] = useState(false);
+ const shouldBeActive = (): boolean => location.pathname.toLowerCase() === to.toLowerCase();
+
+ useEffect(function() {
+ Waves.init();
+ const iv = setInterval(function() {
+ const state = shouldBeActive();
+ if (active !== state) setState(state);
+ });
+ return (): void => clearInterval(iv);
+ });
+
+ if (external === true) return (
+
+ {icon}
+ }>{children}
+
+ );
+
+ return (
+ Photon.Drawer("#drawer").close() }>
+ {icon}
+ }>{children}
+
+ );
+}
diff --git a/web/ts/components/Footer.tsx b/app/src/components/Footer.tsx
similarity index 89%
rename from web/ts/components/Footer.tsx
rename to app/src/components/Footer.tsx
index 3ee8f712e..11b6aa750 100644
--- a/web/ts/components/Footer.tsx
+++ b/app/src/components/Footer.tsx
@@ -1,8 +1,7 @@
import { Col, Container, Footer, FooterCopyright, Row } from "photoncss/lib/react";
import React, { useEffect, useState } from "react";
-import DiscordInvite from "react-discord-invite";
import { Link } from "react-router-dom";
-import { client } from "../runtime/util/offlineInstaller";
+import DiscordInvite from "./DiscordInvite";
export function MoTD(): JSX.Element | null {
@@ -13,7 +12,7 @@ export function MoTD(): JSX.Element | null {
// Have state sync with server every second while component is mounted
useEffect(function() {
- if (state === null) fetch("https://joshm.us.to/api/v1/motd").then(resp => resp.json())
+ if (state === null) fetch("https://api.joshmerlino.me/v1/motd").then(resp => resp.json())
.then(setState);
});
@@ -33,7 +32,7 @@ export default function Component(): JSX.Element {
Hey There!
-We see your using an ad-blocker... { APP_MANIFEST.name } isn't free on our end and certainly isn't cheap to run and maintain. We use those ads to support future development and keep { APP_MANIFEST.name } free for everyone. It would mean a lot to us if we got added to your ad-blocker whitelist. 💕
+
+
Hey There!
+We see your using an ad-blocker... {APP_MANIFEST.name} isn't free on our end and certainly isn't cheap to run and maintain. We use those ads to support future development and keep {APP_MANIFEST.name} free for everyone. It would mean a lot to us if we got added to your ad-blocker whitelist. 💕
+
+
+ );
+ }
+
+ // If there was some type of error
+ if (state.hasOwnProperty("error")) {
+ return (
+ loading...
+
+
+
+ );
+ }
+
+ return (
+ You received an invite, but...
+
+
+
+
+
+ Add Josh O' Bot
+ Invalid Invite
+ + Josh O' Bot not found! + +
+
+
+ );
+
+ }
+}
diff --git a/app/src/components/DiscordInvite/styles.tsx b/app/src/components/DiscordInvite/styles.tsx
new file mode 100644
index 000000000..cfda054f8
--- /dev/null
+++ b/app/src/components/DiscordInvite/styles.tsx
@@ -0,0 +1,210 @@
+/* eslint no-use-before-define: off */
+/* eslint no-undef: off */
+
+import React, { CSSProperties } from "react";
+
+export function colors(palette: ColorScheme): Palette {
+
+ if (palette === "light") return {
+ background: "#f2f3f5",
+ header: "#4f5660",
+ subheader: "#747e8c",
+ name: "#060607",
+ inactive: "#c7ccd0",
+ active: "#5aa363",
+ button: "#5aa363"
+ };
+
+ return {
+ background: "#2f3136",
+ header: "#b9bbbe",
+ subheader: "#b9bbbe",
+ name: "#ffffff",
+ inactive: "#747f8d",
+ active: "#3ba55c",
+ button: "#3ba55c"
+ };
+
+}
+
+export function styles({ palette }: { palette: ColorScheme }): RecordYou've been invited to join a server
+
+
+
+
+
+ Join
+ { state.name }
+ + {state.memberOnline} Online + {state.memberCount} Members + +-
-
+ +
+
-
{ APP_MANIFEST.name }
+{APP_MANIFEST.name}
- Version:
diff --git a/web/ts/components/FrameStats.tsx b/app/src/components/FrameStats.tsx
similarity index 95%
rename from web/ts/components/FrameStats.tsx
rename to app/src/components/FrameStats.tsx
index 8eab4b4c2..1ba601338 100644
--- a/web/ts/components/FrameStats.tsx
+++ b/app/src/components/FrameStats.tsx
@@ -1,36 +1,36 @@
-import React, { useEffect, useState } from "react";
-
-export default function FrameStats(): JSX.Element {
-
- const lastFrames = [];
- const [ frames, setFrames ] = useState([ 0, 0 ]);
-
- let _mounted = false;
- useEffect(function() {
- _mounted = true;
- return function(){
- _mounted = false;
- };
- }, []);
-
- let lastTimestamp = performance.now();
- (function frame(){
- requestAnimationFrame(frame);
- if (!_mounted) return;
- const duration = performance.now() - lastTimestamp;
- lastTimestamp = performance.now();
- lastFrames.push(duration);
- if (lastFrames.length > 100) lastFrames.shift();
- }());
-
- (function loop() {
- setTimeout(loop, 1000);
- if (!_mounted) return;
- setFrames([
- Math.trunc(1000/Math.min(...lastFrames)),
- Math.trunc(1000/Math.max(...lastFrames))
- ]);
- }());
-
- return <>{ frames.join("/") };
-}
+import React, { useEffect, useState } from "react";
+
+export default function FrameStats(): JSX.Element {
+
+ const lastFrames = [];
+ const [ frames, setFrames ] = useState([ 0, 0 ]);
+
+ let _mounted = false;
+ useEffect(function() {
+ _mounted = true;
+ return function(){
+ _mounted = false;
+ };
+ }, []);
+
+ let lastTimestamp = performance.now();
+ (function frame(){
+ requestAnimationFrame(frame);
+ if (!_mounted) return;
+ const duration = performance.now() - lastTimestamp;
+ lastTimestamp = performance.now();
+ lastFrames.push(duration);
+ if (lastFrames.length > 100) lastFrames.shift();
+ }());
+
+ (function loop() {
+ setTimeout(loop, 1000);
+ if (!_mounted) return;
+ setFrames([
+ Math.trunc(1000/Math.min(...lastFrames)),
+ Math.trunc(1000/Math.max(...lastFrames))
+ ]);
+ }());
+
+ return <>{ frames.join("/") };
+}
diff --git a/web/ts/components/GameCard.tsx b/app/src/components/GameCard.tsx
similarity index 96%
rename from web/ts/components/GameCard.tsx
rename to app/src/components/GameCard.tsx
index 44c9a039d..563c417cd 100644
--- a/web/ts/components/GameCard.tsx
+++ b/app/src/components/GameCard.tsx
@@ -4,7 +4,7 @@ import Marquee from "react-fast-marquee";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Link } from "react-router-dom";
import { Game } from "../../games";
-import { getGameID, slug } from "../src/gameHash";
+import { getGameID, slug } from "../util/gameHash";
import Star from "./Star";
export type Props = { game: Game };
diff --git a/web/ts/components/GameManager.tsx b/app/src/components/GameManager.tsx
similarity index 91%
rename from web/ts/components/GameManager.tsx
rename to app/src/components/GameManager.tsx
index 14cdeff6a..68e049dbd 100644
--- a/web/ts/components/GameManager.tsx
+++ b/app/src/components/GameManager.tsx
@@ -1,12 +1,12 @@
import React, { useEffect } from "react";
-import useAPI from "runtime/util/hooks/useAPI";
import { Game } from "../../games";
+import useFetch from "../hooks/useFetch";
import FrameStats from "./FrameStats";
type GameManagerProps = { game: Game };
export default function GameManager({ game }: GameManagerProps): JSX.Element {
- let [ issues ] = useAPIv{APP_MANIFEST.version}-{parseInt(client.substr(0, 8), 16) % 255}
+ Version: v{APP_MANIFEST.version}
404 - Not Found!
-It looks like you found a broken link, or you didn't type the URL correctly.
- - - -404 - Not Found!
+It looks like you found a broken link, or you didn't type the URL correctly.
+ + + +
+
+
+
+
+
+ { this.props.title || "Install app?" }
++ { this.props.name || document.title } + { this.props.description || location.hostname } +
+
+
+
+
+
+ { this.props.title || "Install app?" }
++ { this.props.name || document.title } + { this.props.description || location.hostname } +
+
- {
- window.history.pushState(null, "", `${location.pathname}?search=${$(".search")
- .children(".photon-input")
- .children("input")
- .val()}`);
- setTerm((event.target as HTMLInputElement).value);
- }}/>
-
-
- );
-}
+/* eslint no-extra-parens: off */
+/* eslint no-invalid-this: off */
+import React, { useEffect, useState } from "react";
+import { InputField } from "photoncss/lib/react";
+import SearchResults from "./SearchResults";
+import qs from "qs";
+
+export default function SearchBar(): JSX.Element {
+ const [ term, setTerm ] = useState((qs.parse(location.search.split("?")[1]).search || "") as string);
+
+ useEffect(function() {
+
+ if (term === "") {
+ $(".search-results").hide();
+ } else {
+ $(".search-results").show();
+ }
+
+ $(".search")
+ .children(".photon-input")
+ .children("input")
+ .on("focus", function() {
+ if ($(this).val() === "") return;
+ $(".search-results").show();
+ });
+
+ }, [ term ]);
+
+ useEffect(function() {
+ $(document).on("click", function(event) {
+ const { target } = event;
+ if ($(target).hasClass("search-results")) return;
+ if ($(target).parents()
+ .hasClass("search-results")) return;
+ if ($(target).hasClass("search")) return;
+ if ($(target).parents()
+ .hasClass("search")) return;
+ $(".search-results").hide();
+ })
+ .trigger("click");
+ }, []);
+
+ useEffect(function() {
+ $(document).on("keypress", function (event) {
+ if (event.shiftKey) return;
+ const search = $(".search")
+ .children(".photon-input")
+ .children("input");
+ if (search.is(":focus")) return;
+ event.preventDefault();
+
+ if (event.key !== "k") return;
+ const toggler = $(".photon-toolbaractions")
+ .children(".only-small")
+ .children(".material-icons");
+ if (toggler.text() === "search") toggler.trigger("click");
+ search
+ .trigger("focus")
+ .parent()
+ .trigger("click");
+ });
+ }, []);
+
+ return (
+
+ {
+ window.history.pushState(null, "", `${location.pathname}?search=${$(".search")
+ .children(".photon-input")
+ .children("input")
+ .val()}`);
+ setTerm((event.target as HTMLInputElement).value);
+ }}/>
+
+
+ );
+}
diff --git a/web/ts/components/SearchResult.tsx b/app/src/components/SearchResult.tsx
similarity index 96%
rename from web/ts/components/SearchResult.tsx
rename to app/src/components/SearchResult.tsx
index 3191eef7f..ab774e4aa 100644
--- a/web/ts/components/SearchResult.tsx
+++ b/app/src/components/SearchResult.tsx
@@ -1,14 +1,14 @@
-import React from "react";
-import { ListItem, TextIcon } from "photoncss/lib/react";
-import { Game } from "../../games";
-
-export type Props = { item: Game };
-
-export default function Result({ item }: Props): JSX.Element {
- return (
- +
+
+
+ + { game.name } +
+
+
+
+
+
+
+
+