Skip to content

Jaredlim/bxc 112 blank project #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
azure-kyuri wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Jaredlim/bxc 112 blank project #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13f340d
fixed name overflow on sprites
jaredlim54 Sep 21, 2023
f7858e4
reimplemented loading screeen
azure-kyuri Sep 24, 2023
68698f5
added blank project option
azure-kyuri Sep 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 40 additions & 35 deletions src/components/App/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,39 +44,42 @@ const App = () => {
const [projectId] = useLocalStorage("patchProjectId", "new");
const { loadProject } = useProjectActions(projectId);
const onVmInit = () => {
loadProject();
loadProject();
}
useInitializedVm(onVmInit);

useThreadAutoSave(patchVM, saveTargetThreads, editorTab);
useMonitorProjectChange(setProjectChanged, [targetIds])


return (
<ThemeProvider theme={mode === "dark" ? darkTheme : lightTheme}>
<SplashScreen renderCondition={true}>
<ToastContainer
theme="dark"
position="top-center"
/>
<Grid container item direction="row" width={'100%'} sx={{
position: "absolute",
width: "100%",
top: 0,
left: 0,
right: 0,
bottom: 0,
padding: 0,
margin: 0,
paddingBottom: "0px",
zIndex: -1,
overflowY: "auto",
backgroundColor: 'background.default',
color: "text.primary",
}}>
<ModalSelector />
<TopBar mode={mode} setMode={setMode} />
<Grid item container direction="row" className="leftContainer">
{!patchVM ?
<SplashScreen renderCondition={false} />
:
<SplashScreen renderCondition={true}>
<ToastContainer
theme="dark"
position="top-center"
/>
<Grid container item direction="row" width={'100%'} sx={{
position: "absolute",
width: "100%",
top: 0,
left: 0,
right: 0,
bottom: 0,
padding: 0,
margin: 0,
paddingBottom: "0px",
zIndex: -1,
overflowY: "auto",
backgroundColor: 'background.default',
color: "text.primary",
}}>
<ModalSelector />
<TopBar mode={mode} setMode={setMode} />
<Grid item container direction="row" className="leftContainer">
<Grid item className="assetHolder" sx={{
padding: "8px",
borderRightWidth: "1px",
Expand All @@ -87,24 +90,26 @@ const App = () => {
justifyContent: "space-between",
}}>
<VerticalButtons>
<EditorTabButton tab={EditorTab.CODE} icon={<DataObjectIcon/>}/>
<EditorTabButton tab={EditorTab.COSTUMES} icon={<TheaterComedyIcon/>}/>
<EditorTabButton tab={EditorTab.SOUNDS} icon={<MusicNoteIcon/>}/>
<EditorTabButton tab={EditorTab.VARIABLES} icon={<PublicIcon/>}/>
<EditorTabButton tab={EditorTab.CODE} icon={<DataObjectIcon />} />
<EditorTabButton tab={EditorTab.COSTUMES} icon={<TheaterComedyIcon />} />
<EditorTabButton tab={EditorTab.SOUNDS} icon={<MusicNoteIcon />} />
<EditorTabButton tab={EditorTab.VARIABLES} icon={<PublicIcon />} />
</VerticalButtons>
<LegalDialogueButton/>
<LegalDialogueButton />
</Grid>
<Grid item xs>
<EditorPane />
</Grid>
</Grid>
<Grid item className="rightContainer">
<GamePane />
<SpritePane />
<Grid item className="rightContainer">
<GamePane />
<SpritePane />
</Grid>
</Grid>
</Grid>
</SplashScreen>
</SplashScreen>
}
</ThemeProvider>

);
}

Expand Down
55 changes: 42 additions & 13 deletions src/components/SpritePane/SpriteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { ItemCard } from '../ItemCard';
import getCostumeUrl from '../../util/get-costume-url';
import { Target } from '../EditorPane/types';
Expand All @@ -13,21 +13,50 @@ type SpriteCardProps = {
export function SpriteCard({ target }: SpriteCardProps) {
const [editingTarget, setEditingTarget] = useEditingTarget();


let inputName = ''

// Upon a name change, re-render the sprite's card in a local variable.
// useEffect(() => {
// if ((target?.sprite?.name).length > 16) {
// inputName = (target?.sprite?.name).substring(0, 13) + '...'
// }
// else {
// inputName = target?.sprite?.name
// }

// }, [target?.sprite?.name])

const onClick = () => {
setEditingTarget(target.id);
}

return(
<ItemCard
title={target?.sprite?.name}
selected={editingTarget?.id === target.id}
onClick={onClick}
key={target?.sprite?.name}
width={120}
height={120}
>
<CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
</ItemCard>
return (
<>
{target?.sprite?.name.length > 13 ?
<ItemCard
title={target?.sprite?.name.substring(0, 10) + '...'}
selected={editingTarget?.id === target.id}
onClick={onClick}
key={target?.sprite?.name}
width={120}
height={120}
>
<CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
</ItemCard>
:
<ItemCard
title={target?.sprite?.name}
selected={editingTarget?.id === target.id}
onClick={onClick}
key={target?.sprite?.name}
width={120}
height={120}
>
<CostumeImage costume={target?.sprite?.costumes[0]} className="costumeCardImage" />
</ItemCard>
}
</>


);
}
14 changes: 9 additions & 5 deletions src/components/SpritePane/SpriteName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,21 @@ export function SpriteName() {
setName(editingTarget.sprite.name);
}, [editingTarget]);

return(<Grid display="flex">
<HorizontalButtons sx={{marginBottom: '12px'}}>
<TextField
useEffect(() => {
console.log("user is typing")
}, [name])

return (<Grid display="flex">
<HorizontalButtons sx={{ marginBottom: '12px' }}>
<TextField
value={name}
onChange={onChange}
fullWidth
size="small"
disabled={targetIds[0] == editingTarget?.id}
sx={{minWidth: '532px'}}
sx={{ minWidth: '532px' }}
/>
<IconButton icon={<SaveIcon />} color="success" onClick={handleSave} disabled={nameSaved || !patchVM.editingTarget.isSprite()} sx={{height: '40px'}} />
<IconButton icon={<SaveIcon />} color="success" onClick={handleSave} disabled={nameSaved || !patchVM.editingTarget.isSprite()} sx={{ height: '40px' }} />
</HorizontalButtons>
</Grid>);
}
2 changes: 1 addition & 1 deletion src/components/TopBar/FileDropDown/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const FileDropDown = ({ cloudEnabled }: FielDropDownProps) => {
}

const authenticatedOptions = [
{ label: "New", onClick: handleNew},
{ label: "New Blank Project", onClick: handleNew},
Copy link
Collaborator

@ElliotRoe ElliotRoe Sep 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this change the current functionality? Right now on my local machine, I still get the template project.

{ label: "Save Now", onClick: handleSaveNow},
{ label: "Save As A Copy", onClick: handleSaveCopy},
{ label: "Load From Your Computer", onClick: handleUpload},
Expand Down
1 change: 1 addition & 0 deletions src/components/TopBar/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const SaveButton = () => {
const { saveProject } = useProjectActions();

const handleSaveNow = async () => {
console.log("Pressed save")
Copy link
Collaborator

@ElliotRoe ElliotRoe Sep 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed debug statement

await saveAllThreads();
if (user) {
saveProject(projectName);
Expand Down
1 change: 1 addition & 0 deletions src/hooks/useProjectActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const useProjectActions = (defaultProjectId?: string) => {
if (!projectSnapshot.exists() || loadFailed) {
console.warn("Project does not exist. Creating default project.");
setNewProject(true);
// TODO: debug this when new project is loaded.
const vmStateJson = defaultPatchProject as unknown;
await loadSerializedProject(vmStateJson as VmState, true);
}
Expand Down