Skip to content

Commit

Permalink
Modify desktop app
Browse files Browse the repository at this point in the history
  • Loading branch information
petrvecera committed Sep 28, 2024
1 parent 117ef94 commit 822f334
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 98 deletions.
101 changes: 3 additions & 98 deletions pages/desktop-app.tsx
Original file line number Diff line number Diff line change
@@ -1,102 +1,9 @@
import {
Anchor,
Button,
Container,
Image,
List,
Paper,
Stack,
Text,
ThemeIcon,
Title,
} from "@mantine/core";
import { IconCheck } from "@tabler/icons-react";
import { GetServerSideProps, NextPage } from "next";
import { GetServerSideProps } from "next";
import { Octokit } from "octokit";
import Head from "next/head";
import React, { useEffect } from "react";
import { AnalyticsDesktopAppPageView } from "../src/firebase/analytics";

const App: NextPage = ({ downloadURL, downloadCount, version }: any) => {
const desktopAppDescription = `Download COH3 Stats Desktop app ${version}. No configuration required. OBS Overlay feature. Detailed info on your current match opponents. Sound notifications of new game and more.`;
import DesktopAppPage from "../screens/desktop-app";

useEffect(() => {
AnalyticsDesktopAppPageView();
}, []);

return (
<>
<Head>
<title>Desktop App from COH3 Stats</title>
<meta name="description" content={desktopAppDescription} />
<meta
name="keywords"
content={
"coh3, coh3 stats, coh3 desktop app, coh3 OBS overlay, company of heroes realtime info"
}
/>
<meta property="og:image" content="/desktop-app/desktop-app-main-500x281.webp" />
</Head>
<Container size={"lg"}>
{/*We need to fix this on both mobile and desktop to avoid CLS*/}
<Image
src="/desktop-app/desktop-app-main.webp"
alt={"coh3 stats desktop app"}
radius="md"
mx="auto"
maw={900}
mih={190}
mah={500}
/>
<Paper radius="md" mt="md" p="lg">
<Stack align="center" gap={5} mb={30}>
<Anchor href={downloadURL} target="_blank">
<Button>Download {version}</Button>
</Anchor>
<Text size="sm" c="dimmed">
{downloadCount} downloads
</Text>
<Anchor
href="https://github.com/cohstats/coh3-stats-desktop-app/releases/latest"
target="_blank"
>
Release Notes
</Anchor>
</Stack>
<Title>Gain additional intel on your games with the desktop app!</Title>
<List
spacing="sm"
mt={30}
mb={50}
icon={
<ThemeIcon size={20} radius="xl">
<IconCheck stroke={1.5} />
</ThemeIcon>
}
>
<List.Item>
Effortless usage, no setup needed - simply launch the application
</List.Item>
<List.Item>Explore intricate player leaderboard statistics</List.Item>
<List.Item>Receive optional sound notifications upon joining a game</List.Item>
<List.Item>Auto upload replays to the cloud for additional analysis</List.Item>
<List.Item>
Streamer overlay for{" "}
<Anchor href={"https://obsproject.com/"} target={"_blank"}>
OBS
</Anchor>
,{" "}
<Anchor href={"https://www.twitch.tv/broadcast/studio"} target={"_blank"}>
Twitch Studio
</Anchor>{" "}
and other streaming tools
</List.Item>
</List>
</Paper>
</Container>
</>
);
};
export default DesktopAppPage;

export const getServerSideProps: GetServerSideProps<any> = async () => {
const octokit = new Octokit();
Expand Down Expand Up @@ -141,5 +48,3 @@ export const getServerSideProps: GetServerSideProps<any> = async () => {
props: { downloadURL, downloadCount, version },
};
};

export default App;
Binary file added public/desktop-app/desktop-app-loading-v2.webp
Binary file not shown.
Binary file added public/desktop-app/desktop-app-v2.webp
Binary file not shown.
5 changes: 5 additions & 0 deletions screens/desktop-app/desktop-app.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.desktop-app-image {
max-width: 900px;
max-height: 500px;
min-height: 190px;
}
100 changes: 100 additions & 0 deletions screens/desktop-app/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import {
Anchor,
Button,
Container,
Image,
List,
Paper,
Stack,
Text,
ThemeIcon,
Title,
} from "@mantine/core";
import { IconCheck } from "@tabler/icons-react";
import { NextPage } from "next";
import Head from "next/head";
import React, { useEffect } from "react";
import { AnalyticsDesktopAppPageView } from "../../src/firebase/analytics";

import classes from "./desktop-app.module.css";

const DesktopAppPage: NextPage = ({ downloadURL, downloadCount, version }: any) => {
const desktopAppDescription = `Download COH3 Stats Desktop app ${version}. No configuration required. OBS Overlay feature. Detailed info on your current match opponents. Sound notifications of new game and more.`;

useEffect(() => {
AnalyticsDesktopAppPageView();
}, []);

return (
<>
<Head>
<title>Desktop App from COH3 Stats</title>
<meta name="description" content={desktopAppDescription} />
<meta
name="keywords"
content={
"coh3, coh3 stats, coh3 desktop app, coh3 OBS overlay, company of heroes realtime info"
}
/>
<meta property="og:image" content="/desktop-app/desktop-app-main-500x281.webp" />
</Head>
<Container size={"lg"}>
{/*We need to fix this on both mobile and desktop to avoid CLS*/}
<Image
src="/desktop-app/desktop-app-main.webp"
alt={"coh3 stats desktop app"}
radius="md"
mx="auto"
className={classes["desktop-app-image"]}
/>
<Paper radius="md" mt="md" p="lg">
<Stack align="center" gap={5} mb={30}>
<Anchor href={downloadURL} target="_blank">
<Button>Download {version}</Button>
</Anchor>
<Text size="sm" c="dimmed">
{downloadCount} downloads
</Text>
<Anchor
href="https://github.com/cohstats/coh3-stats-desktop-app/releases/latest"
target="_blank"
>
Release Notes
</Anchor>
</Stack>
<Title>Gain additional intel on your games with the desktop app!</Title>
<List
spacing="sm"
mt={30}
mb={50}
icon={
<ThemeIcon size={20} radius="xl">
<IconCheck stroke={1.5} />
</ThemeIcon>
}
>
<List.Item>
Effortless usage, no setup needed - simply launch the application
</List.Item>
<List.Item>Explore intricate player leaderboard statistics</List.Item>
<List.Item>Receive optional sound notifications upon joining a game</List.Item>
<List.Item>Auto upload replays to the cloud for additional analysis</List.Item>
<List.Item>
Streamer overlay for{" "}
<Anchor href={"https://obsproject.com/"} target={"_blank"}>
OBS
</Anchor>
,{" "}
<Anchor href={"https://www.twitch.tv/broadcast/studio"} target={"_blank"}>
Twitch Studio
</Anchor>{" "}
and other streaming tools
</List.Item>
</List>
</Paper>
</Container>
</>
);
};

export default DesktopAppPage;

0 comments on commit 822f334

Please sign in to comment.