+
}>
+ Pocket Sync
+ ++ {"That folder doesn't look like the Pocket's file system. Try again"} +
+ )} + +
+
+
+
+ )
+}
diff --git a/src/assets/AnalogueOS-Regular.woff b/src/assets/AnalogueOS-Regular.woff
new file mode 100644
index 00000000..27ddec7f
Binary files /dev/null and b/src/assets/AnalogueOS-Regular.woff differ
diff --git a/src/assets/AnalogueOS-Regular.woff2 b/src/assets/AnalogueOS-Regular.woff2
new file mode 100644
index 00000000..fcc89c1b
Binary files /dev/null and b/src/assets/AnalogueOS-Regular.woff2 differ
diff --git a/src/components/about/index.css b/src/components/about/index.css
new file mode 100644
index 00000000..218c781e
--- /dev/null
+++ b/src/components/about/index.css
@@ -0,0 +1,40 @@
+.about {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ height: 100vh;
+ text-align: center;
+}
+
+
+.about__update-link{
+ font-size: 2rem;
+ background-color: var(--green-colour);
+ padding: 20px;
+ border-radius: 25px;
+ white-space: nowrap;
+}
+
+.about__top{
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ /* width: 100%; */
+ width: max-content;
+ text-align: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.about__info{
+ background-color: var(--info-colour);
+ width: 100%;
+ max-height: fit-content;
+ flex-grow: 1;
+ justify-self: flex-end;
+ text-align: left;
+ padding: 0px 20px;
+ box-sizing: border-box;
+}
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
new file mode 100644
index 00000000..f58670fc
--- /dev/null
+++ b/src/components/about/index.tsx
@@ -0,0 +1,79 @@
+import { Suspense, useMemo } from "react"
+import { useRecoilValue } from "recoil"
+import { GithubReleasesSelectorFamily } from "../../recoil/github/selectors"
+import {
+ AppVersionSelector,
+ PocketSyncConfigSelector,
+} from "../../recoil/selectors"
+import { Link } from "../link"
+import { Pocket } from "../three/pocket"
+import { ProgressScreen } from "../three/progressScreen"
+import { RandomScreenshotScreen } from "../three/randomScreenshotScreen"
+
+import "./index.css"
+
+export const About = () => {
+ const selfReleases = useRecoilValue(
+ GithubReleasesSelectorFamily({
+ owner: "neil-morrison44",
+ repo: "pocket-sync",
+ })
+ )
+
+ const AppVersion = useRecoilValue(AppVersionSelector)
+
+ const updateAvailable = useMemo(() => {
+ return selfReleases[0].tag_name !== `v${AppVersion}`
+ }, [selfReleases, AppVersion])
+
+ return (
+
+
+ )
+}
diff --git a/src/components/controls/index.css b/src/components/controls/index.css
new file mode 100644
index 00000000..f7160cf2
--- /dev/null
+++ b/src/components/controls/index.css
@@ -0,0 +1,65 @@
+.controls{
+ display: flex;
+ justify-content: space-between;
+ font-size: 1.125rem;
+ background-color: var(--info-colour);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+.controls__item{
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 20px;
+ accent-color: white;
+
+ &:hover{
+ background-color: var(--hover-colour);
+ }
+}
+
+
+.controls__item--back::before{
+ content: "";
+ display: block;
+ width: 10px;
+ height: 10px;
+ aspect-ratio: 1 / 1;
+ border: 1px solid white;
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+ transform: rotate(-45deg);
+ margin-right: 5px;
+}
+
+.controls__item--checkbox{
+ display: flex;
+ gap: 0.2em;
+ align-items: center;
+}
+
+
+.controls__search-input{
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 2px 10px;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ width: 200px;
+ transition: border-color 0.25s;
+}
+
+.controls__item--select{
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ font-size: 1.125rem;
+
+ & > select {
+ font-size: 1.125rem;
+ }
+}
diff --git a/src/components/controls/index.tsx b/src/components/controls/index.tsx
new file mode 100644
index 00000000..17c01315
--- /dev/null
+++ b/src/components/controls/index.tsx
@@ -0,0 +1,115 @@
+import "./index.css"
+
+type Control = {
+ text: string
+ type: "button" | "back-button" | "checkbox" | "select" | "search"
+} & (
+ | {
+ type: "button"
+ onClick: () => void
+ }
+ | {
+ type: "back-button"
+ onClick: () => void
+ }
+ | {
+ type: "checkbox"
+ checked: boolean
+ onChange: (checked: boolean) => void
+ }
+ | {
+ type: "select"
+ options: string[]
+ selected: string
+ onChange: (value: string) => void
+ }
+ | {
+ type: "search"
+ value: string
+ onChange: (value: string) => void
+ }
+)
+
+type ControlProps = {
+ controls: (Control | null | undefined | "")[]
+}
+
+export const Controls = ({ controls }: ControlProps) => {
+ return (
+
+
+
+
+
+
+ {updateAvailable && (
+ {`Update Available! ${selfReleases[0].tag_name}`}
+ )}
+
+ Pocket Sync
+ {`v${AppVersion}`} +
+
+ Thanks to:
+ +-
+
- + + {"https://github.com/joshcampbell191/openfpga-cores-inventory"} + + + +
- + + {"https://github.com/AbFarid/analogue-os-font"} + + +
+ {controls.map((control) => {
+ if (!control) return null
+ switch (control.type) {
+ case "search":
+ return (
+
+ )
+}
diff --git a/src/components/cores/index.css b/src/components/cores/index.css
new file mode 100644
index 00000000..91cd13f0
--- /dev/null
+++ b/src/components/cores/index.css
@@ -0,0 +1,51 @@
+.cores__platform-image {
+ width: 100%;
+}
+
+.cores__info-blurb{
+ background-color: var(--info-colour);
+ padding: 10px;
+ display: flex;
+ gap: 5px;
+ flex-direction: column;
+ justify-content: space-between;
+ flex-grow: 1;
+}
+
+.cores__info-blurb-name{
+ font-weight: bold;
+}
+
+.cores__author-tag{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.cores__author-tag-image{
+ width: 24px;
+ height: 24px;
+}
+
+.cores__item{
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+
+ &:hover, &:focus {
+ transform: scale(1.1);
+ }
+}
+
+.cores__item--not-installed{
+ background-color: var(--info-colour);
+ justify-content: space-between;
+ padding: 10px;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.cores__not-installed-item-id{
+ font-weight: normal;
+ font-size: 0.825rem;
+}
diff --git a/src/components/cores/index.tsx b/src/components/cores/index.tsx
new file mode 100644
index 00000000..747b0005
--- /dev/null
+++ b/src/components/cores/index.tsx
@@ -0,0 +1,148 @@
+import { Suspense, useMemo, useState } from "react"
+import { useRecoilCallback, useRecoilValue } from "recoil"
+import { useCategoryLookup } from "../../hooks/useCategoryLookup"
+import { useSaveScroll } from "../../hooks/useSaveScroll"
+import {
+ fileSystemInvalidationAtom,
+ inventoryInvalidationAtom,
+} from "../../recoil/atoms"
+import { CateogryListselector } from "../../recoil/inventory/selectors"
+import { CoreInventorySelector } from "../../recoil/inventory/selectors"
+import { coresListSelector } from "../../recoil/selectors"
+import { Controls } from "../controls"
+import { Grid } from "../grid"
+import { Loader } from "../loader"
+import { Tip } from "../tip"
+import { CoreInfo } from "./info"
+import { CoreItem } from "./item"
+
+export const Cores = () => {
+ const [selectedCore, setSelectedCore] = useState
+ control.onChange(target.value)}
+ autoComplete="off"
+ value={control.value}
+ spellCheck={false}
+ />
+
+ )
+ case "select":
+ return (
+
+ {control.text}
+
+
+ )
+ case "button":
+ return (
+
+ {control.text}
+
+ )
+ case "back-button":
+ return (
+
+ {"Back to List"}
+
+ )
+ case "checkbox":
+ return (
+
+ )
+ }
+ })}
+
+ setSearchQuery(v),
+ },
+ {
+ type: "button",
+ text: "Refresh",
+ onClick: refresh,
+ },
+ {
+ type: "select",
+ options: categoryList,
+ selected: filterCategory,
+ text: "Category",
+ onChange: (v) => setFilterCategory(v),
+ },
+ ]}
+ />
+
+ {sortedList.map((core) => (
+ {
+ pushScroll()
+ setSelectedCore(core)
+ }}
+ />
+
+ ))}
+
+
+
+ {notInstalledCores.map(({ identifier: core, platform }) => (
+
+
+
+ {
+ "You can also install cores (or anything else in a zip) by dragging the .zip into this window"
+ }
+
+
+ )
+}
diff --git a/src/components/cores/info/index.css b/src/components/cores/info/index.css
new file mode 100644
index 00000000..04b35e03
--- /dev/null
+++ b/src/components/cores/info/index.css
@@ -0,0 +1,81 @@
+.core-info{
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.core-info__image{
+ width: 100%;
+ image-rendering: pixelated;
+}
+
+
+.core-info__title{
+ padding: 0px 20px;
+ font-size: 2rem;
+}
+
+.core-info__info{
+ background-color: var(--info-colour);
+ padding: 10px;
+ display: flex;
+ gap: 5px;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.core-info__info-row{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ grid-column: 1;
+}
+
+.core-info__info-row--right{
+ grid-column: 2;
+}
+
+.core-info__info-grid{
+ display: grid;
+ gap: inherit;
+ grid-template-columns: 1fr auto;
+}
+
+.core-info__author-tag{
+ display: inline-flex;
+ gap: 10px;
+ justify-content: center;
+ align-items: center;
+
+ image-rendering: pixelated;
+}
+
+.core-info__supports-bubbles{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.core-info__supports {
+ white-space: nowrap;
+ background-color: var(--light-colour);
+ padding: 0 5px;
+ border-radius: 5px;
+}
+
+.core-info__platforms{
+ padding: 10px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.core-info__platform-loader{
+ width: 100px;
+ aspect-ratio: 4 / 2;
+ border-radius: 15px;
+}
+
+.core-info__supports--false{
+ opacity: 0.2;
+}
diff --git a/src/components/cores/info/index.tsx b/src/components/cores/info/index.tsx
new file mode 100644
index 00000000..0f0b1c2e
--- /dev/null
+++ b/src/components/cores/info/index.tsx
@@ -0,0 +1,19 @@
+import { useRecoilValue } from "recoil"
+import { coresListSelector } from "../../../recoil/selectors"
+import { InstalledCoreInfo } from "./installed"
+import { NotInstalledCoreInfo } from "./notInstalled"
+
+type CoreInfoProps = {
+ coreName: string
+ onBack: () => void
+}
+
+export const CoreInfo = (props: CoreInfoProps) => {
+ const coresList = useRecoilValue(coresListSelector)
+
+ if (coresList.includes(props.coreName)) {
+ return {`Installed (${sortedList.length})`}
+{`Available (${notInstalledCores.length})`}
+ {
+ pushScroll()
+ setSelectedCore(core)
+ }}
+ >
+
+
+ ))}
+ {platform}
+ {core}
+ {"Install Core"}
+ {!progress && ( +
+ {tree.map((node) => (
+
+ )}
+
+ {progress && (
+ <>
+ {`${((progress.value / progress.max) * 100).toFixed(0)}%`}
+ + + )} + + {!progress && ( +
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/components/cores/info/installed.tsx b/src/components/cores/info/installed.tsx
new file mode 100644
index 00000000..c4aa1f3a
--- /dev/null
+++ b/src/components/cores/info/installed.tsx
@@ -0,0 +1,192 @@
+import { platform } from "os"
+import { useRecoilValue } from "recoil"
+import {
+ CoreAuthorImageSelectorFamily,
+ CoreInfoSelectorFamily,
+} from "../../../recoil/selectors"
+import {
+ CoreInventorySelector,
+ DownloadURLSelectorFamily,
+} from "../../../recoil/inventory/selectors"
+import { Controls } from "../../controls"
+import { Link } from "../../link"
+
+import "./index.css"
+import { PlatformImage } from "../platformImage"
+import { useInventoryItem } from "../../../hooks/useInventoryItem"
+import { Releases } from "./releases"
+import { Version } from "../version"
+import { useUninstallCore } from "../../../hooks/useUninstallCore"
+import { useInstallCore } from "../../../hooks/useInstallCore"
+import { ReactNode, Suspense, useState } from "react"
+import { CorePlatformInfo } from "./platform"
+import { Loader } from "../../loader"
+import { SponsorLinks } from "./sponsorLinks"
+import { RequiredFiles } from "./requiredFiles"
+import { LoadRequiredFiles } from "./loadRequiredFiles"
+
+type CoreInfoProps = {
+ coreName: string
+ onBack: () => void
+}
+
+export const InstalledCoreInfo = ({ coreName, onBack }: CoreInfoProps) => {
+ const coreInfo = useRecoilValue(CoreInfoSelectorFamily(coreName))
+ const authorImageSrc = useRecoilValue(CoreAuthorImageSelectorFamily(coreName))
+ const uninstall = useUninstallCore()
+ const { installCore } = useInstallCore()
+ const inventoryItem = useInventoryItem(coreName)
+ const downloadUrl = useRecoilValue(DownloadURLSelectorFamily(coreName))
+
+ const [requiredFilesOpen, setRequiredFilesOpen] = useState(false)
+
+ return (
+
+ {!node.is_dir && (
+ toggleFile(node.full)}
+ >
+ )}
+
+
+ {expanded &&
+ node.children.map((n) => (
+ setExpanded((e) => !e)}
+ >
+ {node.is_dir && (
+
+ )}
+ {node.name}
+ {node.is_dir ? "/" : ""}
+
+
+ uninstall(coreName),
+ },
+ {
+ type: "button",
+ text: "Required Files",
+ onClick: () => setRequiredFilesOpen(true),
+ },
+ downloadUrl && {
+ type: "button",
+ text: "Update",
+ onClick: () => installCore(coreName, downloadUrl),
+ },
+ ]}
+ />
+
+ {requiredFilesOpen && (
+ setRequiredFilesOpen(false)}
+ />
+ )}
+
+
+
+
+ )
+}
+
+type SupportsBubbleProps = {
+ children: ReactNode
+ supports: boolean
+}
+
+const SupportsBubble = ({ supports, children }: SupportsBubbleProps) => (
+ {coreInfo.core.metadata.shortname}
+ {coreInfo.core.metadata.platform_ids.map((platformId) => ( +{coreInfo.core.metadata.description}
+ +
+
+
+
+ {"Version:"}
+
+
+
+ {"Author:"}
+
+
+ {inventoryItem?.sponsor && (
+
+ 
+ {coreInfo.core.metadata.author}
+
+
+ {"Sponsor:"}
+
+ )}
+
+ {coreInfo.core.metadata.url && (
+
+ {"URL:"}
+
+
+ {coreInfo.core.metadata.url}
+
+
+ )}
+
+
+ {"Release Date:"}
+
+ {coreInfo.core.metadata.date_release}
+
+ )}
+
+ {"Supports:"}
+
+
+
+
+ {"Save States / Sleep"}
+
+
+
+ {"Dock"}
+
+
+
+ {"Dock (Analog)"}
+
+
+
+ {"Cartridges"}
+
+
+
+ {"Platforms:"}
+
+ {inventoryItem && inventoryItem.repository.platform === "github" && (
+
+ {coreInfo.core.metadata.platform_ids.map((id) => (
+
+
+
+ {children}
+
+)
diff --git a/src/components/cores/info/loadRequiredFiles/index.css b/src/components/cores/info/loadRequiredFiles/index.css
new file mode 100644
index 00000000..f5f83e13
--- /dev/null
+++ b/src/components/cores/info/loadRequiredFiles/index.css
@@ -0,0 +1,40 @@
+.load-required-files{
+ width: max-content;
+ height: max-content;
+ max-height: 80vh;
+
+ min-width: 50vw;
+ min-height: 50vw;
+}
+
+.load-required-files__files {
+ background-color: var(--info-colour);
+ padding: 10px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ border-radius: 10px;
+ overflow: auto;
+}
+
+.load-required-files__row{
+ display: flex;
+
+ align-items: center;
+ gap: 0.5em;
+
+ & > pre {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+.load-required-files__row--exists{
+ opacity: 0.5;
+}
+
+.load-required-files__buttons{
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+}
diff --git a/src/components/cores/info/loadRequiredFiles/index.tsx b/src/components/cores/info/loadRequiredFiles/index.tsx
new file mode 100644
index 00000000..b03c957d
--- /dev/null
+++ b/src/components/cores/info/loadRequiredFiles/index.tsx
@@ -0,0 +1,81 @@
+import { useRecoilValue } from "recoil"
+import { useInstallRequiredFiles } from "../../../../hooks/useInstallRequiredFiles"
+import {
+ PocketSyncConfigSelector,
+ RequiredFileInfoSelectorFamily,
+} from "../../../../recoil/selectors"
+import { Modal } from "../../../modal"
+import { Progress } from "../../../progress"
+
+import "./index.css"
+
+type LoadRequiredFilesProps = {
+ coreName: string
+ onClose: () => void
+}
+
+export const LoadRequiredFiles = ({
+ coreName,
+ onClose,
+}: LoadRequiredFilesProps) => {
+ const requiredFiles = useRecoilValue(RequiredFileInfoSelectorFamily(coreName))
+ const pocketSyncConfig = useRecoilValue(PocketSyncConfigSelector)
+ const { installRequiredFiles, progress } = useInstallRequiredFiles(onClose)
+
+ return (
+ {"Required Files"}
+ + {progress && } + + {!progress && ( + <> +
+ {requiredFiles.map((r) => {
+ return (
+
+
+ {!pocketSyncConfig.archive_url && (
+
+ Put
+ )
+ })}
+ {`"${r.filename}"`} in{" "}
+ {`"${r.path}"`}
+ + { + "Please view the `Settings` pane for more options with required files" + } +
+ )} +
+
+
+ {pocketSyncConfig.archive_url && (
+
+ )}
+
+ {pocketSyncConfig.archive_url && (
+
+ )}
+
+
+ )}
+
+ {
+ installCore(coreName, download_url)
+ },
+ },
+ ]}
+ />
+
+ {!inventoryItem &&
+ )
+}
diff --git a/src/components/cores/info/platform/index.css b/src/components/cores/info/platform/index.css
new file mode 100644
index 00000000..8bb004da
--- /dev/null
+++ b/src/components/cores/info/platform/index.css
@@ -0,0 +1,33 @@
+.cores__platform-info{
+ border-radius: 12px;
+ background-color: var(--background-colour);
+ display: flex;
+ grid-template-columns: max-content min-content;
+ gap: 15px;
+ overflow: hidden;
+
+ & > *{
+ padding: 10px 0;
+ }
+
+ & > *:first-child{
+ padding-left: 15px;
+ }
+
+ & > *:last-child{
+ padding-right: 15px;
+ }
+}
+
+.cores__platform-info-name{
+ font-size: 1.25rem;
+}
+
+.cores__platform-info-cateogry {
+ border-right: 1px solid white;
+ padding-right: 15px;
+ box-sizing: border-box;
+ background-color: var(--light-colour);
+ display: flex;
+ align-items: center;
+}
diff --git a/src/components/cores/info/platform/index.tsx b/src/components/cores/info/platform/index.tsx
new file mode 100644
index 00000000..8834ad5c
--- /dev/null
+++ b/src/components/cores/info/platform/index.tsx
@@ -0,0 +1,39 @@
+import { useMemo } from "react"
+import { useRecoilValue } from "recoil"
+import { PlatformInfoSelectorFamily } from "../../../../recoil/selectors"
+import { PlatformId } from "../../../../types"
+import { Link } from "../../../link"
+
+import "./index.css"
+
+const HARD_TO_FIND_THINGS = ["Genesis", "Dominos", "Green Beret"]
+
+type CorePlatformInfoProps = {
+ platformId: PlatformId
+}
+
+export const CorePlatformInfo = ({ platformId }: CorePlatformInfoProps) => {
+ const { platform } = useRecoilValue(PlatformInfoSelectorFamily(platformId))
+
+ const wikiLink = useMemo(() => {
+ const searchTerm = HARD_TO_FIND_THINGS.includes(platform.name)
+ ? `${platform.manufacturer} ${platform.name}`
+ : platform.name
+
+ return `https://en.wikipedia.org/wiki/Special:Search?go=Go&search=${window.encodeURIComponent(
+ searchTerm
+ )}`
+ }, [platform])
+
+ return (
+ {`${coreName} not in cores inventory`}
}
+
+ {inventoryItem && (
+ <>
+ {inventoryItem.platform}
+
+
+
+ )}
+
+ {inventoryItem.identifier}
+
+
+ {url && (
+
+ {"URL:"}
+ {url}
+
+ )}
+
+ {inventoryItem.repository.platform === "github" && (
+
+
+ )
+}
diff --git a/src/components/cores/info/releases.css b/src/components/cores/info/releases.css
new file mode 100644
index 00000000..f96944a3
--- /dev/null
+++ b/src/components/cores/info/releases.css
@@ -0,0 +1,48 @@
+.releases__title{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px;
+ font-weight: bold;
+ font-size: 1.25rem;
+}
+
+
+.releases__body{
+ border-left: 2px solid white;
+ padding-left: 10px;
+ box-sizing: border-box;
+ margin-left: 10px;
+}
+
+
+.releases__body--collapsed {
+ max-height: 110px;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+
+ &::after{
+ content: "";
+ position: absolute;
+ display: block;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+
+ background: linear-gradient(transparent, var(--info-colour));
+ }
+
+ & * {
+ pointer-events: none;
+ }
+}
+
+.releases__more-button{
+ cursor: pointer;
+ font-size: 1.25rem;
+ padding: 10px;
+ &:hover{
+ text-decoration: underline;
+ }
+}
diff --git a/src/components/cores/info/releases.tsx b/src/components/cores/info/releases.tsx
new file mode 100644
index 00000000..e68c8348
--- /dev/null
+++ b/src/components/cores/info/releases.tsx
@@ -0,0 +1,89 @@
+import { useRecoilValue } from "recoil"
+import { InventoryItem } from "../../../types"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { useState } from "react"
+import { Link } from "../../link"
+import { GithubReleasesSelectorFamily } from "../../../recoil/github/selectors"
+
+import "./releases.css"
+
+type ReleasesProps = {
+ inventoryItem: InventoryItem
+}
+
+const INITAL_COUNT = 1
+
+export const Releases = ({ inventoryItem }: ReleasesProps) => {
+ if (inventoryItem.repository.platform !== "github") {
+ throw new Error("Can't show non-github releases")
+ }
+
+ const [showAll, setShowAll] = useState(false)
+
+ const githubReleases = useRecoilValue(
+ GithubReleasesSelectorFamily({
+ owner: inventoryItem.repository.owner,
+ repo: inventoryItem.repository.name,
+ })
+ )
+
+ return (
+ {platform.category}
+ {platform.name}
+
+ {`${platform.manufacturer}, ${platform.year}`}
+
+ {"Wikipedia"}
+
+
+ Release History:
+ {githubReleases
+ .slice(0, showAll ? Infinity : INITAL_COUNT)
+ .map(({ id, name, body, tag_name, created_at }) => (
+
+ )
+}
+
+type ReleaseBodyProps = {
+ body: string
+}
+
+const ReleaseBody = ({ body }: ReleaseBodyProps) => {
+ const [collapsed, setCollapsed] = useState(true)
+
+ return (
+
+
+ ))}
+
+ {!showAll && githubReleases.length > INITAL_COUNT && (
+
+ {tag_name} - {name}
+
+
+ {new Date(created_at).toLocaleString()}
+ setShowAll(true)}
+ >
+ {"Show previous releases"}
+
+ )}
+ setCollapsed(false)}
+ >
+ {children},
+ }}
+ >
+ {body}
+
+
+ )
+}
diff --git a/src/components/cores/info/requiredFiles/index.css b/src/components/cores/info/requiredFiles/index.css
new file mode 100644
index 00000000..67f91d03
--- /dev/null
+++ b/src/components/cores/info/requiredFiles/index.css
@@ -0,0 +1,10 @@
+.required-files{
+ white-space: nowrap;
+ background-color: var(--light-colour);
+ padding: 0 5px;
+ border-radius: 5px;
+}
+
+.required-files--missing {
+ background-color: var(--red-colour);
+}
diff --git a/src/components/cores/info/requiredFiles/index.tsx b/src/components/cores/info/requiredFiles/index.tsx
new file mode 100644
index 00000000..78d6fe90
--- /dev/null
+++ b/src/components/cores/info/requiredFiles/index.tsx
@@ -0,0 +1,46 @@
+import { useMemo } from "react"
+import { useRecoilValue } from "recoil"
+import { RequiredFileInfoSelectorFamily } from "../../../../recoil/selectors"
+
+import "./index.css"
+
+type RequiredFilesProps = {
+ coreName: string
+ ignoreInstance?: boolean
+}
+
+export const RequiredFiles = ({
+ coreName,
+ ignoreInstance,
+}: RequiredFilesProps) => {
+ const requiredFiles = useRecoilValue(RequiredFileInfoSelectorFamily(coreName))
+
+ const filteredRequiredFiles = useMemo(() => {
+ if (!ignoreInstance) return requiredFiles
+
+ return requiredFiles.filter(({ type }) => type !== "instance")
+ }, [requiredFiles])
+
+ const foundFiles = useMemo(
+ () => filteredRequiredFiles.filter(({ exists }) => exists),
+ [filteredRequiredFiles]
+ )
+
+ const full = useMemo(
+ () => filteredRequiredFiles.every(({ exists }) => exists),
+ [filteredRequiredFiles]
+ )
+
+ if (filteredRequiredFiles.length === 0) return null
+
+ return (
+
+ {"Required Files:"}
+
+ )
+}
diff --git a/src/components/cores/info/sponsorLinks/index.css b/src/components/cores/info/sponsorLinks/index.css
new file mode 100644
index 00000000..0a307691
--- /dev/null
+++ b/src/components/cores/info/sponsorLinks/index.css
@@ -0,0 +1,9 @@
+.sponsor-links{
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.sponsor-links__link{
+ word-break: break-all;
+}
diff --git a/src/components/cores/info/sponsorLinks/index.tsx b/src/components/cores/info/sponsorLinks/index.tsx
new file mode 100644
index 00000000..2e43547c
--- /dev/null
+++ b/src/components/cores/info/sponsorLinks/index.tsx
@@ -0,0 +1,27 @@
+import { useMemo } from "react"
+import { InventoryItem } from "../../../../types"
+import { Link } from "../../../link"
+
+import "./index.css"
+
+type SponsorLinkProps = {
+ links: Required{`${foundFiles.length} / ${filteredRequiredFiles.length} Files`}
+
+ {sponsorTypes.map((sponsorKey) => (
+
+ {links[sponsorKey]}
+
+ ))}
+
+ )
+}
diff --git a/src/components/cores/item.tsx b/src/components/cores/item.tsx
new file mode 100644
index 00000000..c77d415e
--- /dev/null
+++ b/src/components/cores/item.tsx
@@ -0,0 +1,44 @@
+import { useRecoilValue } from "recoil"
+import {
+ CoreAuthorImageSelectorFamily,
+ CoreInfoSelectorFamily,
+} from "../../recoil/selectors"
+import { PlatformImage } from "./platformImage"
+
+import "./index.css"
+import { Version } from "./version"
+
+type CoreItemProps = {
+ coreName: string
+ onClick: () => void
+}
+
+export const CoreItem = ({ coreName, onClick }: CoreItemProps) => {
+ const coreInfo = useRecoilValue(CoreInfoSelectorFamily(coreName))
+ const imageSrc = useRecoilValue(CoreAuthorImageSelectorFamily(coreName))
+
+ return (
+
+ {coreInfo.core.metadata.platform_ids.map((platformId) => (
+
+ )
+}
diff --git a/src/components/cores/platformImage.tsx b/src/components/cores/platformImage.tsx
new file mode 100644
index 00000000..471f258f
--- /dev/null
+++ b/src/components/cores/platformImage.tsx
@@ -0,0 +1,15 @@
+import { useRecoilValue } from "recoil"
+import { PlatformImageSelectorFamily } from "../../recoil/selectors"
+import { PlatformId } from "../../types"
+
+type PlatformImageProps = {
+ platformId: PlatformId
+ className?: string
+}
+export const PlatformImage = ({
+ platformId,
+ className,
+}: PlatformImageProps) => {
+ const imageSrc = useRecoilValue(PlatformImageSelectorFamily(platformId))
+ return
+
+
+ {coreInfo.core.metadata.shortname}
+
+
+
+ 
+ {coreInfo.core.metadata.author}
+
+
+ {coreInfo.core.metadata.version}
+ {updateAvailable && (
+
+ )
+}
diff --git a/src/components/disconnections/index.tsx b/src/components/disconnections/index.tsx
new file mode 100644
index 00000000..5e613a3e
--- /dev/null
+++ b/src/components/disconnections/index.tsx
@@ -0,0 +1,31 @@
+import { listen } from "@tauri-apps/api/event"
+import { useEffect } from "react"
+import { useSetRecoilState } from "recoil"
+import { fileSystemInvalidationAtom, pocketPathAtom } from "../../recoil/atoms"
+
+export const Disconnections = () => {
+ const setPocketPath = useSetRecoilState(pocketPathAtom)
+ const setFileSystemInvalidation = useSetRecoilState(
+ fileSystemInvalidationAtom
+ )
+
+ useEffect(() => {
+ const unlisten = listen<{ connected: boolean }>(
+ "pocket-connection",
+ ({ payload }) => {
+ if (!payload.connected) {
+ setPocketPath(null)
+ setTimeout(() => {
+ setFileSystemInvalidation(Date.now())
+ }, 50)
+ }
+ }
+ )
+
+ return () => {
+ unlisten.then((l) => l())
+ }
+ }, [])
+
+ return null
+}
diff --git a/src/components/games/gameCount.tsx b/src/components/games/gameCount.tsx
new file mode 100644
index 00000000..dc907792
--- /dev/null
+++ b/src/components/games/gameCount.tsx
@@ -0,0 +1,16 @@
+import { useRecoilValue } from "recoil"
+import { FileCountSelectorFamily } from "../../recoil/selectors"
+
+export const GameCount = ({
+ platformId,
+ extensions,
+}: {
+ platformId: string
+ extensions: string[]
+}) => {
+ const count = useRecoilValue(
+ FileCountSelectorFamily({ path: `Assets/${platformId}`, extensions })
+ )
+
+ return {updateAvailable}
+ )}
+ {`${count.toLocaleString()} Games`}
+}
diff --git a/src/components/games/index.tsx b/src/components/games/index.tsx
new file mode 100644
index 00000000..c20934a5
--- /dev/null
+++ b/src/components/games/index.tsx
@@ -0,0 +1,84 @@
+import { Suspense, useMemo, useState } from "react"
+import { useRecoilCallback, useRecoilValue } from "recoil"
+import { useCategoryLookup } from "../../hooks/useCategoryLookup"
+import { useSaveScroll } from "../../hooks/useSaveScroll"
+import {
+ fileSystemInvalidationAtom,
+ inventoryInvalidationAtom,
+} from "../../recoil/atoms"
+import { CateogryListselector } from "../../recoil/inventory/selectors"
+import { coresListSelector } from "../../recoil/selectors"
+import { Controls } from "../controls"
+import { Grid } from "../grid"
+import { Loader } from "../loader"
+import { CoreFolderItem } from "./item"
+
+export const Games = () => {
+ const coresList = useRecoilValue(coresListSelector)
+ const [searchQuery, setSearchQuery] = useState
+ setSearchQuery(v),
+ },
+ {
+ type: "button",
+ text: "Refresh",
+ onClick: refresh,
+ },
+ {
+ type: "select",
+ options: categoryList,
+ selected: filterCategory,
+ text: "Category",
+ onChange: (v) => setFilterCategory(v),
+ },
+ ]}
+ />
+
+ {sortedList.map((core) => (
+
+
+ )
+}
diff --git a/src/components/games/item.tsx b/src/components/games/item.tsx
new file mode 100644
index 00000000..ed217475
--- /dev/null
+++ b/src/components/games/item.tsx
@@ -0,0 +1,62 @@
+import { useMemo } from "react"
+import { useRecoilValue } from "recoil"
+import { pocketPathAtom } from "../../recoil/atoms"
+import {
+ CoreInfoSelectorFamily,
+ DataJSONSelectorFamily,
+} from "../../recoil/selectors"
+import { decodeDataParams } from "../../utils/decodeDataParams"
+import { PlatformImage } from "../cores/platformImage"
+import { Link } from "../link"
+import { GameCount } from "./gameCount"
+
+export const CoreFolderItem = ({ coreName }: { coreName: string }) => {
+ const info = useRecoilValue(CoreInfoSelectorFamily(coreName))
+ const data = useRecoilValue(DataJSONSelectorFamily(coreName))
+ const pocketPath = useRecoilValue(pocketPathAtom)
+
+ const romsSlot = useMemo(
+ () =>
+ data.data.data_slots
+ .filter(({ required, extensions }) => required && extensions)
+ .at(0),
+ [data]
+ )
+
+ const platformIds = useMemo(() => info.core.metadata.platform_ids, [info])
+
+ const paths = useMemo(() => {
+ if (!romsSlot || !platformIds) return []
+ const coreSpecific = decodeDataParams(romsSlot.parameters)?.coreSpecific
+
+ return platformIds.map(
+ (pId) =>
+ `${pocketPath}/Assets/${pId}/${coreSpecific ? coreName : "common"}`
+ )
+ }, [romsSlot, platformIds])
+
+ if (paths.length === 0) return null
+
+ console.log({ paths })
+
+ return (
+ <>
+ {info.core.metadata.platform_ids.map((platformId, index) => (
+
+
+ {coreName}
+
+
+ ))}
+
+ )
+}
diff --git a/src/components/grid/index.css b/src/components/grid/index.css
new file mode 100644
index 00000000..a7ea3ccb
--- /dev/null
+++ b/src/components/grid/index.css
@@ -0,0 +1,22 @@
+.grid {
+ display: grid;
+ grid-auto-flow: row;
+ grid-template-columns: repeat(2, minmax(100px, 1fr));
+ gap: 15px;
+ padding: 10px;
+ align-items: stretch;
+ justify-items: stretch;
+ grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
+
+ @media (min-width: 640px) {
+ grid-template-columns: repeat(3, minmax(100px, 1fr));
+ }
+
+ @media (min-width: 860px) {
+ grid-template-columns: repeat(4, minmax(100px, 1fr));
+ }
+
+ @media (min-width: 1200px) {
+ grid-template-columns: repeat(5, minmax(100px, 1fr));
+ }
+}
diff --git a/src/components/grid/index.tsx b/src/components/grid/index.tsx
new file mode 100644
index 00000000..bdcdb6a9
--- /dev/null
+++ b/src/components/grid/index.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react"
+import "./index.css"
+
+type GridProps = {
+ children: ReactNode
+ className?: string
+}
+
+export const Grid = ({ children, className }: GridProps) => {
+ return {children}
+}
diff --git a/src/components/layout/index.css b/src/components/layout/index.css
new file mode 100644
index 00000000..87ab0b89
--- /dev/null
+++ b/src/components/layout/index.css
@@ -0,0 +1,40 @@
+.layout{
+ display: flex;
+ align-items: flex-start;
+}
+
+.layout__sidebar-menu{
+ display: flex;
+ flex-direction: column;
+ position: sticky;
+ top: 0px;
+ height: 100vh;
+ background-color: var(--light-colour);
+ flex-basis: max-content;
+ flex-shrink: 0;
+ z-index: 100;
+}
+
+.layout__sidebar-menu-item{
+ padding: 20px;
+ font-size: 1.5rem;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+
+ &:hover{
+ background-color: var(--hover-colour);
+ }
+}
+
+.layout__sidebar-menu-item--active{
+ background-color: var(--background-colour);
+}
+
+.layout__sidebar-menu-item--disabled{
+ cursor: unset;
+}
+
+.layout__content {
+ flex-grow: 1;
+}
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
new file mode 100644
index 00000000..f45736af
--- /dev/null
+++ b/src/components/layout/index.tsx
@@ -0,0 +1,53 @@
+import React, { Suspense, useState } from "react"
+import { About } from "../about"
+import { Cores } from "../cores"
+import { Disconnections } from "../disconnections"
+import { Games } from "../games"
+import { Loader } from "../loader"
+import { Saves } from "../saves"
+import { Screenshots } from "../screenshots"
+import { Settings } from "../settings"
+import { ZipInstall } from "../zipInstall"
+import "./index.css"
+
+export const Layout = () => {
+ const views = [
+ "Pocket Sync",
+ "Games",
+ "Cores",
+ "Screenshots",
+ "Saves",
+ "Settings",
+ ] as const
+ const [viewName, setViewName] = useState
+
+ )
+}
diff --git a/src/components/link/index.css b/src/components/link/index.css
new file mode 100644
index 00000000..a64ab90f
--- /dev/null
+++ b/src/components/link/index.css
@@ -0,0 +1,9 @@
+.link{
+ text-decoration: underline;
+ cursor: pointer;
+ display: inline-block;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
diff --git a/src/components/link/index.tsx b/src/components/link/index.tsx
new file mode 100644
index 00000000..109cb4a8
--- /dev/null
+++ b/src/components/link/index.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from "react"
+import { open } from "@tauri-apps/api/shell"
+
+import "./index.css"
+
+type LinkProps = {
+ href?: string
+ className?: string
+ children: ReactNode
+}
+
+export const Link = ({ children, className, href }: LinkProps) => {
+ return (
+ {
+ if (href) open(window.encodeURI(href))
+ }}
+ >
+ {children}
+
+ )
+}
diff --git a/src/components/loader/index.css b/src/components/loader/index.css
new file mode 100644
index 00000000..7143ded3
--- /dev/null
+++ b/src/components/loader/index.css
@@ -0,0 +1,30 @@
+.loader {
+ height: 100%;
+ width: 100%;
+ background-color: #333;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loader--full{
+ height: 100vh;
+}
+
+.loader::before{
+ content: "";
+ display: block;
+ border: 2px solid white;
+ border-radius: 50%;
+ border-left-color: transparent;
+ width: 25%;
+ aspect-ratio: 1 / 1;
+
+ animation: spin 2s infinite linear;
+ will-change: transform;
+}
+
+@keyframes spin {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(360deg);}
+}
diff --git a/src/components/loader/index.tsx b/src/components/loader/index.tsx
new file mode 100644
index 00000000..d8ad5378
--- /dev/null
+++ b/src/components/loader/index.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import "./index.css"
+
+type LoaderProps = {
+ className?: string
+ fullHeight?: boolean
+ title?: string
+}
+
+export const Loader = ({ className, fullHeight, title = "" }: LoaderProps) => (
+
+)
diff --git a/src/components/modal/index.css b/src/components/modal/index.css
new file mode 100644
index 00000000..e8e0224f
--- /dev/null
+++ b/src/components/modal/index.css
@@ -0,0 +1,27 @@
+.modal__wrapper{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0,0,0,0.8);
+ z-index: 1000;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.modal{
+ width: calc(100vw - 100px);
+ height: calc(100vh - 100px);
+ background-color: var(--background-colour);
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ box-sizing: border-box;
+ padding: 20px;
+ gap: 10px;
+}
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
new file mode 100644
index 00000000..2e40cbdd
--- /dev/null
+++ b/src/components/modal/index.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from "react"
+
+import "./index.css"
+
+type ModalProps = {
+ children: ReactNode
+ className?: string
+}
+
+export const Modal = ({ children, className }: ModalProps) => {
+ return (
+
+ {views.map((v) => (
+
+ setViewName(v)}
+ >
+ {v}
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/components/progress/index.tsx b/src/components/progress/index.tsx
new file mode 100644
index 00000000..ef528988
--- /dev/null
+++ b/src/components/progress/index.tsx
@@ -0,0 +1,14 @@
+import { Pocket } from "../three/pocket"
+import { ProgressScreen } from "../three/progressScreen"
+
+type ProgressProps = {
+ value: number
+ max: number
+}
+
+export const Progress = ({ value, max }: ProgressProps) => (
+ {children}
+
+
+ )
+}
diff --git a/src/components/saves/info/index.tsx b/src/components/saves/info/index.tsx
new file mode 100644
index 00000000..50bea592
--- /dev/null
+++ b/src/components/saves/info/index.tsx
@@ -0,0 +1,149 @@
+import { save } from "@tauri-apps/api/dialog"
+import { useCallback, useMemo, useState } from "react"
+import { useRecoilValue } from "recoil"
+import { AllBackupZipsFilesSelectorFamily } from "../../../recoil/selectors"
+import { SaveBackupPathTime } from "../../../types"
+import { invokeRestoreZip } from "../../../utils/invokes"
+import { Controls } from "../../controls"
+import { Link } from "../../link"
+import { Tip } from "../../tip"
+
+export const SaveInfo = ({
+ backupPath,
+ onBack,
+}: {
+ backupPath: string
+ onBack: () => void
+}) => {
+ const [searchQuery, setSearchQuery] = useState("")
+
+ const zipFilesInfo = useRecoilValue(
+ AllBackupZipsFilesSelectorFamily(backupPath)
+ )
+
+ const perSaveFormat = useMemo(() => {
+ const perSave: {
+ [filename: string]: { zip: SaveBackupPathTime; last_modified: number }[]
+ } = {}
+
+ zipFilesInfo.forEach(({ zip, files }) => {
+ files
+ .filter((f) => f.filename.endsWith(".sav"))
+ .forEach(({ filename, last_modified }) => {
+ const existing = perSave[filename]
+ if (existing) {
+ if (
+ !existing.find(
+ ({ last_modified: stored_last_modified }) =>
+ last_modified === zip.last_modified
+ )
+ ) {
+ existing.push({ zip, last_modified })
+ }
+ } else {
+ perSave[filename] = [{ zip, last_modified }]
+ }
+ })
+ })
+
+ return perSave
+ }, [zipFilesInfo])
+
+ const filteredSaves = useMemo(
+ () =>
+ Object.fromEntries(
+ Object.entries(perSaveFormat).filter(([filename]) =>
+ filename.toLowerCase().includes(searchQuery.toLowerCase())
+ )
+ ),
+
+ [perSaveFormat, searchQuery]
+ )
+
+ return (
+ {"Add a backup location above"}
+ )}
+ {saves.length > 0 && (
+
+ {saves.map((s, index) => (
+ setSelectedSavebackup(index)}
+ />
+ ))}
+
+ )}
+
+ {
+ setSearchQuery(v)
+ },
+ },
+ ]}
+ >
+
+
+ {"This save backup system won't be as good as I'd like until "}
+
+ {"this issue"}
+
+ {" is fixed"}
+
+
+
+ )
+}
+
+const SaveVersions = ({
+ backupPath,
+ savefile,
+ versions,
+}: {
+ backupPath: string
+ savefile: string
+ versions: { zip: SaveBackupPathTime; last_modified: number }[]
+}) => {
+ const [isOpen, setIsOpen] = useState(true)
+
+ const restore = useCallback(
+ async (zip: string) => {
+ const zipPath = `${backupPath}/${zip}`
+ await invokeRestoreZip(zipPath, savefile)
+ },
+ [backupPath, savefile]
+ )
+
+ return (
+
+ {Object.entries(filteredSaves).map(([savefile, versions]) => {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/saves/item.tsx b/src/components/saves/item.tsx
new file mode 100644
index 00000000..ab393a2c
--- /dev/null
+++ b/src/components/saves/item.tsx
@@ -0,0 +1,55 @@
+import { useRecoilValue } from "recoil"
+import { BackupZipsSelectorFamily } from "../../recoil/selectors"
+import { SaveConfig } from "../../types"
+import { useBuildSaveZip } from "./hooks/useBuildsaveZip"
+
+type SavesItemProps = {
+ config: SaveConfig
+ onClickRestore: () => void
+}
+
+export const SavesItem = ({ config, onClickRestore }: SavesItemProps) => {
+ const saveZip = useBuildSaveZip()
+
+ const { files, exists } = useRecoilValue(
+ BackupZipsSelectorFamily(config.backup_location)
+ )
+
+ if (!exists) {
+ return (
+ setIsOpen((o) => !o)}
+ >{`${savefile} (${versions.length})`}
+
+ {isOpen && (
+
+ {versions.map(({ zip }) => (
+
+ )}
+ {
+ restore(zip.filename)
+ }}
+ >
+ {new Date(zip.last_modified * 1000).toLocaleString()}
+
+ ))}
+
+
+ )
+ }
+
+ return (
+ {config.backup_location}
+ {"Not found"}
+
+
+ )
+}
diff --git a/src/components/screenshots/hooks/useScreenshot.ts b/src/components/screenshots/hooks/useScreenshot.ts
new file mode 100644
index 00000000..e2ac1b01
--- /dev/null
+++ b/src/components/screenshots/hooks/useScreenshot.ts
@@ -0,0 +1,67 @@
+import { useMemo, useState } from "react"
+import { useRecoilValue } from "recoil"
+import { SingleScreenshotSelectorFamily } from "../../../recoil/screenshots/selectors"
+import { VideoJSONSelectorFamily } from "../../../recoil/screenshots/selectors"
+
+const POCKET_WIDTH = 1600
+const POCKET_HEIGHT = 1440
+
+export const useScreenshot = (
+ imageMode: "raw" | "upscaled",
+ fileName: string
+) => {
+ const screenshot = useRecoilValue(SingleScreenshotSelectorFamily(fileName))
+ if (screenshot === null) throw new Error(`Null file ${fileName}`)
+
+ const videoJson = useRecoilValue(
+ VideoJSONSelectorFamily(`${screenshot.author}.${screenshot.core}`)
+ )
+
+ const image = useMemo(() => {
+ const image = new Image()
+ image.src = URL.createObjectURL(screenshot.file)
+ image.onload = () => setImageLoaded(true)
+ return image
+ }, [screenshot.file])
+
+ const [imageLoaded, setImageLoaded] = useState(false)
+
+ const imageSrc = useMemo(() => {
+ switch (imageMode) {
+ case "raw":
+ return URL.createObjectURL(screenshot.file)
+ case "upscaled":
+ const canvas = document.createElement("canvas")
+ const context = canvas.getContext("2d")
+
+ if (!context) throw new Error("Unable to get canvas context")
+
+ const scalarMode = videoJson.video.scaler_modes.find(
+ ({ width, height }) =>
+ width === image.width && height === image.height
+ )
+
+ if (scalarMode) {
+ if (scalarMode.aspect_h > scalarMode.aspect_w) {
+ canvas.height = POCKET_HEIGHT
+ canvas.width =
+ POCKET_HEIGHT * (scalarMode.aspect_w / scalarMode.aspect_h)
+ } else {
+ canvas.width = POCKET_WIDTH
+ canvas.height =
+ POCKET_WIDTH * (scalarMode.aspect_h / scalarMode.aspect_w)
+ }
+ } else {
+ canvas.height = image.height * 10
+ canvas.width = image.width * 10
+ }
+
+ context.imageSmoothingEnabled = false
+ context?.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+ return canvas.toDataURL()
+ }
+ }, [imageMode, imageLoaded])
+
+ return imageSrc
+}
diff --git a/src/components/screenshots/index.css b/src/components/screenshots/index.css
new file mode 100644
index 00000000..55f5acc4
--- /dev/null
+++ b/src/components/screenshots/index.css
@@ -0,0 +1,63 @@
+.screenshots--none{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ font-size: 3rem;
+ padding: 20px;
+ box-sizing: border-box;
+
+ font-family: "Analogue";
+ font-smooth: never;
+ -webkit-font-smoothing : none;
+ text-align: center;
+ line-height: 45px;
+}
+
+
+.screenshots__item{
+ overflow: hidden;
+ position: relative;
+ aspect-ratio: 160 / 144;
+ cursor: pointer;
+}
+
+.screenshots__item-image{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+
+ background-color: #111;
+ image-rendering: pixelated;
+}
+
+
+.screenshots__loading-item {
+ height: 190px !important;
+ aspect-ratio: 160 / 144;
+}
+
+.screenshots__item-info{
+ background-color: var(--info-colour);
+ padding: 5px;
+ font-size: 0.875rem;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+
+ opacity: 0;
+ transform: translateY(80%);
+ transition: opacity 0.25s linear, transform 0.2s ease-out;
+}
+
+.screenshots__item:hover .screenshots__item-info{
+ opacity: 0.8;
+ transform: translateY(0);
+}
+
+.screenshots__item-info-line{
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
diff --git a/src/components/screenshots/index.tsx b/src/components/screenshots/index.tsx
new file mode 100644
index 00000000..d648ac8e
--- /dev/null
+++ b/src/components/screenshots/index.tsx
@@ -0,0 +1,60 @@
+import React, { Suspense, useMemo, useState } from "react"
+import { useRecoilValue } from "recoil"
+import { screenshotsListSelector } from "../../recoil/screenshots/selectors"
+import { Screenshot } from "./item"
+
+import "./index.css"
+import { Loader } from "../loader"
+import { ScreenshotInfo } from "./info"
+import { Grid } from "../grid"
+import { useSaveScroll } from "../../hooks/useSaveScroll"
+
+export const Screenshots = () => {
+ const [selected, setSelected] = useState saveZip(config.backup_location, config.backup_count)}
+ >
+ {"Backup Now"}
+
+ {config.backup_location}
+
+
+
+ {`Backups: ${files.length}`}
+ {files.length > 0 && (
+ <>
+ {`Last Backup: ${new Date(
+ (files.at(-1)?.last_modified || 0) * 1000
+ ).toLocaleString()}`}
+ {`Oldest Backup: ${new Date(
+ (files.at(0)?.last_modified || 0) * 1000
+ ).toLocaleString()}`}
+
+ )}
+
+ {"View Saves"}
+
+
+
+ )
+ }
+
+ return (
+ Once you take some screenshots they'll appear here
+
+ saveFile(screenshot.file_name, imageSrc),
+ },
+ { type: "button", text: "Share", onClick: openShareSheet },
+ {
+ type: "checkbox",
+ text: "Upscaled",
+ checked: imageMode === "upscaled",
+ onChange: (checked) =>
+ checked ? setImageMode("upscaled") : setImageMode("raw"),
+ },
+ ]}
+ />
+
+
+
+ )
+}
diff --git a/src/components/screenshots/item.tsx b/src/components/screenshots/item.tsx
new file mode 100644
index 00000000..dd61def3
--- /dev/null
+++ b/src/components/screenshots/item.tsx
@@ -0,0 +1,29 @@
+import React, { ReactElement, useCallback, useMemo } from "react"
+import { useRecoilValue } from "recoil"
+import { SingleScreenshotSelectorFamily } from "../../recoil/screenshots/selectors"
+
+type ScreenshotProps = {
+ fileName: string
+ onClick: () => void
+}
+
+export const Screenshot = ({
+ fileName,
+ onClick,
+}: ScreenshotProps): ReactElement => {
+ const screenshot = useRecoilValue(SingleScreenshotSelectorFamily(fileName))
+ if (screenshot === null) throw new Error(`Null file ${fileName}`)
+
+ const blob = useMemo(() => URL.createObjectURL(screenshot.file), [screenshot])
+
+ return (
+
+
+ {screenshot.game}
+ {screenshot.platform}
+ {screenshot.file_name}
+
+ 
+
+
+ )
+}
diff --git a/src/components/settings/hooks/useUpdateConfig.ts b/src/components/settings/hooks/useUpdateConfig.ts
new file mode 100644
index 00000000..67f44399
--- /dev/null
+++ b/src/components/settings/hooks/useUpdateConfig.ts
@@ -0,0 +1,29 @@
+import { useCallback } from "react"
+import { useRecoilValue, useSetRecoilState } from "recoil"
+import { configInvalidationAtom, pocketPathAtom } from "../../../recoil/atoms"
+import { PocketSyncConfigSelector } from "../../../recoil/selectors"
+import { PocketSyncConfig } from "../../../types"
+import { invokeSaveFile } from "../../../utils/invokes"
+
+export const useUpdateConfig = () => {
+ const currentConfig = useRecoilValue(PocketSyncConfigSelector)
+ const pocketPath = useRecoilValue(pocketPathAtom)
+ const invalidateConfigSelector = useSetRecoilState(configInvalidationAtom)
+
+ return useCallback(
+ async
+
+ {screenshot.game}
+ {screenshot.platform}
+
+
+ )
+}
diff --git a/src/components/three/index.css b/src/components/three/index.css
new file mode 100644
index 00000000..fac38eb7
--- /dev/null
+++ b/src/components/three/index.css
@@ -0,0 +1,5 @@
+.three-pocket {
+ flex-shrink: 1;
+ flex-grow: 1;
+ flex-basis: 200px;
+}
diff --git a/src/components/three/pocket.tsx b/src/components/three/pocket.tsx
new file mode 100644
index 00000000..cf86777c
--- /dev/null
+++ b/src/components/three/pocket.tsx
@@ -0,0 +1,225 @@
+import { Canvas, useFrame } from "@react-three/fiber"
+import { OrbitControls, Stats, RoundedBox } from "@react-three/drei"
+import { ReactNode, useRef } from "react"
+import { useRecoilValue, useSetRecoilState } from "recoil"
+import { PocketModelColourAtom } from "../../recoil/atoms"
+
+import "./index.css"
+import { PocketSyncConfigSelector } from "../../recoil/selectors"
+
+type PocketProps = {
+ move?: "none" | "spin" | "back-and-forth"
+ screenMaterial?: ReactNode
+}
+
+const BLACK_COLOUR = "rgb(1,1,1)"
+const WHITE_COLOUR = "rgb(90,90,90)"
+
+export const Pocket = ({ move = "none", screenMaterial }: PocketProps) => {
+ return (
+
+ {/* {"Settings"}
+
+
+
+
+
+ {"Pocket Colour:"}
+ + +
+
+ {"ROM & BIOS archive:"}
+{ARCHIVE_URL_TEXT}
+ {"https://archive.org/download/openFPGA-Files"}
+
+ setArchiveUrl(target.value)}
+ />
+
+
+ {children}
+)
diff --git a/src/components/zipInstall/hooks.ts b/src/components/zipInstall/hooks.ts
new file mode 100644
index 00000000..f1b09400
--- /dev/null
+++ b/src/components/zipInstall/hooks.ts
@@ -0,0 +1,117 @@
+import { emit, listen } from "@tauri-apps/api/event"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useSetRecoilState } from "recoil"
+import { fileSystemInvalidationAtom } from "../../recoil/atoms"
+import { FileTreeNode, InstallZipEventPayload } from "./types"
+
+export const useListenForZipInstall = () => {
+ const [installState, setInstallState] =
+ useState{title}
+ +{title}
+
+ {!tree &&
+
+ {`Scanning files...`}
} + {tree && + allowedFiles && + tree.map((node) => ( +
+
+
+
+
+
+ )
+}
diff --git a/src/components/zipInstall/types.ts b/src/components/zipInstall/types.ts
new file mode 100644
index 00000000..91d48aef
--- /dev/null
+++ b/src/components/zipInstall/types.ts
@@ -0,0 +1,13 @@
+export type FileTreeNode = {
+ name: string
+ full: string
+ exists: boolean
+ is_dir: boolean
+ children: FileTreeNode[]
+}
+
+export type InstallZipEventPayload = {
+ title: string
+ files?: { path: string; exists: boolean }[]
+ progress?: { value: number; max: number }
+}
diff --git a/src/config_file.rs b/src/config_file.rs
deleted file mode 100644
index 51e4e59a..00000000
--- a/src/config_file.rs
+++ /dev/null
@@ -1,38 +0,0 @@
-use serde::{Deserialize, Serialize};
-use std::{fs, io::ErrorKind, path::PathBuf};
-
-#[derive(Serialize, Deserialize, Debug)]
-pub struct PocketSyncConfig {
- pub last_run_timestamp: i64,
-}
-
-impl PocketSyncConfig {
- pub fn read(pocket_path: &PathBuf) -> PocketSyncConfig {
- let json_path = pocket_path.join("pocket_sync.json");
- if let Ok(data) = fs::read_to_string(&json_path).or_else(|err| match err.kind() {
- ErrorKind::NotFound => {
- let default_struct = PocketSyncConfig {
- last_run_timestamp: 0,
- };
-
- default_struct.write(pocket_path);
- let json = serde_json::to_string(&default_struct);
- json
- }
- _ => panic!("Error trying to read config {}", err),
- }) {
- if let Ok(result) = serde_json::from_str(&data) {
- return result;
- }
- }
-
- panic!("Failed to read or create pocket_sync.json")
- }
-
- pub fn write(&self, pocket_path: &PathBuf) -> () {
- let json_path = pocket_path.join("pocket_sync.json");
- if let Ok(json) = serde_json::to_string(&self) {
- fs::write(&json_path, &json).expect("Failed to write pocket_sync.json");
- }
- }
-}
diff --git a/src/cores.rs b/src/cores.rs
deleted file mode 100644
index 6cc088d0..00000000
--- a/src/cores.rs
+++ /dev/null
@@ -1,160 +0,0 @@
-#[derive(Debug, PartialEq)]
-pub enum SupportedCore {
- GB,
- GBC,
- GBA,
- TGFX16,
- NES,
- SNES,
- GameGear,
- MasterSystem,
- Genesis,
- NEOGEO,
- Arduboy,
- SuperVision,
-}
-
-pub trait TransformCore {
- fn to_pocket(&self) -> String;
- fn to_mister(&self) -> String;
-
- fn from_pocket(name: &str) -> Option
+ {!node.is_dir && (
+ toggleFile(node.full)}
+ >
+ )}
+
+
+ {expanded &&
+ node.children.map((n) => (
+ setExpanded((e) => !e)}
+ >
+ {node.is_dir && (
+
+ )}
+ {node.name}
+ {node.is_dir ? "/" : ""}
+
+