mirror of
https://github.com/scratchfoundation/scratchjr.git
synced 2025-02-27 06:55:26 -05:00
Refactor app.js entry-point to have different JS files for each page
This commit is contained in:
Tim Mickel
parent
9814b2a7ce
commit
1da87914cc
6 changed files with 357 additions and 347 deletions
358
src/entry/app.js
358
src/entry/app.js
|
|
@ -1,128 +1,15 @@
|
||||||
import {isAndroid, isiOS, gn, getUrlVars, preprocessAndLoadCss} from '../utils/lib';
|
import {preprocessAndLoadCss} from '../utils/lib';
|
||||||
import Localization from '../utils/Localization';
|
import Localization from '../utils/Localization';
|
||||||
import iOS from '../iPad/iOS';
|
import iOS from '../iPad/iOS';
|
||||||
import IO from '../iPad/IO';
|
import IO from '../iPad/IO';
|
||||||
import MediaLib from '../iPad/MediaLib';
|
import MediaLib from '../iPad/MediaLib';
|
||||||
import ScratchJr from '../editor/ScratchJr';
|
|
||||||
import ScratchAudio from '../utils/ScratchAudio';
|
|
||||||
import Lobby from '../lobby/Lobby.js';
|
|
||||||
import Record from '../editor/ui/Record';
|
|
||||||
import Camera from '../painteditor/Camera';
|
|
||||||
|
|
||||||
// Entry-points for each page
|
import {indexMain} from './index';
|
||||||
// Previously index.html
|
import {homeMain} from './home';
|
||||||
function indexStartup () {
|
import {editorMain} from './editor';
|
||||||
gn('gettings').ontouchend = indexGettingstarted;
|
import {gettingStartedMain} from './gettingstarted';
|
||||||
gn('startcode').ontouchend = indexGohome;
|
import {inappInterfaceGuide, inappAbout, inappBlocksGuide, inappPaintEditorGuide} from './inapp';
|
||||||
ScratchAudio.init();
|
|
||||||
var urlvars = getUrlVars();
|
|
||||||
if (urlvars.back) {
|
|
||||||
indexLoadOptions();
|
|
||||||
} else {
|
|
||||||
indexFirstTime();
|
|
||||||
}
|
|
||||||
setTimeout(function () {
|
|
||||||
gn('rays').className = 'rays spinme';
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
|
|
||||||
function indexFirstTime () {
|
|
||||||
gn('authors').className = 'credits show';
|
|
||||||
gn('authorsText').className = 'creditsText show';
|
|
||||||
gn('purpleguy').className = 'purple show';
|
|
||||||
gn('blueguy').className = 'blue show';
|
|
||||||
gn('redguy').className = 'red show';
|
|
||||||
iOS.askpermission(); // ask for sound recording
|
|
||||||
setTimeout(function () {
|
|
||||||
iOS.hidesplash(doit);
|
|
||||||
}, 500);
|
|
||||||
function doit () {
|
|
||||||
ScratchAudio.sndFX('tap.wav');
|
|
||||||
window.ontouchend = function () {
|
|
||||||
indexLoadOptions();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
setTimeout(function () {
|
|
||||||
indexLoadOptions();
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function indexLoadOptions () {
|
|
||||||
gn('authors').className = 'credits hide';
|
|
||||||
gn('authorsText').className = 'creditsText hide';
|
|
||||||
gn('purpleguy').className = 'purple hide';
|
|
||||||
gn('blueguy').className = 'blue hide';
|
|
||||||
gn('redguy').className = 'red hide';
|
|
||||||
gn('gettings').className = 'gettings show';
|
|
||||||
gn('startcode').className = 'startcode show';
|
|
||||||
document.ontouchmove = function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
if (isAndroid) {
|
|
||||||
AndroidInterface.notifySplashDone();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function indexGohome () {
|
|
||||||
// On iOS, sounds are loaded async, but the code as written expects to play tap.wav when we enter home.html
|
|
||||||
// (but since it isn't loaded yet, no sound is played).
|
|
||||||
// On Android, sync sounds means both calls to tap.wav result in a sound play.
|
|
||||||
// XXX: we should re-write the lobby loading to wait for the sounds to load, and not play a sound here.
|
|
||||||
if (isiOS) {
|
|
||||||
ScratchAudio.sndFX('tap.wav');
|
|
||||||
}
|
|
||||||
iOS.setfile('homescroll.sjr', 0, function () {
|
|
||||||
doNext();
|
|
||||||
});
|
|
||||||
function doNext () {
|
|
||||||
window.location.href = 'home.html';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function indexGettingstarted () {
|
|
||||||
ScratchAudio.sndFX('tap.wav');
|
|
||||||
window.location.href = 'gettingstarted.html?place=home';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Previously home.html
|
|
||||||
|
|
||||||
function homeStartup () {
|
|
||||||
gn('logotab').ontouchend = homeGoBack;
|
|
||||||
homeStrings();
|
|
||||||
iOS.getsettings(doNext);
|
|
||||||
function doNext (str) {
|
|
||||||
var list = str.split(',');
|
|
||||||
iOS.path = list[1] == '0' ? list[0] + '/' : undefined;
|
|
||||||
Lobby.appinit(window.Settings.scratchJrVersion);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function homeGoBack () {
|
|
||||||
window.location.href = 'index.html?back=yes';
|
|
||||||
}
|
|
||||||
|
|
||||||
function homeStrings () {
|
|
||||||
gn('abouttab-text').textContent = Localization.localize('ABOUT_SCRATCHJR');
|
|
||||||
gn('interfacetab-text').textContent = Localization.localize('INTERFACE_GUIDE');
|
|
||||||
gn('painttab-text').textContent = Localization.localize('PAINT_EDITOR_GUIDE');
|
|
||||||
gn('blockstab-text').textContent = Localization.localize('BLOCKS_GUIDE');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Previously editor.html
|
|
||||||
function editorCreateScratchJr () {
|
|
||||||
iOS.getsettings(doNext);
|
|
||||||
function doNext (str) {
|
|
||||||
var list = str.split(',');
|
|
||||||
iOS.path = list[1] == '0' ? list[0] + '/' : undefined;
|
|
||||||
if (list.length > 2) {
|
|
||||||
Record.available = list[2] == 'YES' ? true : false;
|
|
||||||
}
|
|
||||||
if (list.length > 3) {
|
|
||||||
Camera.available = list[3] == 'YES' ? true : false;
|
|
||||||
}
|
|
||||||
ScratchJr.appinit(window.Settings.scratchJrVersion);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadSettings (settingsRoot, whenDone) {
|
function loadSettings (settingsRoot, whenDone) {
|
||||||
IO.requestFromServer(settingsRoot + 'settings.json', (result) => {
|
IO.requestFromServer(settingsRoot + 'settings.json', (result) => {
|
||||||
|
|
@ -131,230 +18,6 @@ function loadSettings (settingsRoot, whenDone) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Previously gettingstarted.html
|
|
||||||
|
|
||||||
let place;
|
|
||||||
function gettingStartedVideo () {
|
|
||||||
gn('closeHelp').onclick = gettingStartedCloseMe;
|
|
||||||
gn('closeHelp').ontouchstart = gettingStartedCloseMe;
|
|
||||||
var videoObj = gn('myVideo');
|
|
||||||
if (isiOS) {
|
|
||||||
// On iOS we can load from server
|
|
||||||
videoObj.src = 'assets/lobby/intro.mp4';
|
|
||||||
} else {
|
|
||||||
// On Android we need to copy to a temporary directory first:
|
|
||||||
setTimeout(function () {
|
|
||||||
videoObj.type = 'video/mp4';
|
|
||||||
videoObj.src = AndroidInterface.scratchjr_getgettingstartedvideopath();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
videoObj.poster = 'assets/lobby/poster.png';
|
|
||||||
|
|
||||||
var urlvars = getUrlVars();
|
|
||||||
place = urlvars['place'];
|
|
||||||
document.ontouchmove = function (e){
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function gettingStartedCloseMe () {
|
|
||||||
window.location.href = 'home.html?place=' + place;
|
|
||||||
}
|
|
||||||
|
|
||||||
function inappAbout () {
|
|
||||||
gn('aboutScratchjrTitle').textContent = Localization.localize('ABOUT_SCRATCHJR');
|
|
||||||
gn('aboutWhatIs').textContent = Localization.localize('ABOUT_WHAT_IS');
|
|
||||||
gn('aboutDescription').innerHTML = Localization.localize('ABOUT_DESCRIPTION') + '<br/><br/>' +
|
|
||||||
Localization.localize('ABOUT_INSPIRED_BY');
|
|
||||||
gn('aboutWhyCreate').textContent = Localization.localize('ABOUT_WHY_CREATE');
|
|
||||||
gn('aboutWhyCreateDescription').innerHTML = Localization.localize('ABOUT_WHY_CREATE_DESCRIPTION');
|
|
||||||
gn('aboutWhoCreated').textContent = Localization.localize('ABOUT_WHO_CREATED');
|
|
||||||
gn('aboutWhoCreatedDescription').innerHTML = (
|
|
||||||
Localization.localize('ABOUT_WHO_CREATED_DESCRIPTION'));
|
|
||||||
gn('aboutWhoSupported').textContent = Localization.localize('ABOUT_WHO_SUPPORTED');
|
|
||||||
gn('aboutWhoSupportedDescription').innerHTML = (
|
|
||||||
Localization.localize('ABOUT_WHO_SUPPORTED_DESCRIPTION')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function inappInterfaceGuide () {
|
|
||||||
|
|
||||||
var interfaceKeyHeaderNode = gn('interface-key-header');
|
|
||||||
var interfaceKeyDescriptionNode = gn('interface-key-description');
|
|
||||||
|
|
||||||
interfaceKeyHeaderNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE', {N: 1});
|
|
||||||
interfaceKeyDescriptionNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE_DESCRIPTION');
|
|
||||||
|
|
||||||
var interfaceKeys = [
|
|
||||||
'SAVE',
|
|
||||||
'STAGE',
|
|
||||||
'PRESENTATION_MODE',
|
|
||||||
'GRID',
|
|
||||||
'CHANGE_BG',
|
|
||||||
'ADD_TEXT',
|
|
||||||
'RESET_CHAR',
|
|
||||||
'GREEN_FLAG',
|
|
||||||
'PAGES',
|
|
||||||
'PROJECT_INFO',
|
|
||||||
'UNDO_REDO',
|
|
||||||
'PROGRAMMING_SCRIPT',
|
|
||||||
'PROGRAMMING_AREA',
|
|
||||||
'BLOCKS_PALETTE',
|
|
||||||
'BLOCKS_CATEGORIES',
|
|
||||||
'CHARACTERS'
|
|
||||||
];
|
|
||||||
|
|
||||||
var interfaceDescriptions = [];
|
|
||||||
for (var i = 0; i < interfaceKeys.length; i++) {
|
|
||||||
var key = interfaceKeys[i];
|
|
||||||
interfaceDescriptions.push([
|
|
||||||
Localization.localize('INTERFACE_GUIDE_' + key, {N: i+1}),
|
|
||||||
Localization.localize('INTERFACE_GUIDE_' + key + '_DESCRIPTION')
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var currentButton = document.getElementById('interface-button-save');
|
|
||||||
|
|
||||||
var switchHelp = function (e) {
|
|
||||||
var target = e.target;
|
|
||||||
if (target.className == 'interface-button-text') {
|
|
||||||
var descriptionId = parseInt(target.innerText - 1);
|
|
||||||
interfaceKeyHeaderNode.textContent = interfaceDescriptions[descriptionId][0];
|
|
||||||
interfaceKeyDescriptionNode.textContent = interfaceDescriptions[descriptionId][1];
|
|
||||||
currentButton.className = 'interface-button';
|
|
||||||
currentButton = target.parentNode;
|
|
||||||
currentButton.className = currentButton.className + ' interface-button-selected';
|
|
||||||
window.parent.ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('touchstart', switchHelp, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function inappPaintEditorGuide () {
|
|
||||||
var paintKeyHeaderNode = gn('paint-key-header');
|
|
||||||
var paintKeyDescriptionNode = gn('paint-key-description');
|
|
||||||
|
|
||||||
paintKeyHeaderNode.textContent = Localization.localize('PAINT_GUIDE_UNDO', {N:1});
|
|
||||||
paintKeyDescriptionNode.textContent = Localization.localize('PAINT_GUIDE_UNDO_DESCRIPTION');
|
|
||||||
|
|
||||||
var paintKeys = [
|
|
||||||
'UNDO',
|
|
||||||
'REDO',
|
|
||||||
'SHAPE',
|
|
||||||
'CHARACTER_NAME',
|
|
||||||
'CUT',
|
|
||||||
'DUPLICATE',
|
|
||||||
'ROTATE',
|
|
||||||
'DRAG',
|
|
||||||
'SAVE',
|
|
||||||
'FILL',
|
|
||||||
'CAMERA',
|
|
||||||
'COLOR',
|
|
||||||
'LINE_WIDTH'
|
|
||||||
];
|
|
||||||
|
|
||||||
var paintDescriptions = [];
|
|
||||||
for (var i = 0; i < paintKeys.length; i++) {
|
|
||||||
var key = paintKeys[i];
|
|
||||||
paintDescriptions.push([
|
|
||||||
Localization.localize('PAINT_GUIDE_' + key, {N: i+1}),
|
|
||||||
Localization.localize('PAINT_GUIDE_' + key + '_DESCRIPTION')
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var currentButton = document.getElementById('paint-button-undo');
|
|
||||||
|
|
||||||
var switchHelp = function (e) {
|
|
||||||
var target = e.target;
|
|
||||||
if (target.className == 'paint-button-text') {
|
|
||||||
var descriptionId = parseInt(target.innerText - 1);
|
|
||||||
paintKeyHeaderNode.textContent = paintDescriptions[descriptionId][0];
|
|
||||||
paintKeyDescriptionNode.textContent = paintDescriptions[descriptionId][1];
|
|
||||||
currentButton.className = 'paint-button';
|
|
||||||
currentButton = target.parentNode;
|
|
||||||
currentButton.className = currentButton.className + ' paint-button-selected';
|
|
||||||
window.parent.ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('touchstart', switchHelp, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function inappBlocksGuide () {
|
|
||||||
// Localized category names
|
|
||||||
gn('yellow-block-category-header').textContent = Localization.localize('BLOCKS_TRIGGERING_BLOCKS');
|
|
||||||
gn('blue-block-category-header').textContent = Localization.localize('BLOCKS_MOTION_BLOCKS');
|
|
||||||
gn('purple-block-category-header').textContent = Localization.localize('BLOCKS_LOOKS_BLOCKS');
|
|
||||||
gn('green-block-category-header').textContent = Localization.localize('BLOCKS_SOUND_BLOCKS');
|
|
||||||
gn('orange-block-category-header').textContent = Localization.localize('BLOCKS_CONTROL_BLOCKS');
|
|
||||||
gn('red-block-category-header').textContent = Localization.localize('BLOCKS_END_BLOCKS');
|
|
||||||
|
|
||||||
var blockDescriptionKeys = [
|
|
||||||
'BLOCKS_GREEN_FLAG',
|
|
||||||
'BLOCKS_GREEN_FLAG_DESCRIPTION',
|
|
||||||
'BLOCKS_ON_TAP',
|
|
||||||
'BLOCKS_ON_TAP_DESCRIPTION',
|
|
||||||
'BLOCKS_ON_TOUCH',
|
|
||||||
'BLOCKS_ON_TOUCH_DESCRIPTION',
|
|
||||||
'BLOCKS_ON_MESSAGE',
|
|
||||||
'BLOCKS_ON_MESSAGE_DESCRIPTION',
|
|
||||||
'BLOCKS_SEND_MESSAGE',
|
|
||||||
'BLOCKS_SEND_MESSAGE_DESCRIPTION',
|
|
||||||
'BLOCKS_MOVE_RIGHT',
|
|
||||||
'BLOCKS_MOVE_RIGHT_DESCRIPTION',
|
|
||||||
'BLOCKS_MOVE_LEFT',
|
|
||||||
'BLOCKS_MOVE_LEFT_DESCRIPTION',
|
|
||||||
'BLOCKS_MOVE_UP',
|
|
||||||
'BLOCKS_MOVE_UP_DESCRIPTION',
|
|
||||||
'BLOCKS_MOVE_DOWN',
|
|
||||||
'BLOCKS_MOVE_DOWN_DESCRIPTION',
|
|
||||||
'BLOCKS_TURN_RIGHT',
|
|
||||||
'BLOCKS_TURN_RIGHT_DESCRIPTION',
|
|
||||||
'BLOCKS_TURN_LEFT',
|
|
||||||
'BLOCKS_TURN_LEFT_DESCRIPTION',
|
|
||||||
'BLOCKS_HOP',
|
|
||||||
'BLOCKS_HOP_DESCRIPTION',
|
|
||||||
'BLOCKS_GO_HOME',
|
|
||||||
'BLOCKS_GO_HOME_DESCRIPTION',
|
|
||||||
'BLOCKS_SAY',
|
|
||||||
'BLOCKS_SAY_DESCRIPTION',
|
|
||||||
'BLOCKS_GROW',
|
|
||||||
'BLOCKS_GROW_DESCRIPTION',
|
|
||||||
'BLOCKS_SHRINK',
|
|
||||||
'BLOCKS_SHRINK_DESCRIPTION',
|
|
||||||
'BLOCKS_RESET_SIZE',
|
|
||||||
'BLOCKS_RESET_SIZE_DESCRIPTION',
|
|
||||||
'BLOCKS_HIDE',
|
|
||||||
'BLOCKS_HIDE_DESCRIPTION',
|
|
||||||
'BLOCKS_SHOW',
|
|
||||||
'BLOCKS_SHOW_DESCRIPTION',
|
|
||||||
'BLOCKS_POP',
|
|
||||||
'BLOCKS_POP_DESCRIPTION',
|
|
||||||
'BLOCKS_PLAY_RECORDED',
|
|
||||||
'BLOCKS_PLAY_RECORDED_DESCRIPTION',
|
|
||||||
'BLOCKS_WAIT',
|
|
||||||
'BLOCKS_WAIT_DESCRIPTION',
|
|
||||||
'BLOCKS_STOP',
|
|
||||||
'BLOCKS_STOP_DESCRIPTION',
|
|
||||||
'BLOCKS_SET_SPEED',
|
|
||||||
'BLOCKS_SET_SPEED_DESCRIPTION',
|
|
||||||
'BLOCKS_REPEAT',
|
|
||||||
'BLOCKS_REPEAT_DESCRIPTION',
|
|
||||||
'BLOCKS_END',
|
|
||||||
'BLOCKS_END_DESCRIPTION',
|
|
||||||
'BLOCKS_REPEAT_FOREVER',
|
|
||||||
'BLOCKS_REPEAT_FOREVER_DESCRIPTION',
|
|
||||||
'BLOCKS_GO_TO_PAGE',
|
|
||||||
'BLOCKS_GO_TO_PAGE_DESCRIPTION'
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let key of blockDescriptionKeys) {
|
|
||||||
gn(key).textContent = Localization.localize(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// App-wide entry-point
|
// App-wide entry-point
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
// Function to be called after settings, locale strings, and Media Lib
|
// Function to be called after settings, locale strings, and Media Lib
|
||||||
|
|
@ -368,6 +31,7 @@ window.onload = () => {
|
||||||
// scratchJrPage is defined in the HTML pages
|
// scratchJrPage is defined in the HTML pages
|
||||||
let page = window.scratchJrPage;
|
let page = window.scratchJrPage;
|
||||||
|
|
||||||
|
// Load CSS and set root/entryFunction for all pages
|
||||||
switch (page) {
|
switch (page) {
|
||||||
case 'index':
|
case 'index':
|
||||||
// Index page (splash screen)
|
// Index page (splash screen)
|
||||||
|
|
@ -375,7 +39,7 @@ window.onload = () => {
|
||||||
preprocessAndLoadCss('css', 'css/base.css');
|
preprocessAndLoadCss('css', 'css/base.css');
|
||||||
preprocessAndLoadCss('css', 'css/start.css');
|
preprocessAndLoadCss('css', 'css/start.css');
|
||||||
preprocessAndLoadCss('css', 'css/thumbs.css');
|
preprocessAndLoadCss('css', 'css/thumbs.css');
|
||||||
entryFunction = () => iOS.waitForInterface(indexStartup);
|
entryFunction = () => iOS.waitForInterface(indexMain);
|
||||||
break;
|
break;
|
||||||
case 'home':
|
case 'home':
|
||||||
// Lobby pages
|
// Lobby pages
|
||||||
|
|
@ -383,7 +47,7 @@ window.onload = () => {
|
||||||
preprocessAndLoadCss('css', 'css/base.css');
|
preprocessAndLoadCss('css', 'css/base.css');
|
||||||
preprocessAndLoadCss('css', 'css/lobby.css');
|
preprocessAndLoadCss('css', 'css/lobby.css');
|
||||||
preprocessAndLoadCss('css', 'css/thumbs.css');
|
preprocessAndLoadCss('css', 'css/thumbs.css');
|
||||||
entryFunction = () => iOS.waitForInterface(homeStartup);
|
entryFunction = () => iOS.waitForInterface(homeMain);
|
||||||
break;
|
break;
|
||||||
case 'editor':
|
case 'editor':
|
||||||
// Editor pages
|
// Editor pages
|
||||||
|
|
@ -395,14 +59,14 @@ window.onload = () => {
|
||||||
preprocessAndLoadCss('css', 'css/editormodal.css');
|
preprocessAndLoadCss('css', 'css/editormodal.css');
|
||||||
preprocessAndLoadCss('css', 'css/librarymodal.css');
|
preprocessAndLoadCss('css', 'css/librarymodal.css');
|
||||||
preprocessAndLoadCss('css', 'css/paintlook.css');
|
preprocessAndLoadCss('css', 'css/paintlook.css');
|
||||||
entryFunction = () => iOS.waitForInterface(editorCreateScratchJr);
|
entryFunction = () => iOS.waitForInterface(editorMain);
|
||||||
break;
|
break;
|
||||||
case 'gettingStarted':
|
case 'gettingStarted':
|
||||||
// Getting started video page
|
// Getting started video page
|
||||||
preprocessAndLoadCss('css', 'css/font.css');
|
preprocessAndLoadCss('css', 'css/font.css');
|
||||||
preprocessAndLoadCss('css', 'css/base.css');
|
preprocessAndLoadCss('css', 'css/base.css');
|
||||||
preprocessAndLoadCss('css', 'css/gs.css');
|
preprocessAndLoadCss('css', 'css/gs.css');
|
||||||
entryFunction = () => iOS.waitForInterface(gettingStartedVideo);
|
entryFunction = () => iOS.waitForInterface(gettingStartedMain);
|
||||||
break;
|
break;
|
||||||
case 'inappAbout':
|
case 'inappAbout':
|
||||||
// About ScratchJr in-app help frame
|
// About ScratchJr in-app help frame
|
||||||
|
|
|
||||||
19
src/entry/editor.js
Normal file
19
src/entry/editor.js
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import ScratchJr from '../editor/ScratchJr';
|
||||||
|
import iOS from '../iPad/iOS';
|
||||||
|
import Camera from '../painteditor/Camera';
|
||||||
|
import Record from '../editor/ui/Record';
|
||||||
|
|
||||||
|
export function editorMain () {
|
||||||
|
iOS.getsettings(doNext);
|
||||||
|
function doNext (str) {
|
||||||
|
var list = str.split(',');
|
||||||
|
iOS.path = list[1] == '0' ? list[0] + '/' : undefined;
|
||||||
|
if (list.length > 2) {
|
||||||
|
Record.available = list[2] == 'YES' ? true : false;
|
||||||
|
}
|
||||||
|
if (list.length > 3) {
|
||||||
|
Camera.available = list[3] == 'YES' ? true : false;
|
||||||
|
}
|
||||||
|
ScratchJr.appinit(window.Settings.scratchJrVersion);
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/entry/gettingstarted.js
Normal file
31
src/entry/gettingstarted.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import {gn, isiOS, getUrlVars} from '../utils/lib';
|
||||||
|
|
||||||
|
let place;
|
||||||
|
|
||||||
|
export function gettingStartedMain () {
|
||||||
|
gn('closeHelp').onclick = gettingStartedCloseMe;
|
||||||
|
gn('closeHelp').ontouchstart = gettingStartedCloseMe;
|
||||||
|
var videoObj = gn('myVideo');
|
||||||
|
if (isiOS) {
|
||||||
|
// On iOS we can load from server
|
||||||
|
videoObj.src = 'assets/lobby/intro.mp4';
|
||||||
|
} else {
|
||||||
|
// On Android we need to copy to a temporary directory first:
|
||||||
|
setTimeout(function () {
|
||||||
|
videoObj.type = 'video/mp4';
|
||||||
|
videoObj.src = AndroidInterface.scratchjr_getgettingstartedvideopath();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
videoObj.poster = 'assets/lobby/poster.png';
|
||||||
|
|
||||||
|
var urlvars = getUrlVars();
|
||||||
|
place = urlvars['place'];
|
||||||
|
document.ontouchmove = function (e){
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function gettingStartedCloseMe () {
|
||||||
|
window.location.href = 'home.html?place=' + place;
|
||||||
|
}
|
||||||
26
src/entry/home.js
Normal file
26
src/entry/home.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import {gn} from '../utils/lib';
|
||||||
|
import Localization from '../utils/Localization';
|
||||||
|
import iOS from '../iPad/iOS';
|
||||||
|
import Lobby from '../lobby/Lobby';
|
||||||
|
|
||||||
|
export function homeMain () {
|
||||||
|
gn('logotab').ontouchend = homeGoBack;
|
||||||
|
homeStrings();
|
||||||
|
iOS.getsettings(doNext);
|
||||||
|
function doNext (str) {
|
||||||
|
var list = str.split(',');
|
||||||
|
iOS.path = list[1] == '0' ? list[0] + '/' : undefined;
|
||||||
|
Lobby.appinit(window.Settings.scratchJrVersion);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function homeGoBack () {
|
||||||
|
window.location.href = 'index.html?back=yes';
|
||||||
|
}
|
||||||
|
|
||||||
|
function homeStrings () {
|
||||||
|
gn('abouttab-text').textContent = Localization.localize('ABOUT_SCRATCHJR');
|
||||||
|
gn('interfacetab-text').textContent = Localization.localize('INTERFACE_GUIDE');
|
||||||
|
gn('painttab-text').textContent = Localization.localize('PAINT_EDITOR_GUIDE');
|
||||||
|
gn('blockstab-text').textContent = Localization.localize('BLOCKS_GUIDE');
|
||||||
|
}
|
||||||
194
src/entry/inapp.js
Normal file
194
src/entry/inapp.js
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
import {gn} from '../utils/lib';
|
||||||
|
import Localization from '../utils/Localization';
|
||||||
|
|
||||||
|
export function inappAbout () {
|
||||||
|
gn('aboutScratchjrTitle').textContent = Localization.localize('ABOUT_SCRATCHJR');
|
||||||
|
gn('aboutWhatIs').textContent = Localization.localize('ABOUT_WHAT_IS');
|
||||||
|
gn('aboutDescription').innerHTML = Localization.localize('ABOUT_DESCRIPTION') + '<br/><br/>' +
|
||||||
|
Localization.localize('ABOUT_INSPIRED_BY');
|
||||||
|
gn('aboutWhyCreate').textContent = Localization.localize('ABOUT_WHY_CREATE');
|
||||||
|
gn('aboutWhyCreateDescription').innerHTML = Localization.localize('ABOUT_WHY_CREATE_DESCRIPTION');
|
||||||
|
gn('aboutWhoCreated').textContent = Localization.localize('ABOUT_WHO_CREATED');
|
||||||
|
gn('aboutWhoCreatedDescription').innerHTML = (
|
||||||
|
Localization.localize('ABOUT_WHO_CREATED_DESCRIPTION'));
|
||||||
|
gn('aboutWhoSupported').textContent = Localization.localize('ABOUT_WHO_SUPPORTED');
|
||||||
|
gn('aboutWhoSupportedDescription').innerHTML = (
|
||||||
|
Localization.localize('ABOUT_WHO_SUPPORTED_DESCRIPTION')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function inappInterfaceGuide () {
|
||||||
|
var interfaceKeyHeaderNode = gn('interface-key-header');
|
||||||
|
var interfaceKeyDescriptionNode = gn('interface-key-description');
|
||||||
|
|
||||||
|
interfaceKeyHeaderNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE', {N: 1});
|
||||||
|
interfaceKeyDescriptionNode.textContent = Localization.localize('INTERFACE_GUIDE_SAVE_DESCRIPTION');
|
||||||
|
|
||||||
|
var interfaceKeys = [
|
||||||
|
'SAVE',
|
||||||
|
'STAGE',
|
||||||
|
'PRESENTATION_MODE',
|
||||||
|
'GRID',
|
||||||
|
'CHANGE_BG',
|
||||||
|
'ADD_TEXT',
|
||||||
|
'RESET_CHAR',
|
||||||
|
'GREEN_FLAG',
|
||||||
|
'PAGES',
|
||||||
|
'PROJECT_INFO',
|
||||||
|
'UNDO_REDO',
|
||||||
|
'PROGRAMMING_SCRIPT',
|
||||||
|
'PROGRAMMING_AREA',
|
||||||
|
'BLOCKS_PALETTE',
|
||||||
|
'BLOCKS_CATEGORIES',
|
||||||
|
'CHARACTERS'
|
||||||
|
];
|
||||||
|
|
||||||
|
var interfaceDescriptions = [];
|
||||||
|
for (var i = 0; i < interfaceKeys.length; i++) {
|
||||||
|
var key = interfaceKeys[i];
|
||||||
|
interfaceDescriptions.push([
|
||||||
|
Localization.localize('INTERFACE_GUIDE_' + key, {N: i+1}),
|
||||||
|
Localization.localize('INTERFACE_GUIDE_' + key + '_DESCRIPTION')
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var currentButton = document.getElementById('interface-button-save');
|
||||||
|
|
||||||
|
var switchHelp = function (e) {
|
||||||
|
var target = e.target;
|
||||||
|
if (target.className == 'interface-button-text') {
|
||||||
|
var descriptionId = parseInt(target.innerText - 1);
|
||||||
|
interfaceKeyHeaderNode.textContent = interfaceDescriptions[descriptionId][0];
|
||||||
|
interfaceKeyDescriptionNode.textContent = interfaceDescriptions[descriptionId][1];
|
||||||
|
currentButton.className = 'interface-button';
|
||||||
|
currentButton = target.parentNode;
|
||||||
|
currentButton.className = currentButton.className + ' interface-button-selected';
|
||||||
|
window.parent.ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('touchstart', switchHelp, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function inappPaintEditorGuide () {
|
||||||
|
var paintKeyHeaderNode = gn('paint-key-header');
|
||||||
|
var paintKeyDescriptionNode = gn('paint-key-description');
|
||||||
|
|
||||||
|
paintKeyHeaderNode.textContent = Localization.localize('PAINT_GUIDE_UNDO', {N:1});
|
||||||
|
paintKeyDescriptionNode.textContent = Localization.localize('PAINT_GUIDE_UNDO_DESCRIPTION');
|
||||||
|
|
||||||
|
var paintKeys = [
|
||||||
|
'UNDO',
|
||||||
|
'REDO',
|
||||||
|
'SHAPE',
|
||||||
|
'CHARACTER_NAME',
|
||||||
|
'CUT',
|
||||||
|
'DUPLICATE',
|
||||||
|
'ROTATE',
|
||||||
|
'DRAG',
|
||||||
|
'SAVE',
|
||||||
|
'FILL',
|
||||||
|
'CAMERA',
|
||||||
|
'COLOR',
|
||||||
|
'LINE_WIDTH'
|
||||||
|
];
|
||||||
|
|
||||||
|
var paintDescriptions = [];
|
||||||
|
for (var i = 0; i < paintKeys.length; i++) {
|
||||||
|
var key = paintKeys[i];
|
||||||
|
paintDescriptions.push([
|
||||||
|
Localization.localize('PAINT_GUIDE_' + key, {N: i+1}),
|
||||||
|
Localization.localize('PAINT_GUIDE_' + key + '_DESCRIPTION')
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var currentButton = document.getElementById('paint-button-undo');
|
||||||
|
|
||||||
|
var switchHelp = function (e) {
|
||||||
|
var target = e.target;
|
||||||
|
if (target.className == 'paint-button-text') {
|
||||||
|
var descriptionId = parseInt(target.innerText - 1);
|
||||||
|
paintKeyHeaderNode.textContent = paintDescriptions[descriptionId][0];
|
||||||
|
paintKeyDescriptionNode.textContent = paintDescriptions[descriptionId][1];
|
||||||
|
currentButton.className = 'paint-button';
|
||||||
|
currentButton = target.parentNode;
|
||||||
|
currentButton.className = currentButton.className + ' paint-button-selected';
|
||||||
|
window.parent.ScratchAudio.sndFXWithVolume('keydown.wav', 0.3);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('touchstart', switchHelp, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function inappBlocksGuide () {
|
||||||
|
// Localized category names
|
||||||
|
gn('yellow-block-category-header').textContent = Localization.localize('BLOCKS_TRIGGERING_BLOCKS');
|
||||||
|
gn('blue-block-category-header').textContent = Localization.localize('BLOCKS_MOTION_BLOCKS');
|
||||||
|
gn('purple-block-category-header').textContent = Localization.localize('BLOCKS_LOOKS_BLOCKS');
|
||||||
|
gn('green-block-category-header').textContent = Localization.localize('BLOCKS_SOUND_BLOCKS');
|
||||||
|
gn('orange-block-category-header').textContent = Localization.localize('BLOCKS_CONTROL_BLOCKS');
|
||||||
|
gn('red-block-category-header').textContent = Localization.localize('BLOCKS_END_BLOCKS');
|
||||||
|
|
||||||
|
var blockDescriptionKeys = [
|
||||||
|
'BLOCKS_GREEN_FLAG',
|
||||||
|
'BLOCKS_GREEN_FLAG_DESCRIPTION',
|
||||||
|
'BLOCKS_ON_TAP',
|
||||||
|
'BLOCKS_ON_TAP_DESCRIPTION',
|
||||||
|
'BLOCKS_ON_TOUCH',
|
||||||
|
'BLOCKS_ON_TOUCH_DESCRIPTION',
|
||||||
|
'BLOCKS_ON_MESSAGE',
|
||||||
|
'BLOCKS_ON_MESSAGE_DESCRIPTION',
|
||||||
|
'BLOCKS_SEND_MESSAGE',
|
||||||
|
'BLOCKS_SEND_MESSAGE_DESCRIPTION',
|
||||||
|
'BLOCKS_MOVE_RIGHT',
|
||||||
|
'BLOCKS_MOVE_RIGHT_DESCRIPTION',
|
||||||
|
'BLOCKS_MOVE_LEFT',
|
||||||
|
'BLOCKS_MOVE_LEFT_DESCRIPTION',
|
||||||
|
'BLOCKS_MOVE_UP',
|
||||||
|
'BLOCKS_MOVE_UP_DESCRIPTION',
|
||||||
|
'BLOCKS_MOVE_DOWN',
|
||||||
|
'BLOCKS_MOVE_DOWN_DESCRIPTION',
|
||||||
|
'BLOCKS_TURN_RIGHT',
|
||||||
|
'BLOCKS_TURN_RIGHT_DESCRIPTION',
|
||||||
|
'BLOCKS_TURN_LEFT',
|
||||||
|
'BLOCKS_TURN_LEFT_DESCRIPTION',
|
||||||
|
'BLOCKS_HOP',
|
||||||
|
'BLOCKS_HOP_DESCRIPTION',
|
||||||
|
'BLOCKS_GO_HOME',
|
||||||
|
'BLOCKS_GO_HOME_DESCRIPTION',
|
||||||
|
'BLOCKS_SAY',
|
||||||
|
'BLOCKS_SAY_DESCRIPTION',
|
||||||
|
'BLOCKS_GROW',
|
||||||
|
'BLOCKS_GROW_DESCRIPTION',
|
||||||
|
'BLOCKS_SHRINK',
|
||||||
|
'BLOCKS_SHRINK_DESCRIPTION',
|
||||||
|
'BLOCKS_RESET_SIZE',
|
||||||
|
'BLOCKS_RESET_SIZE_DESCRIPTION',
|
||||||
|
'BLOCKS_HIDE',
|
||||||
|
'BLOCKS_HIDE_DESCRIPTION',
|
||||||
|
'BLOCKS_SHOW',
|
||||||
|
'BLOCKS_SHOW_DESCRIPTION',
|
||||||
|
'BLOCKS_POP',
|
||||||
|
'BLOCKS_POP_DESCRIPTION',
|
||||||
|
'BLOCKS_PLAY_RECORDED',
|
||||||
|
'BLOCKS_PLAY_RECORDED_DESCRIPTION',
|
||||||
|
'BLOCKS_WAIT',
|
||||||
|
'BLOCKS_WAIT_DESCRIPTION',
|
||||||
|
'BLOCKS_STOP',
|
||||||
|
'BLOCKS_STOP_DESCRIPTION',
|
||||||
|
'BLOCKS_SET_SPEED',
|
||||||
|
'BLOCKS_SET_SPEED_DESCRIPTION',
|
||||||
|
'BLOCKS_REPEAT',
|
||||||
|
'BLOCKS_REPEAT_DESCRIPTION',
|
||||||
|
'BLOCKS_END',
|
||||||
|
'BLOCKS_END_DESCRIPTION',
|
||||||
|
'BLOCKS_REPEAT_FOREVER',
|
||||||
|
'BLOCKS_REPEAT_FOREVER_DESCRIPTION',
|
||||||
|
'BLOCKS_GO_TO_PAGE',
|
||||||
|
'BLOCKS_GO_TO_PAGE_DESCRIPTION'
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let key of blockDescriptionKeys) {
|
||||||
|
gn(key).textContent = Localization.localize(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
76
src/entry/index.js
Normal file
76
src/entry/index.js
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import ScratchAudio from '../utils/ScratchAudio';
|
||||||
|
import {gn, getUrlVars, isAndroid, isiOS} from '../utils/lib';
|
||||||
|
import iOS from '../iPad/iOS';
|
||||||
|
|
||||||
|
export function indexMain () {
|
||||||
|
gn('gettings').ontouchend = indexGettingstarted;
|
||||||
|
gn('startcode').ontouchend = indexGohome;
|
||||||
|
ScratchAudio.init();
|
||||||
|
var urlvars = getUrlVars();
|
||||||
|
if (urlvars.back) {
|
||||||
|
indexLoadOptions();
|
||||||
|
} else {
|
||||||
|
indexFirstTime();
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
gn('rays').className = 'rays spinme';
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexFirstTime () {
|
||||||
|
gn('authors').className = 'credits show';
|
||||||
|
gn('authorsText').className = 'creditsText show';
|
||||||
|
gn('purpleguy').className = 'purple show';
|
||||||
|
gn('blueguy').className = 'blue show';
|
||||||
|
gn('redguy').className = 'red show';
|
||||||
|
iOS.askpermission(); // ask for sound recording
|
||||||
|
setTimeout(function () {
|
||||||
|
iOS.hidesplash(doit);
|
||||||
|
}, 500);
|
||||||
|
function doit () {
|
||||||
|
ScratchAudio.sndFX('tap.wav');
|
||||||
|
window.ontouchend = function () {
|
||||||
|
indexLoadOptions();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
indexLoadOptions();
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexLoadOptions () {
|
||||||
|
gn('authors').className = 'credits hide';
|
||||||
|
gn('authorsText').className = 'creditsText hide';
|
||||||
|
gn('purpleguy').className = 'purple hide';
|
||||||
|
gn('blueguy').className = 'blue hide';
|
||||||
|
gn('redguy').className = 'red hide';
|
||||||
|
gn('gettings').className = 'gettings show';
|
||||||
|
gn('startcode').className = 'startcode show';
|
||||||
|
document.ontouchmove = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
if (isAndroid) {
|
||||||
|
AndroidInterface.notifySplashDone();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexGohome () {
|
||||||
|
// On iOS, sounds are loaded async, but the code as written expects to play tap.wav when we enter home.html
|
||||||
|
// (but since it isn't loaded yet, no sound is played).
|
||||||
|
// On Android, sync sounds means both calls to tap.wav result in a sound play.
|
||||||
|
// XXX: we should re-write the lobby loading to wait for the sounds to load, and not play a sound here.
|
||||||
|
if (isiOS) {
|
||||||
|
ScratchAudio.sndFX('tap.wav');
|
||||||
|
}
|
||||||
|
iOS.setfile('homescroll.sjr', 0, function () {
|
||||||
|
doNext();
|
||||||
|
});
|
||||||
|
function doNext () {
|
||||||
|
window.location.href = 'home.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexGettingstarted () {
|
||||||
|
ScratchAudio.sndFX('tap.wav');
|
||||||
|
window.location.href = 'gettingstarted.html?place=home';
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue