scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge remote-tracking branch 'origin/develop' into integration-branch-ux-12.2024

Browse source
This commit is contained in:
MiroslavDionisiev 2024-11-19 14:58:16 +02:00
commit 9cc53b6df5
15 changed files with 251 additions and 321 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.nvmrc
View file

@ -1 +1 @@
18.20.4 18.20.5

192
package-lock.json generated
View file

@ -88,7 +88,7 @@
"minilog": "2.1.0", "minilog": "2.1.0",
"pako": "0.2.8", "pako": "0.2.8",
"plotly.js": "1.47.4", "plotly.js": "1.47.4",
"postcss": "8.4.47", "postcss": "8.4.49",
"postcss-import": "12.0.1", "postcss-import": "12.0.1",
"postcss-loader": "4.3.0", "postcss-loader": "4.3.0",
"postcss-simple-vars": "5.0.2", "postcss-simple-vars": "5.0.2",
@ -109,10 +109,10 @@
"redux-mock-store": "1.5.5", "redux-mock-store": "1.5.5",
"redux-thunk": "2.4.2", "redux-thunk": "2.4.2",
"regenerator-runtime": "0.13.9", "regenerator-runtime": "0.13.9",
"sass": "1.80.6", "sass": "1.81.0",
"sass-loader": "10.5.2", "sass-loader": "10.5.2",
"scratch-gui": "4.1.2", "scratch-gui": "4.1.5",
"scratch-l10n": "4.0.22", "scratch-l10n": "4.0.34",
"selenium-webdriver": "4.26.0", "selenium-webdriver": "4.26.0",
"slick-carousel": "1.8.1", "slick-carousel": "1.8.1",
"stream-browserify": "3.0.0", "stream-browserify": "3.0.0",
@ -370,9 +370,9 @@
} }
}, },
"node_modules/@babel/helper-define-polyfill-provider": { "node_modules/@babel/helper-define-polyfill-provider": {
"version": "0.6.2", "version": "0.6.3",
"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
"integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==", "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -5523,14 +5523,14 @@
} }
}, },
"node_modules/babel-plugin-polyfill-corejs2": { "node_modules/babel-plugin-polyfill-corejs2": {
"version": "0.4.11", "version": "0.4.12",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
"integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==", "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/compat-data": "^7.22.6", "@babel/compat-data": "^7.22.6",
"@babel/helper-define-polyfill-provider": "^0.6.2", "@babel/helper-define-polyfill-provider": "^0.6.3",
"semver": "^6.3.1" "semver": "^6.3.1"
}, },
"peerDependencies": { "peerDependencies": {
@ -5552,13 +5552,13 @@
} }
}, },
"node_modules/babel-plugin-polyfill-regenerator": { "node_modules/babel-plugin-polyfill-regenerator": {
"version": "0.6.2", "version": "0.6.3",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
"integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==", "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/helper-define-polyfill-provider": "^0.6.2" "@babel/helper-define-polyfill-provider": "^0.6.3"
}, },
"peerDependencies": { "peerDependencies": {
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@ -5814,9 +5814,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/bn.js": { "node_modules/bn.js": {
"version": "4.12.0", "version": "4.12.1",
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.1.tgz",
"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", "integrity": "sha512-k8TVBiPkPJT9uHLdOKfFpqcfprwBFOAAXXozRubr7R7PfIuKvQlzcI4M0pALeqXN09vdaMbUdUj+pass+uULAg==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -6551,9 +6551,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001679", "version": "1.0.30001680",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001679.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
"integrity": "sha512-j2YqID/YwpLnKzCmBOS4tlZdWprXm3ZmQLBH9ZBXFOhoxLA46fwyBvx6toCBWBmnuwUY/qB3kEU6gFx8qgCroA==", "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -8976,9 +8976,9 @@
} }
}, },
"node_modules/dompurify": { "node_modules/dompurify": {
"version": "3.1.7", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.0.tgz",
"integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==", "integrity": "sha512-AMdOzK44oFWqHEi0wpOqix/fUNY707OmoeFDnbi3Q5I8uOpy21ufUA5cDJPr0bosxrflOVD/H2DMSvuGKJGfmQ==",
"dev": true, "dev": true,
"license": "(MPL-2.0 OR Apache-2.0)" "license": "(MPL-2.0 OR Apache-2.0)"
}, },
@ -9246,9 +9246,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.55", "version": "1.5.62",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.62.tgz",
"integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==", "integrity": "sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -9523,9 +9523,9 @@
} }
}, },
"node_modules/es-abstract": { "node_modules/es-abstract": {
"version": "1.23.3", "version": "1.23.5",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz",
"integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", "integrity": "sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"array-buffer-byte-length": "^1.0.1", "array-buffer-byte-length": "^1.0.1",
@ -9543,7 +9543,7 @@
"function.prototype.name": "^1.1.6", "function.prototype.name": "^1.1.6",
"get-intrinsic": "^1.2.4", "get-intrinsic": "^1.2.4",
"get-symbol-description": "^1.0.2", "get-symbol-description": "^1.0.2",
"globalthis": "^1.0.3", "globalthis": "^1.0.4",
"gopd": "^1.0.1", "gopd": "^1.0.1",
"has-property-descriptors": "^1.0.2", "has-property-descriptors": "^1.0.2",
"has-proto": "^1.0.3", "has-proto": "^1.0.3",
@ -9559,10 +9559,10 @@
"is-string": "^1.0.7", "is-string": "^1.0.7",
"is-typed-array": "^1.1.13", "is-typed-array": "^1.1.13",
"is-weakref": "^1.0.2", "is-weakref": "^1.0.2",
"object-inspect": "^1.13.1", "object-inspect": "^1.13.3",
"object-keys": "^1.1.1", "object-keys": "^1.1.1",
"object.assign": "^4.1.5", "object.assign": "^4.1.5",
"regexp.prototype.flags": "^1.5.2", "regexp.prototype.flags": "^1.5.3",
"safe-array-concat": "^1.1.2", "safe-array-concat": "^1.1.2",
"safe-regex-test": "^1.0.3", "safe-regex-test": "^1.0.3",
"string.prototype.trim": "^1.2.9", "string.prototype.trim": "^1.2.9",
@ -11004,9 +11004,9 @@
} }
}, },
"node_modules/flow-remove-types": { "node_modules/flow-remove-types": {
"version": "2.252.0", "version": "2.253.0",
"resolved": "https://registry.npmjs.org/flow-remove-types/-/flow-remove-types-2.252.0.tgz", "resolved": "https://registry.npmjs.org/flow-remove-types/-/flow-remove-types-2.253.0.tgz",
"integrity": "sha512-Vv3p2UjixHt2ISJJUwbGmXA104uegB79eEGuqr5uOlJDD7JdiZgR2jH+Mxqaq1gRQXBenHKGgRVLJkgtKn98DQ==", "integrity": "sha512-4L1X1FZE08AOe9SMyqFhyl+TSM6L+tHbVBfIMQsZHduPUwnTuIs5jfVyz35bRAS67k2c1e14qSosgYVi+Uuj1Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -12093,9 +12093,9 @@
} }
}, },
"node_modules/gl-text/node_modules/regl": { "node_modules/gl-text/node_modules/regl": {
"version": "2.1.0", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/regl/-/regl-2.1.0.tgz", "resolved": "https://registry.npmjs.org/regl/-/regl-2.1.1.tgz",
"integrity": "sha512-oWUce/aVoEvW5l2V0LK7O5KJMzUSKeiOwFuJehzpSFd43dO5spP9r+sSUfhKtsky4u6MCqWJaRL+abzExynfTg==", "integrity": "sha512-+IOGrxl3FZ8ZM9ixCWQZzFRiRn7Rzn9bu3iFHwg/yz4tlOUQgbO4PHLgG+1ZT60zcIV8tief6Qrmyl8qcoJP0g==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -13304,9 +13304,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.3.7", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", "integrity": "sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -19359,9 +19359,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.47", "version": "8.4.49",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -19380,7 +19380,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"nanoid": "^3.3.7", "nanoid": "^3.3.7",
"picocolors": "^1.1.0", "picocolors": "^1.1.1",
"source-map-js": "^1.2.1" "source-map-js": "^1.2.1"
}, },
"engines": { "engines": {
@ -19506,14 +19506,14 @@
} }
}, },
"node_modules/postcss-modules-local-by-default": { "node_modules/postcss-modules-local-by-default": {
"version": "4.0.5", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz", "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz",
"integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==", "integrity": "sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"icss-utils": "^5.0.0", "icss-utils": "^5.0.0",
"postcss-selector-parser": "^6.0.2", "postcss-selector-parser": "^7.0.0",
"postcss-value-parser": "^4.1.0" "postcss-value-parser": "^4.1.0"
}, },
"engines": { "engines": {
@ -19524,13 +19524,13 @@
} }
}, },
"node_modules/postcss-modules-scope": { "node_modules/postcss-modules-scope": {
"version": "3.2.0", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
"integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==", "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
"dev": true, "dev": true,
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"postcss-selector-parser": "^6.0.4" "postcss-selector-parser": "^7.0.0"
}, },
"engines": { "engines": {
"node": "^10 || ^12 || >= 14" "node": "^10 || ^12 || >= 14"
@ -19556,9 +19556,9 @@
} }
}, },
"node_modules/postcss-selector-parser": { "node_modules/postcss-selector-parser": {
"version": "6.1.2", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -21905,14 +21905,14 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.80.6", "version": "1.81.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
"integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"chokidar": "^4.0.0", "chokidar": "^4.0.0",
"immutable": "^4.0.0", "immutable": "^5.0.2",
"source-map-js": ">=0.6.2 <2.0.0" "source-map-js": ">=0.6.2 <2.0.0"
}, },
"bin": { "bin": {
@ -22068,9 +22068,9 @@
} }
}, },
"node_modules/scratch-audio": { "node_modules/scratch-audio": {
"version": "1.0.310", "version": "1.0.320",
"resolved": "https://registry.npmjs.org/scratch-audio/-/scratch-audio-1.0.310.tgz", "resolved": "https://registry.npmjs.org/scratch-audio/-/scratch-audio-1.0.320.tgz",
"integrity": "sha512-4CrTZ8Lcw8InfodNz6btNNfQ9QtjTZ1ZiuyZ7N9V8Wwe3fmcWn/Kffq/fqLRN9C41nhmsJSQZ2v+Nb3jRGKo9w==", "integrity": "sha512-wZwgxXqAzqv/NN+Ps/NbLn1xWyvjGrYirumcflzDuQbIJxxj8CXF0ChN029S1ydFWbHodsKLRxICgF5yfX5HXQ==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22192,9 +22192,9 @@
} }
}, },
"node_modules/scratch-gui": { "node_modules/scratch-gui": {
"version": "4.1.2", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-4.1.2.tgz", "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-4.1.5.tgz",
"integrity": "sha512-uS7qTAAMF6vjiyN0c+sHqrSGFOR3mA5T2fb1dl4nwWNEKYNGXQnRayjEzpOKL8Foo5uBOg4Qigf1mV3BRu/iiA==", "integrity": "sha512-+UQ2ARJQRn4GKEAZH2GDaaC1zmlACFBDcPWMRXfMfbJlIIhGlfaDOVVpZR3ftSfeDuRO9RfA0x5jhkaN2qlIhw==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22461,9 +22461,9 @@
} }
}, },
"node_modules/scratch-l10n": { "node_modules/scratch-l10n": {
"version": "4.0.22", "version": "4.0.34",
"resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-4.0.22.tgz", "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-4.0.34.tgz",
"integrity": "sha512-bhIy0FM+2gCcdNrifnuXskevSf90wyjdDnsm7XGr+jMMLyws75+Vo5p36LNZwvxztrFbQ21toNopl9f9VVw95w==", "integrity": "sha512-sO/KcFdLVZT+zRmp/CGUvYYIGd2f1csXSmhHvaHSeumh6CY83nv0YDqd3zOLRmoomW0MgoxrlKIH8WUqWSNSNg==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22477,9 +22477,9 @@
} }
}, },
"node_modules/scratch-paint": { "node_modules/scratch-paint": {
"version": "2.2.487", "version": "2.2.498",
"resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-2.2.487.tgz", "resolved": "https://registry.npmjs.org/scratch-paint/-/scratch-paint-2.2.498.tgz",
"integrity": "sha512-qwlv2snJPRXTAKLlU9Dsd3ncVE6S7rvqo1we7CFDraaQIfxMeajaMOMp5jwOoBGdoOdyYlKiPo/1PNmjzqaQyw==", "integrity": "sha512-Xe4gOaLm317ngGjpG4FNDWjysHsBEf/h0ypGKAlCnRoqeEXmTMgoM68qisgBNV9gNWZ7/fwciv1bdDcQ9ovSmg==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22545,9 +22545,9 @@
} }
}, },
"node_modules/scratch-render": { "node_modules/scratch-render": {
"version": "1.2.90", "version": "1.2.104",
"resolved": "https://registry.npmjs.org/scratch-render/-/scratch-render-1.2.90.tgz", "resolved": "https://registry.npmjs.org/scratch-render/-/scratch-render-1.2.104.tgz",
"integrity": "sha512-pcbNQd/473r5wGa3GTBgz7r+J9G5s3iWw0v55rEq27KvmdZKiIgD9/EWowbrrPu5rlJMQ5BaRaRJfXxqbeIJsw==", "integrity": "sha512-hDGfW0AsWWKmW7XALjNqdS3C7gsdpC02GL4qfDRBNIkNrcB5QvOFOlvWQaEFDPE879a5EST77Us3e3mk5/zFeg==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22565,9 +22565,9 @@
} }
}, },
"node_modules/scratch-render-fonts": { "node_modules/scratch-render-fonts": {
"version": "1.0.123", "version": "1.0.126",
"resolved": "https://registry.npmjs.org/scratch-render-fonts/-/scratch-render-fonts-1.0.123.tgz", "resolved": "https://registry.npmjs.org/scratch-render-fonts/-/scratch-render-fonts-1.0.126.tgz",
"integrity": "sha512-sAMxwwAg7fP0T73U7Fs8/u7wHHFtiV62MykGrTf0SzJXOGx4xu4illVKKa/CyYh6Kh2fsgSyucNdkD2zHi2x2Q==", "integrity": "sha512-XBK88BjPMdBK1MOIKafGibCaSaoPj2sueu1QglRL2WFKy6y66v830TTfE1ugHK5RCXCbDFx7iJV1QOgJqkSFHw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"base64-loader": "^1.0.0" "base64-loader": "^1.0.0"
@ -22597,9 +22597,9 @@
"dev": true "dev": true
}, },
"node_modules/scratch-sb1-converter": { "node_modules/scratch-sb1-converter": {
"version": "1.0.303", "version": "1.0.311",
"resolved": "https://registry.npmjs.org/scratch-sb1-converter/-/scratch-sb1-converter-1.0.303.tgz", "resolved": "https://registry.npmjs.org/scratch-sb1-converter/-/scratch-sb1-converter-1.0.311.tgz",
"integrity": "sha512-HJGH6xJXyThzzuqkSbXzln+2CxC2wpf1lEIUd4WjQD4BG2P3RucQynWM9bDHJA9bZsviyNiKmX3uPhscRdqXqw==", "integrity": "sha512-Rz7g05oW+IS60wqEG5y6b/l3R8v/maGpICyqqMzdfNOP1KAkgykBb9+VubYiGm9Sgr9VzphEWpkI79bYEOKPuw==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22657,9 +22657,9 @@
} }
}, },
"node_modules/scratch-svg-renderer": { "node_modules/scratch-svg-renderer": {
"version": "2.5.34", "version": "2.5.38",
"resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.5.34.tgz", "resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.5.38.tgz",
"integrity": "sha512-iTdI3Fql7WbeY2Cf4Bsotji5vizNfoDtVb90nLkJaNr4sDof9IP64+0y+p5dEn33r+XDubz9bhf+05U/zkX/Yg==", "integrity": "sha512-71MwTICnoAr3l7ytETlORxKUBfRlURLvvHXhPoVLlGhL9t5Byuly/JkxiCglELFzbH8pGnN5rBHR7bzTpD9PkA==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22700,9 +22700,9 @@
"license": "BSD-3-Clause" "license": "BSD-3-Clause"
}, },
"node_modules/scratch-vm": { "node_modules/scratch-vm": {
"version": "4.8.79", "version": "4.8.91",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-4.8.79.tgz", "resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-4.8.91.tgz",
"integrity": "sha512-2FJssRj9PU47spmvRimoHkBZKneoc3xXoTkxbt1+OJEoVk5nnH6HwO0GcQZa2HmxR32IHjuqcOyqkENRtgapnw==", "integrity": "sha512-495Qbqe2XVqjB9/Wz0HpEVwubSVdL74Lrx4pyYvBnoEG4sZ1wWLfWB8ZNzHf16vETZ5U7zDcUayVUacg6e1jdQ==",
"dev": true, "dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
@ -22723,7 +22723,7 @@
"scratch-render": "^1.0.232", "scratch-render": "^1.0.232",
"scratch-sb1-converter": "^1.0.0", "scratch-sb1-converter": "^1.0.0",
"scratch-storage": "^2.3.5", "scratch-storage": "^2.3.5",
"scratch-svg-renderer": "2.5.34", "scratch-svg-renderer": "2.5.38",
"scratch-translate-extension-languages": "^1.0.0", "scratch-translate-extension-languages": "^1.0.0",
"text-encoding": "^0.7.0", "text-encoding": "^0.7.0",
"uuid": "^8.3.2", "uuid": "^8.3.2",
@ -26576,22 +26576,22 @@
"license": "ISC" "license": "ISC"
}, },
"node_modules/tldts": { "node_modules/tldts": {
"version": "6.1.60", "version": "6.1.61",
"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.60.tgz", "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.61.tgz",
"integrity": "sha512-TYVHm7G9NCnhgqOsFalbX6MG1Po5F4efF+tLfoeiOGQq48Oqgwcgz8upY2R1BHWa4aDrj28RYx0dkYJ63qCFMg==", "integrity": "sha512-rv8LUyez4Ygkopqn+M6OLItAOT9FF3REpPQDkdMx5ix8w4qkuE7Vo2o/vw1nxKQYmJDV8JpAMJQr1b+lTKf0FA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"tldts-core": "^6.1.60" "tldts-core": "^6.1.61"
}, },
"bin": { "bin": {
"tldts": "bin/cli.js" "tldts": "bin/cli.js"
} }
}, },
"node_modules/tldts-core": { "node_modules/tldts-core": {
"version": "6.1.60", "version": "6.1.61",
"resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.60.tgz", "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.61.tgz",
"integrity": "sha512-XHjoxak8SFQnHnmYHb3PcnW5TZ+9ErLZemZei3azuIRhQLw4IExsVbL3VZJdHcLeNaXq6NqawgpDPpjBOg4B5g==", "integrity": "sha512-In7VffkDWUPgwa+c9picLUxvb0RltVwTkSgMNFgvlGSWveCzGBemBqTsgJCL4EDFWZ6WH0fKTsot6yNhzy3ZzQ==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },

8
package.json
View file

@ -123,7 +123,7 @@
"minilog": "2.1.0", "minilog": "2.1.0",
"pako": "0.2.8", "pako": "0.2.8",
"plotly.js": "1.47.4", "plotly.js": "1.47.4",
"postcss": "8.4.47", "postcss": "8.4.49",
"postcss-import": "12.0.1", "postcss-import": "12.0.1",
"postcss-loader": "4.3.0", "postcss-loader": "4.3.0",
"postcss-simple-vars": "5.0.2", "postcss-simple-vars": "5.0.2",
@ -144,10 +144,10 @@
"redux-mock-store": "1.5.5", "redux-mock-store": "1.5.5",
"redux-thunk": "2.4.2", "redux-thunk": "2.4.2",
"regenerator-runtime": "0.13.9", "regenerator-runtime": "0.13.9",
"sass": "1.80.6", "sass": "1.81.0",
"sass-loader": "10.5.2", "sass-loader": "10.5.2",
"scratch-gui": "4.1.2", "scratch-gui": "4.1.5",
"scratch-l10n": "4.0.22", "scratch-l10n": "4.0.34",
"selenium-webdriver": "4.26.0", "selenium-webdriver": "4.26.0",
"slick-carousel": "1.8.1", "slick-carousel": "1.8.1",
"stream-browserify": "3.0.0", "stream-browserify": "3.0.0",

24
src/components/journeys/project-journey/project-journey.scss → src/components/journeys/common-journey.scss
View file

@ -1,19 +1,27 @@
@import "../../../colors"; @import "../../colors";
.driver-popover.tutorials-highlight,
.driver-popover.project-journey { .driver-popover.project-journey {
display: flex; display: flex !important;
flex-direction: column; flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
background-color: $ui-purple-dark; background-color: $ui-purple-dark;
padding: 0.5rem;
.driver-popover-close-btn { .driver-popover-close-btn {
display: flex !important;
justify-content: center;
align-items: center;
position: relative;
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
border-radius: 50%;
margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white; color: $type-white;
background-color: $ui-purple-dark;
.close-btn-img {
height: 1.25rem;
width: 1.25rem;
}
} }
.driver-popover-arrow-side-left.driver-popover-arrow { .driver-popover-arrow-side-left.driver-popover-arrow {

16
src/components/journeys/driver-journey/driver-journey.jsx
View file

@ -20,6 +20,19 @@ const DriverJourney = ({configProps, driverObj}) => {
callback(); callback();
} }
const portalData = []; const portalData = [];
const closeButton = document.getElementsByClassName('driver-popover-close-btn')[0];
if (closeButton) {
closeButton.textContent = '';
const closeButtonImage = document.createElement('img');
closeButtonImage.src = '/svgs/modal/close-x.svg';
closeButtonImage.className = 'close-btn-img';
closeButton.appendChild(closeButtonImage);
closeButton.addEventListener('click', () => driverObj.destroy());
}
for (const [section, component] of Object.entries( for (const [section, component] of Object.entries(
sectionComponents sectionComponents
)) { )) {
@ -62,7 +75,8 @@ DriverJourney.propTypes = {
}), }),
driverObj: PropTypes.shape({ driverObj: PropTypes.shape({
setConfig: PropTypes.func, setConfig: PropTypes.func,
drive: PropTypes.func drive: PropTypes.func,
destroy: PropTypes.func
}) })
}; };

131
src/components/journeys/editor-journey/editor-journey.jsx
View file

@ -3,96 +3,13 @@ const {driver} = require('driver.js');
const FlexRow = require('../../flex-row/flex-row.jsx'); const FlexRow = require('../../flex-row/flex-row.jsx');
const Button = require('../../forms/button.jsx'); const Button = require('../../forms/button.jsx');
const DriverJourney = require('../driver-journey/driver-journey.jsx'); const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl'); const {useIntl} = require('react-intl');
const {useMemo, useState, useCallback} = require('react'); const {useMemo, useState, useCallback} = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const {triggerAnalyticsEvent} = require('../../../lib/onboarding.js'); const {triggerAnalyticsEvent} = require('../../../lib/onboarding.js');
require('./editor-journey.scss'); require('./editor-journey.scss');
const messages = defineMessages({
createStepTitle: {
id: 'gui.journey.controls.create',
defaultMessage: 'Create',
description: 'Create step title'
},
projectGenreStepTitle: {
id: 'gui.journey.controls.choose.projectGenre',
defaultMessage: 'What do you whant to create?',
description: 'Choose project genre step title'
},
typeStepTitle: {
id: 'gui.journey.controls.choose.type',
defaultMessage: 'Which type?',
description: 'Choose project type step title'
},
startStepTitle: {
id: 'gui.journey.controls.choose.start',
defaultMessage: 'How do you want to start?',
description: 'Choose way to start step title'
},
gameButtonText: {
id: 'gui.journey.controls.game',
defaultMessage: 'Game',
description: 'Game button text'
},
animiationButtonText: {
id: 'gui.journey.controls.animation',
defaultMessage: 'Animation',
description: 'Animation button text'
},
musicButtonText: {
id: 'gui.journey.controls.music',
defaultMessage: 'Music',
description: 'Music button text'
},
clickerGameButtonText: {
id: 'gui.journey.controls.game.clicker',
defaultMessage: 'Clicker Game',
description: 'Clicker game button text'
},
pongGameButtonText: {
id: 'gui.journey.controls.game.pong',
defaultMessage: 'Pong Game',
description: 'Pong game button text'
},
characterAnimationButtonText: {
id: 'gui.journey.controls.animation.character',
defaultMessage: 'Animate a character',
description: 'Animate a character button text'
},
flyAnimationButtonText: {
id: 'gui.journey.controls.animation.fly',
defaultMessage: 'Make it fly',
description: 'Make it fly animation button text'
},
recordSoundButtonText: {
id: 'gui.journey.controls.music.record',
defaultMessage: 'Record a sound',
description: 'Record a sound button text'
},
makeMusicButtonText: {
id: 'gui.journey.controls.music.make',
defaultMessage: 'Make music',
description: 'Make music button text'
},
tutorialButtonText: {
id: 'gui.journey.controls.tutorial',
defaultMessage: 'Tutorial',
description: 'Tutorial button text'
},
starterProjectButtonText: {
id: 'gui.journey.controls.starterProject',
defaultMessage: 'Starter project',
description: 'Starter project button text'
},
onMyOwnButtonText: {
id: 'gui.journey.controls.onMyOwn',
defaultMessage: 'On my own',
description: 'On my own button text'
}
});
const STEP_NAMES = [ const STEP_NAMES = [
'pick-genre-step', 'pick-genre-step',
'game-step', 'game-step',
@ -151,18 +68,18 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
editorJourneyStep: editorJourneyStep editorJourneyStep: editorJourneyStep
}); });
driverObj.moveTo(stepNumber); driverObj.moveTo(stepNumber);
}, driverObj); }, [driverObj]);
const createStep = useCallback((projectId, tutorialId) => ({ const createStep = useCallback((projectId, tutorialId) => ({
title: intl.formatMessage(messages.createStepTitle), title: intl.formatMessage({id: 'project.journey.controls.create'}),
showButtons: ['close'], showButtons: ['close'],
sectionComponents: { sectionComponents: {
description: <EditorJourneyDescription description: <EditorJourneyDescription
title={intl.formatMessage(messages.startStepTitle)} title={intl.formatMessage({id: 'project.journey.controls.choose.start'})}
descriptionData={[ descriptionData={[
{ {
imgSrc: '/images/onboarding-journeys/Tutorials-Icon.svg', imgSrc: '/images/onboarding-journeys/Tutorials-Icon.svg',
text: intl.formatMessage(messages.tutorialButtonText), text: intl.formatMessage({id: 'project.journey.controls.tutorial'}),
handleOnClick: () => { handleOnClick: () => {
triggerAnalyticsEvent({ triggerAnalyticsEvent({
event: 'editor-journey-step', event: 'editor-journey-step',
@ -175,7 +92,7 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
{ {
imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.svg', imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.svg',
text: intl.formatMessage(messages.starterProjectButtonText), text: intl.formatMessage({id: 'project.journey.controls.starterProject'}),
handleOnClick: () => { handleOnClick: () => {
location.href = `/projects/${projectId}?showJourney=true`; location.href = `/projects/${projectId}?showJourney=true`;
setShowJourney(false); setShowJourney(false);
@ -184,7 +101,7 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
{ {
imgSrc: '/images/onboarding-journeys/On-Own-Icon.svg', imgSrc: '/images/onboarding-journeys/On-Own-Icon.svg',
text: intl.formatMessage(messages.onMyOwnButtonText), text: intl.formatMessage({id: 'project.journey.controls.onMyOwn'}),
handleOnClick: () => { handleOnClick: () => {
triggerAnalyticsEvent({ triggerAnalyticsEvent({
event: 'editor-journey-step', event: 'editor-journey-step',
@ -217,25 +134,25 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
steps: [{ steps: [{
popover: { popover: {
title: intl.formatMessage(messages.createStepTitle), title: intl.formatMessage({id: 'project.journey.controls.create'}),
showButtons: ['close'], showButtons: ['close'],
sectionComponents: { sectionComponents: {
description: <EditorJourneyDescription description: <EditorJourneyDescription
title={intl.formatMessage(messages.projectGenreStepTitle)} title={intl.formatMessage({id: 'project.journey.controls.choose.projectGenre'})}
descriptionData={[ descriptionData={[
{ {
imgSrc: '/images/onboarding-journeys/Games-Icon.svg', imgSrc: '/images/onboarding-journeys/Games-Icon.svg',
text: intl.formatMessage(messages.gameButtonText), text: intl.formatMessage({id: 'project.journey.controls.game'}),
handleOnClick: () => pickStep(1, 'Games') handleOnClick: () => pickStep(1, 'Games')
}, },
{ {
imgSrc: '/images/onboarding-journeys/Animation-Icon.svg', imgSrc: '/images/onboarding-journeys/Animation-Icon.svg',
text: intl.formatMessage(messages.animiationButtonText), text: intl.formatMessage({id: 'project.journey.controls.animation'}),
handleOnClick: () => pickStep(2, 'Animation') handleOnClick: () => pickStep(2, 'Animation')
}, },
{ {
imgSrc: '/images/onboarding-journeys/Music-Icon.svg', imgSrc: '/images/onboarding-journeys/Music-Icon.svg',
text: intl.formatMessage(messages.musicButtonText), text: intl.formatMessage({id: 'project.journey.controls.music'}),
handleOnClick: () => pickStep(3, 'Music') handleOnClick: () => pickStep(3, 'Music')
} }
]} ]}
@ -245,20 +162,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
{ {
popover: { popover: {
title: intl.formatMessage(messages.createStepTitle), title: intl.formatMessage({id: 'project.journey.controls.create'}),
showButtons: ['close'], showButtons: ['close'],
sectionComponents: { sectionComponents: {
description: <EditorJourneyDescription description: <EditorJourneyDescription
title={intl.formatMessage(messages.typeStepTitle)} title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
descriptionData={[ descriptionData={[
{ {
imgSrc: '/images/onboarding-journeys/Clicker-Game.jpg', imgSrc: '/images/onboarding-journeys/Clicker-Game.jpg',
text: intl.formatMessage(messages.clickerGameButtonText), text: intl.formatMessage({id: 'project.journey.controls.game.clicker'}),
handleOnClick: () => pickStep(4, 'Clicker-Game') handleOnClick: () => pickStep(4, 'Clicker-Game')
}, },
{ {
imgSrc: '/images/onboarding-journeys/Pong-Game.jpg', imgSrc: '/images/onboarding-journeys/Pong-Game.jpg',
text: intl.formatMessage(messages.pongGameButtonText), text: intl.formatMessage({id: 'project.journey.controls.game.pong'}),
handleOnClick: () => pickStep(5, 'Pong-Game') handleOnClick: () => pickStep(5, 'Pong-Game')
} }
]} ]}
@ -268,20 +185,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
{ {
popover: { popover: {
title: intl.formatMessage(messages.createStepTitle), title: intl.formatMessage({id: 'project.journey.controls.create'}),
showButtons: ['close'], showButtons: ['close'],
sectionComponents: { sectionComponents: {
description: <EditorJourneyDescription description: <EditorJourneyDescription
title={intl.formatMessage(messages.typeStepTitle)} title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
descriptionData={[ descriptionData={[
{ {
imgSrc: '/images/onboarding-journeys/Character-Animation.jpg', imgSrc: '/images/onboarding-journeys/Character-Animation.jpg',
text: intl.formatMessage(messages.characterAnimationButtonText), text: intl.formatMessage({id: 'project.journey.controls.animation.character'}),
handleOnClick: () => pickStep(6, 'Character-Animation') handleOnClick: () => pickStep(6, 'Character-Animation')
}, },
{ {
imgSrc: '/images/onboarding-journeys/Fly-Animation.jpg', imgSrc: '/images/onboarding-journeys/Fly-Animation.jpg',
text: intl.formatMessage(messages.flyAnimationButtonText), text: intl.formatMessage({id: 'project.journey.controls.animation.fly'}),
handleOnClick: () => pickStep(7, 'Fly-Animation') handleOnClick: () => pickStep(7, 'Fly-Animation')
} }
]} ]}
@ -291,20 +208,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
}, },
{ {
popover: { popover: {
title: intl.formatMessage(messages.createStepTitle), title: intl.formatMessage({id: 'project.journey.controls.create'}),
showButtons: ['close'], showButtons: ['close'],
sectionComponents: { sectionComponents: {
description: <EditorJourneyDescription description: <EditorJourneyDescription
title={intl.formatMessage(messages.typeStepTitle)} title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
descriptionData={[ descriptionData={[
{ {
imgSrc: '/images/onboarding-journeys/Record-Music.jpg', imgSrc: '/images/onboarding-journeys/Record-Music.jpg',
text: intl.formatMessage(messages.recordSoundButtonText), text: intl.formatMessage({id: 'project.journey.controls.music.record'}),
handleOnClick: () => pickStep(8, 'Record-Music') handleOnClick: () => pickStep(8, 'Record-Music')
}, },
{ {
imgSrc: '/images/onboarding-journeys/Make-Music.jpg', imgSrc: '/images/onboarding-journeys/Make-Music.jpg',
text: intl.formatMessage(messages.makeMusicButtonText), text: intl.formatMessage({id: 'project.journey.controls.music.make'}),
handleOnClick: () => pickStep(9, 'Make-Music') handleOnClick: () => pickStep(9, 'Make-Music')
} }
]} ]}

56
src/components/journeys/editor-journey/editor-journey.scss
View file

@ -2,7 +2,6 @@
@import "../../../frameless"; @import "../../../frameless";
.driver-popover.gui-journey { .driver-popover.gui-journey {
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
max-width: unset; max-width: unset;
padding: 0; padding: 0;
border-radius: 15px; border-radius: 15px;
@ -11,20 +10,27 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.driver-popover-close-btn { .driver-popover-close-btn {
display: flex !important;
justify-content: center;
align-items: center;
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
border-radius: 50%; border-radius: 50%;
margin: 0.5rem; margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white; color: $type-white;
background-color: $ui-aqua-dark; background-color: $ui-aqua-dark;
.close-btn-img {
height: 1.25rem;
width: 1.25rem;
}
} }
.driver-popover-title { .driver-popover-title {
padding: 1rem 0; padding: 1rem 0;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
text-align: center; text-align: center;
color: $type-white; color: $type-white;
margin: 0; margin: 0;
@ -35,31 +41,33 @@
.driver-popover-title[style*=block]+.driver-popover-description { .driver-popover-title[style*=block]+.driver-popover-description {
margin: 0; margin: 0;
} }
}
.title { .driver-popover-description {
padding: 1rem 0; .title {
font-size: 1.125rem; padding: 1rem 0;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; font-size: 1.125rem;
font-weight: 400; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
text-align: center; font-weight: 400;
color: $type-gray; text-align: center;
background-color: $ui-light-primary; color: $type-gray;
} background-color: $ui-light-primary;
}
.description-wrapper { .description-wrapper {
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-evenly;
gap: 3rem; gap: 3rem;
margin: 3rem 4rem; margin: 3rem 4rem;
.journey-option { .journey-option {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
img { img {
height: $cols2; height: $cols2;
}
}
} }
} }
} }

21
src/components/journeys/project-journey/project-journey.jsx
View file

@ -1,23 +1,10 @@
const React = require('react'); const React = require('react');
const {driver} = require('driver.js'); const {driver} = require('driver.js');
const DriverJourney = require('../driver-journey/driver-journey.jsx'); const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl'); const {useIntl} = require('react-intl');
const {useState} = require('react'); const {useState} = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
require('./project-journey.scss'); require('../common-journey.scss');
const messages = defineMessages({
playProject: {
id: 'project.journey.play',
defaultMessage: 'Click the green flag to see what this project does.',
description: 'Play project'
},
remixProject: {
id: 'project.journey.remix',
defaultMessage: 'Make your own version!',
description: 'Remix project'
}
});
const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => { const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => {
const [driverObj] = useState(() => ( const [driverObj] = useState(() => (
@ -40,7 +27,7 @@ const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => {
}, 8000); }, 8000);
}); });
}, },
description: intl.formatMessage(messages.playProject) description: intl.formatMessage({id: 'project.journey.play'})
} }
}, },
{ {
@ -53,7 +40,7 @@ const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => {
driverObj.destroy(); driverObj.destroy();
}); });
}, },
description: intl.formatMessage(messages.remixProject) description: intl.formatMessage({id: 'project.journey.remix'})
} }
}]; }];

14
src/components/journeys/tutorials-highlight/tutorials-highlight.jsx
View file

@ -1,18 +1,10 @@
const React = require('react'); const React = require('react');
const {driver} = require('driver.js'); const {driver} = require('driver.js');
const DriverJourney = require('../driver-journey/driver-journey.jsx'); const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl'); const {useIntl} = require('react-intl');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const {useState} = require('react'); const {useState} = require('react');
require('./tutorials-highlight.scss'); require('../common-journey.scss');
const messages = defineMessages({
tutorialsHighlight: {
id: 'gui.highlight.tutorials',
defaultMessage: 'Click here for tutorials',
description: 'Tutorials highlight'
}
});
const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => { const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => {
const [driverObj] = useState(() => ( const [driverObj] = useState(() => (
@ -33,7 +25,7 @@ const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => {
}); });
}, },
side: 'bottom', side: 'bottom',
description: intl.formatMessage(messages.tutorialsHighlight) description: intl.formatMessage({id: 'project.highlight.tutorials'})
} }
}]; }];

41
src/components/journeys/tutorials-highlight/tutorials-highlight.scss
View file

@ -1,41 +0,0 @@
@import "../../../colors";
.driver-popover.tutorials-highlight {
display: flex;
flex-direction: column;
background-color: $ui-purple-dark;
.driver-popover-close-btn {
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white;
background-color: $ui-purple-dark;
}
.driver-popover-arrow-side-left.driver-popover-arrow {
border-left-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-right.driver-popover-arrow {
border-right-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-top.driver-popover-arrow {
border-top-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-bottom.driver-popover-arrow {
border-bottom-color: $ui-purple-dark;;
}
.driver-popover-description {
color: $ui-white;
font-size: 1rem;
font-weight: 700;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
}

21
src/components/welcome/welcome.jsx
View file

@ -1,5 +1,6 @@
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const {shouldDisplayOnboarding} = require('../../lib/onboarding.js');
const Box = require('../box/box.jsx'); const Box = require('../box/box.jsx');
@ -19,11 +20,23 @@ const Welcome = props => (
> >
<div className="welcome-col blue"> <div className="welcome-col blue">
<h4> <h4>
<a href="/projects/editor/?tutorial=getStarted"> <a
href={
shouldDisplayOnboarding(props.user, props.permissions) ?
'/projects/editor/' :
'/projects/editor/?tutorial=getStarted'
}
>
{props.messages['welcome.learn']} {props.messages['welcome.learn']}
</a> </a>
</h4> </h4>
<a href="/projects/editor/?tutorial=getStarted"> <a
href={
shouldDisplayOnboarding(props.user, props.permissions) ?
'/projects/editor/' :
'/projects/editor/?tutorial=getStarted'
}
>
<img <img
alt="Get Started" alt="Get Started"
src="/images/welcome-learn.png" src="/images/welcome-learn.png"
@ -66,7 +79,9 @@ Welcome.propTypes = {
'welcome.tryOut': PropTypes.string, 'welcome.tryOut': PropTypes.string,
'welcome.connect': PropTypes.string 'welcome.connect': PropTypes.string
}), }),
onDismiss: PropTypes.func onDismiss: PropTypes.func,
permissions: PropTypes.object,
user: PropTypes.object
}; };
Welcome.defaultProps = { Welcome.defaultProps = {

13
src/lib/onboarding.js
View file

@ -39,9 +39,14 @@ const isUserEligible = (user, permissions) =>
!isBanned(user); !isBanned(user);
const calculateAgeGroup = (birthYear, birthMonth) => { const calculateAgeGroup = (birthYear, birthMonth) => {
if (!birthMonth || !birthYear) {
return '[unset]';
}
const today = new Date(); const today = new Date();
let age = today.getFullYear() - parseInt(birthYear, 10); let age = today.getFullYear() - birthYear;
const monthDiff = today.getMonth() + 1 - parseInt(birthMonth, 10); const monthDiff = today.getMonth() + 1 - birthMonth;
if (monthDiff < 0) { if (monthDiff < 0) {
age--; age--;
} }
@ -71,6 +76,8 @@ export const triggerAnalyticsEvent = eventVaribles => {
}; };
export const sendUserProperties = (user, permissions) => { export const sendUserProperties = (user, permissions) => {
window.dataLayer = window.dataLayer || [];
if (!isUserEligible(user, permissions)) { if (!isUserEligible(user, permissions)) {
window.dataLayer.push({ window.dataLayer.push({
testGroup: null, testGroup: null,
@ -80,8 +87,6 @@ export const sendUserProperties = (user, permissions) => {
return; return;
} }
window.dataLayer = window.dataLayer || [];
const {gender, birthYear, birthMonth} = user; const {gender, birthYear, birthMonth} = user;
window.dataLayer.push({ window.dataLayer.push({

21
src/views/preview/l10n.json
View file

@ -48,5 +48,24 @@
"project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.", "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.",
"project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful.", "project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful.",
"project.mutedAddToStudio": "You will be able to add to studios again {inDuration}.", "project.mutedAddToStudio": "You will be able to add to studios again {inDuration}.",
"project.cloudDataAndVideoAlert": "For privacy reasons, cloud variables have been disabled in this project because it contains video sensing blocks." "project.cloudDataAndVideoAlert": "For privacy reasons, cloud variables have been disabled in this project because it contains video sensing blocks.",
"project.journey.controls.create": "Create",
"project.journey.controls.choose.projectGenre": "What do you want to create?",
"project.journey.controls.choose.type": "Which type?",
"project.journey.controls.choose.start": "How do you want to start?",
"project.journey.controls.game": "Game",
"project.journey.controls.animation": "Animation",
"project.journey.controls.music": "Music",
"project.journey.controls.game.clicker": "Clicker Game",
"project.journey.controls.game.pong": "Pong Game",
"project.journey.controls.animation.character": "Animate a character",
"project.journey.controls.animation.fly": "Make it fly",
"project.journey.controls.music.record": "Record a sound",
"project.journey.controls.music.make": "Make music",
"project.journey.controls.tutorial": "Tutorial",
"project.journey.controls.starterProject": "Starter project",
"project.journey.controls.onMyOwn": "On my own",
"project.highlight.tutorials": "Click here for tutorials",
"project.journey.play": "Click the green flag to see what this project does.",
"project.journey.remix": "Make your own version!"
} }

3
src/views/splash/presentation.jsx
View file

@ -418,6 +418,8 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
onDismiss={() => { // eslint-disable-line react/jsx-no-bind onDismiss={() => { // eslint-disable-line react/jsx-no-bind
this.props.onDismiss('welcome'); this.props.onDismiss('welcome');
}} }}
permissions={this.props.permissions}
user={this.props.user}
/> />
] : [ ] : [
<WrappedActivityList <WrappedActivityList
@ -544,6 +546,7 @@ SplashPresentation.propTypes = {
onDismiss: PropTypes.func.isRequired, onDismiss: PropTypes.func.isRequired,
onOpenAdminPanel: PropTypes.func.isRequired, onOpenAdminPanel: PropTypes.func.isRequired,
onRefreshHomepageCache: PropTypes.func.isRequired, onRefreshHomepageCache: PropTypes.func.isRequired,
permissions: PropTypes.object,
refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
sessionStatus: PropTypes.string.isRequired, sessionStatus: PropTypes.string.isRequired,
sharedByFollowing: PropTypes.arrayOf(PropTypes.object), sharedByFollowing: PropTypes.arrayOf(PropTypes.object),

3
src/views/splash/splash.jsx
View file

@ -218,6 +218,7 @@ class Splash extends React.Component {
isEducator={this.props.isEducator} isEducator={this.props.isEducator}
lovedByFollowing={this.props.loved} lovedByFollowing={this.props.loved}
news={this.state.news} news={this.state.news}
permissions={this.props.permissions}
refreshCacheStatus={homepageRefreshStatus} refreshCacheStatus={homepageRefreshStatus}
sessionStatus={this.props.sessionStatus} sessionStatus={this.props.sessionStatus}
sharedByFollowing={this.props.shared} sharedByFollowing={this.props.shared}
@ -267,6 +268,7 @@ Splash.propTypes = {
isAdmin: PropTypes.bool, isAdmin: PropTypes.bool,
isEducator: PropTypes.bool, isEducator: PropTypes.bool,
loved: PropTypes.arrayOf(PropTypes.object).isRequired, loved: PropTypes.arrayOf(PropTypes.object).isRequired,
permissions: PropTypes.object,
refreshSession: PropTypes.func.isRequired, refreshSession: PropTypes.func.isRequired,
reviewCommunityGuidelines: PropTypes.func.isRequired, reviewCommunityGuidelines: PropTypes.func.isRequired,
sessionStatus: PropTypes.string, sessionStatus: PropTypes.string,
@ -302,6 +304,7 @@ const mapStateToProps = state => ({
isAdmin: state.permissions.admin, isAdmin: state.permissions.admin,
isEducator: state.permissions.educator, isEducator: state.permissions.educator,
loved: state.splash.loved.rows, loved: state.splash.loved.rows,
permissions: state.permissions,
sessionStatus: state.session.status, sessionStatus: state.session.status,
shared: state.splash.shared.rows, shared: state.splash.shared.rows,
studios: state.splash.studios.rows, studios: state.splash.studios.rows,