16 |
17 | Category
18 |
32 |
33 |
34 | );
35 | }
--------------------------------------------------------------------------------
/src/components/CategoriesTableMoreMenu.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import FindInPageIcon from '@mui/icons-material/FindInPage';
3 | import Menu from '@mui/material/Menu';
4 | import MenuItem from '@mui/material/MenuItem';
5 | import ListItemIcon from '@mui/material/ListItemIcon';
6 |
7 | import * as UrlProcessor from '../UrlProcessor';
8 |
9 | export default function CategoriesTableMoreMenu(props) {
10 | const {
11 | anchorEl,
12 | setAnchorEl,
13 | selected
14 | } = props;
15 | const open = Boolean(anchorEl);
16 | const handleClose = () => {
17 | setAnchorEl(null);
18 | };
19 |
20 | return (
21 |
39 | );
40 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webrcade-feed-editor",
3 | "homepage": ".",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "@emotion/react": "^11.5.0",
8 | "@emotion/styled": "^11.3.0",
9 | "@mui/icons-material": "^5.2.0",
10 | "@mui/lab": "^5.0.0-alpha.143",
11 | "@mui/material": "^5.2.2",
12 | "@testing-library/jest-dom": "^5.14.1",
13 | "@testing-library/react": "^11.2.7",
14 | "@testing-library/user-event": "^12.8.3",
15 | "autosuggest-highlight": "^3.3.4",
16 | "deepmerge": "^4.2.2",
17 | "react": "^17.0.2",
18 | "react-dom": "^17.0.2",
19 | "react-scripts": "4.0.3",
20 | "web-vitals": "^1.1.2"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "eslintConfig": {
29 | "extends": [
30 | "react-app",
31 | "react-app/jest"
32 | ]
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/CloudMenu.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import ListItemIcon from '@mui/material/ListItemIcon';
3 | import Menu from '@mui/material/Menu';
4 | import MenuItem from '@mui/material/MenuItem';
5 | // import ListRoundedIcon from '@mui/icons-material/ListRounded';
6 | import SimCardDownloadRoundedIcon from '@mui/icons-material/SimCardDownloadRounded';
7 |
8 | import { openManifestDialog } from './cloud/generate-manifest/GenerateManifestDialog';
9 |
10 |
11 | export default function CloudMenu(props) {
12 | const { anchorEl, setAnchorEl, setOpen } = props;
13 | const isOpen = Boolean(anchorEl);
14 |
15 | const handleClose = () => {
16 | setAnchorEl(null);
17 | };
18 |
19 | return (
20 |
41 | );
42 | }
--------------------------------------------------------------------------------
/src/components/cloud/generate-manifest/GenerateManifestWrapper.js:
--------------------------------------------------------------------------------
1 | import {
2 | LOG
3 | } from '@webrcade/app-common'
4 |
5 | import { Global } from '../../../Global';
6 |
7 | export default class GenerateManifestWrapper {
8 | async generate(doGenerate, onComplete, showStatus) {
9 | if (showStatus) Global.openBusyScreen(true, "Generating manifest file...");
10 | try {
11 | const manifestUrl = await doGenerate();
12 | Global.displayMessage("Successfully created package manifest file.", "success");
13 | onComplete();
14 | setTimeout(() => {
15 | Global.openCopyLinkDialog(
16 | true,
17 | manifestUrl,
18 | "Package Manifest File URL",
19 | "Successfully copied the package manifest file URL to the clipboard.",
20 | true
21 | )
22 |
23 | }, 0);
24 | } catch (e) {
25 | LOG.error(e);
26 |
27 | // Check for token scope error
28 | if (e?.error?.error?.required_scope) {
29 | Global.displayMessage("This operation requires an updated Dropbox token. Please use settings to unlink and relink to Dropbox.", "error");
30 | } else {
31 | Global.displayMessage("An error occurred while attempting to generate the manifest.", "error");
32 | }
33 | } finally {
34 | if (showStatus) Global.openBusyScreen(false);
35 | }
36 | }
37 |
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/Screens.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import CategoryEditor from './CategoryEditor';
4 | import ConfirmDialog from './ConfirmDialog';
5 | import CopyLinkDialog from './CopyLinkDialog';
6 | import CreateFromUrlDialog from './CreateFromUrlDialog';
7 | import DisplayMessage from './DisplayMessage';
8 | import ExportDialog from './ExportDialog';
9 | import FeedEditor from './FeedEditor';
10 | import ImportDialog from './ImportDialog';
11 | import ItemEditor from './item-editor/ItemEditor';
12 | import LoadFeedDialog from './load-dialog/LoadFeedDialog';
13 | import SettingsEditor from './SettingsEditor';
14 | import { GenerateManifestDialog } from './cloud/generate-manifest/GenerateManifestDialog';
15 | import { RepackageDialog } from './tools/repackage/RepackageDialog';
16 | import { SelectCloudFolderDialog } from './cloud/generate-manifest/SelectCloudFolderDialog';
17 | import { DownloadFileDialog } from './DownloadFileDialog';
18 |
19 | export default function Screens() {
20 |
21 | return (
22 | <>
23 |
23 | { setObject({ ...object, thumbnail: text }) }}
31 | onChange={(e) => { setObject({ ...object, thumbnail: e.target.value }) }}
32 | />
33 |
34 |
35 | { setObject({ ...object, thumbnail: text }) }}
41 | />
42 |
43 |
53 | {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
54 |
62 | {label}
63 |
64 |
65 | );
66 | });
67 |
68 | const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
69 | return
55 | {icon}
56 |
57 |
17 |
18 | {children}
19 |
20 |
21 | );
22 | }
23 |
24 | const PREF_FEED_TAB = "feedsTab.tab";
25 |
26 | function FeedTabs(props) {
27 | const { feed } = props;
28 | const [tabValue, setTabValue] =
29 | React.useState(Prefs.getIntPreference(PREF_FEED_TAB, 0));
30 | const prevTabValue = usePrevious(tabValue);
31 |
32 | // Store prefs (if applicable)
33 | React.useEffect(() => {
34 | // See if tab has changed
35 | if (prevTabValue !== tabValue) {
36 | Prefs.setPreference(PREF_FEED_TAB, tabValue);
37 | Prefs.save();
38 | }
39 | }, [prevTabValue, tabValue]);
40 |
41 | function tabProps(index) {
42 | return { id: `feed-tab-${index}` };
43 | }
44 |
45 | const handleTabChange = (event, newValue) => {
46 | setTabValue(newValue);
47 | };
48 |
49 | const showCategoryItems = (catId) => {
50 | Global.setFeedCategoryId(catId);
51 | setTabValue(1);
52 | };
53 |
54 | return (
55 | <>
56 |
23 | { setObject({ ...object, background: text }) }}
31 | onChange={(e) => { setObject({ ...object, background: e.target.value }) }}
32 | />
33 |
34 |
35 | {
39 | setObject({ ...object, backgroundPixelated: e.target.checked })
40 | }}
41 | checked={Util.asBoolean(object.backgroundPixelated)}
42 | sx={{marginTop: .5}}
43 |
44 | />
45 |
46 |
47 | { setObject({ ...object, background: text }) }}
52 | sx={{
53 | objectFit: 'cover',
54 | height: '100%'
55 | }}
56 | />
57 |
58 |
32 | { setObject({ ...object, title: text }) }}
36 | onChange={(e) => { setObject({ ...object, title: e.target.value }) }}
37 | value={Util.asString(object.title)}
38 | error={!validator.isValid(tabIndex, "title")}
39 | />
40 |
)
41 | }
42 |
43 | { setObject({ ...object, longTitle: text }) }}
47 | onChange={(e) => { setObject({ ...object, longTitle: e.target.value }) }}
48 | value={Util.asString(object.longTitle)}
49 | />
50 |
51 |
52 | { setObject({ ...object, description: text }) }}
58 | onChange={(e) => { setObject({ ...object, description: e.target.value }) }}
59 | value={Util.asString(object.description)}
60 | />
61 |
62 | {otherFields}
63 |
43 |
44 | Application
45 |
71 |
72 |
73 | );
74 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webЯcade Feed Editor
2 |
3 | [](https://opensource.org/licenses/Apache-2.0)
4 |
5 | The webЯcade feed editor, located at [editor.webrcade.com](https://editor.webrcade.com), provides a much simpler alternative to the [manual creation](https://docs.webrcade.com/feeds/tutorial/) of feeds. The editor allows for quickly creating webЯcade feeds without requiring any knowledge of the underlying [document format](https://docs.webrcade.com/feeds/format/).
6 |
7 |
8 |
9 | 
10 |
11 |
16 |
17 | 
18 |
19 |
39 | {
52 | const value = e.target.value;
53 | if (value !== CUSTOM) {
54 | object.props.wadPath = '';
55 | }
56 | const props = { ...object.props, wadType: value }
57 | setObject({ ...object, props })
58 | }}
59 | />
60 |
61 | {getWadType(object.props.wadType) !== AUTO && (
62 |
63 | {
68 | if (getWadType(object.props.wadType) === CUSTOM) {
69 | const props = { ...object.props, wadPath: text }
70 | setObject({ ...object, props })
71 | }
72 | }}
73 | onChange={(e) => {
74 | if (getWadType(object.props.wadType) === CUSTOM) {
75 | const props = { ...object.props, wadPath: e.target.value }
76 | setObject({ ...object, props })
77 | }
78 | }}
79 | value={getWadPath(object.props.wadType, object.props.wadPath)}
80 | />
81 |
82 | )}
83 |
84 | )
85 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
42 | { setValue(text); }}
46 | onChange={(e) => { setValue(e.target.value); }}
47 | value={Util.asString(val)}
48 | />
49 |
50 | );
51 | }
52 |
53 | export default function A5200DescriptionsTab(props) {
54 | const {
55 | tabValue,
56 | tabIndex,
57 | setObject,
58 | object
59 | } = props;
60 |
61 | return (
62 |
73 |
116 |
117 | );
118 | }
--------------------------------------------------------------------------------
/src/components/CategoryEditor.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Tab from '@mui/material/Tab';
3 |
4 | import * as Feed from '../Feed';
5 | import * as Util from '../Util';
6 | import BackgroundTab from './common/editor/BackgroundTab';
7 | import GeneralTab from './common/editor/GeneralTab';
8 | import Editor from './common/editor/Editor';
9 | import EditorValidator from './common/editor/EditorValidator'
10 | import ThumbnailTab from './common/editor/ThumbnailTab';
11 | import { GlobalHolder, Global } from '../Global';
12 |
13 | import {
14 | CategoryBackgroundImage,
15 | CategoryThumbImage
16 | } from '@webrcade/app-common'
17 |
18 | const validator = new EditorValidator();
19 |
20 | const addValidatorCallback = (id, cb) => {
21 | validator.addCallback(id, cb);
22 | }
23 |
24 | export default function CategoryEditor(props) {
25 | const [tabValue, setTabValue] = React.useState(0);
26 | const [category, setCategory] = React.useState({});
27 | const [isOpen, setOpen] = React.useState(false);
28 | const [isCreate, setCreate] = React.useState(false);
29 |
30 | GlobalHolder.setCategoryEditorOpen = (open, isCreate = false) => {
31 | setCreate(isCreate);
32 | setOpen(open);
33 | }
34 | GlobalHolder.setEditCategory = setCategory;
35 |
36 | const forceUpdate = Util.useForceUpdate();
37 |
38 | const genTab = 0;
39 | const thumbTab = 1;
40 | const bgTab = 2;
41 |
42 | return (
43 |
85 | { setValue(e.target.value) }}
90 | />
91 |
92 | );
93 | }
94 |
95 | export default function A5200MappingsTab(props) {
96 | const {
97 | tabValue,
98 | tabIndex,
99 | setObject,
100 | object
101 | } = props;
102 |
103 | return (
104 |
66 | { setValue(e.target.value) }}
71 | />
72 |
73 | );
74 | }
75 |
76 | export default function C64MappingsTab(props) {
77 | const {
78 | tabValue,
79 | tabIndex,
80 | setObject,
81 | object
82 | } = props;
83 |
84 | return (
85 |
42 | { setValue(text); }}
46 | onChange={(e) => { setValue(e.target.value); }}
47 | value={Util.asString(val)}
48 | />
49 |
50 | );
51 | }
52 |
53 | export default function ColecoDescriptionsTab(props) {
54 | const {
55 | tabValue,
56 | tabIndex,
57 | setObject,
58 | object
59 | } = props;
60 |
61 | const isRoller = object.props.controlsMode === 3;
62 | const isSuper = object.props.controlsMode === 1;
63 | const isDriving = object.props.controlsMode === 2;
64 |
65 | let firelLabel = "Left fire";
66 | if (isDriving) {
67 | firelLabel = "Gas button";
68 | } else if (isSuper) {
69 | firelLabel = "Yellow button";
70 | }
71 | let firerLabel = "Right fire";
72 | if (isDriving) {
73 | firerLabel = "Brake button";
74 | } else if (isSuper) {
75 | firerLabel = "Orange button";
76 | }
77 |
78 | return (
79 | 96 |
98 | { setValue(e.target.value) }}
103 | />
104 |
105 | );
106 | }
107 |
108 | export default function ColecoMappingsTab(props) {
109 | const {
110 | tabValue,
111 | tabIndex,
112 | setObject,
113 | object
114 | } = props;
115 |
116 | return (
117 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
18 | function getGrayscaleMenuItems() {
19 | return ([
20 | ,
21 | ]);
22 | }
23 |
24 | function getGreenscaleMenuItems() {
25 | return ([
26 | ,
27 | ,
28 | ,
29 | ,
30 | ,
31 | ,
32 | ]);
33 | }
34 |
35 | function getSuperGameBoyMenuItems() {
36 | return ([
37 | ,
38 | ,
39 | ,
40 | ,
41 | ,
42 | ,
43 | ,
44 | ,
45 | ,
46 | ,
47 | ,
48 | ,
49 | ,
50 | ,
51 | ,
52 | ,
53 | ,
54 | ,
55 | ,
56 | ,
57 | ,
58 | ,
59 | ,
60 | ,
61 | ,
62 | ,
63 | ,
64 | ,
65 | ,
66 | ,
67 | ,
68 | ,
69 | ]);
70 | }
71 |
72 | export default function SelectPalette(props) {
73 | const { colorsValue, value, onChange } = props;
74 |
75 | const handleChange = (e) => {
76 | if (onChange) onChange(e);
77 | };
78 |
79 | let menuitems = getGrayscaleMenuItems();
80 | let label = "Grayscale Palette";
81 | let tooltip = "The particular grayscale palette to use.";
82 | if (colorsValue === 1) {
83 | menuitems = getGreenscaleMenuItems();
84 | label = "Greenscale Palette";
85 | tooltip = "The particular greenscale palette to use.";
86 | } else if (colorsValue === 2) {
87 | menuitems = getSuperGameBoyMenuItems();
88 | label = "Super Game Boy Palette";
89 | tooltip = "The particular Super Game Boy palette to use.";
90 | }
91 |
92 | return (
93 | <>
94 |
132 | {
136 | const checked = e.target.checked;
137 | setShowRemote(checked);
138 | Prefs.setPreference(PREF_SHOW_REMOTE, checked);
139 | }}
140 | checked={showRemote}
141 | />
142 |
143 |
146 | {
149 | const single = selected.length === 1;
150 | Global.openConfirmDialog(
151 | true,
152 | `Delete Feed${single ? "" : "s"}`,
153 | `Are you sure you want to delete the selected feed${single ? "" : "s"}?`,
154 | async () => {
155 | try {
156 | Global.openBusyScreen(true, `Deleting feed${single ? "" : "s"}...`);
157 | for (let i = 0; i < selected.length; i++) {
158 | const id = selected[i];
159 | await feeds.removeFeed(id);
160 | }
161 | if (onDelete) await onDelete();
162 | } finally {
163 | Global.openBusyScreen(false);
164 | }
165 | }
166 | );
167 | }}
168 | >
169 |
171 |
172 |
107 |
108 | Controller Ports
109 |
110 |
115 | {
117 | const props = { ...object.props, port0: parseInt(e.target.value) }
118 | setObject({ ...object, props })
119 | }}
120 | />
121 | {
123 | const props = { ...object.props, port1: parseInt(e.target.value) }
124 | setObject({ ...object, props })
125 | }}
126 | />
127 |
128 |
129 | {hasPaddles === true && (
130 |
131 | {
134 | // Allows for smoother updated prior to change being committed
135 | object.props.paddleSensitivity = parseInt(val);
136 | }}
137 | onChangeCommitted={(e, val) => {
138 | const props = { ...object.props, paddleSensitivity: parseInt(val) }
139 | setObject({ ...object, props })
140 | }} />
141 |
142 | )}
143 | {hasPaddles === true && (
144 |
145 | {
148 | // Allows for smoother updated prior to change being committed
149 | object.props.paddleCenter = parseInt(val);
150 | }}
151 | onChangeCommitted={(e, val) => {
152 | const props = { ...object.props, paddleCenter: parseInt(val) }
153 | setObject({ ...object, props })
154 | }} />
155 |
156 | )}
157 | {hasPaddles === true && (
158 |
159 | {
163 | const props = { ...object.props, paddleVertical: e.target.checked }
164 | setObject({ ...object, props })
165 | }}
166 | checked={Util.asBoolean(object.props.paddleVertical)}
167 | />
168 |
169 | )}
170 | {hasPaddles === true && (
171 |
172 | {
176 | const props = { ...object.props, paddleInverted: e.target.checked }
177 | setObject({ ...object, props })
178 | }}
179 | checked={Util.asBoolean(object.props.paddleInverted)}
180 | />
181 |
182 | )}
183 |
184 | {
188 | const props = { ...object.props, swap: e.target.checked }
189 | setObject({ ...object, props })
190 | }}
191 | checked={Util.asBoolean(object.props.swap)}
192 | />
193 |
194 |