@@ -135,7 +146,7 @@ class LibraryComponent extends React.Component {
-
-
-
-
-
-
-
-
- {'scratch-cat' /* @todo username */}
-
-
-
+
+ {/* show the proper UI in the account menu, given whether the user is
+ logged in, and whether a session is available to log in with */}
+
+ {this.props.sessionExists ? (
+ this.props.username ? (
+ // ************ user is logged in ************
+
+
+
+
+
+
+ ) : (
+ // ********* user not logged in, but a session exists
+ // ********* so they can choose to log in
+
+
+
+
+
+
+
+
+ )
+ ) : (
+ // ******** no login session is available, so don't show login stuff
+
+
+
+
+
+
+
+
+
+
+ {'scratch-cat'}
+
+
+
+
+ )}
);
@@ -437,35 +586,61 @@ class MenuBar extends React.Component {
}
MenuBar.propTypes = {
+ accountMenuOpen: PropTypes.bool,
+ canUpdateProject: PropTypes.bool,
editMenuOpen: PropTypes.bool,
enableCommunity: PropTypes.bool,
fileMenuOpen: PropTypes.bool,
intl: intlShape,
+ isRtl: PropTypes.bool,
languageMenuOpen: PropTypes.bool,
+ loginMenuOpen: PropTypes.bool,
+ onClickAccount: PropTypes.func,
onClickEdit: PropTypes.func,
onClickFile: PropTypes.func,
onClickLanguage: PropTypes.func,
+ onClickLogin: PropTypes.func,
+ onLogOut: PropTypes.func,
+ onOpenRegistration: PropTypes.func,
onOpenTipLibrary: PropTypes.func,
+ onRequestCloseAccount: PropTypes.func,
onRequestCloseEdit: PropTypes.func,
onRequestCloseFile: PropTypes.func,
onRequestCloseLanguage: PropTypes.func,
- onSeeCommunity: PropTypes.func
+ onRequestCloseLogin: PropTypes.func,
+ onSeeCommunity: PropTypes.func,
+ onToggleLoginOpen: PropTypes.func,
+ onUpdateProjectTitle: PropTypes.func,
+ renderLogin: PropTypes.func,
+ sessionExists: PropTypes.bool,
+ username: PropTypes.string
};
const mapStateToProps = state => ({
+ canUpdateProject: typeof (state.session && state.session.session && state.session.session.user) !== 'undefined',
+ accountMenuOpen: accountMenuOpen(state),
fileMenuOpen: fileMenuOpen(state),
editMenuOpen: editMenuOpen(state),
- languageMenuOpen: languageMenuOpen(state)
+ isRtl: state.locales.isRtl,
+ languageMenuOpen: languageMenuOpen(state),
+ loginMenuOpen: loginMenuOpen(state),
+ sessionExists: state.session && typeof state.session.session !== 'undefined',
+ username: state.session && state.session.session && state.session.session.user ?
+ state.session.session.user.username : null
});
const mapDispatchToProps = dispatch => ({
onOpenTipLibrary: () => dispatch(openTipsLibrary()),
+ onClickAccount: () => dispatch(openAccountMenu()),
+ onRequestCloseAccount: () => dispatch(closeAccountMenu()),
onClickFile: () => dispatch(openFileMenu()),
onRequestCloseFile: () => dispatch(closeFileMenu()),
onClickEdit: () => dispatch(openEditMenu()),
onRequestCloseEdit: () => dispatch(closeEditMenu()),
onClickLanguage: () => dispatch(openLanguageMenu()),
onRequestCloseLanguage: () => dispatch(closeLanguageMenu()),
+ onClickLogin: () => dispatch(openLoginMenu()),
+ onRequestCloseLogin: () => dispatch(closeLoginMenu()),
onSeeCommunity: () => dispatch(setPlayer(true))
});
diff --git a/src/components/menu-bar/project-title-input.css b/src/components/menu-bar/project-title-input.css
new file mode 100644
index 00000000000..0567ca76614
--- /dev/null
+++ b/src/components/menu-bar/project-title-input.css
@@ -0,0 +1,46 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+@import "../../css/z-index.css";
+
+/*
+If project-title-input.jsx is part of a menu bar say menu-bar.jsx, it can have additional css classes that
+can set a width for example or what it should do in a flex box (eg. grow).
+*/
+
+.title-field {
+ border: 1px dashed $ui-black-transparent;
+ border-radius: $form-radius;
+ -webkit-border-radius: $form-radius;
+ -moz-border-radius: $form-radius;
+ background-color: $ui-white-transparent;
+ background-clip: padding-box;
+ -webkit-background-clip: padding-box;
+ height: auto;
+ padding: .5rem;
+}
+
+.title-field {
+ color: $ui-white;
+ font-weight: bold;
+ font-size: .8rem;
+}
+
+.title-field::placeholder {
+ color: $ui-white;
+ font-weight: normal;
+ font-size: .8rem;
+ font-style: italic;
+}
+
+.title-field:hover {
+ background-color: hsla(0, 100%, 100%, 0.5);
+}
+
+.title-field:focus {
+ outline:none;
+ border: 1px solid $ui-transparent;
+ -webkit-box-shadow: 0 0 0 calc($space * .5) $ui-white-transparent;
+ box-shadow: 0 0 0 calc($space * .5) $ui-white-transparent;
+ background-color: $ui-white;
+ color: $text-primary;
+}
diff --git a/src/components/menu-bar/project-title-input.jsx b/src/components/menu-bar/project-title-input.jsx
new file mode 100644
index 00000000000..b9b5aa6d838
--- /dev/null
+++ b/src/components/menu-bar/project-title-input.jsx
@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+import React from 'react';
+import {defineMessages, intlShape, injectIntl} from 'react-intl';
+
+import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import Input from '../forms/input.jsx';
+const BufferedInput = BufferedInputHOC(Input);
+
+import styles from './project-title-input.css';
+
+const messages = defineMessages({
+ projectTitlePlaceholder: {
+ id: 'gui.gui.projectTitlePlaceholder',
+ description: 'Placeholder for project title when blank',
+ defaultMessage: 'Project title here'
+ }
+});
+
+class ProjectTitleInput extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleUpdateProjectTitle'
+ ]);
+ }
+ // call onUpdateProjectTitle if it is defined (only defined when gui
+ // is used within scratch-www)
+ handleUpdateProjectTitle (newTitle) {
+ if (this.props.onUpdateProjectTitle) {
+ this.props.onUpdateProjectTitle(newTitle);
+ }
+ }
+ render () {
+ return (
+
+ );
+ }
+}
+
+ProjectTitleInput.propTypes = {
+ className: PropTypes.string,
+ intl: intlShape.isRequired,
+ onUpdateProjectTitle: PropTypes.func,
+ projectTitle: PropTypes.string
+};
+
+const mapStateToProps = state => ({
+ projectTitle: state.scratchGui.projectTitle
+});
+
+const mapDispatchToProps = () => ({});
+
+export default injectIntl(connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ProjectTitleInput));
diff --git a/src/components/menu/menu.jsx b/src/components/menu/menu.jsx
index ce443db55cd..4e6a6b22917 100644
--- a/src/components/menu/menu.jsx
+++ b/src/components/menu/menu.jsx
@@ -32,6 +32,7 @@ MenuComponent.propTypes = {
place: PropTypes.oneOf(['left', 'right'])
};
+
const MenuItem = ({
children,
className,
@@ -51,6 +52,7 @@ MenuItem.propTypes = {
onClick: PropTypes.func
};
+
const addDividerClassToFirstChild = (child, id) => (
React.cloneElement(child, {
className: classNames(child.className, {
diff --git a/src/components/mic-indicator/mic-indicator.css b/src/components/mic-indicator/mic-indicator.css
new file mode 100644
index 00000000000..9fb3970297b
--- /dev/null
+++ b/src/components/mic-indicator/mic-indicator.css
@@ -0,0 +1,10 @@
+@keyframes popIn {
+ from {transform: scale(0.5)}
+ to {transform: scale(1)}
+}
+
+.mic-img {
+ margin: 10px;
+ transform-origin: center;
+ animation: popIn 0.1s ease-in-out;
+}
diff --git a/src/components/mic-indicator/mic-indicator.jsx b/src/components/mic-indicator/mic-indicator.jsx
new file mode 100644
index 00000000000..fe0eb602b53
--- /dev/null
+++ b/src/components/mic-indicator/mic-indicator.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './mic-indicator.css';
+import micIcon from './mic-indicator.svg';
+import {stageSizeToTransform} from '../../lib/screen-utils';
+
+const MicIndicatorComponent = props => (
+
+
+
+);
+
+MicIndicatorComponent.propTypes = {
+ className: PropTypes.string,
+ stageSize: PropTypes.shape({
+ width: PropTypes.number,
+ height: PropTypes.number,
+ widthDefault: PropTypes.number,
+ heightDefault: PropTypes.number
+ }).isRequired
+};
+
+export default MicIndicatorComponent;
diff --git a/src/components/mic-indicator/mic-indicator.svg b/src/components/mic-indicator/mic-indicator.svg
new file mode 100644
index 00000000000..78726389d13
--- /dev/null
+++ b/src/components/mic-indicator/mic-indicator.svg
@@ -0,0 +1,40 @@
+
+
+
+ mic-indicator
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 9a5a035a7de..1ed2425ce1e 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -83,10 +83,14 @@ $sides: 20rem;
user-select: none;
}
-.header-image {
+[dir="ltr"] .header-image {
margin-right: 0.5rem;
}
+[dir="rtl"] .header-image {
+ margin-left: 0.5rem;
+}
+
.header-item-filter {
display: flex;
flex-basis: $sides;
@@ -100,13 +104,24 @@ $sides: 20rem;
user-select: none;
letter-spacing: 0.4px;
cursor: default;
+}
+
+[dir="ltr"] .header-item-title {
margin: 0 -$sides 0 0;
}
-.full-screen .header-item-title {
+[dir="rtl"] .header-item-title {
+ margin: 0 0 0 -$sides;
+}
+
+.full-screen [dir="ltr"] .header-item-title {
margin: 0 0 0 -$sides;
}
+.full-screen [dir="rtl"] .header-item-title {
+ margin: 0 -$sides 0 0;
+}
+
.header-item-close {
flex-basis: $sides;
justify-content: flex-end;
@@ -120,5 +135,36 @@ $sides: 20rem;
.back-button {
font-weight: normal;
+ padding-right: 0;
+ padding-left: 0;
+}
+
+[dir="rtl"] .back-button img {
+ transform: scaleX(-1);
+}
+
+.header-item-help {
+ padding: 0;
+ z-index: 1;
+}
+
+[dir="ltr"] .header-item-help {
+ margin-right: -4.75rem;
+}
+
+[dir="rtl"] .header-item-help {
+ margin-left: -4.75rem;
+}
+
+.help-button {
+ font-weight: normal;
+ font-size: 0.75rem;
+}
+
+[dir="ltr"] .help-button {
+ padding-right: 0;
+}
+
+[dir="rtl"] .help-button {
padding-left: 0;
}
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 940af75586f..32fe0502854 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -9,6 +9,7 @@ import Button from '../button/button.jsx';
import CloseButton from '../close-button/close-button.jsx';
import backIcon from '../../lib/assets/icon--back.svg';
+import helpIcon from '../../lib/assets/icon--help.svg';
import styles from './modal.css';
@@ -23,10 +24,31 @@ const ModalComponent = props => (
onRequestClose={props.onRequestClose}
>
+ {props.onHelp ? (
+
+
+
+
+ ) : null}
{
- const scaleX = width / widthDefault;
- const scaleY = height / heightDefault;
- if (scaleX === 1 && scaleY === 1) {
- // Do not set a transform if the scale is 1 because
- // it messes up `position: fixed` elements like the context menu.
- return;
- }
- return {transform: `scale(${scaleX},${scaleY})`};
-};
-
const MonitorList = props => (
{'+' /* TODO waiting on asset */}
@@ -35,7 +35,7 @@ const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown,
{`length ${value.length}`}
{'=' /* TODO waiting on asset */}
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index d6cf6dc4568..6e17cb6ea08 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -74,17 +74,28 @@
color: white;
}
-.button-row button + button {
+[dir="ltr"] .button-row button + button {
margin-left: 0.5rem;
}
+[dir="rtl"] .button-row button + button {
+ margin-right: 0.5rem;
+}
+
.cat-icon {
- margin-left: .125rem;
width: 1.5rem;
height: 1.5rem;
vertical-align: middle;
}
+[dir="ltr"] .cat-icon {
+ margin-left: .125rem;
+}
+
+[dir="rtl"] .cat-icon {
+ margin-right: .125rem;
+}
+
.faq-link-text {
margin: 2rem 0 .5rem 0;
font-size: .875rem;
diff --git a/src/components/preview-modal/preview-modal.jsx b/src/components/preview-modal/preview-modal.jsx
index 5772b518539..babfc0a275c 100644
--- a/src/components/preview-modal/preview-modal.jsx
+++ b/src/components/preview-modal/preview-modal.jsx
@@ -12,6 +12,26 @@ const messages = defineMessages({
id: 'gui.previewInfo.label',
defaultMessage: 'Try Scratch 3.0',
description: 'Scratch 3.0 modal label - for accessibility'
+ },
+ previewWelcome: {
+ defaultMessage: 'Welcome to the Scratch 3.0 Beta',
+ description: 'Header for Preview Info Modal',
+ id: 'gui.previewInfo.welcome'
+ },
+ notNowTooltip: {
+ defaultMessage: 'Not Now',
+ description: 'Tooltip for Not Now button',
+ id: 'gui.previewModal.notnowtooltip'
+ },
+ tryItTooltip: {
+ defaultMessage: 'Try It',
+ description: 'Tooltip for Try It button',
+ id: 'gui.previewModal.tryittooltip'
+ },
+ viewProjectTooltip: {
+ defaultMessage: 'View 2.0 Project',
+ description: 'Tooltip for View 2.0 Project button',
+ id: 'gui.previewModal.viewprojecttooltip'
}
});
@@ -23,93 +43,99 @@ const PreviewModal = ({intl, ...props}) => (
overlayClassName={styles.modalOverlay}
onRequestClose={props.onTryIt}
>
-
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+ { /* eslint-disable max-len */ }
-
+ { /* eslint-enable max-len */ }
+
+
+
+
+
+
+
+
+
+
+
+
)
}}
/>
-
-
-
-
-
-
-
-
+
);
PreviewModal.propTypes = {
intl: intlShape.isRequired,
+ isRtl: PropTypes.bool,
onCancel: PropTypes.func.isRequired,
onTryIt: PropTypes.func.isRequired,
onViewProject: PropTypes.func.isRequired
diff --git a/src/components/preview-modal/welcome.png b/src/components/preview-modal/welcome.png
index 520b619919b..1172df932b4 100644
Binary files a/src/components/preview-modal/welcome.png and b/src/components/preview-modal/welcome.png differ
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index 78e3ecb27c6..911271f1997 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -60,10 +60,14 @@
color: white;
}
-.button-row button + button {
+[dir="ltr"] .button-row button + button {
margin-left: 0.5rem;
}
+[dir="rtl"] .button-row button + button {
+ margin-right: 0.5rem;
+}
+
.more-options {
border-top: 1px dashed hsla(0, 0%, 0%, .25);
overflow: visible;
@@ -84,8 +88,15 @@
.more-options-icon {
width: .75rem;
height: .75rem;
- margin-left: .5rem;
vertical-align: middle;
padding-bottom: .2rem;
opacity: .5;
}
+
+[dir="ltr"] .more-options-icon {
+ margin-left: .5rem;
+}
+
+[dir="rtl"] .more-options-icon {
+ margin-right: .5rem;
+}
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index 3e5ec7950fc..78192f3adaa 100644
--- a/src/components/prompt/prompt.jsx
+++ b/src/components/prompt/prompt.jsx
@@ -4,7 +4,7 @@ import React from 'react';
import Box from '../box/box.jsx';
import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
import styles from './prompt.css';
@@ -48,6 +48,7 @@ const PromptComponent = props => (
+
+
+ General/Check
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/question/question.css b/src/components/question/question.css
index ad5e748e67f..a0f8116ed1a 100644
--- a/src/components/question/question.css
+++ b/src/components/question/question.css
@@ -1,13 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
-.question-wrapper {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
-}
-
.question-container {
margin: $space;
border: 1px solid $ui-black-transparent;
@@ -33,7 +26,6 @@
.question-submit-button {
position: absolute;
top: calc($space / 2);
- right: calc($space / 2);
width: calc(2rem - $space);
height: calc(2rem - $space);
@@ -45,13 +37,36 @@
background: $motion-primary;
}
+[dir="ltr"] .question-submit-button {
+ right: calc($space / 2);
+}
+
+[dir="rtl"] .question-submit-button {
+ left: calc($space / 2);
+}
+
/* Input overrides: width, font-weight, focus outline and padding */
.question-input > input {
width: 100%;
- padding: 0 2rem 0 0.75rem; /* To make room for the submit button */
font-weight: normal;
}
+[dir="ltr"] .question-input > input {
+ padding: 0 2rem 0 .75rem; /* To make room for the submit button */
+}
+
+[dir="rtl"] .question-input > input {
+ padding: 0 .75rem 0 2rem; /* To make room for the submit button */
+}
+
.question-input > input:focus {
box-shadow: 0px 0px 0px 3px $motion-transparent;
}
+
+.question-submit-button-icon {
+ width: calc(2rem - $space);
+ height: calc(2rem - $space);
+ position: relative;
+ right: -7px;
+ left: -7px;
+}
diff --git a/src/components/question/question.jsx b/src/components/question/question.jsx
index 2e8b9c9a531..373f7cb919c 100644
--- a/src/components/question/question.jsx
+++ b/src/components/question/question.jsx
@@ -2,17 +2,19 @@ import PropTypes from 'prop-types';
import React from 'react';
import styles from './question.css';
import Input from '../forms/input.jsx';
+import enterIcon from './icon--enter.svg';
const QuestionComponent = props => {
const {
answer,
+ className,
question,
onChange,
onClick,
onKeyPress
} = props;
return (
-
+
{question ? (
{question}
@@ -28,7 +30,11 @@ const QuestionComponent = props => {
className={styles.questionSubmitButton}
onClick={onClick}
>
- {'✔︎' /* @todo should this be an image? */}
+
@@ -38,6 +44,7 @@ const QuestionComponent = props => {
QuestionComponent.propTypes = {
answer: PropTypes.string,
+ className: PropTypes.string,
onChange: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
onKeyPress: PropTypes.func.isRequired,
diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx
index 40167172dea..8f76b506f33 100644
--- a/src/components/record-modal/playback-step.jsx
+++ b/src/components/record-modal/playback-step.jsx
@@ -87,7 +87,7 @@ const PlaybackStep = props => (
-
+
{props.playhead ? (
);
- const directionLabel = (
-
- );
+
+ const labelAbove = isWideLocale(this.props.intl.locale);
const spriteNameInput = (
-
+
{spriteNameInput}
@@ -167,7 +175,7 @@ class SpriteInfo extends React.Component {
{yPosition}
-
+
{
stageSize === STAGE_DISPLAY_SIZES.large ?
-
-
+
@@ -265,6 +268,7 @@ SpriteInfo.propTypes = {
name: PropTypes.string,
onChangeDirection: PropTypes.func,
onChangeName: PropTypes.func,
+ onChangeRotationStyle: PropTypes.func,
onChangeSize: PropTypes.func,
onChangeX: PropTypes.func,
onChangeY: PropTypes.func,
@@ -272,6 +276,7 @@ SpriteInfo.propTypes = {
onClickVisible: PropTypes.func,
onPressNotVisible: PropTypes.func,
onPressVisible: PropTypes.func,
+ rotationStyle: PropTypes.string,
size: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 32a5339a75c..d29d15c82c0 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -42,6 +42,8 @@
.sprite-image {
margin: auto;
user-select: none;
+ max-width: 32px;
+ max-height: 32px;
}
.sprite-info {
@@ -78,15 +80,29 @@
.delete-button {
position: absolute;
top: 0.125rem;
- right: 0.125rem;
z-index: 1;
}
+[dir="ltr"] .delete-button {
+ right: 0.125rem;
+}
+
+[dir="rtl"] .delete-button {
+ left: 0.125rem;
+}
+
.number {
position: absolute;
top: 0.15rem;
- left: 0.15rem;
font-size: 0.625rem;
font-weight: bold;
z-index: 2;
}
+
+[dir="ltr"] .number {
+ left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+ right: 0.15rem;
+}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index cb04c034ad6..50554f94060 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
import CloseButton from '../close-button/close-button.jsx';
import styles from './sprite-selector-item.css';
import {ContextMenuTrigger} from 'react-contextmenu';
@@ -38,11 +37,9 @@ const SpriteSelectorItem = props => (
{props.number}
)}
{props.costumeURL ? (
-
) : null}
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index a29912b7938..df42c6c28e9 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -53,8 +53,11 @@ const SpriteList = function (props) {
// Note the absence of the self-sharing check: a sprite can share assets with itself.
// This is a quirk of 2.0, but seems worth leaving possible, it
// allows quick (albeit unusual) duplication of assets.
- isRaised = isRaised || draggingType === DragConstants.COSTUME ||
- draggingType === DragConstants.SOUND;
+ isRaised = isRaised || [
+ DragConstants.COSTUME,
+ DragConstants.SOUND,
+ DragConstants.BACKPACK_COSTUME,
+ DragConstants.BACKPACK_SOUND].includes(draggingType);
return (
.sprite {
background: black;
- filter: opacity(15%) brightness(20%);
+ filter: opacity(15%) brightness(0%);
}
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index da09bf9ca00..ff594d0f118 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
-
import Box from '../box/box.jsx';
import SpriteInfo from '../../containers/sprite-info.jsx';
import SpriteList from './sprite-list.jsx';
import ActionMenu from '../action-menu/action-menu.jsx';
import {STAGE_DISPLAY_SIZES} from '../../lib/layout-constants';
+import {rtlLocales} from '../../lib/locale-utils';
import styles from './sprite-selector.css';
@@ -36,7 +36,7 @@ const messages = defineMessages({
addSpriteFromFile: {
id: 'gui.spriteSelector.addSpriteFromFile',
description: 'Button to add a sprite in the target pane from file',
- defaultMessage: 'Upload'
+ defaultMessage: 'Upload Sprite'
}
});
@@ -47,6 +47,7 @@ const SpriteSelectorComponent = function (props) {
intl,
onChangeSpriteDirection,
onChangeSpriteName,
+ onChangeSpriteRotationStyle,
onChangeSpriteSize,
onChangeSpriteVisibility,
onChangeSpriteX,
@@ -84,6 +85,7 @@ const SpriteSelectorComponent = function (props) {
direction={selectedSprite.direction}
disabled={spriteInfoDisabled}
name={selectedSprite.name}
+ rotationStyle={selectedSprite.rotationStyle}
size={selectedSprite.size}
stageSize={stageSize}
visible={selectedSprite.visible}
@@ -91,6 +93,7 @@ const SpriteSelectorComponent = function (props) {
y={selectedSprite.y}
onChangeDirection={onChangeSpriteDirection}
onChangeName={onChangeSpriteName}
+ onChangeRotationStyle={onChangeSpriteRotationStyle}
onChangeSize={onChangeSpriteSize}
onChangeVisibility={onChangeSpriteVisibility}
onChangeX={onChangeSpriteX}
@@ -137,6 +140,7 @@ const SpriteSelectorComponent = function (props) {
}
]}
title={intl.formatMessage(messages.addSpriteFromLibrary)}
+ tooltipPlace={rtlLocales.indexOf(intl.locale) === -1 ? 'left' : 'right'}
onClick={onNewSpriteClick}
/>
@@ -152,6 +156,7 @@ SpriteSelectorComponent.propTypes = {
intl: intlShape.isRequired,
onChangeSpriteDirection: PropTypes.func,
onChangeSpriteName: PropTypes.func,
+ onChangeSpriteRotationStyle: PropTypes.func,
onChangeSpriteSize: PropTypes.func,
onChangeSpriteVisibility: PropTypes.func,
onChangeSpriteX: PropTypes.func,
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 93ef5b4408a..3e6f59c75ac 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -22,7 +22,8 @@
flex-shrink: 0;
align-items: center;
height: $stage-menu-height;
- padding: $space;
+ padding-top: $space;
+ padding-bottom: $space;
}
.stage-size-row {
@@ -31,9 +32,16 @@
.stage-size-toggle-group {
display: flex;
+}
+
+[dir="ltr"] .stage-size-toggle-group {
margin-right: .2rem;
}
+[dir="rtl"] .stage-size-toggle-group {
+ margin-left: .2rem;
+}
+
.stage-button {
display: block;
border: 1px solid $ui-black-transparent;
@@ -51,13 +59,28 @@
height: 100%;
}
-.stage-button-right {
+[dir="rtl"] .stage-button-icon {
+ transform: scaleX(-1);
+}
+
+[dir="ltr"] .stage-button-first {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+[dir="ltr"] .stage-button-last {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
-.stage-button-left {
+[dir="rtl"] .stage-button-first {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+[dir="rtl"] .stage-button-last {
+ border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 21a156a95a6..43414179b7b 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -96,7 +96,7 @@ const StageHeaderComponent = function (props) {
{
const {
backdropCount,
+ containerRef,
+ dragOver,
fileInputRef,
intl,
selected,
@@ -60,9 +61,10 @@ const StageSelector = props => {
{
@@ -128,6 +128,8 @@ const StageSelector = props => {
StageSelector.propTypes = {
backdropCount: PropTypes.number.isRequired,
+ containerRef: PropTypes.func,
+ dragOver: PropTypes.bool,
fileInputRef: PropTypes.func,
intl: intlShape.isRequired,
onBackdropFileUpload: PropTypes.func,
diff --git a/src/components/stage-wrapper/stage-wrapper.css b/src/components/stage-wrapper/stage-wrapper.css
index 29ca66aa292..9f6ab5c6149 100644
--- a/src/components/stage-wrapper/stage-wrapper.css
+++ b/src/components/stage-wrapper/stage-wrapper.css
@@ -6,9 +6,6 @@
}
.stage-canvas-wrapper {
- padding-left: $space;
- padding-right: $space;
-
/* Hides negative space between edge of rounded corners + container, when selected */
user-select: none;
}
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 003947533ca..98a0c42a715 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -11,7 +11,7 @@
/* Attach border radius directly to canvas to prevent needing overflow:hidden; */
border-radius: $space;
- border: 1px solid $ui-black-transparent;
+ border: $stage-standard-border-width solid $ui-black-transparent;
/* @todo: This is for overriding the value being set somewhere. Where is it being set? */
background-color: transparent;
@@ -51,15 +51,17 @@
bottom: 0;
z-index: $z-index-stage-wrapper-overlay;
background-color: $ui-white;
+ /* spacing between stage and control bar (on the top), or between
+ stage and window edges (on left/right/bottom) */
+ padding: $stage-full-screen-stage-padding;
}
+/* wraps only main content of overlay player, not monitors */
.stage-overlay-content {
outline: none;
margin: auto;
- border: 3px solid rgb(126, 133, 151);
+ border: $stage-full-screen-border-width solid rgb(126, 133, 151);
padding: 0;
- margin-top: 3px;
- margin-bottom: 3px;
border-radius: $space;
overflow: hidden;
@@ -72,11 +74,22 @@
border: none;
}
-.question-wrapper {
- position: absolute;
+/* adjust monitors when stage is standard size:
+shift them down and right to compensate for the stage's border */
+.stage-wrapper .monitor-wrapper {
+ top: $stage-standard-border-width;
+ left: $stage-standard-border-width;
}
-.monitor-wrapper, .color-picker-wrapper, .queston-wrapper {
+/* adjust monitors when stage is full screen:
+.stage-wrapper-overlay uses position: fixed instead of relative, so we need
+to adjust for the border using a different method */
+.stage-wrapper-overlay .monitor-wrapper {
+ padding-top: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+ padding-bottom: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+}
+
+.monitor-wrapper, .color-picker-wrapper {
position: absolute;
top: 0;
left: 0;
@@ -93,3 +106,24 @@
z-index: $z-index-dragging-sprite;
filter: drop-shadow(5px 5px 5px $ui-black-transparent);
}
+
+.stage-bottom-wrapper {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ top: 0;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+.mic-indicator {
+ transform-origin: bottom right;
+ z-index: $z-index-stage-indicator;
+ pointer-events: none;
+ align-self: flex-end;
+}
+
+.question-wrapper {
+ pointer-events: auto;
+}
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index d8c0d07749b..9e1f3454dd1 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -7,6 +7,7 @@ import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
import Loupe from '../loupe/loupe.jsx';
import MonitorList from '../../containers/monitor-list.jsx';
import Question from '../../containers/question.jsx';
+import MicIndicator from '../mic-indicator/mic-indicator.jsx';
import {STAGE_DISPLAY_SIZES} from '../../lib/layout-constants.js';
import {getStageDimensions} from '../../lib/screen-utils.js';
import styles from './stage.css';
@@ -18,6 +19,7 @@ const StageComponent = props => {
isColorPicking,
isFullScreen,
colorInfo,
+ micIndicator,
question,
stageSize,
useEditorDragStyle,
@@ -66,13 +68,22 @@ const StageComponent = props => {
) : null}
- {question === null ? null : (
-
+
+ {micIndicator ? (
+
+ ) : null}
+ {question === null ? null : (
{
onQuestionAnswered={onQuestionAnswered}
/>
-
- )}
+ )}
+
(
- {title}
+
);
TagButtonComponent.propTypes = {
...Button.propTypes,
active: PropTypes.bool,
- title: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.object // FormattedMessage
- ]).isRequired
+ intlLabel: PropTypes.shape({
+ defaultMessage: PropTypes.string,
+ description: PropTypes.string,
+ id: PropTypes.string
+ }).isRequired,
+ tag: PropTypes.string.isRequired
};
TagButtonComponent.defaultProps = {
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 404283d19fd..07b07cb161a 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -11,5 +11,12 @@
display: flex;
flex-basis: 72px;
flex-shrink: 0;
+}
+
+[dir="ltr"] .stage-selector-wrapper {
margin-left: calc($space / 2);
}
+
+[dir="rtl"] .stage-selector-wrapper {
+ margin-right: calc($space / 2);
+}
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index c620c8504c1..565c9881cf4 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -23,6 +23,7 @@ const TargetPane = ({
spriteLibraryVisible,
onChangeSpriteDirection,
onChangeSpriteName,
+ onChangeSpriteRotationStyle,
onChangeSpriteSize,
onChangeSpriteVisibility,
onChangeSpriteX,
@@ -60,6 +61,7 @@ const TargetPane = ({
stageSize={stageSize}
onChangeSpriteDirection={onChangeSpriteDirection}
onChangeSpriteName={onChangeSpriteName}
+ onChangeSpriteRotationStyle={onChangeSpriteRotationStyle}
onChangeSpriteSize={onChangeSpriteSize}
onChangeSpriteVisibility={onChangeSpriteVisibility}
onChangeSpriteX={onChangeSpriteX}
@@ -128,6 +130,7 @@ TargetPane.propTypes = {
}),
onChangeSpriteDirection: PropTypes.func,
onChangeSpriteName: PropTypes.func,
+ onChangeSpriteRotationStyle: PropTypes.func,
onChangeSpriteSize: PropTypes.func,
onChangeSpriteVisibility: PropTypes.func,
onChangeSpriteX: PropTypes.func,
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index f1b6ff6efee..10eed71f1d4 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -34,6 +34,10 @@
background-size: cover;
}
+[dir="rtl"] .illustration {
+ transform: scaleX(-1);
+}
+
.body {
background: $ui-white;
padding: 1.5rem 2.25rem;
diff --git a/src/components/webgl-modal/webgl-modal.jsx b/src/components/webgl-modal/webgl-modal.jsx
index 0a7b753aae4..faf5ac55171 100644
--- a/src/components/webgl-modal/webgl-modal.jsx
+++ b/src/components/webgl-modal/webgl-modal.jsx
@@ -22,76 +22,79 @@ const WebGlModal = ({intl, ...props}) => (
overlayClassName={styles.modalOverlay}
onRequestClose={props.onBack}
>
-
+
-
-
-
-
- { /* eslint-disable max-len */ }
-
-
-
-
-
+
+
+
+
+ { /* eslint-disable max-len */ }
+
+ { /* eslint-enable max-len */ }
+
+
+
+
+
+
+
-
-
+
({
state.scratchGui.mode.isFullScreen
),
extensionLibraryVisible: state.scratchGui.modals.extensionLibrary,
+ isRtl: state.locales.isRtl,
locale: state.locales.locale,
messages: state.locales.messages,
toolboxXML: state.scratchGui.toolbox.toolboxXML,
diff --git a/src/containers/cards.jsx b/src/containers/cards.jsx
index 5dc081f7b96..2e4b92e5af0 100644
--- a/src/containers/cards.jsx
+++ b/src/containers/cards.jsx
@@ -23,6 +23,7 @@ const mapStateToProps = state => ({
step: state.scratchGui.cards.step,
x: state.scratchGui.cards.x,
y: state.scratchGui.cards.y,
+ isRtl: state.locales.isRtl,
dragging: state.scratchGui.cards.dragging
});
diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx
index 3b1a68b3adc..164f2455bb6 100644
--- a/src/containers/connection-modal.jsx
+++ b/src/containers/connection-modal.jsx
@@ -3,6 +3,7 @@ import React from 'react';
import bindAll from 'lodash.bindall';
import ConnectionModalComponent, {PHASES} from '../components/connection-modal/connection-modal.jsx';
import VM from 'scratch-vm';
+import analytics from '../lib/analytics';
class ConnectionModal extends React.Component {
constructor (props) {
@@ -12,21 +13,17 @@ class ConnectionModal extends React.Component {
'handleConnected',
'handleConnecting',
'handleDisconnect',
- 'handleError'
+ 'handleError',
+ 'handleHelp'
]);
this.state = {
- phase: PHASES.scanning
+ phase: props.vm.getPeripheralIsConnected(props.extensionId) ?
+ PHASES.connected : PHASES.scanning
};
}
componentDidMount () {
this.props.vm.on('PERIPHERAL_CONNECTED', this.handleConnected);
this.props.vm.on('PERIPHERAL_ERROR', this.handleError);
-
- // Check if we're already connected
- if (this.props.vm.getPeripheralIsConnected(this.props.extensionId)) {
- this.handleConnected();
- }
-
}
componentWillUnmount () {
this.props.vm.removeListener('PERIPHERAL_CONNECTED', this.handleConnected);
@@ -38,20 +35,25 @@ class ConnectionModal extends React.Component {
});
}
handleConnecting (peripheralId) {
- this.props.vm.connectToPeripheral(this.props.extensionId, peripheralId);
+ this.props.vm.connectPeripheral(this.props.extensionId, peripheralId);
this.setState({
phase: PHASES.connecting
});
+ analytics.event({
+ category: 'extensions',
+ action: 'connecting',
+ label: this.props.extensionId
+ });
}
handleDisconnect () {
this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
- this.props.vm.disconnectExtensionSession(this.props.extensionId);
+ this.props.vm.disconnectPeripheral(this.props.extensionId);
this.props.onCancel();
}
handleCancel () {
- // If we're not connected to a device, close the websocket so we stop scanning.
+ // If we're not connected to a peripheral, close the websocket so we stop scanning.
if (!this.props.vm.getPeripheralIsConnected(this.props.extensionId)) {
- this.props.vm.disconnectExtensionSession(this.props.extensionId);
+ this.props.vm.disconnectPeripheral(this.props.extensionId);
}
this.props.onCancel();
}
@@ -67,6 +69,11 @@ class ConnectionModal extends React.Component {
this.setState({
phase: PHASES.error
});
+ analytics.event({
+ category: 'extensions',
+ action: 'connecting error',
+ label: this.props.extensionId
+ });
}
}
handleConnected () {
@@ -74,19 +81,32 @@ class ConnectionModal extends React.Component {
this.setState({
phase: PHASES.connected
});
+ analytics.event({
+ category: 'extensions',
+ action: 'connected',
+ label: this.props.extensionId
+ });
}
handleHelp () {
- // @todo: implement the help button
+ window.open(this.props.helpLink, '_blank');
+ analytics.event({
+ category: 'extensions',
+ action: 'help',
+ label: this.props.extensionId
+ });
}
render () {
return (
{(restoreDeletion, props) => (
+ *
+ */
+class DeletionRestorer extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'restoreDeletion'
+ ]);
+ }
+ restoreDeletion () {
+ if (typeof this.props.restore === 'function') {
+ this.props.restore();
+ this.props.dispatchUpdateRestore({restoreFun: null, deletedItem: ''});
+ }
+ }
+ render () {
+ const {
+ /* eslint-disable no-unused-vars */
+ children,
+ dispatchUpdateRestore,
+ /* eslint-enable no-unused-vars */
+ ...props
+ } = this.props;
+ const restorable = typeof this.props.restore === 'function';
+ return this.props.children(this.restoreDeletion, {
+ ...props,
+ restorable
+ });
+ }
+}
+
+DeletionRestorer.propTypes = {
+ children: PropTypes.func,
+ deletedItem: PropTypes.string,
+ dispatchUpdateRestore: PropTypes.func,
+ restore: PropTypes.func
+};
+
+const mapStateToProps = state => ({
+ deletedItem: state.scratchGui.restoreDeletion.deletedItem,
+ restore: state.scratchGui.restoreDeletion.restoreFun
+});
+const mapDispatchToProps = dispatch => ({
+ dispatchUpdateRestore: updatedState => {
+ dispatch(setRestore(updatedState));
+ }
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(DeletionRestorer);
diff --git a/src/containers/direction-picker.jsx b/src/containers/direction-picker.jsx
new file mode 100644
index 00000000000..dcb943568ff
--- /dev/null
+++ b/src/containers/direction-picker.jsx
@@ -0,0 +1,64 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import DirectionComponent, {RotationStyles} from '../components/direction-picker/direction-picker.jsx';
+
+class DirectionPicker extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleOpenPopover',
+ 'handleClosePopover',
+ 'handleClickLeftRight',
+ 'handleClickDontRotate',
+ 'handleClickAllAround'
+ ]);
+ this.state = {
+ popoverOpen: false
+ };
+ }
+ handleOpenPopover () {
+ this.setState({popoverOpen: true});
+ }
+ handleClosePopover () {
+ this.setState({popoverOpen: false});
+ }
+ handleClickAllAround () {
+ this.props.onChangeRotationStyle(RotationStyles.ALL_AROUND);
+ }
+ handleClickLeftRight () {
+ this.props.onChangeRotationStyle(RotationStyles.LEFT_RIGHT);
+ }
+ handleClickDontRotate () {
+ this.props.onChangeRotationStyle(RotationStyles.DONT_ROTATE);
+ }
+ render () {
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+MenuItem.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ // can take an onClick prop, or take an href and build an onClick handler
+ href: PropTypes.string,
+ onClick: PropTypes.func
+};
+
+export default MenuItem;
diff --git a/src/containers/modal.jsx b/src/containers/modal.jsx
index 67b14c9ff44..30dc4277b56 100644
--- a/src/containers/modal.jsx
+++ b/src/containers/modal.jsx
@@ -1,6 +1,7 @@
import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
+import {connect} from 'react-redux';
import ModalComponent from '../components/modal/modal.jsx';
@@ -47,8 +48,15 @@ class Modal extends React.Component {
Modal.propTypes = {
id: PropTypes.string.isRequired,
+ isRtl: PropTypes.bool,
onRequestClose: PropTypes.func,
onRequestOpen: PropTypes.func
};
-export default Modal;
+const mapStateToProps = state => ({
+ isRtl: state.locales.isRtl
+});
+
+export default connect(
+ mapStateToProps
+)(Modal);
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index b39358c08fe..2f04cb51b7f 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -7,6 +7,7 @@ import MonitorComponent, {monitorModes} from '../components/monitor/monitor.jsx'
import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect} from '../reducers/monitor-layout';
import {connect} from 'react-redux';
+import VM from 'scratch-vm';
const availableModes = opcode => (
monitorModes.filter(t => {
@@ -147,12 +148,14 @@ Monitor.propTypes = {
PropTypes.number
]))
]), // eslint-disable-line react/no-unused-prop-types
+ vm: PropTypes.instanceOf(VM),
width: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number
};
const mapStateToProps = state => ({
- monitorLayout: state.scratchGui.monitorLayout
+ monitorLayout: state.scratchGui.monitorLayout,
+ vm: state.scratchGui.vm
});
const mapDispatchToProps = dispatch => ({
addMonitorRect: (id, rect, savePosition) =>
diff --git a/src/containers/paint-editor-wrapper.jsx b/src/containers/paint-editor-wrapper.jsx
index 390f6ef598b..b950829028c 100644
--- a/src/containers/paint-editor-wrapper.jsx
+++ b/src/containers/paint-editor-wrapper.jsx
@@ -19,6 +19,11 @@ class PaintEditorWrapper extends React.Component {
componentDidMount () {
analytics.pageview('/editors/paint');
}
+ shouldComponentUpdate (nextProps) {
+ return this.props.imageId !== nextProps.imageId ||
+ this.props.rtl !== nextProps.rtl ||
+ this.props.name !== nextProps.name;
+ }
handleUpdateName (name) {
this.props.vm.renameCostume(this.props.selectedCostumeIndex, name);
}
@@ -40,9 +45,16 @@ class PaintEditorWrapper extends React.Component {
}
render () {
if (!this.props.imageId) return null;
+ const {
+ selectedCostumeIndex,
+ vm,
+ ...componentProps
+ } = this.props;
+
return (
({
+ isRtl: state.locales.isRtl
+});
+
+const mapDispatchToProps = () => ({});
+
+export default injectIntl(connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(SoundLibrary));
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
index 2245f3d2f6a..9631b30d358 100644
--- a/src/containers/sound-tab.jsx
+++ b/src/containers/sound-tab.jsx
@@ -6,6 +6,7 @@ import VM from 'scratch-vm';
import AssetPanel from '../components/asset-panel/asset-panel.jsx';
import soundIcon from '../components/asset-panel/icon--sound.svg';
+import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg';
import addSoundFromLibraryIcon from '../components/asset-panel/icon--add-sound-lib.svg';
import addSoundFromRecordingIcon from '../components/asset-panel/icon--add-sound-record.svg';
import fileUploadIcon from '../components/action-menu/icon--file-upload.svg';
@@ -34,6 +35,8 @@ import {
COSTUMES_TAB_INDEX
} from '../reducers/editor-tab';
+import {setRestore} from '../reducers/restore-deletion';
+
class SoundTab extends React.Component {
constructor (props) {
super(props);
@@ -76,10 +79,11 @@ class SoundTab extends React.Component {
}
handleDeleteSound (soundIndex) {
- this.props.vm.deleteSound(soundIndex);
+ const restoreFun = this.props.vm.deleteSound(soundIndex);
if (soundIndex >= this.state.selectedSoundIndex) {
this.setState({selectedSoundIndex: Math.max(0, soundIndex - 1)});
}
+ this.props.dispatchUpdateRestore({restoreFun, deletedItem: 'Sound'});
}
handleDuplicateSound (soundIndex) {
@@ -153,7 +157,9 @@ class SoundTab extends React.Component {
render () {
const {
+ dispatchUpdateRestore, // eslint-disable-line no-unused-vars
intl,
+ isRtl,
vm,
onNewSoundFromLibraryClick,
onNewSoundFromRecordingClick
@@ -167,7 +173,7 @@ class SoundTab extends React.Component {
const sounds = sprite.sounds ? sprite.sounds.map(sound => (
{
- url: soundIcon,
+ url: isRtl ? soundIconRtl : soundIcon,
name: sound.name,
details: (sound.sampleCount / sound.rate).toFixed(2),
dragPayload: sound
@@ -252,8 +258,10 @@ class SoundTab extends React.Component {
}
SoundTab.propTypes = {
+ dispatchUpdateRestore: PropTypes.func,
editingTarget: PropTypes.string,
intl: intlShape,
+ isRtl: PropTypes.bool,
onActivateCostumesTab: PropTypes.func.isRequired,
onNewSoundFromLibraryClick: PropTypes.func.isRequired,
onNewSoundFromRecordingClick: PropTypes.func.isRequired,
@@ -277,6 +285,7 @@ SoundTab.propTypes = {
const mapStateToProps = state => ({
editingTarget: state.scratchGui.targets.editingTarget,
+ isRtl: state.locales.isRtl,
sprites: state.scratchGui.targets.sprites,
stage: state.scratchGui.targets.stage,
soundLibraryVisible: state.scratchGui.modals.soundLibrary,
@@ -294,6 +303,9 @@ const mapDispatchToProps = dispatch => ({
},
onRequestCloseSoundLibrary: () => {
dispatch(closeSoundLibrary());
+ },
+ dispatchUpdateRestore: restoreState => {
+ dispatch(setRestore(restoreState));
}
});
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index 785f9d08f49..9b154c59b0a 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -6,15 +6,20 @@ import {connect} from 'react-redux';
import {setHoveredSprite} from '../reducers/hovered-target';
import {updateAssetDrag} from '../reducers/asset-drag';
import {getEventXY} from '../lib/touch-utils';
+import VM from 'scratch-vm';
+import {SVGRenderer} from 'scratch-svg-renderer';
import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
const dragThreshold = 3; // Same as the block drag threshold
+// Contains 'font-family', but doesn't only contain 'font-family="none"'
+const HAS_FONT_REGEXP = 'font-family(?!="none")';
class SpriteSelectorItem extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
+ 'getCostumeUrl',
'handleClick',
'handleDelete',
'handleDuplicate',
@@ -25,6 +30,46 @@ class SpriteSelectorItem extends React.Component {
'handleMouseMove',
'handleMouseUp'
]);
+ this.svgRenderer = new SVGRenderer();
+ // Asset ID of the SVG currently in SVGRenderer
+ this.decodedAssetId = null;
+ }
+ shouldComponentUpdate (nextProps) {
+ // Ignore dragPayload due to https://github.com/LLK/scratch-gui/issues/3172.
+ // This function should be removed once the issue is fixed.
+ for (const property in nextProps) {
+ if (property !== 'dragPayload' && this.props[property] !== nextProps[property]) {
+ return true;
+ }
+ }
+ return false;
+ }
+ getCostumeUrl () {
+ if (this.props.costumeURL) return this.props.costumeURL;
+ if (!this.props.assetId) return null;
+
+ const storage = this.props.vm.runtime.storage;
+ const asset = storage.get(this.props.assetId);
+ // If the SVG refers to fonts, they must be inlined in order to display correctly in the img tag.
+ // Avoid parsing the SVG when possible, since it's expensive.
+ if (asset.assetType === storage.AssetType.ImageVector) {
+ // If the asset ID has not changed, no need to re-parse
+ if (this.decodedAssetId === this.props.assetId) {
+ // @todo consider caching more than one URL.
+ return this.cachedUrl;
+ }
+ this.decodedAssetId = this.props.assetId;
+ const svgString = this.props.vm.runtime.storage.get(this.props.assetId).decodeText();
+ if (svgString.match(HAS_FONT_REGEXP)) {
+ this.svgRenderer.loadString(svgString);
+ const svgText = this.svgRenderer.toString(true /* shouldInjectFonts */);
+ this.cachedUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
+ } else {
+ this.cachedUrl = this.props.vm.runtime.storage.get(this.props.assetId).encodeDataURI();
+ }
+ return this.cachedUrl;
+ }
+ return this.props.vm.runtime.storage.get(this.props.assetId).encodeDataURI();
}
handleMouseUp () {
this.initialOffset = null;
@@ -49,7 +94,7 @@ class SpriteSelectorItem extends React.Component {
const dy = currentOffset.y - this.initialOffset.y;
if (Math.sqrt((dx * dx) + (dy * dy)) > dragThreshold) {
this.props.onDrag({
- img: this.props.costumeURL,
+ img: this.getCostumeUrl(),
currentOffset: currentOffset,
dragging: true,
dragType: this.props.dragType,
@@ -75,11 +120,7 @@ class SpriteSelectorItem extends React.Component {
}
handleDelete (e) {
e.stopPropagation(); // To prevent from bubbling back to handleClick
- // @todo add i18n here
- // eslint-disable-next-line no-alert
- if (window.confirm('Are you sure you want to delete this?')) {
- this.props.onDeleteButtonClick(this.props.id);
- }
+ this.props.onDeleteButtonClick(this.props.id);
}
handleDuplicate (e) {
e.stopPropagation(); // To prevent from bubbling back to handleClick
@@ -107,11 +148,14 @@ class SpriteSelectorItem extends React.Component {
onExportButtonClick,
dragPayload,
receivedBlocks,
+ costumeURL,
+ vm,
/* eslint-enable no-unused-vars */
...props
} = this.props;
return (
({
- costumeURL: costumeURL || (assetId && state.scratchGui.vm.runtime.storage.get(assetId).encodeDataURI()),
+const mapStateToProps = (state, {id}) => ({
dragging: state.scratchGui.assetDrag.dragging,
receivedBlocks: state.scratchGui.hoveredTarget.receivedBlocks &&
- state.scratchGui.hoveredTarget.sprite === id
+ state.scratchGui.hoveredTarget.sprite === id,
+ vm: state.scratchGui.vm
});
const mapDispatchToProps = dispatch => ({
dispatchSetHoveredSprite: spriteId => {
@@ -159,7 +204,12 @@ const mapDispatchToProps = dispatch => ({
onDrag: data => dispatch(updateAssetDrag(data))
});
-export default connect(
+const ConnectedComponent = connect(
mapStateToProps,
mapDispatchToProps
)(SpriteSelectorItem);
+
+export {
+ ConnectedComponent as default,
+ HAS_FONT_REGEXP // Exposed for testing
+};
diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx
index 99c233c7d8e..ad302d51d3b 100644
--- a/src/containers/stage-selector.jsx
+++ b/src/containers/stage-selector.jsx
@@ -2,18 +2,31 @@ import bindAll from 'lodash.bindall';
import omit from 'lodash.omit';
import PropTypes from 'prop-types';
import React from 'react';
+import {intlShape, injectIntl} from 'react-intl';
import {connect} from 'react-redux';
import {openBackdropLibrary} from '../reducers/modals';
import {activateTab, COSTUMES_TAB_INDEX} from '../reducers/editor-tab';
import {setHoveredSprite} from '../reducers/hovered-target';
+import DragConstants from '../lib/drag-constants';
+import DropAreaHOC from '../lib/drop-area-hoc.jsx';
+import {emptyCostume} from '../lib/empty-assets';
+import sharedMessages from '../lib/shared-messages';
import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
import backdropLibraryContent from '../lib/libraries/backdrops.json';
-import costumeLibraryContent from '../lib/libraries/costumes.json';
import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
+const dragTypes = [
+ DragConstants.COSTUME,
+ DragConstants.SOUND,
+ DragConstants.BACKPACK_COSTUME,
+ DragConstants.BACKPACK_SOUND
+];
+
+const DroppableStage = DropAreaHOC(dragTypes)(StageSelectorComponent);
+
class StageSelector extends React.Component {
constructor (props) {
super(props);
@@ -27,6 +40,7 @@ class StageSelector extends React.Component {
'handleBackdropUpload',
'handleMouseEnter',
'handleMouseLeave',
+ 'handleDrop',
'setFileInput'
]);
}
@@ -54,11 +68,7 @@ class StageSelector extends React.Component {
this.addBackdropFromLibraryItem(item);
}
handleEmptyBackdrop () {
- // @todo this is brittle, will need to be refactored for localized libraries
- const emptyItem = costumeLibraryContent.find(item => item.name === 'Empty');
- if (emptyItem) {
- this.addBackdropFromLibraryItem(emptyItem);
- }
+ this.handleNewBackdrop(emptyCostume(this.props.intl.formatMessage(sharedMessages.backdrop, {index: 1})));
}
handleBackdropUpload (e) {
const storage = this.props.vm.runtime.storage;
@@ -75,23 +85,39 @@ class StageSelector extends React.Component {
handleMouseLeave () {
this.props.dispatchSetHoveredSprite(null);
}
+ handleDrop (dragInfo) {
+ if (dragInfo.dragType === DragConstants.COSTUME) {
+ this.props.vm.shareCostumeToTarget(dragInfo.index, this.props.id);
+ } else if (dragInfo.dragType === DragConstants.SOUND) {
+ this.props.vm.shareSoundToTarget(dragInfo.index, this.props.id);
+ } else if (dragInfo.dragType === DragConstants.BACKPACK_COSTUME) {
+ this.props.vm.addCostume(dragInfo.payload.body, {
+ name: dragInfo.payload.name
+ }, this.props.id);
+ } else if (dragInfo.dragType === DragConstants.BACKPACK_SOUND) {
+ this.props.vm.addSound({
+ md5: dragInfo.payload.body,
+ name: dragInfo.payload.name
+ }, this.props.id);
+ }
+ }
setFileInput (input) {
this.fileInput = input;
}
render () {
const componentProps = omit(this.props, [
- 'assetId', 'dispatchSetHoveredSprite', 'id', 'onActivateTab', 'onSelect']);
+ 'assetId', 'dispatchSetHoveredSprite', 'id', 'intl', 'onActivateTab', 'onSelect']);
return (
- {(toggleTurboMode, props) => (
+ *
+
+ help
+ Created with Sketch.
+
+
+
\ No newline at end of file
diff --git a/src/lib/backpack-api.js b/src/lib/backpack-api.js
index f0c51f14040..9453f197709 100644
--- a/src/lib/backpack-api.js
+++ b/src/lib/backpack-api.js
@@ -12,7 +12,7 @@ const getBackpackContents = ({
}) => new Promise((resolve, reject) => {
xhr({
method: 'GET',
- uri: `${host}${username}?limit=${limit}&offset=${offset}`,
+ uri: `${host}/${username}?limit=${limit}&offset=${offset}`,
headers: {'x-token': token},
json: true
}, (error, response) => {
@@ -43,7 +43,7 @@ const saveBackpackObject = ({
}) => new Promise((resolve, reject) => {
xhr({
method: 'POST',
- uri: `${host}${username}`,
+ uri: `${host}/${username}`,
headers: {'x-token': token},
json: {type, mime, name, body, thumbnail}
}, (error, response) => {
@@ -62,7 +62,7 @@ const deleteBackpackObject = ({
}) => new Promise((resolve, reject) => {
xhr({
method: 'DELETE',
- uri: `${host}${username}/${id}`,
+ uri: `${host}/${username}/${id}`,
headers: {'x-token': token}
}, (error, response) => {
if (error || response.statusCode !== 200) {
diff --git a/src/lib/default-project/index.js b/src/lib/default-project/index.js
index 332e1bd98de..df1154b6e8a 100644
--- a/src/lib/default-project/index.js
+++ b/src/lib/default-project/index.js
@@ -1,5 +1,5 @@
import {TextEncoder} from 'text-encoding';
-import projectJson from './project.json';
+import projectData from './project-data';
/* eslint-disable import/no-unresolved */
import popWav from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
@@ -10,34 +10,39 @@ import costume2 from '!raw-loader!./3696356a03a8d938318876a593572843.svg';
/* eslint-enable import/no-unresolved */
const encoder = new TextEncoder();
-export default [{
- id: 0,
- assetType: 'Project',
- dataFormat: 'JSON',
- data: JSON.stringify(projectJson)
-}, {
- id: '83a9787d4cb6f3b7632b4ddfebf74367',
- assetType: 'Sound',
- dataFormat: 'WAV',
- data: new Uint8Array(popWav)
-}, {
- id: '83c36d806dc92327b9e7049a565c6bff',
- assetType: 'Sound',
- dataFormat: 'WAV',
- data: new Uint8Array(meowWav)
-}, {
- id: 'cd21514d0531fdffb22204e0ec5ed84a',
- assetType: 'ImageVector',
- dataFormat: 'SVG',
- data: encoder.encode(backdrop)
-}, {
- id: '09dc888b0b7df19f70d81588ae73420e',
- assetType: 'ImageVector',
- dataFormat: 'SVG',
- data: encoder.encode(costume1)
-}, {
- id: '3696356a03a8d938318876a593572843',
- assetType: 'ImageVector',
- dataFormat: 'SVG',
- data: encoder.encode(costume2)
-}];
+const defaultProject = translator => {
+ const projectJson = projectData(translator);
+ return [{
+ id: 0,
+ assetType: 'Project',
+ dataFormat: 'JSON',
+ data: JSON.stringify(projectJson)
+ }, {
+ id: '83a9787d4cb6f3b7632b4ddfebf74367',
+ assetType: 'Sound',
+ dataFormat: 'WAV',
+ data: new Uint8Array(popWav)
+ }, {
+ id: '83c36d806dc92327b9e7049a565c6bff',
+ assetType: 'Sound',
+ dataFormat: 'WAV',
+ data: new Uint8Array(meowWav)
+ }, {
+ id: 'cd21514d0531fdffb22204e0ec5ed84a',
+ assetType: 'ImageVector',
+ dataFormat: 'SVG',
+ data: encoder.encode(backdrop)
+ }, {
+ id: '09dc888b0b7df19f70d81588ae73420e',
+ assetType: 'ImageVector',
+ dataFormat: 'SVG',
+ data: encoder.encode(costume1)
+ }, {
+ id: '3696356a03a8d938318876a593572843',
+ assetType: 'ImageVector',
+ dataFormat: 'SVG',
+ data: encoder.encode(costume2)
+ }];
+};
+
+export default defaultProject;
diff --git a/src/lib/default-project/project-data.js b/src/lib/default-project/project-data.js
new file mode 100644
index 00000000000..e108eaa17ed
--- /dev/null
+++ b/src/lib/default-project/project-data.js
@@ -0,0 +1,128 @@
+import {defineMessages} from 'react-intl';
+import sharedMessages from '../shared-messages';
+
+let messages = defineMessages({
+ meow: {
+ defaultMessage: 'Meow',
+ description: 'Name for the meow sound',
+ id: 'gui.defaultProject.meow'
+ },
+ variable: {
+ defaultMessage: 'my variable',
+ description: 'Name for the default variable',
+ id: 'gui.defaultProject.variable'
+ }
+});
+
+messages = {...messages, ...sharedMessages};
+
+// use the default message if a translation function is not passed
+const defaultTranslator = msgObj => msgObj.defaultMessage;
+
+/**
+ * Generate a localized version of the default project
+ * @param {function} translateFunction a function to use for translating the default names
+ * @return {object} the project data json for the default project
+ */
+const projectData = translateFunction => {
+ const translator = translateFunction || defaultTranslator;
+ return ({
+ targets: [
+ {
+ isStage: true,
+ name: 'Stage',
+ variables: {
+ '`jEk@4|i[#Fk?(8x)AV.-my variable': [
+ translator(messages.variable),
+ 0
+ ]
+ },
+ lists: {},
+ broadcasts: {},
+ blocks: {},
+ currentCostume: 0,
+ costumes: [
+ {
+ assetId: 'cd21514d0531fdffb22204e0ec5ed84a',
+ name: translator(messages.backdrop, {index: 1}),
+ md5ext: 'cd21514d0531fdffb22204e0ec5ed84a.svg',
+ dataFormat: 'svg',
+ rotationCenterX: 240,
+ rotationCenterY: 180
+ }
+ ],
+ sounds: [
+ {
+ assetId: '83a9787d4cb6f3b7632b4ddfebf74367',
+ name: translator(messages.pop),
+ dataFormat: 'wav',
+ format: '',
+ rate: 11025,
+ sampleCount: 258,
+ md5ext: '83a9787d4cb6f3b7632b4ddfebf74367.wav'
+ }
+ ],
+ volume: 100,
+ tempo: 60,
+ videoTransparency: 50,
+ videoState: 'off'
+ },
+ {
+ isStage: false,
+ name: translator(messages.sprite, {index: 1}),
+ variables: {},
+ lists: {},
+ broadcasts: {},
+ blocks: {},
+ currentCostume: 0,
+ costumes: [
+ {
+ assetId: '09dc888b0b7df19f70d81588ae73420e',
+ name: translator(messages.costume, {index: 1}),
+ bitmapResolution: 1,
+ md5ext: '09dc888b0b7df19f70d81588ae73420e.svg',
+ dataFormat: 'svg',
+ rotationCenterX: 47,
+ rotationCenterY: 55
+ },
+ {
+ assetId: '3696356a03a8d938318876a593572843',
+ name: translator(messages.costume, {index: 2}),
+ bitmapResolution: 1,
+ md5ext: '3696356a03a8d938318876a593572843.svg',
+ dataFormat: 'svg',
+ rotationCenterX: 47,
+ rotationCenterY: 55
+ }
+ ],
+ sounds: [
+ {
+ assetId: '83c36d806dc92327b9e7049a565c6bff',
+ name: translator(messages.meow),
+ dataFormat: 'wav',
+ format: '',
+ rate: 22050,
+ sampleCount: 18688,
+ md5ext: '83c36d806dc92327b9e7049a565c6bff.wav'
+ }
+ ],
+ volume: 100,
+ visible: true,
+ x: 0,
+ y: 0,
+ size: 100,
+ direction: 90,
+ draggable: false,
+ rotationStyle: 'all around'
+ }
+ ],
+ meta: {
+ semver: '3.0.0',
+ vm: '0.1.0',
+ agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36' // eslint-disable-line max-len
+ }
+ });
+};
+
+
+export default projectData;
diff --git a/src/lib/default-project/project.json b/src/lib/default-project/project.json
deleted file mode 100755
index 6ffa9fa3c71..00000000000
--- a/src/lib/default-project/project.json
+++ /dev/null
@@ -1,96 +0,0 @@
-{
- "targets": [
- {
- "isStage": true,
- "name": "Stage",
- "variables": {
- "`jEk@4|i[#Fk?(8x)AV.-my variable": [
- "my variable",
- 0
- ]
- },
- "lists": {},
- "broadcasts": {},
- "blocks": {},
- "currentCostume": 0,
- "costumes": [
- {
- "assetId": "cd21514d0531fdffb22204e0ec5ed84a",
- "name": "backdrop1",
- "md5ext": "cd21514d0531fdffb22204e0ec5ed84a.svg",
- "dataFormat": "svg",
- "rotationCenterX": 240,
- "rotationCenterY": 180
- }
- ],
- "sounds": [
- {
- "assetId": "83a9787d4cb6f3b7632b4ddfebf74367",
- "name": "pop",
- "dataFormat": "wav",
- "format": "",
- "rate": 11025,
- "sampleCount": 258,
- "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav"
- }
- ],
- "volume": 100,
- "tempo": 60,
- "videoTransparency": 50,
- "videoState": "off"
- },
- {
- "isStage": false,
- "name": "Sprite1",
- "variables": {},
- "lists": {},
- "broadcasts": {},
- "blocks": {},
- "currentCostume": 0,
- "costumes": [
- {
- "assetId": "09dc888b0b7df19f70d81588ae73420e",
- "name": "costume1",
- "bitmapResolution": 1,
- "md5ext": "09dc888b0b7df19f70d81588ae73420e.svg",
- "dataFormat": "svg",
- "rotationCenterX": 47,
- "rotationCenterY": 55
- },
- {
- "assetId": "3696356a03a8d938318876a593572843",
- "name": "costume2",
- "bitmapResolution": 1,
- "md5ext": "3696356a03a8d938318876a593572843.svg",
- "dataFormat": "svg",
- "rotationCenterX": 47,
- "rotationCenterY": 55
- }
- ],
- "sounds": [
- {
- "assetId": "83c36d806dc92327b9e7049a565c6bff",
- "name": "Meow",
- "dataFormat": "wav",
- "format": "",
- "rate": 22050,
- "sampleCount": 18688,
- "md5ext": "83c36d806dc92327b9e7049a565c6bff.wav"
- }
- ],
- "volume": 100,
- "visible": true,
- "x": 0,
- "y": 0,
- "size": 100,
- "direction": 90,
- "draggable": false,
- "rotationStyle": "all around"
- }
- ],
- "meta": {
- "semver": "3.0.0",
- "vm": "0.1.0",
- "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36"
- }
-}
diff --git a/src/lib/drop-area-hoc.jsx b/src/lib/drop-area-hoc.jsx
new file mode 100644
index 00000000000..9f44293e88c
--- /dev/null
+++ b/src/lib/drop-area-hoc.jsx
@@ -0,0 +1,88 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import omit from 'lodash.omit';
+import {connect} from 'react-redux';
+
+const DropAreaHOC = function (dragTypes) {
+ return function (WrappedComponent) {
+ class DropAreaWrapper extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'setRef'
+ ]);
+
+ this.state = {
+ dragOver: false
+ };
+
+ this.ref = null;
+ this.containerBox = null;
+ }
+
+ componentWillReceiveProps (newProps) {
+ // If `dragging` becomes true, record the drop area rectangle
+ if (newProps.dragInfo.dragging && !this.props.dragInfo.dragging) {
+ this.dropAreaRect = this.ref && this.ref.getBoundingClientRect();
+ // If `dragging` becomes false, call the drop handler
+ } else if (!newProps.dragInfo.dragging && this.props.dragInfo.dragging && this.state.dragOver) {
+ this.props.onDrop(this.props.dragInfo);
+ this.setState({dragOver: false});
+ }
+
+ // If a drag is in progress (currentOffset) and it matches the relevant drag types,
+ // test if the drag is within the drop area rect and set the state accordingly.
+ if (this.dropAreaRect && newProps.dragInfo.currentOffset &&
+ dragTypes.includes(newProps.dragInfo.dragType)) {
+ const {x, y} = newProps.dragInfo.currentOffset;
+ const {top, right, bottom, left} = this.dropAreaRect;
+ if (x > left && x < right && y > top && y < bottom) {
+ this.setState({dragOver: true});
+ } else {
+ this.setState({dragOver: false});
+ }
+ }
+ }
+ setRef (el) {
+ this.ref = el;
+ }
+ render () {
+ const componentProps = omit(this.props, ['onDrop', 'dragInfo']);
+ return (
+
+
+
+ wedo-button-illustration
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-illustration.svg b/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-illustration.svg
new file mode 100644
index 00000000000..e82660009ea
--- /dev/null
+++ b/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-illustration.svg
@@ -0,0 +1,64 @@
+
+
+
+ wedo-illustration
+ Created with Sketch.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-small.svg b/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-small.svg
new file mode 100644
index 00000000000..70db707eb8a
--- /dev/null
+++ b/src/lib/libraries/extensions/peripheral-connection/wedo/wedo-small.svg
@@ -0,0 +1,58 @@
+
+
+
+ wedo2-block-icon
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/libraries/extensions/translate.png b/src/lib/libraries/extensions/translate.png
index 95961ae52fe..8f63ade3758 100644
Binary files a/src/lib/libraries/extensions/translate.png and b/src/lib/libraries/extensions/translate.png differ
diff --git a/src/lib/libraries/sound-tags.js b/src/lib/libraries/sound-tags.js
index 61a37002e62..4cba1d57b34 100644
--- a/src/lib/libraries/sound-tags.js
+++ b/src/lib/libraries/sound-tags.js
@@ -1,11 +1,12 @@
+import messages from './tag-messages.js';
export default [
- {title: 'Animals'},
- {title: 'Effects'},
- {title: 'Loops'},
- {title: 'Notes'},
- {title: 'Percussion'},
- {title: 'Space'},
- {title: 'Sports'},
- {title: 'Voice'},
- {title: 'Wacky'}
+ {tag: 'animals', intlLabel: messages.animals},
+ {tag: 'effects', intlLabel: messages.effects},
+ {tag: 'loops', intlLabel: messages.loops},
+ {tag: 'notes', intlLabel: messages.notes},
+ {tag: 'percussion', intlLabel: messages.percussion},
+ {tag: 'space', intlLabel: messages.space},
+ {tag: 'sports', intlLabel: messages.sports},
+ {tag: 'voice', intlLabel: messages.voice},
+ {tag: 'wacky', intlLabel: messages.wacky}
];
diff --git a/src/lib/libraries/sounds.json b/src/lib/libraries/sounds.json
index f62f90b0291..15934e35743 100644
--- a/src/lib/libraries/sounds.json
+++ b/src/lib/libraries/sounds.json
@@ -1118,6 +1118,14 @@
"electronic"
]
},
+ {
+ "name": "Dance Celebrate2",
+ "md5": "0edb8fb88af19e6e17d0f8cf64c1d136.wav",
+ "sampleCount": 176401,
+ "rate": 22050,
+ "format": "adpcm",
+ "tags": []
+ },
{
"name": "Dance Chill Out",
"md5": "b235da45581b1f212c9e9cce70d2a2dc.wav",
diff --git a/src/lib/libraries/sprite-tags.js b/src/lib/libraries/sprite-tags.js
index f1fbe3d5647..8a12e1e41e5 100644
--- a/src/lib/libraries/sprite-tags.js
+++ b/src/lib/libraries/sprite-tags.js
@@ -1,10 +1,11 @@
+import messages from './tag-messages.js';
export default [
- {title: 'Animals'},
- {title: 'People'},
- {title: 'Fantasy'},
- {title: 'Dance'},
- {title: 'Music'},
- {title: 'Sports'},
- {title: 'Food'},
- {title: 'Fashion'}
+ {tag: 'animals', intlLabel: messages.animals},
+ {tag: 'people', intlLabel: messages.people},
+ {tag: 'fantasy', intlLabel: messages.fantasy},
+ {tag: 'dance', intlLabel: messages.dance},
+ {tag: 'music', intlLabel: messages.music},
+ {tag: 'sports', intlLabel: messages.sports},
+ {tag: 'food', intlLabel: messages.food},
+ {tag: 'fashion', intlLabel: messages.fashion}
];
diff --git a/src/lib/libraries/sprites.json b/src/lib/libraries/sprites.json
index 904d2ae9387..3b9596b7ab5 100644
--- a/src/lib/libraries/sprites.json
+++ b/src/lib/libraries/sprites.json
@@ -116,9 +116,84 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Andie",
+ "md5": "936abdaaac3a3f7d27e5f30b3da00e5f.svg",
+ "type": "sprite",
+ "tags": [
+ "sports",
+ "basketball",
+ "people",
+ "wheelchair",
+ "handicap",
+ "handicapable",
+ "alex eben meyer"
+ ],
+ "info": [
+ 0,
+ 4,
+ 1
+ ],
+ "json": {
+ "objName": "Andie",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "andie-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "936abdaaac3a3f7d27e5f30b3da00e5f.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 86,
+ "rotationCenterY": 77
+ },
+ {
+ "costumeName": "andie-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "cc2953492b40e231fdee3d8c9994a646.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 46,
+ "rotationCenterY": 77
+ },
+ {
+ "costumeName": "andie-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "76e26ccb79a94d3e89f67e64b4cb9731.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 52,
+ "rotationCenterY": 36
+ },
+ {
+ "costumeName": "andie-d",
+ "baseLayerID": -1,
+ "baseLayerMD5": "80fa011244f3e3be56b96ebcb9e40d59.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 86,
+ "rotationCenterY": 43
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -129,
+ "scratchY": -73,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Anina Dance",
- "md5": "9374e067ca4b66427fc64a0822f6e468.png",
+ "md5": "b66762519d9542c0ab4fe754b47fe593.png",
"type": "sprite",
"tags": [
"people",
@@ -144,8 +219,8 @@
"costumes": [
{
"costumeName": "anina stance",
- "baseLayerID": -1,
- "baseLayerMD5": "9374e067ca4b66427fc64a0822f6e468.png",
+ "baseLayerID": 0,
+ "baseLayerMD5": "b66762519d9542c0ab4fe754b47fe593.png",
"bitmapResolution": 2,
"rotationCenterX": 76,
"rotationCenterY": 252
@@ -176,24 +251,24 @@
},
{
"costumeName": "anina top freeze",
- "baseLayerID": -1,
- "baseLayerMD5": "a1c9b65dd07747964cce642f9099921b.png",
+ "baseLayerID": 1,
+ "baseLayerMD5": "b7693bd6250d4411ee622b67f8025924.png",
"bitmapResolution": 2,
"rotationCenterX": 110,
"rotationCenterY": 268
},
{
"costumeName": "anina R cross",
- "baseLayerID": -1,
- "baseLayerMD5": "f0d4dce1006cf447a0a4b53e0a8d0519.png",
+ "baseLayerID": 2,
+ "baseLayerMD5": "3948aad16f8169c013c956dd152a09a6.png",
"bitmapResolution": 2,
"rotationCenterX": 126,
"rotationCenterY": 268
},
{
"costumeName": "anina pop front",
- "baseLayerID": -1,
- "baseLayerMD5": "832a3ae650a1f3bede1e0c9f1779e535.png",
+ "baseLayerID": 3,
+ "baseLayerMD5": "4931a363e3e4efa20230f6ff2991c6b4.png",
"bitmapResolution": 2,
"rotationCenterX": 68,
"rotationCenterY": 270
@@ -241,7 +316,7 @@
{
"costumeName": "anina pop R arm",
"baseLayerID": -1,
- "baseLayerMD5": "eac2b5f7db5e81d00c43486179b8dcf8.png",
+ "baseLayerMD5": "ca27e001a263ee6b5852508f39d021db.png",
"bitmapResolution": 2,
"rotationCenterX": 88,
"rotationCenterY": 272
@@ -810,8 +885,8 @@
}
],
"currentCostumeIndex": 0,
- "scratchX": 77,
- "scratchY": -115,
+ "scratchX": 202,
+ "scratchY": -108,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -822,7 +897,7 @@
},
{
"name": "Bat",
- "md5": "a68f7a0b2af7514c729bb083d04dbbde.svg",
+ "md5": "3b6274510488d5b26447c1c266475801.svg",
"type": "sprite",
"tags": [
"fantasy",
@@ -853,39 +928,39 @@
{
"costumeName": "bat-a",
"baseLayerID": -1,
- "baseLayerMD5": "a68f7a0b2af7514c729bb083d04dbbde.svg",
+ "baseLayerMD5": "3b6274510488d5b26447c1c266475801.svg",
"bitmapResolution": 1,
- "rotationCenterX": 51,
- "rotationCenterY": 47
+ "rotationCenterX": 65,
+ "rotationCenterY": 61
},
{
"costumeName": "bat-b",
"baseLayerID": -1,
- "baseLayerMD5": "4ea5bb61370e189d2eba763312680201.svg",
+ "baseLayerMD5": "8b20987d450379a445cbfc41ff2a3874.svg",
"bitmapResolution": 1,
- "rotationCenterX": 51,
- "rotationCenterY": 47
+ "rotationCenterX": 65,
+ "rotationCenterY": 61
},
{
"costumeName": "bat-c",
"baseLayerID": -1,
- "baseLayerMD5": "9ed4deead22db511202f38abadf508c4.svg",
+ "baseLayerMD5": "c6d6a6892638e489902fbba803050de1.svg",
"bitmapResolution": 1,
- "rotationCenterX": 51,
- "rotationCenterY": 47
+ "rotationCenterX": 65,
+ "rotationCenterY": 61
},
{
"costumeName": "bat-d",
"baseLayerID": -1,
- "baseLayerMD5": "293a7b03badd2f3b49e50acfb9c242ec.svg",
+ "baseLayerMD5": "e3da64838b2c74b6dd9a080b030e327e.svg",
"bitmapResolution": 1,
- "rotationCenterX": 51,
- "rotationCenterY": 47
+ "rotationCenterX": 65,
+ "rotationCenterY": 61
}
],
"currentCostumeIndex": 0,
- "scratchX": -39,
- "scratchY": 121,
+ "scratchX": -48,
+ "scratchY": 109,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -1448,6 +1523,51 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Bowtie1",
+ "md5": "aebd82272a5f4a1dd3c23d6e98537017.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion"
+ ],
+ "info": [
+ 0,
+ 1,
+ 1
+ ],
+ "json": {
+ "objName": "Bowtie1",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "bowtie-01",
+ "baseLayerID": -1,
+ "baseLayerMD5": "aebd82272a5f4a1dd3c23d6e98537017.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 13,
+ "rotationCenterY": 7
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -65,
+ "scratchY": 58,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Bread",
"md5": "68366160ce0ac1221cdde4455eca9cba.svg",
@@ -2090,7 +2210,7 @@
"costumes": [
{
"costumeName": "cake-a",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "e1e8e8a765b8778d6181035c5c66984d.svg",
"bitmapResolution": 1,
"rotationCenterX": 64,
@@ -2098,7 +2218,7 @@
},
{
"costumeName": "cake-b",
- "baseLayerID": 1,
+ "baseLayerID": -1,
"baseLayerMD5": "460268a804e7682c9fabf37e4b70071c.svg",
"bitmapResolution": 1,
"rotationCenterX": 64,
@@ -2343,7 +2463,7 @@
],
"costumes": [
{
- "costumeName": "cat1",
+ "costumeName": "cat-a",
"baseLayerID": -1,
"baseLayerMD5": "09dc888b0b7df19f70d81588ae73420e.svg",
"bitmapResolution": 1,
@@ -2351,7 +2471,7 @@
"rotationCenterY": 55
},
{
- "costumeName": "cat2",
+ "costumeName": "cat-b",
"baseLayerID": -1,
"baseLayerMD5": "3696356a03a8d938318876a593572843.svg",
"bitmapResolution": 1,
@@ -2371,53 +2491,46 @@
}
},
{
- "name": "Cat1 Flying",
- "md5": "1e81725d2d2c7de4a2dd4a145198a43c.svg",
+ "name": "Cat 2",
+ "md5": "01ae57fd339529445cb890978ef8a054.svg",
"type": "sprite",
"tags": [
- "animals",
"cat",
"kitty",
- "kitten"
+ "kitten",
+ "animal",
+ "mammal"
],
"info": [
0,
- 2,
+ 1,
1
],
"json": {
- "objName": "Cat1 Flying",
+ "objName": "Cat 2",
"sounds": [
{
- "soundName": "pop",
+ "soundName": "meow2",
"soundID": -1,
- "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
- "sampleCount": 258,
+ "md5": "cf51a0c4088942d95bcc20af13202710.wav",
+ "sampleCount": 6512,
"rate": 11025,
"format": ""
}
],
"costumes": [
{
- "costumeName": "cat1 flying-a",
- "baseLayerID": -1,
- "baseLayerMD5": "1e81725d2d2c7de4a2dd4a145198a43c.svg",
- "bitmapResolution": 1,
- "rotationCenterX": 67,
- "rotationCenterY": 48
- },
- {
- "costumeName": "cat1 flying-b",
+ "costumeName": "cat 2",
"baseLayerID": -1,
- "baseLayerMD5": "0d192725870ef0eda50d91cab0e3c9c5.svg",
+ "baseLayerMD5": "01ae57fd339529445cb890978ef8a054.svg",
"bitmapResolution": 1,
- "rotationCenterX": 42,
- "rotationCenterY": 44
+ "rotationCenterX": 87,
+ "rotationCenterY": 39
}
],
"currentCostumeIndex": 0,
- "scratchX": -53,
- "scratchY": -14,
+ "scratchX": -71,
+ "scratchY": 1,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -2427,46 +2540,53 @@
}
},
{
- "name": "Cat2",
- "md5": "01ae57fd339529445cb890978ef8a054.svg",
+ "name": "Cat Flying",
+ "md5": "1e81725d2d2c7de4a2dd4a145198a43c.svg",
"type": "sprite",
"tags": [
+ "animals",
"cat",
"kitty",
- "kitten",
- "animal",
- "mammal"
+ "kitten"
],
"info": [
0,
- 1,
+ 2,
1
],
"json": {
- "objName": "Cat2",
+ "objName": "Cat Flying",
"sounds": [
{
- "soundName": "meow2",
+ "soundName": "pop",
"soundID": -1,
- "md5": "cf51a0c4088942d95bcc20af13202710.wav",
- "sampleCount": 6512,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
"rate": 11025,
"format": ""
}
],
"costumes": [
{
- "costumeName": "cat2",
+ "costumeName": "cat flying-a",
"baseLayerID": -1,
- "baseLayerMD5": "01ae57fd339529445cb890978ef8a054.svg",
+ "baseLayerMD5": "1e81725d2d2c7de4a2dd4a145198a43c.svg",
"bitmapResolution": 1,
- "rotationCenterX": 87,
- "rotationCenterY": 39
+ "rotationCenterX": 67,
+ "rotationCenterY": 48
+ },
+ {
+ "costumeName": "cat flying-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "0d192725870ef0eda50d91cab0e3c9c5.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 42,
+ "rotationCenterY": 44
}
],
"currentCostumeIndex": 0,
- "scratchX": -71,
- "scratchY": 1,
+ "scratchX": -53,
+ "scratchY": -14,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -2621,7 +2741,7 @@
},
{
"name": "Champ99",
- "md5": "9e4e87818854cfc281d8dcc3e21ee672.png",
+ "md5": "1cb9d1a98cebc8a1d83af7633fdb9cd0.png",
"type": "sprite",
"tags": [
"people",
@@ -2647,8 +2767,8 @@
"costumes": [
{
"costumeName": "champ99-a",
- "baseLayerID": -1,
- "baseLayerMD5": "9e4e87818854cfc281d8dcc3e21ee672.png",
+ "baseLayerID": 6,
+ "baseLayerMD5": "1cb9d1a98cebc8a1d83af7633fdb9cd0.png",
"bitmapResolution": 2,
"rotationCenterX": 248,
"rotationCenterY": 306
@@ -3144,7 +3264,7 @@
},
{
"name": "D-Money Dance",
- "md5": "b30a60d31aebead577b73affd22bf30f.svg",
+ "md5": "dafbdfe454c5ec7029b5c1e07fcabc90.png",
"type": "sprite",
"tags": [
"people",
@@ -3170,16 +3290,16 @@
"costumes": [
{
"costumeName": "dm stance",
- "baseLayerID": -1,
- "baseLayerMD5": "b30a60d31aebead577b73affd22bf30f.svg",
- "bitmapResolution": 1,
- "rotationCenterX": 55,
- "rotationCenterY": 119
+ "baseLayerID": 7,
+ "baseLayerMD5": "dafbdfe454c5ec7029b5c1e07fcabc90.png",
+ "bitmapResolution": 2,
+ "rotationCenterX": 106,
+ "rotationCenterY": 238
},
{
"costumeName": "dm top stand",
"baseLayerID": -1,
- "baseLayerMD5": "051c36758b9fd1136b511efc5dd6234a.png",
+ "baseLayerMD5": "a22da98e5e63de7b2883355afd0184f0.png",
"bitmapResolution": 2,
"rotationCenterX": 82,
"rotationCenterY": 244
@@ -3187,7 +3307,7 @@
{
"costumeName": "dm top R leg",
"baseLayerID": -1,
- "baseLayerMD5": "6cea0c29c460e571226cc4cff5b97c28.png",
+ "baseLayerMD5": "12db59633a1709a2c39534d35263791f.png",
"bitmapResolution": 2,
"rotationCenterX": 218,
"rotationCenterY": 232
@@ -4177,8 +4297,8 @@
}
],
"currentCostumeIndex": 0,
- "scratchX": -108,
- "scratchY": -61,
+ "scratchX": -24,
+ "scratchY": -57,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -4377,6 +4497,67 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Dress",
+ "md5": "308b6ad8e6cfe5c2b2c1e3a1eb9cc404.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion"
+ ],
+ "info": [
+ 0,
+ 3,
+ 1
+ ],
+ "json": {
+ "objName": "Dress",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "dress-01",
+ "baseLayerID": -1,
+ "baseLayerMD5": "308b6ad8e6cfe5c2b2c1e3a1eb9cc404.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 58,
+ "rotationCenterY": 83
+ },
+ {
+ "costumeName": "dress-02",
+ "baseLayerID": -1,
+ "baseLayerMD5": "1f7a725ba285dc97cb142d4b812db624.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 49,
+ "rotationCenterY": 83
+ },
+ {
+ "costumeName": "dress-03",
+ "baseLayerID": -1,
+ "baseLayerMD5": "fa7e0b37a324c212d0f1ce0f701a1ae0.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 57,
+ "rotationCenterY": 83
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -65,
+ "scratchY": -50,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Drum",
"md5": "dd66742bc2a3cfe5a6f9f540afd2e15c.svg",
@@ -4850,7 +5031,7 @@
"costumes": [
{
"costumeName": "egg-a",
- "baseLayerID": 5,
+ "baseLayerID": -1,
"baseLayerMD5": "bc723738dfe626c5c3bb90970d985961.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -4858,7 +5039,7 @@
},
{
"costumeName": "egg-b",
- "baseLayerID": 6,
+ "baseLayerID": -1,
"baseLayerMD5": "83016b7ff817f99be4a454600b4a78fc.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -4866,7 +5047,7 @@
},
{
"costumeName": "egg-c",
- "baseLayerID": 7,
+ "baseLayerID": -1,
"baseLayerMD5": "d9a44d151fbd909bdbbcf7877055af6d.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -4874,7 +5055,7 @@
},
{
"costumeName": "egg-d",
- "baseLayerID": 8,
+ "baseLayerID": -1,
"baseLayerMD5": "c91c7f72b8523b0910a84bce7d99c37b.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -4882,7 +5063,7 @@
},
{
"costumeName": "egg-e",
- "baseLayerID": 9,
+ "baseLayerID": -1,
"baseLayerMD5": "65c15516e62596e1f72e874359fc7254.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -5457,8 +5638,8 @@
}
],
"currentCostumeIndex": 0,
- "scratchX": -110,
- "scratchY": -24,
+ "scratchX": -115,
+ "scratchY": -46,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -5957,12 +6138,12 @@
"objName": "Glass Water",
"sounds": [
{
- "soundName": "pop",
+ "soundName": "water drop",
"soundID": -1,
- "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
- "sampleCount": 258,
- "rate": 11025,
- "format": ""
+ "md5": "aa488de9e2c871e9d4faecd246ed737a.wav",
+ "sampleCount": 8136,
+ "rate": 22050,
+ "format": "adpcm"
}
],
"costumes": [
@@ -5996,15 +6177,15 @@
},
{
"name": "Glasses",
- "md5": "5fcf716b53f223bc86b10ab0eca3e162.svg",
+ "md5": "f42180039c37c3b221e1e426b92e5092.svg",
"type": "sprite",
"tags": [
- "things",
- "fashion"
+ "fashion",
+ "glasses"
],
"info": [
0,
- 1,
+ 4,
1
],
"json": {
@@ -6021,17 +6202,41 @@
],
"costumes": [
{
- "costumeName": "glasses",
+ "costumeName": "glasses-a",
"baseLayerID": -1,
- "baseLayerMD5": "5fcf716b53f223bc86b10ab0eca3e162.svg",
+ "baseLayerMD5": "f42180039c37c3b221e1e426b92e5092.svg",
"bitmapResolution": 1,
- "rotationCenterX": 16,
- "rotationCenterY": 9
+ "rotationCenterX": 33,
+ "rotationCenterY": 13
+ },
+ {
+ "costumeName": "glasses-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "58b728ee8c1f739e2de13800dee562de.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 35,
+ "rotationCenterY": 14
+ },
+ {
+ "costumeName": "glasses-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "d8bf373e1fcbb46f6eb8d225ba01613e.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 34,
+ "rotationCenterY": 12
+ },
+ {
+ "costumeName": "glasses-e",
+ "baseLayerID": -1,
+ "baseLayerMD5": "6b706718a8c350522c3f29fb82b40327.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 39,
+ "rotationCenterY": 53
}
],
"currentCostumeIndex": 0,
- "scratchX": 65,
- "scratchY": 6,
+ "scratchX": 37,
+ "scratchY": 102,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -6873,6 +7078,68 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Harper",
+ "md5": "919eb332bf73df227ec5f214be952a21.svg",
+ "type": "sprite",
+ "tags": [
+ "people",
+ "fashion"
+ ],
+ "info": [
+ 0,
+ 3,
+ 1
+ ],
+ "json": {
+ "objName": "Harper",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "harper-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "919eb332bf73df227ec5f214be952a21.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 54,
+ "rotationCenterY": 135
+ },
+ {
+ "costumeName": "harper-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "0d5979db40b0a4dcaa601fb7679ef71c.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 54,
+ "rotationCenterY": 143
+ },
+ {
+ "costumeName": "harper-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "9c35763ec87604ff1b4848ff18e0b040.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 56,
+ "rotationCenterY": 138
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": 38,
+ "scratchY": 18,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Hat",
"md5": "b3beb1f52d371428d70b65a0c4c5c001.svg",
@@ -7147,6 +7414,76 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Hat1 ",
+ "md5": "874462b3e079308d775629c235940d8f.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion",
+ "hat"
+ ],
+ "info": [
+ 0,
+ 4,
+ 1
+ ],
+ "json": {
+ "objName": "Hat1 ",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "hat-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "874462b3e079308d775629c235940d8f.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 39,
+ "rotationCenterY": 22
+ },
+ {
+ "costumeName": "hat-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "a8ef874bd7542fec62785eac80019417.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 45,
+ "rotationCenterY": 30
+ },
+ {
+ "costumeName": "hat-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "52540f9dba4537f79f1ad3067d44e3f6.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 37,
+ "rotationCenterY": 30
+ },
+ {
+ "costumeName": "hat-d",
+ "baseLayerID": -1,
+ "baseLayerMD5": "b40accecd4bd57fed8bdb96ee15e5c05.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 40,
+ "rotationCenterY": 27
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -70,
+ "scratchY": 126,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Hatchling",
"md5": "fb9de507b6d95e96cb0df68e401dfd8f.svg",
@@ -7239,7 +7576,7 @@
"costumes": [
{
"costumeName": "headband",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "237f77cb3e41c70f714c6d2aa4d38ea1.svg",
"bitmapResolution": 1,
"rotationCenterX": 53,
@@ -7458,7 +7795,7 @@
"costumes": [
{
"costumeName": "hedgehog-a",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "32416e6b2ef8e45fb5fd10778c1b9a9f.svg",
"bitmapResolution": 1,
"rotationCenterX": 71,
@@ -7466,7 +7803,7 @@
},
{
"costumeName": "hedgehog-b",
- "baseLayerID": 1,
+ "baseLayerID": -1,
"baseLayerMD5": "4d3ccc06660e07b55bd38246e1f82f7f.svg",
"bitmapResolution": 1,
"rotationCenterX": 71,
@@ -7474,7 +7811,7 @@
},
{
"costumeName": "hedgehog-c",
- "baseLayerID": 2,
+ "baseLayerID": -1,
"baseLayerMD5": "2446f79c0f553594cfbcdbe6b1e459a5.svg",
"bitmapResolution": 1,
"rotationCenterX": 71,
@@ -7482,7 +7819,7 @@
},
{
"costumeName": "hedgehog-d",
- "baseLayerID": 3,
+ "baseLayerID": -1,
"baseLayerMD5": "bdb7c8e86125092da0c4848d1ffd901c.svg",
"bitmapResolution": 1,
"rotationCenterX": 71,
@@ -7490,7 +7827,7 @@
},
{
"costumeName": "hedgehog-e",
- "baseLayerID": 4,
+ "baseLayerID": -1,
"baseLayerMD5": "78a0e3789f6d778e20f9bf3d308a0b19.svg",
"bitmapResolution": 1,
"rotationCenterX": 61,
@@ -7846,7 +8183,7 @@
}
},
{
- "name": "Jamie",
+ "name": "Jamal",
"md5": "90f9166fe6500d0c0caad8b1964d6b74.svg",
"type": "sprite",
"tags": [
@@ -7861,7 +8198,7 @@
1
],
"json": {
- "objName": "Jamie",
+ "objName": "Jamal",
"sounds": [
{
"soundName": "pop",
@@ -7874,7 +8211,7 @@
],
"costumes": [
{
- "costumeName": "jamie-a",
+ "costumeName": "jamal-a",
"baseLayerID": -1,
"baseLayerMD5": "90f9166fe6500d0c0caad8b1964d6b74.svg",
"bitmapResolution": 1,
@@ -7882,7 +8219,7 @@
"rotationCenterY": 105
},
{
- "costumeName": "jamie-b",
+ "costumeName": "jamal-b",
"baseLayerID": -1,
"baseLayerMD5": "c3d96ef7e99440c2fa76effce1235d3f.svg",
"bitmapResolution": 1,
@@ -7890,7 +8227,7 @@
"rotationCenterY": 105
},
{
- "costumeName": "jamie-c",
+ "costumeName": "jamal-c",
"baseLayerID": -1,
"baseLayerMD5": "1fb8b9ca79f2c0a327913bd647b53fe5.svg",
"bitmapResolution": 1,
@@ -7898,7 +8235,7 @@
"rotationCenterY": 105
},
{
- "costumeName": "jamie-d",
+ "costumeName": "jamal-d",
"baseLayerID": -1,
"baseLayerMD5": "4adb87e6123161fcaf02f7ac022a5757.svg",
"bitmapResolution": 1,
@@ -8174,7 +8511,7 @@
},
{
"name": "Jouvi Dance",
- "md5": "e10d129d9be2147bc7d284e281d88e9a.png",
+ "md5": "6f68790ee3eb9bdccf8749305186b0dd.png",
"type": "sprite",
"tags": [
"people",
@@ -8200,8 +8537,8 @@
"costumes": [
{
"costumeName": "jo stance",
- "baseLayerID": -1,
- "baseLayerMD5": "e10d129d9be2147bc7d284e281d88e9a.png",
+ "baseLayerID": 8,
+ "baseLayerMD5": "6f68790ee3eb9bdccf8749305186b0dd.png",
"bitmapResolution": 2,
"rotationCenterX": 94,
"rotationCenterY": 240
@@ -8224,7 +8561,7 @@
},
{
"costumeName": "jo top L leg",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "a12f40b18067bb31746f9cf461de88aa.png",
"bitmapResolution": 2,
"rotationCenterX": 208,
@@ -8232,7 +8569,7 @@
},
{
"costumeName": "jo top R cross",
- "baseLayerID": 1,
+ "baseLayerID": -1,
"baseLayerMD5": "c2d5519e8a0f2214ff757117038c28dc.png",
"bitmapResolution": 2,
"rotationCenterX": 144,
@@ -8240,7 +8577,7 @@
},
{
"costumeName": "jo top L cross",
- "baseLayerID": 2,
+ "baseLayerID": -1,
"baseLayerMD5": "2e2a6534d33883fdd2f8471a1adbebb7.png",
"bitmapResolution": 2,
"rotationCenterX": 84,
@@ -8248,7 +8585,7 @@
},
{
"costumeName": "jo pop front",
- "baseLayerID": 3,
+ "baseLayerID": -1,
"baseLayerMD5": "3d3ea804243800981acabc7caba10939.png",
"bitmapResolution": 2,
"rotationCenterX": 70,
@@ -8256,7 +8593,7 @@
},
{
"costumeName": "jo pop down",
- "baseLayerID": 4,
+ "baseLayerID": -1,
"baseLayerMD5": "a55fbb529c10f70bcb374aef8a63571b.png",
"bitmapResolution": 2,
"rotationCenterX": 68,
@@ -8264,7 +8601,7 @@
},
{
"costumeName": "jo pop left",
- "baseLayerID": 5,
+ "baseLayerID": -1,
"baseLayerMD5": "ea812b4c2b2405aa2b73158023298f71.png",
"bitmapResolution": 2,
"rotationCenterX": 196,
@@ -8272,7 +8609,7 @@
},
{
"costumeName": "jo pop right",
- "baseLayerID": 6,
+ "baseLayerID": -1,
"baseLayerMD5": "01dd2f553c7262329ebaba2516e3a2b1.png",
"bitmapResolution": 2,
"rotationCenterX": 66,
@@ -8280,7 +8617,7 @@
},
{
"costumeName": "jo pop L arm",
- "baseLayerID": 7,
+ "baseLayerID": -1,
"baseLayerMD5": "a9fbc01a4124d555da12630312e46197.png",
"bitmapResolution": 2,
"rotationCenterX": 108,
@@ -8288,7 +8625,7 @@
},
{
"costumeName": "jo pop stand",
- "baseLayerID": 8,
+ "baseLayerID": -1,
"baseLayerMD5": "75ee2383fd83992b401c8a0730521d94.png",
"bitmapResolution": 2,
"rotationCenterX": 78,
@@ -8297,7 +8634,7 @@
{
"costumeName": "jo pop R arm",
"baseLayerID": 9,
- "baseLayerMD5": "a35a3bbc4e21ce2f5de940adb7017fa6.png",
+ "baseLayerMD5": "aabfedff0d11243386b6b0941e0f72e9.png",
"bitmapResolution": 2,
"rotationCenterX": 108,
"rotationCenterY": 260
@@ -8659,7 +8996,7 @@
},
{
"name": "LB Dance",
- "md5": "9d64910e84c39660b19ca4ca8b45e2be.png",
+ "md5": "71dde8c43985815bffb5a5ed5632af58.png",
"type": "sprite",
"tags": [
"people",
@@ -8685,8 +9022,8 @@
"costumes": [
{
"costumeName": "lb stance",
- "baseLayerID": -1,
- "baseLayerMD5": "9d64910e84c39660b19ca4ca8b45e2be.png",
+ "baseLayerID": 0,
+ "baseLayerMD5": "71dde8c43985815bffb5a5ed5632af58.png",
"bitmapResolution": 2,
"rotationCenterX": 54,
"rotationCenterY": 244
@@ -9552,7 +9889,7 @@
"costumes": [
{
"costumeName": "milk-a",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "e6a7964bc4ea38c79a5a31d6ddfb5ba9.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -9560,7 +9897,7 @@
},
{
"costumeName": "milk-b",
- "baseLayerID": 1,
+ "baseLayerID": -1,
"baseLayerMD5": "82d4c1855fe0d400433c7344fb2af3b5.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -9568,7 +9905,7 @@
},
{
"costumeName": "milk-c",
- "baseLayerID": 2,
+ "baseLayerID": -1,
"baseLayerMD5": "50afc991b6fdad4b6547ba98ecf8a6af.svg",
"bitmapResolution": 1,
"rotationCenterX": 47,
@@ -9576,7 +9913,7 @@
},
{
"costumeName": "milk-d",
- "baseLayerID": 3,
+ "baseLayerID": -1,
"baseLayerMD5": "8fc7606a176149d225a541a04fa67473.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -9584,7 +9921,7 @@
},
{
"costumeName": "milk-e",
- "baseLayerID": 4,
+ "baseLayerID": -1,
"baseLayerMD5": "f2373d449b1226c44436dced422c2935.svg",
"bitmapResolution": 1,
"rotationCenterX": 68,
@@ -10361,7 +10698,7 @@
"costumes": [
{
"costumeName": "panther-a",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "04ca2c122cff11b9bc23834d6f79361e.svg",
"bitmapResolution": 1,
"rotationCenterX": 125,
@@ -10369,7 +10706,7 @@
},
{
"costumeName": "panther-b",
- "baseLayerID": 1,
+ "baseLayerID": -1,
"baseLayerMD5": "f8c33765d1105f3bb4cd145fad0f717e.svg",
"bitmapResolution": 1,
"rotationCenterX": 125,
@@ -10377,7 +10714,7 @@
},
{
"costumeName": "panther-c",
- "baseLayerID": 2,
+ "baseLayerID": -1,
"baseLayerMD5": "096bf9cad84def12eef2b5d84736b393.svg",
"bitmapResolution": 1,
"rotationCenterX": 125,
@@ -10395,6 +10732,60 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Pants",
+ "md5": "f7a0584eca14eaa0e29662e5c24fb62d.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion",
+ "pants"
+ ],
+ "info": [
+ 0,
+ 2,
+ 1
+ ],
+ "json": {
+ "objName": "Pants",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "pants-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "f7a0584eca14eaa0e29662e5c24fb62d.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 34,
+ "rotationCenterY": 66
+ },
+ {
+ "costumeName": "pants-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "22ea0cf68b885817a5b6a01194c6f5d3.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 35,
+ "rotationCenterY": 66
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": 148,
+ "scratchY": -49,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Parrot",
"md5": "098570b8e1aa85b32f9b4eb07bea3af2.svg",
@@ -11230,6 +11621,96 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Pumpkin Costume",
+ "md5": "6f7a5a88e6201082913a099438d626ef.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion"
+ ],
+ "info": [
+ 0,
+ 1,
+ 1
+ ],
+ "json": {
+ "objName": "Pumpkin Costume",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "pumpkin-costume",
+ "baseLayerID": -1,
+ "baseLayerMD5": "6f7a5a88e6201082913a099438d626ef.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 39,
+ "rotationCenterY": 63
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -169,
+ "scratchY": 13,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
+ {
+ "name": "Pumpkin Hat",
+ "md5": "22bdeaf0d8421ffb70775ed77070bee7.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion"
+ ],
+ "info": [
+ 0,
+ 1,
+ 1
+ ],
+ "json": {
+ "objName": "Pumpkin Hat",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "pumpkin-hat",
+ "baseLayerID": -1,
+ "baseLayerMD5": "22bdeaf0d8421ffb70775ed77070bee7.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 28,
+ "rotationCenterY": 24
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -172,
+ "scratchY": 126,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Puppy",
"md5": "2768d9e44a0aab055856d301bbc2b04e.png",
@@ -11333,7 +11814,7 @@
"costumes": [
{
"costumeName": "rabbit-a",
- "baseLayerID": 5,
+ "baseLayerID": -1,
"baseLayerMD5": "2f42891c3f3d63c0e591aeabc5946533.svg",
"bitmapResolution": 1,
"rotationCenterX": 84,
@@ -11341,7 +11822,7 @@
},
{
"costumeName": "rabbit-b",
- "baseLayerID": 6,
+ "baseLayerID": -1,
"baseLayerMD5": "80e05ff501040cdc9f52fa6782e06fd2.svg",
"bitmapResolution": 1,
"rotationCenterX": 84,
@@ -11349,7 +11830,7 @@
},
{
"costumeName": "rabbit-c",
- "baseLayerID": 7,
+ "baseLayerID": -1,
"baseLayerMD5": "88ed8b7925baa025b6c7fc628a64b9b1.svg",
"bitmapResolution": 1,
"rotationCenterX": 84,
@@ -11357,7 +11838,7 @@
},
{
"costumeName": "rabbit-d",
- "baseLayerID": 8,
+ "baseLayerID": -1,
"baseLayerMD5": "5f3b8df4d6ab8a72e887f89f554db0be.svg",
"bitmapResolution": 1,
"rotationCenterX": 84,
@@ -11365,7 +11846,7 @@
},
{
"costumeName": "rabbit-e",
- "baseLayerID": 9,
+ "baseLayerID": -1,
"baseLayerMD5": "3003f1135f4aa3b6c361734243621260.svg",
"bitmapResolution": 1,
"rotationCenterX": 84,
@@ -12047,7 +12528,7 @@
"costumes": [
{
"costumeName": "sam",
- "baseLayerID": 0,
+ "baseLayerID": -1,
"baseLayerMD5": "8208e99159b36c957fb9fbc187e51bc7.png",
"bitmapResolution": 2,
"rotationCenterX": 117,
@@ -12390,6 +12871,52 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Shirt",
+ "md5": "659465944053fe6fb6aa1ed0e11be9aa.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion",
+ "shirt"
+ ],
+ "info": [
+ 0,
+ 1,
+ 1
+ ],
+ "json": {
+ "objName": "Shirt",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "shirt-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "659465944053fe6fb6aa1ed0e11be9aa.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 46,
+ "rotationCenterY": 40
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": 147,
+ "scratchY": 93,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Shirt Blouse",
"md5": "918a507af6bbae9e7f36f0d949900838.svg",
@@ -12594,6 +13121,76 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Shoes",
+ "md5": "4639a1af5bc91f1a6f14e822cd46972f.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion",
+ "shoes"
+ ],
+ "info": [
+ 0,
+ 4,
+ 1
+ ],
+ "json": {
+ "objName": "Shoes",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "shoes-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "4639a1af5bc91f1a6f14e822cd46972f.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 40,
+ "rotationCenterY": 13
+ },
+ {
+ "costumeName": "shoes-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "6ba2a692c17f47170d611578a5620ae5.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 40,
+ "rotationCenterY": 31
+ },
+ {
+ "costumeName": "shoes-d",
+ "baseLayerID": -1,
+ "baseLayerMD5": "1130f7ca93716bac6afa31af86329e92.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 44,
+ "rotationCenterY": 32
+ },
+ {
+ "costumeName": "shoes-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "14c6843195bd13824d253cb3fdb9e6de.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 45,
+ "rotationCenterY": 33
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": 49,
+ "scratchY": -140,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Shoes1",
"md5": "ffab4cc284070b50ac317e515f59f7d8.svg",
@@ -12684,6 +13281,70 @@
"spriteInfo": {}
}
},
+ {
+ "name": "Shorts",
+ "md5": "d9b580c913c0d1d1a996dd733af91e68.svg",
+ "type": "sprite",
+ "tags": [
+ "fashion",
+ "pants",
+ "shorts",
+ "clothing"
+ ],
+ "info": [
+ 0,
+ 3,
+ 1
+ ],
+ "json": {
+ "objName": "Shorts",
+ "sounds": [
+ {
+ "soundName": "pop",
+ "soundID": -1,
+ "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
+ "sampleCount": 258,
+ "rate": 11025,
+ "format": ""
+ }
+ ],
+ "costumes": [
+ {
+ "costumeName": "shorts-a",
+ "baseLayerID": -1,
+ "baseLayerMD5": "d9b580c913c0d1d1a996dd733af91e68.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 35,
+ "rotationCenterY": 37
+ },
+ {
+ "costumeName": "shorts-b",
+ "baseLayerID": -1,
+ "baseLayerMD5": "1e07ab2763e5e0f5557f97c0e2c89020.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 43,
+ "rotationCenterY": 36
+ },
+ {
+ "costumeName": "shorts-c",
+ "baseLayerID": -1,
+ "baseLayerMD5": "dc9e0a1c2489ec0bf59a937b6c8ae85b.svg",
+ "bitmapResolution": 1,
+ "rotationCenterX": 35,
+ "rotationCenterY": 29
+ }
+ ],
+ "currentCostumeIndex": 0,
+ "scratchX": -166,
+ "scratchY": -113,
+ "scale": 1,
+ "direction": 90,
+ "rotationStyle": "normal",
+ "isDraggable": false,
+ "visible": true,
+ "spriteInfo": {}
+ }
+ },
{
"name": "Singer1",
"md5": "e47ef1af3b925e5ac9e3b3f809d440b3.svg",
@@ -12888,7 +13549,7 @@
"costumes": [
{
"costumeName": "snake-a",
- "baseLayerID": 3,
+ "baseLayerID": -1,
"baseLayerMD5": "4d06e12d90479461303d828f0970f2d4.svg",
"bitmapResolution": 1,
"rotationCenterX": 142,
@@ -12896,7 +13557,7 @@
},
{
"costumeName": "snake-b",
- "baseLayerID": 4,
+ "baseLayerID": -1,
"baseLayerMD5": "a8546a5f9ccaa2bdb678a362c50a17ec.svg",
"bitmapResolution": 1,
"rotationCenterX": 142,
@@ -12904,7 +13565,7 @@
},
{
"costumeName": "snake-c",
- "baseLayerID": 5,
+ "baseLayerID": -1,
"baseLayerMD5": "d993a7d70179777c14ac91a07e711d90.svg",
"bitmapResolution": 1,
"rotationCenterX": 142,
@@ -13404,7 +14065,7 @@
"costumes": [
{
"costumeName": "strawberry-a",
- "baseLayerID": 10,
+ "baseLayerID": -1,
"baseLayerMD5": "734556fb8e14740f2cbc971238b71d47.svg",
"bitmapResolution": 1,
"rotationCenterX": 57,
@@ -13412,7 +14073,7 @@
},
{
"costumeName": "strawberry-b",
- "baseLayerID": 11,
+ "baseLayerID": -1,
"baseLayerMD5": "77dadaa80bc5156f655c2196f57972f7.svg",
"bitmapResolution": 1,
"rotationCenterX": 57,
@@ -13420,7 +14081,7 @@
},
{
"costumeName": "strawberry-c",
- "baseLayerID": 12,
+ "baseLayerID": -1,
"baseLayerMD5": "19f933b3cf3e8e150753f8fb9bb7a779.svg",
"bitmapResolution": 1,
"rotationCenterX": 57,
@@ -13428,7 +14089,7 @@
},
{
"costumeName": "strawberry-d",
- "baseLayerID": 13,
+ "baseLayerID": -1,
"baseLayerMD5": "8e8057da8457e6167de36b7d3d28b4bb.svg",
"bitmapResolution": 1,
"rotationCenterX": 57,
@@ -13436,7 +14097,7 @@
},
{
"costumeName": "strawberry-e",
- "baseLayerID": 14,
+ "baseLayerID": -1,
"baseLayerMD5": "5eb63e64b83f5aa5b75a55329a34efec.svg",
"bitmapResolution": 1,
"rotationCenterX": 57,
@@ -13598,13 +14259,11 @@
},
{
"name": "Taco",
- "md5": "d4a2cea411c6030f017f25184562559d.svg",
+ "md5": "bc78fb90ed373d56c11d5fafa4203ccd.svg",
"type": "sprite",
"tags": [
"food",
- "waffle",
- "yum",
- "delicious"
+ "designerd"
],
"info": [
0,
@@ -13625,25 +14284,25 @@
],
"costumes": [
{
- "costumeName": "taco-a",
+ "costumeName": "Taco",
"baseLayerID": -1,
- "baseLayerMD5": "d4a2cea411c6030f017f25184562559d.svg",
+ "baseLayerMD5": "bc78fb90ed373d56c11d5fafa4203ccd.svg",
"bitmapResolution": 1,
- "rotationCenterX": 19,
- "rotationCenterY": 15
+ "rotationCenterX": 78,
+ "rotationCenterY": 48
},
{
- "costumeName": "taco-b",
+ "costumeName": "Taco-wizard",
"baseLayerID": -1,
- "baseLayerMD5": "cef6f6d7c92fc1f008077319ac12dc5e.svg",
+ "baseLayerMD5": "5e9e65db20d403b590578ed44b1a3792.svg",
"bitmapResolution": 1,
- "rotationCenterX": 56,
- "rotationCenterY": 15
+ "rotationCenterX": 125,
+ "rotationCenterY": 82
}
],
"currentCostumeIndex": 0,
- "scratchX": 7,
- "scratchY": -45,
+ "scratchX": 0,
+ "scratchY": 0,
"scale": 1,
"direction": 90,
"rotationStyle": "normal",
@@ -13680,7 +14339,7 @@
"costumes": [
{
"costumeName": "takeout-a",
- "baseLayerID": 15,
+ "baseLayerID": -1,
"baseLayerMD5": "0cfdefe0df1a032b90c8facd9f5dbe1f.svg",
"bitmapResolution": 1,
"rotationCenterX": 78,
@@ -13688,7 +14347,7 @@
},
{
"costumeName": "takeout-b",
- "baseLayerID": 16,
+ "baseLayerID": -1,
"baseLayerMD5": "48b19c48e32c98a35836ee40e3a7accf.svg",
"bitmapResolution": 1,
"rotationCenterX": 78,
@@ -13696,7 +14355,7 @@
},
{
"costumeName": "takeout-c",
- "baseLayerID": 17,
+ "baseLayerID": -1,
"baseLayerMD5": "22d33d87883f8fb26c642eccc9b339f0.svg",
"bitmapResolution": 1,
"rotationCenterX": 78,
@@ -13704,7 +14363,7 @@
},
{
"costumeName": "takeout-d",
- "baseLayerID": 18,
+ "baseLayerID": -1,
"baseLayerMD5": "262f1a3730d669dc9d43b3853e397361.svg",
"bitmapResolution": 1,
"rotationCenterX": 78,
@@ -13712,7 +14371,7 @@
},
{
"costumeName": "takeout-e",
- "baseLayerID": 19,
+ "baseLayerID": -1,
"baseLayerMD5": "528e9df8c3bd173867be4143f8563e87.svg",
"bitmapResolution": 1,
"rotationCenterX": 78,
@@ -13774,8 +14433,8 @@
},
{
"costumeName": "Ten80 top R step",
- "baseLayerID": -1,
- "baseLayerMD5": "733d05c17699758e2723599de333fdc0.png",
+ "baseLayerID": 4,
+ "baseLayerMD5": "580fba92f23d5592200eb5a9079dc38f.png",
"bitmapResolution": 2,
"rotationCenterX": 200,
"rotationCenterY": 270
@@ -13814,8 +14473,8 @@
},
{
"costumeName": "Ten80 pop down",
- "baseLayerID": -1,
- "baseLayerMD5": "14685e432d683c918328e7fb070b7029.png",
+ "baseLayerID": 5,
+ "baseLayerMD5": "fea7045c09073700b88fae8d4d257cd1.png",
"bitmapResolution": 2,
"rotationCenterX": 74,
"rotationCenterY": 188
@@ -14017,7 +14676,7 @@
"costumes": [
{
"costumeName": "toucan-a",
- "baseLayerID": 6,
+ "baseLayerID": -1,
"baseLayerMD5": "6c8798e606abd728b112aecedb5dc249.svg",
"bitmapResolution": 1,
"rotationCenterX": 80,
@@ -14025,7 +14684,7 @@
},
{
"costumeName": "toucan-b",
- "baseLayerID": 7,
+ "baseLayerID": -1,
"baseLayerMD5": "a3e12be9efa0e7aa83778f6054c9c541.svg",
"bitmapResolution": 1,
"rotationCenterX": 80,
@@ -14033,7 +14692,7 @@
},
{
"costumeName": "toucan-c",
- "baseLayerID": 8,
+ "baseLayerID": -1,
"baseLayerMD5": "56522b58a9959fd6152060346129f7cb.svg",
"bitmapResolution": 1,
"rotationCenterX": 80,
diff --git a/src/lib/libraries/tag-messages.js b/src/lib/libraries/tag-messages.js
new file mode 100644
index 00000000000..60a6d13fc50
--- /dev/null
+++ b/src/lib/libraries/tag-messages.js
@@ -0,0 +1,104 @@
+import {defineMessages} from 'react-intl';
+
+export default defineMessages({
+ all: {
+ defaultMessage: 'All',
+ description: 'Tag for filtering a library for everything',
+ id: 'gui.libraryTags.all'
+ },
+ animals: {
+ defaultMessage: 'Animals',
+ description: 'Tag for filtering a library for animals',
+ id: 'gui.libraryTags.animals'
+ },
+ dance: {
+ defaultMessage: 'Dance',
+ description: 'Tag for filtering a library for dance',
+ id: 'gui.libraryTags.dance'
+ },
+ effects: {
+ defaultMessage: 'Effects',
+ description: 'Tag for filtering a library for effects',
+ id: 'gui.libraryTags.effects'
+ },
+ fantasy: {
+ defaultMessage: 'Fantasy',
+ description: 'Tag for filtering a library for fantasy',
+ id: 'gui.libraryTags.fantasy'
+ },
+ fashion: {
+ defaultMessage: 'Fashion',
+ description: 'Tag for filtering a library for fashion',
+ id: 'gui.libraryTags.fashion'
+ },
+ food: {
+ defaultMessage: 'Food',
+ description: 'Tag for filtering a library for food',
+ id: 'gui.libraryTags.food'
+ },
+ indoors: {
+ defaultMessage: 'Indoors',
+ description: 'Tag for filtering a library for indoors',
+ id: 'gui.libraryTags.indoors'
+ },
+ loops: {
+ defaultMessage: 'Loops',
+ description: 'Tag for filtering a library for loops',
+ id: 'gui.libraryTags.loops'
+ },
+ music: {
+ defaultMessage: 'Music',
+ description: 'Tag for filtering a library for music',
+ id: 'gui.libraryTags.music'
+ },
+ notes: {
+ defaultMessage: 'Notes',
+ description: 'Tag for filtering a library for notes',
+ id: 'gui.libraryTags.notes'
+ },
+ outdoors: {
+ defaultMessage: 'Outdoors',
+ description: 'Tag for filtering a library for outdoors',
+ id: 'gui.libraryTags.outdoors'
+ },
+ patterns: {
+ defaultMessage: 'Patterns',
+ description: 'Tag for filtering a library for patterns',
+ id: 'gui.libraryTags.patterns'
+ },
+ people: {
+ defaultMessage: 'People',
+ description: 'Tag for filtering a library for people',
+ id: 'gui.libraryTags.people'
+ },
+ percussion: {
+ defaultMessage: 'Percussion',
+ description: 'Tag for filtering a library for percussion',
+ id: 'gui.libraryTags.percussion'
+ },
+ space: {
+ defaultMessage: 'Space',
+ description: 'Tag for filtering a library for space',
+ id: 'gui.libraryTags.space'
+ },
+ sports: {
+ defaultMessage: 'Sports',
+ description: 'Tag for filtering a library for sports',
+ id: 'gui.libraryTags.sports'
+ },
+ underwater: {
+ defaultMessage: 'Underwater',
+ description: 'Tag for filtering a library for underwater',
+ id: 'gui.libraryTags.underwater'
+ },
+ voice: {
+ defaultMessage: 'Voice',
+ description: 'Tag for filtering a library for voice',
+ id: 'gui.libraryTags.voice'
+ },
+ wacky: {
+ defaultMessage: 'Wacky',
+ description: 'Tag for filtering a library for wacky',
+ id: 'gui.libraryTags.wacky'
+ }
+});
diff --git a/src/lib/locale-utils.js b/src/lib/locale-utils.js
new file mode 100644
index 00000000000..571186b6c0e
--- /dev/null
+++ b/src/lib/locale-utils.js
@@ -0,0 +1,27 @@
+// TODO: this probably should be coming from scratch-l10n
+// Tracking in https://github.com/LLK/scratch-l10n/issues/32
+const rtlLocales = ['he'];
+
+const wideLocales = [
+ 'ab',
+ 'ca',
+ 'de',
+ 'el',
+ 'it',
+ 'ja',
+ 'ja-Hira',
+ 'ko',
+ 'hu',
+ 'ru',
+ 'vi'
+];
+
+const isWideLocale = locale => (
+ wideLocales.indexOf(locale) !== -1
+);
+
+export {
+ rtlLocales,
+ wideLocales,
+ isWideLocale
+};
diff --git a/src/lib/monitor-adapter.js b/src/lib/monitor-adapter.js
index d7bdd304e3d..be0b1db7199 100644
--- a/src/lib/monitor-adapter.js
+++ b/src/lib/monitor-adapter.js
@@ -11,10 +11,13 @@ const isUndefined = a => typeof a === 'undefined';
* @param {string} block.opcode - The opcode of the monitor
* @param {object} block.params - Extra params to the monitor block
* @param {string|number|Array} block.value - The monitor value
+ * @param {VirtualMachine} block.vm - the VM instance which owns the block
* @return {object} The adapted monitor with label and category
*/
-export default function ({id, spriteName, opcode, params, value}) {
- let {label, category, labelFn} = OpcodeLabels(opcode);
+export default function ({id, spriteName, opcode, params, value, vm}) {
+ // Extension monitors get their labels from the Runtime through `getLabelForOpcode`.
+ // Other monitors' labels are hard-coded in `OpcodeLabels`.
+ let {label, category, labelFn} = (vm && vm.runtime.getLabelForOpcode(opcode)) || OpcodeLabels(opcode);
// Use labelFn if provided for dynamic labelling (e.g. variables)
if (!isUndefined(labelFn)) label = labelFn(params);
diff --git a/src/lib/project-loader-hoc.jsx b/src/lib/project-loader-hoc.jsx
index cb8501af42a..c045dc0eebe 100644
--- a/src/lib/project-loader-hoc.jsx
+++ b/src/lib/project-loader-hoc.jsx
@@ -1,5 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {injectIntl, intlShape} from 'react-intl';
+
+import {setProjectId} from '../reducers/project-id';
import analytics from './analytics';
import log from './log';
@@ -19,14 +23,27 @@ const ProjectLoaderHOC = function (WrappedComponent) {
projectData: null,
fetchingProject: false
};
- }
- componentDidMount () {
- if (this.props.projectId || this.props.projectId === 0) {
- this.updateProject(this.props.projectId);
+ storage.setProjectHost(props.projectHost);
+ storage.setAssetHost(props.assetHost);
+ storage.setTranslatorFunction(props.intl.formatMessage);
+ props.setProjectId(props.projectId);
+ if (
+ props.projectId !== '' &&
+ props.projectId !== null &&
+ typeof props.projectId !== 'undefined'
+ ) {
+ this.updateProject(props.projectId);
}
}
componentWillUpdate (nextProps) {
+ if (this.props.projectHost !== nextProps.projectHost) {
+ storage.setProjectHost(nextProps.projectHost);
+ }
+ if (this.props.assetHost !== nextProps.assetHost) {
+ storage.setAssetHost(nextProps.assetHost);
+ }
if (this.props.projectId !== nextProps.projectId) {
+ this.props.setProjectId(nextProps.projectId);
this.setState({fetchingProject: true}, () => {
this.updateProject(nextProps.projectId);
});
@@ -53,7 +70,12 @@ const ProjectLoaderHOC = function (WrappedComponent) {
}
render () {
const {
- projectId, // eslint-disable-line no-unused-vars
+ /* eslint-disable no-unused-vars */
+ assetHost,
+ projectHost,
+ projectId,
+ setProjectId: setProjectIdProp,
+ /* eslint-enable no-unused-vars */
...componentProps
} = this.props;
if (!this.state.projectData) return null;
@@ -67,13 +89,25 @@ const ProjectLoaderHOC = function (WrappedComponent) {
}
}
ProjectLoaderComponent.propTypes = {
- projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+ assetHost: PropTypes.string,
+ intl: intlShape.isRequired,
+ projectHost: PropTypes.string,
+ projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ setProjectId: PropTypes.func
};
ProjectLoaderComponent.defaultProps = {
+ assetHost: 'https://assets.scratch.mit.edu',
+ projectHost: 'https://projects.scratch.mit.edu',
projectId: 0
};
- return ProjectLoaderComponent;
+ const mapStateToProps = () => ({});
+
+ const mapDispatchToProps = dispatch => ({
+ setProjectId: id => dispatch(setProjectId(id))
+ });
+
+ return injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProjectLoaderComponent));
};
export {
diff --git a/src/lib/screen-utils.js b/src/lib/screen-utils.js
index e233993e261..d6120178412 100644
--- a/src/lib/screen-utils.js
+++ b/src/lib/screen-utils.js
@@ -10,8 +10,13 @@ import layout, {STAGE_DISPLAY_SCALES, STAGE_SIZE_MODES, STAGE_DISPLAY_SIZES} fro
*/
const STAGE_DIMENSION_DEFAULTS = {
- spacingBorderAdjustment: 9,
- menuHeightAdjustment: 40
+ // referencing css/units.css,
+ // spacingBorderAdjustment = 2 * $full-screen-top-bottom-margin +
+ // 2 * $full-screen-border-width
+ fullScreenSpacingBorderAdjustment: 12,
+ // referencing css/units.css,
+ // menuHeightAdjustment = $stage-menu-height
+ menuHeightAdjustment: 44
};
/**
@@ -48,7 +53,7 @@ const getStageDimensions = (stageSize, isFullScreen) => {
if (isFullScreen) {
stageDimensions.height = window.innerHeight -
STAGE_DIMENSION_DEFAULTS.menuHeightAdjustment -
- STAGE_DIMENSION_DEFAULTS.spacingBorderAdjustment;
+ STAGE_DIMENSION_DEFAULTS.fullScreenSpacingBorderAdjustment;
stageDimensions.width = stageDimensions.height + (stageDimensions.height / 3);
@@ -67,7 +72,29 @@ const getStageDimensions = (stageSize, isFullScreen) => {
return stageDimensions;
};
+/**
+ * Take a pair of sizes for the stage (a target height and width and a default height and width),
+ * calculate the ratio between them, and return a CSS transform to scale to that ratio.
+ * @param {object} sizeInfo An object containing dimensions of the target and default stage sizes.
+ * @param {number} sizeInfo.width The target width
+ * @param {number} sizeInfo.height The target height
+ * @param {number} sizeInfo.widthDefault The default width
+ * @param {number} sizeInfo.heightDefault The default height
+ * @returns {object} the CSS transform
+ */
+const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => {
+ const scaleX = width / widthDefault;
+ const scaleY = height / heightDefault;
+ if (scaleX === 1 && scaleY === 1) {
+ // Do not set a transform if the scale is 1 because
+ // it messes up `position: fixed` elements like the context menu.
+ return;
+ }
+ return {transform: `scale(${scaleX},${scaleY})`};
+};
+
export {
getStageDimensions,
- resolveStageSize
+ resolveStageSize,
+ stageSizeToTransform
};
diff --git a/src/lib/shared-messages.js b/src/lib/shared-messages.js
new file mode 100644
index 00000000000..0de3e342de2
--- /dev/null
+++ b/src/lib/shared-messages.js
@@ -0,0 +1,24 @@
+import {defineMessages} from 'react-intl';
+
+export default defineMessages({
+ backdrop: {
+ defaultMessage: 'backdrop{index}',
+ description: 'Default name for a new backdrop, scratch will automatically adjust the number if necessary',
+ id: 'gui.sharedMessages.backdrop'
+ },
+ costume: {
+ defaultMessage: 'costume{index}',
+ description: 'Default name for a new costume, scratch will automatically adjust the number if necessary',
+ id: 'gui.sharedMessages.costume'
+ },
+ sprite: {
+ defaultMessage: 'Sprite{index}',
+ description: 'Default name for a new sprite, scratch will automatically adjust the number if necessary',
+ id: 'gui.sharedMessages.sprite'
+ },
+ pop: {
+ defaultMessage: 'pop',
+ description: 'Name of the pop sound, the default sound added to a sprite',
+ id: 'gui.sharedMessages.pop'
+ }
+});
diff --git a/src/lib/storage.js b/src/lib/storage.js
index be7bcef1e6d..b0634d9c3cf 100644
--- a/src/lib/storage.js
+++ b/src/lib/storage.js
@@ -1,9 +1,6 @@
import ScratchStorage from 'scratch-storage';
-import defaultProjectAssets from './default-project';
-
-const PROJECT_SERVER = 'https://projects.scratch.mit.edu';
-const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu';
+import defaultProject from './default-project';
/**
* Wrapper for ScratchStorage which adds default web sources.
@@ -12,23 +9,52 @@ const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu';
class Storage extends ScratchStorage {
constructor () {
super();
- this.addWebSource(
+ this.cacheDefaultProject();
+ this.addWebStore(
[this.AssetType.Project],
- projectAsset => {
- const [projectId, revision] = projectAsset.assetId.split('.');
- return revision ?
- `${PROJECT_SERVER}/internalapi/project/${projectId}/get/${revision}` :
- `${PROJECT_SERVER}/internalapi/project/${projectId}/get/`;
- }
+ this.getProjectGetConfig.bind(this),
+ this.getProjectCreateConfig.bind(this),
+ this.getProjectUpdateConfig.bind(this)
);
- this.addWebSource(
+ this.addWebStore(
[this.AssetType.ImageVector, this.AssetType.ImageBitmap, this.AssetType.Sound],
- asset => `${ASSET_SERVER}/internalapi/asset/${asset.assetId}.${asset.dataFormat}/get/`
+ this.getAssetGetConfig.bind(this)
);
- this.addWebSource(
+ this.addWebStore(
[this.AssetType.Sound],
asset => `static/extension-assets/scratch3_music/${asset.assetId}.${asset.dataFormat}`
);
+ }
+ setProjectHost (projectHost) {
+ this.projectHost = projectHost;
+ }
+ getProjectGetConfig (projectAsset) {
+ return `${this.projectHost}/internalapi/project/${projectAsset.assetId}/get/`;
+ }
+ getProjectCreateConfig () {
+ return {
+ url: `${this.projectHost}/`,
+ withCredentials: true
+ };
+ }
+ getProjectUpdateConfig (projectAsset) {
+ return {
+ url: `${this.projectHost}/${projectAsset.assetId}`,
+ withCredentials: true
+ };
+ }
+ setAssetHost (assetHost) {
+ this.assetHost = assetHost;
+ }
+ getAssetGetConfig (asset) {
+ return `${this.assetHost}/internalapi/asset/${asset.assetId}.${asset.dataFormat}/get/`;
+ }
+ setTranslatorFunction (translator) {
+ this.translator = translator;
+ this.cacheDefaultProject();
+ }
+ cacheDefaultProject () {
+ const defaultProjectAssets = defaultProject(this.translator);
defaultProjectAssets.forEach(asset => this.cache(
this.AssetType[asset.assetType],
this.DataFormat[asset.dataFormat],
diff --git a/src/lib/titled-hoc.jsx b/src/lib/titled-hoc.jsx
new file mode 100644
index 00000000000..2534d96bd61
--- /dev/null
+++ b/src/lib/titled-hoc.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import {defineMessages, intlShape, injectIntl} from 'react-intl';
+
+const messages = defineMessages({
+ defaultProjectTitle: {
+ id: 'gui.gui.defaultProjectTitle',
+ description: 'Default title for project',
+ defaultMessage: 'Scratch Project'
+ }
+});
+
+/* Higher Order Component to get and set the project title
+ * @param {React.Component} WrappedComponent component to receive project title related props
+ * @returns {React.Component} component with project loading behavior
+ */
+const TitledHOC = function (WrappedComponent) {
+ class TitledComponent extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleUpdateProjectTitle'
+ ]);
+ this.state = {
+ projectTitle: this.props.intl.formatMessage(messages.defaultProjectTitle)
+ };
+ }
+ handleUpdateProjectTitle (newTitle) {
+ this.setState({projectTitle: newTitle});
+ }
+ render () {
+ return (
+ <%= htmlWebpackPlugin.options.title %>
<% if (htmlWebpackPlugin.options.sentryConfig) { %>
diff --git a/src/playground/index.jsx b/src/playground/index.jsx
index da2be7a2783..ba0ada4da78 100644
--- a/src/playground/index.jsx
+++ b/src/playground/index.jsx
@@ -7,17 +7,12 @@ import React from 'react';
import ReactDOM from 'react-dom';
import analytics from '../lib/analytics';
-import GUI from '../containers/gui.jsx';
-import HashParserHOC from '../lib/hash-parser-hoc.jsx';
import AppStateHOC from '../lib/app-state-hoc.jsx';
+import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx';
+import supportedBrowser from '../lib/supported-browser';
import styles from './index.css';
-if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
- // Warn before navigating away
- window.onbeforeunload = () => true;
-}
-
// Register "base" page view
analytics.pageview('/');
@@ -25,16 +20,15 @@ const appTarget = document.createElement('div');
appTarget.className = styles.app;
document.body.appendChild(appTarget);
-GUI.setAppElement(appTarget);
-const WrappedGui = HashParserHOC(AppStateHOC(GUI));
-
-// TODO a hack for testing the backpack, allow backpack host to be set by url param
-const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
-const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
-
-const backpackOptions = {
- visible: true,
- host: backpackHost
-};
-
-ReactDOM.render( (
);
Player.propTypes = {
isPlayerOnly: PropTypes.bool,
- onSeeInside: PropTypes.func
+ onSeeInside: PropTypes.func,
+ projectId: PropTypes.string
};
const mapStateToProps = state => ({
@@ -46,7 +49,7 @@ const mapDispatchToProps = dispatch => ({
});
const ConnectedPlayer = connect(mapStateToProps, mapDispatchToProps)(Player);
-const WrappedPlayer = HashParserHOC(AppStateHOC(ConnectedPlayer));
+const WrappedPlayer = HashParserHOC(AppStateHOC(TitledHOC(ConnectedPlayer)));
const appTarget = document.createElement('div');
document.body.appendChild(appTarget);
diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx
new file mode 100644
index 00000000000..562e57eac9c
--- /dev/null
+++ b/src/playground/render-gui.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+import GUI from '../containers/gui.jsx';
+import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import TitledHOC from '../lib/titled-hoc.jsx';
+
+/*
+ * Render the GUI playground. This is a separate function because importing anything
+ * that instantiates the VM causes unsupported browsers to crash
+ * {object} appTarget - the DOM element to render to
+ */
+export default appTarget => {
+ GUI.setAppElement(appTarget);
+ const WrappedGui = HashParserHOC(AppStateHOC(TitledHOC(GUI)));
+
+ // TODO a hack for testing the backpack, allow backpack host to be set by url param
+ const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
+ const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+
+ const backpackOptions = {
+ visible: true,
+ host: backpackHost
+ };
+ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
+ // Warn before navigating away
+ window.onbeforeunload = () => true;
+ }
+
+ ReactDOM.render(
@@ -30,16 +30,9 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
>
5
-
-
{
@@ -73,17 +72,6 @@ describe('SpriteSelectorItemComponent', () => {
expect(onDeleteButtonClick).toHaveBeenCalled();
});
- test('creates a CostumeCanvas when a costume url is defined', () => {
- const wrapper = shallowWithIntl(getComponent());
- expect(wrapper.find(CostumeCanvas).exists()).toBe(true);
- });
-
- test('does not create a CostumeCanvas when a costume url is null', () => {
- costumeURL = null;
- const wrapper = shallowWithIntl(getComponent());
- expect(wrapper.find(CostumeCanvas).exists()).toBe(false);
- });
-
test('it has a context menu with delete menu item and callback', () => {
const wrapper = mountWithIntl(getComponent());
const contextMenu = wrapper.find('ContextMenu');
diff --git a/test/unit/containers/sprite-selector-item.test.jsx b/test/unit/containers/sprite-selector-item.test.jsx
index 85032603d4b..25200a1fb5f 100644
--- a/test/unit/containers/sprite-selector-item.test.jsx
+++ b/test/unit/containers/sprite-selector-item.test.jsx
@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
import {Provider} from 'react-redux';
import SpriteSelectorItem from '../../../src/containers/sprite-selector-item';
+import {HAS_FONT_REGEXP} from '../../../src/containers/sprite-selector-item';
import CloseButton from '../../../src/components/close-button/close-button';
describe('SpriteSelectorItem Container', () => {
@@ -48,22 +49,19 @@ describe('SpriteSelectorItem Container', () => {
onDeleteButtonClick = jest.fn();
dispatchSetHoveredSprite = jest.fn();
selected = true;
- // Mock window.confirm() which is called when the close button is clicked.
- global.confirm = jest.fn(() => true);
});
- test('should confirm if the user really wants to delete the sprite', () => {
+ test('should delete the sprite', () => {
const wrapper = mountWithIntl(getContainer());
wrapper.find(CloseButton).simulate('click');
- expect(global.confirm).toHaveBeenCalled();
expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
});
- test('should not delete the sprite if the user cancels', () => {
- global.confirm = jest.fn(() => false);
- const wrapper = mountWithIntl(getContainer());
- wrapper.find(CloseButton).simulate('click');
- expect(global.confirm).toHaveBeenCalled();
- expect(onDeleteButtonClick).not.toHaveBeenCalled();
+ test('Has font regexp works', () => {
+ expect('font-family="Sans Serif"'.match(HAS_FONT_REGEXP)).toBeTruthy();
+ expect('font-family="none" font-family="Sans Serif"'.match(HAS_FONT_REGEXP)).toBeTruthy();
+ expect('font-family = "Sans Serif"'.match(HAS_FONT_REGEXP)).toBeTruthy();
+
+ expect('font-family="none"'.match(HAS_FONT_REGEXP)).toBeFalsy();
});
});
diff --git a/test/unit/util/project-loader-hoc.test.jsx b/test/unit/util/project-loader-hoc.test.jsx
index 502ac0f62d4..a0a51cc6610 100644
--- a/test/unit/util/project-loader-hoc.test.jsx
+++ b/test/unit/util/project-loader-hoc.test.jsx
@@ -1,23 +1,17 @@
import React from 'react';
+import configureStore from 'redux-mock-store';
import ProjectLoaderHOC from '../../../src/lib/project-loader-hoc.jsx';
import storage from '../../../src/lib/storage';
-import {mount} from 'enzyme';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
jest.mock('react-ga');
describe('ProjectLoaderHOC', () => {
+ const mockStore = configureStore();
+ let store;
- test('when there is no id, it loads (default) project id 0', () => {
- const Component = ({projectData}) =>
{projectData}
;
- const WrappedComponent = ProjectLoaderHOC(Component);
- const originalLoad = storage.load;
- storage.load = jest.fn((type, id) => Promise.resolve(id));
- const mounted = mount(
);
- expect(mounted.props().projectId).toEqual(0);
- expect(storage.load).toHaveBeenCalledWith(
- storage.AssetType.Project, 0, storage.DataFormat.JSON
- );
- storage.load = originalLoad;
+ beforeEach(() => {
+ store = mockStore({scratchGui: {}});
});
test('when there is an id, it tries to load that project', () => {
@@ -25,7 +19,12 @@ describe('ProjectLoaderHOC', () => {
const WrappedComponent = ProjectLoaderHOC(Component);
const originalLoad = storage.load;
storage.load = jest.fn((type, id) => Promise.resolve({data: id}));
- const mounted = mount(
);
+ const mounted = mountWithIntl(
+
+ );
expect(mounted.props().projectId).toEqual('100');
expect(storage.load).toHaveBeenLastCalledWith(
storage.AssetType.Project, '100', storage.DataFormat.JSON
@@ -38,7 +37,7 @@ describe('ProjectLoaderHOC', () => {
const WrappedComponent = ProjectLoaderHOC(Component);
const originalLoad = storage.load;
storage.load = jest.fn(() => Promise.resolve(null));
- const mounted = mount(
);
+ const mounted = mountWithIntl(
);
storage.load = originalLoad;
const mountedDiv = mounted.find('div');
expect(mountedDiv.exists()).toEqual(false);
diff --git a/webpack.config.js b/webpack.config.js
index a44d90c48e2..1013bb87a08 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -177,7 +177,7 @@ module.exports = [
])
})
].concat(
- process.env.NODE_ENV === 'production' ? (
+ process.env.NODE_ENV === 'production' || process.env.BUILD_MODE === 'dist' ? (
// export as library
defaultsDeep({}, base, {
target: 'web',
+ ) : null}
+ {message}
+ 
}
+ 
+ 
+ 
- 
+ 
+
+ 
+