59 |
60 | 
61 | 62 | OMGDuke 63 | 64 | |
65 |
66 |
67 | 
68 | 69 | Lukas Senionis 70 | 71 | |
72 |
73 |
74 | 
75 | 76 | EMERALD 77 | 78 | |
79 |
80 |
81 | 
82 | 83 | Party Wumpus 84 | 85 | |
86 |
87 |
88 | 
89 | 90 | Sean 91 | 92 | |
93 |
94 |
95 | 
96 | 97 | David082321 98 | 99 | |
119 | {protonDBTier && show && !loading &&
120 | <>
121 | {style}
122 | {
126 | refresh()
127 | Navigation.NavigateToExternalWeb(
128 | `https://www.protondb.com/app/${appId}`
129 | )
130 | }}
131 | >
132 |
151 |
152 | }
153 |
154 | )
155 | }
156 |
--------------------------------------------------------------------------------
/src/components/protonMedal/style.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default (
4 |
165 | )
166 |
--------------------------------------------------------------------------------
/src/components/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ButtonItem,
3 | ButtonItemProps,
4 | DropdownItem,
5 | PanelSection,
6 | PanelSectionProps,
7 | PanelSectionRow
8 | } from '@decky/ui'
9 | import React, { FC, ReactNode } from 'react'
10 | import { clearCache } from '../../cache/protobDbCache'
11 | import useTranslations from '../../hooks/useTranslations'
12 | import { useSettings } from '../../hooks/useSettings'
13 | import Spinner from '../spinner'
14 |
15 | type ExtendedPanelSectionProps = PanelSectionProps & {
16 | children: ReactNode
17 | }
18 |
19 | const DeckPanelSection = PanelSection as FC
133 | {linuxSupport ? (
134 |
143 |
144 | {settings.size === 'small' ||
145 | (settings.size === 'minimalist' &&
146 | settings.labelTypeOnHover !== 'regular')
147 | ? t(`tierMin${protonDBTier}`)
148 | : t(`tier${protonDBTier}`)}
149 |
150 |
64 |
66 | )
67 | }
68 | return (
69 |
70 |
71 |
72 | ({
77 | data: o.data,
78 | label: o.label
79 | }))}
80 | selectedOption={
81 | sizeOptions.find((o) => o.value === settings.size)?.data || 0
82 | }
83 | onChange={(newVal: { data: number; label: string }) => {
84 | const newSize =
85 | sizeOptions.find((o) => o.data === newVal.data)?.value ||
86 | 'regular'
87 | setSize(newSize)
88 | }}
89 | />
90 |
91 | {settings.size === 'minimalist' ? (
92 |
93 | ({
98 | data: o.data,
99 | label: o.label
100 | }))}
101 | selectedOption={
102 | hoverTypeOptions.find(
103 | (o) => o.value === settings.labelTypeOnHover
104 | )?.data || 0
105 | }
106 | onChange={(newVal: { data: number; label: string }) => {
107 | const newHoverType =
108 | hoverTypeOptions.find((o) => o.data === newVal.data)?.value ||
109 | 'off'
110 | setLabelOnHover(newHoverType)
111 | }}
112 | />
113 |
114 | ) : (
115 | ''
116 | )}
117 |
118 | ({
123 | data: o.data,
124 | label: o.label
125 | }))}
126 | selectedOption={
127 | positionOptions.find((o) => o.value === settings.position)
128 | ?.data || 0
129 | }
130 | onChange={(newVal: { data: number; label: string }) => {
131 | const newPosition =
132 | positionOptions.find((o) => o.data === newVal.data)?.value ||
133 | 'tl'
134 | setPosition(newPosition)
135 | }}
136 | />
137 |
138 |
139 |
140 |
141 | clearCache()}
146 | >
147 | {t('clearCache')}
148 |
149 |
150 |
151 |
152 | )
153 | }
154 |
--------------------------------------------------------------------------------
/src/components/spinner/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ImSpinner2 } from 'react-icons/im'
3 |
4 | export default function Spinner() {
5 | return (
6 |
7 |
38 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const appTypes = {
2 | 1: 'game',
3 | 2: 'software',
4 | 4: 'tool',
5 | 8: 'demo',
6 | 2048: 'video',
7 | 65536: 'playtest'
8 | }
9 |
--------------------------------------------------------------------------------
/src/hooks/useAppId.ts:
--------------------------------------------------------------------------------
1 | import { fetchNoCors } from '@decky/api'
2 | import { useEffect, useState } from 'react'
3 | import { appTypes } from '../constants'
4 | import { useParams } from './useParams'
5 |
6 | function cleanString(str: string) {
7 | return str
8 | .replace(/['"\u0040\u0026\u2122\u00ae]/g, '')
9 | .toLowerCase()
10 | .trim()
11 | }
12 |
13 | const useAppId = () => {
14 | const [appId, setAppId] = useStateProtonDB Badges
,
15 | icon: