Skip to content

Playground

Jump to bottom
Low Jun Kai, Sean edited this page May 18, 2020 · 4 revisions

Playground Component

This Component can be accessed by both the public and NUS Staff. It exists in a separate link which does not require any user authentication.

Playground

It mainly consists of four parts:

  1. ControlBar: Component to control settings for the Source Academy Playground and the REPL editor.
  2. Markdown: Component where one can view the related information to Source Academy (and potentially the information related to the Source Chapter)
  3. Editor: The Main Code Editor for the playground.
  4. ReplInput: The Editor for Source's REPL
Props
editorSessionId mandatory
editorWidth mandatory
editorValue mandatory
execTime mandatory
breakpoints mandatory
highlightedLines mandatory
isEditorAutorun mandatory
isRunning mandatory
isDebugging mandatory
enableDebugging mandatory
newCursorPosition mandatory
output mandatory
queryString mandatory
replValue mandatory
sharedbAceIsInviting mandatory
sharedbAceInitValue mandatory
sideContentHeight mandatory
sourceChapter mandatory
sourceVariant mandatory
websocketStatus mandatory
externalLibraryName mandatory
usingSubst mandatory

Related file(s): ./components/Playground.tsx, ./containers/PlaygroundContainer.ts

1. ControlBar Component

It mainly consists of two sets of buttons.

  1. editorButtons: Buttons to toggle the Editor settings.
  2. replButtons: Buttons to toggle the ReplInput settings.

1.1 Editor Buttons

For the Editor, there are six main buttons:

  1. AutorunButtons: To toggle auto-run on or off.
  2. ShareButton: To Share code with other users via a generated URL Link.
  3. ChapterSelect To Select the sourceChapter and load its associated libraries
  4. ExternalLibrarySelect To Select the externalLibraryName and load the associated external library.
  5. SessionButtons: To allow for collaborative editing between users.
  6. ExecutionTime: To limit the amount of time needed for execution.

1.1.1 AutorunButtons Component

The toggle is mainly done by the function handleToggleEditorAutorun, which is passed into a Switch. When the Switch is clicked, it toggles the isEditorAutorun flag and changes the icon of the RunButton.

Props
isDebugging mandatory
isEditorAutorun mandatory
isRunning mandatory

1.1.2 ShareButton Component.

The queryString is passed into the ShareButton and based on the Code from the Editor, the queryString gets composed into a sharable link given the queryString information.

Props
queryString optional

1.1.3 ChapterSelect Component

The user can changed the sourceChapter and / or the sourceVariant using this button. This is mainly done using the handleChapterSelect function, where it changes the sourceChapter and the sourceVariant of the Editor based on the GUI Input given.

The Source Chapter and Source Variant should be saved within the localStorage.

Props
sourceChapter mandatory
sourceVariant mandatory

1.1.4 ExternalLibrarySelect Component

The user can changed the externalLibraryName using this button. This is mainly done using the handleExternalSelect function, where it changes the externalLibraryName of the Editor based on the GUI Input given.

The External Library Name should be saved within the localStorage.

Props
externalLibraryName mandatory

1.1.5 SessionButtons Component

To allow for Collaborative Editing for Editor code between users. A user can invite, join or leave depending on the state of the host's web session.

Props
editorSessionId mandatory
editorValue mandatory
websocketStatus mandatory

Note: websocketStatus has mainly 2 configurations. 0 for offline and 1 for online.

1.1.6 ExecutionTime Component

In the event that programs that longer than 1000 milliseconds, the user is able to change the execTime using the ExecutionTime component. Do note that the units for execTime is in milliseconds. So 1000 milliseconds = 1 second.

Props
execTime mandatory

1.2 ReplInput Buttons

For the ReplInput, there are two main buttons:

  1. EvalButton: To Evaluate what was given in the ReplInput.
  2. ClearButton: To Clear the entire REPL history.

1.2.1 EvalButton Component

The ReplInput code gets run when the user clicks on this component. This can also be done using the shortcut Shift + Enter

Props
isRunning mandatory

1.2.2 ClearButton Component

When the user clicks on the ClearButton, the REPL History gets cleared using the handleReplOutputClear function.

2 Markdown Component

It consists of two sections.

  1. SideContent: Dependent on the sourceChapter and the sourceVariant of the Playground.
  2. Markdown: Component where one can view the related information to Source Academy

2.1 SideContent

It consists of multiple SideContentTab. THe following SideContentTabs are:

  1. Introduction: Always Present regardless of sourceChapter and sourceVariant.
  2. Inspector
  3. ListVisualizer
  4. EnvVisualizer
  5. VideoDisplay
  6. FaceapiDisplay

2.2 Markdown Content

Props
content mandatory
openLinksInNewWindow mandatory

3. Editor Component

The Main Component where users get to edit and run their code. To learn more about js-slang: visit the link here

The Code Editor used here is AceEditor and ShareAce for Collaborative Editing.

Props
content mandatory
breakpoints mandatory
editorSessionId mandatory
editorValue mandatory
highlightedLines mandatory
isEditorAutorun mandatory
newCursorPosition mandatory
sharedbAceInitValue mandatory
sharedbAceIsInviting mandatory
sourceChapter mandatory
externalLibraryName mandatory
sourceVariant mandatory

4. ReplInput Component

The Main Component for REPL.

Props
replValue mandatory
sourceChapter mandatory
sourceVariant mandatory
usingSubst mandatory
Clone this wiki locally