-
Notifications
You must be signed in to change notification settings - Fork 479
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integrate Java Lab with Code Studio #39111
Changes from 11 commits
c6c5376
b57d69c
5401d0f
36d5b08
013f258
1f80b3c
e0438d7
995e669
1bff217
f60e09d
5749a48
21a5067
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -53,6 +53,7 @@ const SILENCED = [ | |
'fish', | ||
'flappy', | ||
'gamelab', | ||
'javalab', | ||
'jigsaw', | ||
'maze', | ||
'netsim', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import {Provider} from 'react-redux'; | ||
import {getStore, registerReducers} from '../redux'; | ||
import JavalabView from './JavalabView'; | ||
import javalab from './javalabRedux'; | ||
import {TestResults} from '@cdo/apps/constants'; | ||
|
||
/** | ||
* On small mobile devices, when in portrait orientation, we show an overlay | ||
* image telling the user to rotate their device to landscape mode. Because | ||
* the ailab app is able to render at a minimum width of 480px, we set this | ||
molly-moen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
* width to be somewhat larger. We will use this width to set the viewport | ||
* on the mobile device, and correspondingly to scale up the overlay image to | ||
* properly fit on the mobile device for that viewport. | ||
*/ | ||
const MOBILE_PORTRAIT_WIDTH = 600; | ||
|
||
/** | ||
* An instantiable Javalab class | ||
*/ | ||
|
||
const Javalab = function() { | ||
this.skin = null; | ||
this.level = null; | ||
|
||
/** @type {StudioApp} */ | ||
this.studioApp_ = null; | ||
}; | ||
|
||
/** | ||
* Inject the studioApp singleton. | ||
*/ | ||
Javalab.prototype.injectStudioApp = function(studioApp) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We haven't been consistent on this everywhere in other apps, but this should probably be JavaLab and JavaLab.js (similar to GameLab and SpriteLab). Reasoning: On the product side, we'll always refer to it as two separate words "Java Lab" so camelcasing the two words would make sense. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Huh now I'm noticing we're very inconsistent about this in all our apps. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah I'm happy to go with either (camel casing probably makes more sense?) but it seemed like keeping lab lowercase was the norm in general There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well. haha. When I first read this, I felt strongly that camel casing was the right option. Then I saw what we do everywhere else. I'm happy with whatever you choose. |
||
this.studioApp_ = studioApp; | ||
}; | ||
|
||
/** | ||
* Initialize this Javalab instance. Called on page load. | ||
*/ | ||
Javalab.prototype.init = function(config) { | ||
if (!this.studioApp_) { | ||
throw new Error('Javalab requires a StudioApp'); | ||
} | ||
|
||
this.skin = config.skin; | ||
this.level = config.level; | ||
|
||
config.makeYourOwn = false; | ||
config.wireframeShare = true; | ||
config.noHowItWorks = true; | ||
|
||
// We don't want icons in instructions | ||
config.skin.staticAvatar = null; | ||
config.skin.smallStaticAvatar = null; | ||
config.skin.failureAvatar = null; | ||
config.skin.winAvatar = null; | ||
|
||
// Provide a way for us to have top pane instructions disabled by default, but | ||
// able to turn them on. | ||
config.noInstructionsWhenCollapsed = true; | ||
|
||
config.pinWorkspaceToBottom = true; | ||
|
||
config.getCode = this.getCode.bind(this); | ||
|
||
const onMount = () => { | ||
// NOTE: Most other apps call studioApp.init(). Like WebLab, Ailab, and Fish, we don't. | ||
this.studioApp_.setConfigValues_(config); | ||
|
||
// NOTE: if we called studioApp_.init(), the code here would be executed | ||
// automatically since pinWorkspaceToBottom is true... | ||
const container = document.getElementById(config.containerId); | ||
const bodyElement = document.body; | ||
bodyElement.style.overflow = 'hidden'; | ||
bodyElement.className = bodyElement.className + ' pin_bottom'; | ||
container.className = container.className + ' pin_bottom'; | ||
|
||
// Fixes viewport for small screens. Also usually done by studioApp_.init(). | ||
var viewport = document.querySelector('meta[name="viewport"]'); | ||
if (viewport) { | ||
this.studioApp_.fixViewportForSpecificWidthForSmallScreens_( | ||
viewport, | ||
MOBILE_PORTRAIT_WIDTH | ||
); | ||
} | ||
}; | ||
|
||
// Push initial level properties into the Redux store | ||
this.studioApp_.setPageConstants(config, { | ||
channelId: config.channel, | ||
noVisualization: true, | ||
visualizationInWorkspace: true, | ||
isProjectLevel: !!config.level.isProjectLevel | ||
}); | ||
|
||
registerReducers({javalab}); | ||
|
||
ReactDOM.render( | ||
<Provider store={getStore()}> | ||
<JavalabView onMount={onMount} /> | ||
</Provider>, | ||
document.getElementById(config.containerId) | ||
); | ||
}; | ||
|
||
// Called by the Javalab app when it wants to go to the next level. | ||
Javalab.prototype.onContinue = function() { | ||
const onReportComplete = result => { | ||
this.studioApp_.onContinue(); | ||
}; | ||
|
||
this.studioApp_.report({ | ||
app: 'javalab', | ||
level: this.level.id, | ||
result: true, | ||
testResult: TestResults.ALL_PASS, | ||
program: '', | ||
onComplete: result => { | ||
onReportComplete(result); | ||
} | ||
}); | ||
}; | ||
|
||
Javalab.prototype.getCode = function() { | ||
return ''; | ||
}; | ||
|
||
export default Javalab; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/* | ||
* Configuration for all levels. | ||
*/ | ||
var levels = (module.exports = {}); | ||
|
||
levels.custom = {}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* DO NOT IMPORT THIS DIRECTLY. Instead do: | ||
* ``` | ||
* import msg from '@cdo/javalab/locale'. | ||
* ``` | ||
* This allows the webpack config to determine how locales should be loaded, | ||
* which is important for making locale setup work seamlessly in tests. | ||
*/ | ||
// locale for javalab | ||
|
||
import safeLoadLocale from '@cdo/apps/util/safeLoadLocale'; | ||
import localeWithI18nStringTracker from '@cdo/apps/util/i18nStringTracker'; | ||
|
||
let locale = safeLoadLocale('javalab_locale'); | ||
locale = localeWithI18nStringTracker(locale, 'javalab_locale'); | ||
module.exports = locale; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
// locale for javalab | ||
|
||
import safeLoadLocale from '@cdo/apps/util/safeLoadLocale'; | ||
import localeWithI18nStringTracker from '@cdo/apps/util/i18nStringTracker'; | ||
|
||
let locale = safeLoadLocale('javalab_locale'); | ||
locale = localeWithI18nStringTracker(locale, 'javalab_locale'); | ||
module.exports = locale; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import appMain from '@cdo/apps/appMain'; | ||
import {singleton as studioApp} from '@cdo/apps/StudioApp'; | ||
import Javalab from '@cdo/apps/javalab/Javalab'; | ||
import levels from '@cdo/apps/javalab/levels'; | ||
|
||
export default function loadJavalab(options) { | ||
options.isEditorless = true; | ||
const javalab = new Javalab(); | ||
|
||
javalab.injectStudioApp(studioApp()); | ||
appMain(javalab, levels, options); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
import loadAppOptions from '@cdo/apps/code-studio/initApp/loadApp'; | ||
import loadJavalab from './init/loadJavalab'; | ||
|
||
loadAppOptions().then(loadJavalab); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -138,6 +138,10 @@ class ProjectsController < ApplicationController | |
}, | ||
eval: { | ||
name: 'Eval Free Play' | ||
}, | ||
javalab: { | ||
name: 'New Java Lab Project', | ||
levelbuilder_required: true | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. TIL about |
||
} | ||
}.with_indifferent_access.freeze | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is Java Lab going to be supported on mobile/tablet?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tablet yes, mobile not in pilot and I think only view-only.