Skip to content

Commit

Permalink
✨ feat: add settings page
Browse files Browse the repository at this point in the history
Signed-off-by: SimonShiki <sinangentoo@gmail.com>
  • Loading branch information
SimonShiki committed Nov 2, 2023
1 parent 3ab5320 commit 9ba2db4
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 53 deletions.
17 changes: 12 additions & 5 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Navigation from './navigation';
import Enabled from './enabled';
import Home from './home';
import Settings from './settings';
import Gallary from './gallary';
import { createSignal, createEffect, onMount, Show } from 'solid-js';

Expand All @@ -10,9 +11,9 @@ export interface ExtensionInfo {
}

export interface SettingsInfo {
core: boolean;
patchRegisterExtensionPrimitives: boolean;
noPrompt: boolean;
convertProcCall: boolean;
dontExposeCtx: boolean;
noConfirmDialog: boolean;
}

export interface ClientInfo {
Expand Down Expand Up @@ -99,6 +100,9 @@ function App () {
navigateTo={navigateTo}
/>
<div style={{margin: '1rem'}}>
<Show when={page() === 'home'}>
<Home />
</Show>
<Show when={page() === 'manage'}>
<Enabled
extensions={extensionInfos}
Expand All @@ -111,8 +115,11 @@ function App () {
clientInfo={clientInfo}
/>
</Show>
<Show when={page() === 'home'}>
<Home />
<Show when={page() === 'settings'}>
<Settings
clientInfo={clientInfo}
settings={settings}
/>
</Show>
</div>
</>
Expand Down
96 changes: 48 additions & 48 deletions src/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,80 +47,80 @@ function Home () {
alignItems: 'center',
textAlign: 'center'
}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
Load ANY Scratch extensions in ANY Scratch-based editors.
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
Chibi loads extensions by directly injecting them into the Scratch virtual machine,
which allows you to use your favorite extensions without being restricted by the editor itself.
</Typography>
<Stack direction={{ xs: 'column', sm: 'row' }} sx={{flexFlow: 'wrap', justifyContent: 'center'}}>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from scratch'
height='240'
image='/carousel/scratch.png'
</Typography>
<Stack direction={{ xs: 'column', sm: 'row' }} sx={{flexFlow: 'wrap', justifyContent: 'center'}}>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from scratch'
height='240'
image='/carousel/scratch.png'
/>
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from acamp'
height='240'
image='/carousel/acamp.png'
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from acamp'
height='240'
image='/carousel/acamp.png'
/>
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from Gandi'
height='240'
image='/carousel/gandi.png'
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from Gandi'
height='240'
image='/carousel/gandi.png'
/>
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from Turbowarp'
height='240'
image='/carousel/tw.png'
</Card>
<Card sx={{width: '300px', margin: '1rem'}}>
<CardMedia
component='img'
alt='screenshot from Turbowarp'
height='240'
image='/carousel/tw.png'
/>
</Card>
</Stack>
</Card>
</Stack>
</Box>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center'
}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
Write once, Run everywhere
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
Chibi implements the loader independently, which means extensions have a unified implementation standard rather rely on the editor.
</Typography>
<Card sx={{width: '100%', maxWidth: '400px', marginTop: '1rem'}}>
<CardMedia
component='img'
alt='loader code preview'
image='/carbon.png'
</Typography>
<Card sx={{width: '100%', maxWidth: '400px', marginTop: '1rem'}}>
<CardMedia
component='img'
alt='loader code preview'
image='/carbon.png'
/>
</Card>
</Card>
</Box>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center'
}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
<Typography variant='h5' sx={{fontWeight: 500}}>
Compatible with most popular extension loading methods
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
</Typography>
<Typography variant='subtitle1' sx={{marginBottom: '1rem'}}>
Chibi adds support for non-sandbox extensions and TurboWarp extensions. This means you can seamlessly sideload these extensions into your projects.
</Typography>
</Typography>
</Box>
</Stack>
);
Expand Down
168 changes: 168 additions & 0 deletions src/settings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import {
Stack,
Card,
Box,
Switch,
Divider,
Typography
} from '@suid/material';
import { createSignal, Show } from 'solid-js';
import type { SettingsInfo, ClientInfo } from './App';

interface SettingsProps {
clientInfo(): ClientInfo | null;
settings(): Partial<SettingsInfo>;
}

function Settings (props: SettingsProps) {
return (
<Stack spacing={5}>
<Stack spacing={1}>
<Typography
sx={{
fontSize: 14,
fontWeight: '500',
marginLeft: '0.25rem'
}}
color='text.secondary'
>
Project
</Typography>
<Card>
<Box sx={{padding: '16px'}}>
<Stack
spacing={1}
divider={<Divider flexItem />}
>
<Box sx={{
display: 'flex',
alignItems: 'center'
}}>
<Typography>
Convert Sideload Extension's Blocks Into Procedures Call
<Show when={!props.clientInfo() || props.clientInfo()!.version < 5}>
<Typography
color='text.secondary'
sx={{fontSize: '12px'}}
>{`Required Chibi >= 5`}</Typography>
</Show>
</Typography>
<Switch
sx={{marginLeft: 'auto'}}
checked={props.settings()?.convertProcCall}
onChange={(_, value) => {
window.opener.postMessage({
type: 'updateSettings',
item: {
name: 'convertProcCall',
value: value
}
}, '*');
}}
disabled={!props.clientInfo() || props.clientInfo()!.version < 5}
/>
</Box>
</Stack>
</Box>
</Card>
</Stack>
<Stack spacing={1}>
<Typography
sx={{
fontSize: 14,
fontWeight: '500',
marginLeft: '0.25rem'
}}
color='text.secondary'
>
Extension
</Typography>
<Card>
<Box sx={{padding: '16px'}}>
<Stack
spacing={1}
divider={<Divider flexItem />}
>
<Box sx={{
display: 'flex',
alignItems: 'center'
}}>
<Typography>
Don't Expose "Scratch" Object Globally
<Show when={!props.clientInfo() || props.clientInfo()!.version < 5}>
<Typography
color='text.secondary'
sx={{fontSize: '12px'}}
>{`Required Chibi >= 5`}</Typography>
</Show>
</Typography>
<Switch
sx={{marginLeft: 'auto'}}
checked={props.settings()?.dontExposeCtx}
onChange={(_, value) => {
window.opener.postMessage({
type: 'updateSettings',
item: {
name: 'dontExposeCtx',
value: value
}
}, '*');
}}
disabled={!props.clientInfo() || props.clientInfo()!.version < 5}
/>
</Box>
<Box sx={{
display: 'flex',
alignItems: 'center'
}}>
<Typography>
No Confirmation Dialog While Loading Project
<Show when={!props.clientInfo() || props.clientInfo()!.version < 5}>
<Typography
color='text.secondary'
sx={{fontSize: '12px'}}
>{`Required Chibi >= 5`}</Typography>
</Show>
</Typography>
<Switch
sx={{marginLeft: 'auto'}}
checked={props.settings()?.noConfirmDialog}
onChange={(_, value) => {
window.opener.postMessage({
type: 'updateSettings',
item: {
name: 'noConfirmDialog',
value: value
}
}, '*');
}}
disabled={!props.clientInfo() || props.clientInfo()!.version < 5}
/>
</Box>
<Box sx={{
display: 'flex',
alignItems: 'center'
}}>
<Typography>
Load From Gallery's Extensions Only
<Show when={!props.clientInfo() || props.clientInfo()!.version < 6}>
<Typography
color='text.secondary'
sx={{fontSize: '12px'}}
>{`Required Chibi >= 6`}</Typography>
</Show>
</Typography>
<Switch
sx={{marginLeft: 'auto'}}
disabled={!props.clientInfo() || props.clientInfo()!.version < 6}
/>
</Box>
</Stack>
</Box>
</Card>
</Stack>
</Stack>
);
}

export default Settings;

0 comments on commit 9ba2db4

Please sign in to comment.