-
Notifications
You must be signed in to change notification settings - Fork 172
Add a fullscreen button for the game div container #2855
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
Conversation
Pull Request Test Coverage Report for Build 8635650637Details
💛 - Coveralls |
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.
I've taken a look at the code, and there are some changes I believe that should be made here. Other than that, everything else looks okay!
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.
Hi, thanks for working on this! I am not particularly fond of this approach as it seems very imperative (unlike React's declarative-style coding).
I propose using the useFullscreen
hook from the @mantine/hooks
package. What are your thoughts?
Mentioning @sayomaki for comments as well.
Would it be possible to generalize the full-screen option to be easily applicable to other components, such as the CSE machine, or the data visualizer, or achievements? |
…nto feat/game-fullscreen
…emy/frontend into feat/game-fullscreen
I have updated it so that the fullscreen functionality uses the useFullscreen hook from the @mantine/hooks package. Since it only handles toggling fullscreen, the functionality to lock screen orientation in landscape mode is added in a wrapper function. |
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.
Took a look at the updated code, and I only have one slight query below. Other than that, the changes looks good!
} | ||
}; | ||
|
||
const gameDisplayRef = React.useRef<HTMLDivElement | null>(null); |
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.
What is the purpose of this gameDisplayRef
here, can we not just use the ref provided by the useFullscreen
hook?
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.
I don't think so. The gameDisplayRef
is a React RefObject that I used in line 99 to 113 to handle the resizing of the game display when entering/exiting fullscreen. But the ref provided by the useFullscreen
hook is a callback ref function. See https://mantine.dev/hooks/use-fullscreen/#definition.
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.
My question is why do you need to handle the resizing manually? Doesn't useFullscreen
already handle it for you?
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.
I added the fullscreen Icon element as a child of the game-display div element, which the Phaser game engine inserts the game canvas element in. The game canvas element has a fixed aspect ratio and its size is determined by the size of the game-display div element. When browser window width is too wide and height is too small, there will be empty space on the left and right of the game canvas element. So the left offset of the fullscreen Icon element is updated to ensure that it remains aligned with the top left of the game canvas element. The Icon size and padding were purely for aesthetic reasons.
I couldn't think of a better design since the game is a canvas element. To avoid the need for this, perhaps it would be better to implement the fullscreen option directly within the game itself. But I haven't gone into the Phaser game documentation yet so I'm not sure if it's possible.
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.
I think the solution is very hacky. Why not just rely on the DOM to position the icon button correctly instead of using a resize observer? Instead of putting the button as a child you can just put it as a sibling, the wrap a parent container around both.
Maybe something like:
{/* parent, relative, margin auto to squeeze child + align center */}
<div style={{ position: 'relative' }}>
{/* absolute, top = left = padding */}
<Icon /* ... */ />
<div id="game-display"></div>
</div>
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.
Then you don't need to use any resize logic cause the DOM does the layouting for you
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.
I tried using margin: auto
with the Icon button both as a child and as a sibling with a parent container wrapper. However, this causes issues with the resizing of the game canvas element since it references the game-display div element's width and height to determine its width and height. So, when you increase the size of the browser window, more margin gets added instead of the game canvas element getting enlarged.
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.
Ok, I understand it now; I still feel the solution is hacky. After looking at game code, I have an idea for a refactor. Let me discuss with @lhw-1 first.
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.
Hi, thanks for working on this. I have quite a lot of questions with regards to the design as follows:
|
||
React.useEffect(() => { | ||
const handleResize = () => { | ||
if (gameDisplayRef.current) { |
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.
Are the values never reset otherwise?
const aspectRatio = 16 / 9; | ||
const height = gameDisplayRef.current.offsetHeight; | ||
const width = gameDisplayRef.current.offsetWidth; | ||
const size = height / 40; | ||
const padding = height / 50; | ||
const leftOffset = | ||
isFullscreen || height * aspectRatio > width ? 0 : (width - height * aspectRatio) / 2; | ||
setIconSize(size); | ||
setIconPadding(`${padding}px`); | ||
setIconLeft(`${leftOffset}px`); |
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.
I don't get it:
- Why are
iconSize
,iconPadding
,iconLeft
independent state variables? Aren't they all derived state? - What does the game height and width have anything to do with the icon positioning?
- What is the aspect ratio for?
const [iconPadding, setIconPadding] = React.useState('0px'); | ||
|
||
React.useEffect(() => { | ||
const handleResize = () => { |
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.
Please don't put this function definition inside the useEffect
body, coupled with the resize observer below it results in so many unnecessary function objects being recreated, degrading performance.
// at the time handleResize is called, so the height of gameDisplayRef.current | ||
// is still the fullscreen height. | ||
// To fix this, we delay handleResize by 100ms. | ||
const delayedHandleResize = () => { |
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.
Ditto on moving this out of the useEffect
body.
window.addEventListener('resize', delayedHandleResize); | ||
delayedHandleResize(); | ||
|
||
return () => window.removeEventListener('resize', delayedHandleResize); |
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.
What is the resize observer for when we already have isFullscreen
as a state variable?
id="fullscreen-button" | ||
icon={isFullscreen ? 'minimize' : 'fullscreen'} | ||
color="white" | ||
htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'} |
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.
Why are we using htmlTitle
instead of using Blueprint's Tooltip
? Is there any particular reason?
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.
Nope, no particular reason. I was just looking for a way to implement a simple tooltip and came across using htmlTitle
first. Will update to use Tooltip
instead.
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.
Any updates? I'll merge this PR first but please do change it in the future if you have the time (or create an issue if you don't).
} | ||
}; | ||
|
||
const gameDisplayRef = React.useRef<HTMLDivElement | null>(null); |
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.
My question is why do you need to handle the resizing manually? Doesn't useFullscreen
already handle it for you?
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.
I think we can merge this first and do the refactor later cause my idea would involve game refactoring which is out of scope for this PR.
Thanks and sorry for the wait, LGTM!
commit 27f3fe4 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Sun Apr 14 15:21:16 2024 +0800 bumping js-slang (source-academy#2934) commit 812393a Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sun Apr 14 13:28:11 2024 +0800 Migrate to TypeScript v5 (source-academy#2850) * Bump TypeScript to v5.4 Also updated tsconfig.json to remove a deprecated config. * Fix type error * Fix type error * Fix type error * Fix type error * Fix type error * Fix lint dependencies and config * Fix type errors * Fix type error * Fix format * Fix type errors Also standardized React hooks import style. * Fix type error * Fix type error * Fix format * Bump typescript to v5.4.3 * Fix type errors * Add some `as any` assertions FIXMEs were also incorporated for future refactoring. * Update lockfile post-merge * Bump dependencies * Update lockfile post-merge * Create type-safe object helpers * Fix type error * Fix type error * Fix type error * Create more type helpers * Fix type error * Fix type error Also removed unnecessary type annotation. * Fix type error * Fix type error * Fix type errors * Fix type error * Fix type error * Fix type errors * Fix type error * Fix type error * Refactor filter logic to fix type error * Fix types * Address comments commit 87e646d Author: CZX <CZX123@users.noreply.github.com> Date: Sat Apr 13 23:05:04 2024 +0800 CSE UI/UX: Animations & UI improvements (source-academy#2931) * display array indices * animate moving numbers from agenda to stash * add code to read from previous agenda * Add animation components and some abstraction * Change test cases * Fix bug Properly disable animations when control and stash option is not enabled * display array indices * animate moving numbers from agenda to stash * add code to read from previous agenda * Add animation components and some abstraction * Change test cases * Fix bug Properly disable animations when control and stash option is not enabled * Fix issues with names after rebase * Fix animation bugs and refactoring of animation classes and logic * Fix mistake in test snapshot * Revert "Merge branch 'cse-uiux' of https://github.com/source-academy/frontend into cse-uiux" This reverts commit 7ef87d8, reversing changes made to efa8c57. * Restructure animation classes * Add binary operator animation * Add unary operator animation * Begin work on block separation animation * Improve binary operation animation, and improve the versatility of the base animation components * Improve the unary operation and block animations * Update test cases and remove block animation conditions * Add pop animation (linear movement) * Improve pop animation, and cleanup code for pull request * Revert envVisualizer test snapshot changes * Add assignment animation * Work on binding lookup function * Improve assignment animation and touch up on other animations, added experimental Column component * Add lookup animation (Identifier) * Improve lookup animation * Hide arrows for lookup animation and show them when it's finished * Remove AnimationUtils.tsx file replaced with AnimationUtils.ts * Slow down assignment and lookup animations * Fix issues with merging * Add environment animation * Refactor setDestination and animate to new method animateTo * Improve env animation and rename a utility function * Added animated arrows and also modified GenericArrow and improve assignment animation * Update test snapshot and formatting changes * Add arrow animation to lookup animation, and fix animateTo function behavior * Add FrameCreationAnimation * Rewrote all animation components for greater flexibility and performance * Shorten duration and delay names, and add listener functionality * Move experimental file * Fix issues with `this` keyword * Rewrite AnimatedTextbox to make it easier for both Text and Rect within it to be individually animated * Improve FrameCreationAnimation and bunch of other fixes * Fix some issues with `undefined` inside the control and stash * Make compact components the new default and remove any mentions to the old components. Also removes the experimental button toggle. * Update test snapshots * Clean up testing code a little * Formatting changes * Fix issues after merge * Revert some incorrect merges * Add FunctionFrameCreationAnimation if possible, reusing AssignmentAnimation would make handling fade-in of values easier * Add getNodeDimensions and getNodeLocation * Add ArrowFunctionExpressionAnimation * Add BranchAnimation simple animation for replacing a branch item in the control with the correct code block * Sort instr types in alphabetical order * Add ArrayLiteralAnimation * Added cases for block splitting for/while loops and conditional expressions * Improve animations for arrow functions and branch instruction * Update function application animation * Special changes for js-slang branch: add new objectCount property and filter program bindings * Change dummy binding behavior to match js-slang update * Fix array references being lost in frames due to cloning property descriptors * Simplify code * Add ArrayAccessAnimation * Begin work on ArrayAssignmentAnimation todo: animate arrows for object assignment * Fix application animation for predeclared funcs * Changes to solve issue 2700 and some fixes regarding global frame * Re-add animations * Fix many issues regarding displaying objects on global frame * Formatting * Simplify merging of environment heaps and drawing of bindings * Fix infinite loop in `findObjects` * Disable animations if control is truncated Could allow such functionality in the future, but currently animations break with a truncated control. * Fix AssignmentAnimation previous use of binding.height() causes positioning issues with nested array assignment * Increase space between closure and frame * Change for/while instr to use BranchAnimation * Initial Commit * More fixes and added faded gc objects * Disable variadic function animation * Increase spacing for global closure between closure circles and global frame border * Add missing case 'FunctionExpression' animates the moving of a functionexpression to the stash as a closure * Fix variadic function checker * Improve FunctionApplicationAnimation for nullary functions, allow the closure stash item to fade away * Improve assignment animation * Run format * Simplify check frame creation * Fix params text and added SourceObject to display runes correctly * bumping js-slang * Revamp unreferenced behavior and update snapshots * Run format * Update snapshot * Bump js-slang * Fix issues after merge * Fix frames creeping to the left * Improve rune display, revamp color system and add color interpolation * UI & animation improvements * Big improvements for many animations * More improvements, better transitions between border colors * More improvements and update snapshot * Update types * Remove explicit fragment * Remove explicit fragment again * Update typings * Merge branch 'cse-uiux2' of https://github.com/source-academy/frontend into cse-uiux2 * Fix findObjects * Add docs * Re-add color dependencies for Java CSE * Re-add color dependencies for Java CSE * Fix format * Array access & asgn animation improvements, general polish * Cleanup and update java cse machine colors to use new functions * Move type helpers from animation utils to global type helpers file * Run format * Fix fn to frame arrow, and cleanup arrow code --------- Co-authored-by: notnotmax <156508404+notnotmax@users.noreply.github.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: henz <henz@comp.nus.edu.sg> commit 4f6be6b Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 21:05:41 2024 +0800 Refactor frontend part 7 (source-academy#2846) * Improve useRef type arguments for HTML elements * Use named imports for React hooks * Refactor MobileWorkspace * Replace if statements with optional invocation * Move constant `SideContentTab`s out of FC body * Simplify classnames call * Remove unnecessary braces around string attributes Only done for non-UI (non-message/label) strings as these UI strings will be pulled out for internationalization in the future. * Deduplicate dependencies * Create `useTokens` hook * Update default throw behavior for `useTokens` * Render SICP chatbot only when logged in * Fix overloaded types for `useTokens` Done following default behavior change. * Use `useTokens` where applicable * Refactor SICP chatbox * Use `useTokens` * Move API call to separate file * Update React import to default import * Refactor SICP chatbox further * Update imports * Create and use ChatMessage type alias * Reorganize SICP chatbot files * Refactor chat completion logic * Use dependency injection in prompt builder * Refactor prompt builder logic * Refactor prompt builder to separate file * Create type definitions * Move, type, rename SICP section summaries * Improve typing * Refactor SICP chat box component * Remove unnecessary template literal * Refactor constants out of component * Create type definitions * Create `CONTEXT_SIZE` constant to replace magic numbers * Refactor logic to use `CONTEXT_SIZE` constant * Remove unnecessary state variables * Refactor payload generation * Move fetching logic from event handler to effect callback instead * Rename `cleanMessage` to `resetChat` * Decouple rendering logic from chat completion logic * Only store string content in `ChatMessage` type * Move rendering function outside component to prevent unnecessary recreation * Update render function signature * Restore GPT-generated output warning for bot messages * Refactor render function logic * Fix React render warnings * Add TODOs for full Markdown/stories-like parsing Also uses non-greedy regex to match and split code blocks: * Only match JavaScript code blocks * Fix false matches * Supports multiple code blocks in a single message * Fix whitespace issue * Fix filename capitalization * Remove duplicated badge code * Fix double request * Block chat input when loading response commit c1abec1 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 20:35:47 2024 +0800 Bump Blueprint; remove obsolete hotfixes, deprecations (source-academy#2773) * Bump minimum Blueprint version Done to allow compatibility with new React 18 `createRoot`. * Migrate from deprecated `Tooltip2`, `Popover2` Done partially so far, with the full migration in a subsequent commit. * Migrate more components to fix deprecations * Update test snapshots * Migrate remaining components to fix deprecations * Remove deprecated package from `requireProvider` This would necessitate a corresponding change in modules to ensure they don't import the deprecated package, or simply just mark it as non-external. * Remove `@blueprintjs/popover2` package completely * Fix format * Fix format * Reformat files post-merge * Bump Blueprint version * Use BP `Classes` utility instead of raw strings Prevents regressions when the CSS namespace changes in the meantime while we still have yet to migrate away fully from the CSS API. * Fix lint * Migrate to new notifications API Removes the old hotfix now that Blueprint supports it. commit d2b322a Author: Josh Thoo Jen Sen <110712708+josh1248@users.noreply.github.com> Date: Sat Apr 13 20:03:17 2024 +0800 Implement isGradingPublished (plus related features) (source-academy#2856) * Dummy publish grading function * skeleton redux loop for publishGrading, update GradingOverview * New column filter for isPublished (WIP) * Implement anticipated backend format and route implementations for publish and unpublish buttons * Remove misleading devnote and simplify message contents * fix: Change gradingOverviews to use backend response * Readjust publish button from HTML icon button to Blueprintjs text button * Publish and unpublish buttons set up * set up frontend-only type submissionProgress derived from backend status and isPublished * Implement derived submissionProgress frontend field from status and isGradingPublished from backend * Improve type safety in Grading page * Implement business logic to disable unsubmission if published or not submitted * Use notPublished param in backend * minor type safety change * Update new actions post-merge conflicts * Update tests * Update jsdocs and field names from ungraded to unpublished * adjust field names in test from unpublishedFilter to publishedFilter * Updated showGrading to be based on published status * Update getAssessmentOverviews to compute submission progress * Fix tests * Scaffold function for comprehensive progress status (WIP) * Update RequestsSaga.ts * fix crash * Introduce soon-to-be comprehensive field into table * Shift conversion functions into utils * Update business logic using comprehensive state * Introduce progress status to assessment overviews * clean up display of progressStatus * remove derived submissionProgress field, add in status field from backend * remove direct gradingStatus use in grading page * remove gradingStatus from assessments * Remove more references to gradingStatus * Replace references to gradingStatus with progress * there is a lot of reference to gradingStatus. * Replace gradingStatus with progress in testing * Fully remove gradingStatus and replace with progress * Fix accidental import * Update to use new backend parameter names in backend * Remove isPublished field entirely from grading overviews to avoid confusion with publishing within assessment overviews * Update tests * Dummy publish all button in ground control * redux loop for publishall and unpublishall (part 1) * Remove re-autograde for published or non-submitted assessments * Add publishAll button * Replace deprecated ag-grid functions with current versions * Implement unpublish all button * Add unique key, avoid specialkey flag from react * Fix button layout * Fix button format * increase width for accessibility * autoPublish settings inserted into admin panel configs * cleanup of isAutoPublished field within assessment configs * update tests for assessmentConfiguration * remove un-needed import * remove debug-only submissionStatus in grading submissions table * Revert accidental removal of XP field * bp5-minimal tag to clean up bulk publishing buttons - thanks gabriel :) * Fix errors post-merge * Fix lint error * feat: Implement published and unpublished notifications and remove deprecated ones * chore: Remove commented code * Fix compile error * Remove unnecessary typecast * Remove unnecessary typecast * Remove unused import * update notification types to reflect backend * change notification types to reflect backend changes * remove git stash artifacts * remove git stash artefacts * add tooltips, update assessment fields * remove development artifacts * remove TODO comment as issue has been raised * Update GradingUtils.ts jsdocs * linting * readjust progress statuses and conversion functions * update colours and logos * expose backend isGradingPublished field and update tests * update assessment cards to show purely based on isGradingPublished status without further check for graded * remove hardcoded assessment status * linting * revert yarn lock change * Update yarn.lock * update mocks and tests * remove un-needed import * linting * Use enum values instead of strings for color keys * Use prop over BP CSS API * remove un-needed field calculation, fix typos * update student username to show nusnet id instead of duplicating student name (thanks gabriel :D) --------- Co-authored-by: GabrielCWT <77312579+GabrielCWT@users.noreply.github.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit 4556d3f Author: Liew Xin Yi <e0550381@u.nus.edu> Date: Sat Apr 13 19:43:51 2024 +0800 Implement and Integrate `java-slang` CSEC Visualizer (source-academy#2926) * Update ControlBarChapterSelect with Java * Implement Java CSEC Visualizer * Integrate CSEC Visualizer * Linting errors for java-slang-csec * Fix frontend test: rename Object to Obj to avoid potential name clash? * Update snapshot * Update imports from java-slang * Fix lint * Update snapshot * Fix linting * Fix typo Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> * Add TODO for err source node location --------- Co-authored-by: joel chan <joelchanzhiyang@gmail.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit 612f68b Author: Lai Mei Tin <77192251+1001mei@users.noreply.github.com> Date: Sat Apr 13 18:02:16 2024 +0800 Integrate Java type checker and compiler into frontend (source-academy#2925) * Integrate Java compiler into frontend * Add typechecker from java-slang * Add program terminated succesfully output to Java * Bump java-slang to 1.0.7 * Remove program terminated output from java in frontend * Change ProgramTerminatedSuccessfully to anonymous class in java * Bump java-slang to 1.0.8 * Bump java-slang to 1.0.9 * Add process/browser to craco polyfill * Add java-parser to jest transform ignore patterns * Bump java-slang to 1.0.13 * Add mocks for java-slang functions * Fix wrong error label in java helper * Increase max file size to cache to 20 --------- Co-authored-by: Bryan Loh <bryanlohxz@gmail.com> Co-authored-by: Martin Henz <henz@comp.nus.edu.sg> commit d1c0a45 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 14:53:02 2024 +0800 Migrate to Redux Toolkit part 5 (source-academy#2866) * Migrate remaining workspace reducers to RTK * Migrate remaining action creators to RTK * Remove `typesafe-actions` dependency Type safety is now achieved via Redux Toolkit. * Update testcase * Fix format * Fix compile error * Fix errors * Restore old NOTIFY_PROGRAM_EVALUATED reducer Done to optimize the diff and will be removed later. commit 0c45606 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Fri Apr 12 12:34:11 2024 +0800 bumping js-slang (source-academy#2929) commit 02059bf Author: John Wong <johnwz123@gmail.com> Date: Fri Apr 12 01:59:37 2024 +0800 Modify mobile keyboard to be scrollable (source-academy#2915) * Modify mobile keyboard to be scrollable * Mobile Keyboard is now swipeable * Remove mobile-keyboard-row-toggle styles * Fix formatting * Remove console.log statements --------- Co-authored-by: Joven Soh <34702990+JovenSoh@users.noreply.github.com> commit 4cc0204 Author: John Wong <johnwz123@gmail.com> Date: Thu Apr 11 03:28:57 2024 +0800 Add full-screen button for Playground side content (source-academy#2911) * Added fullscreen button to playground side content * Refactor fullscreen button to use class as reference and Blueprint's Tooltip * updating snapshots * Remove unnecessary comments * Replace icon with button For more correct semantics. * Remove unnecessary styles Following the change from icon to button, `cursor: pointer` is no longer needed. Also lowered the z-index to a more reasonable value. * Fix format * Update test snapshots --------- Co-authored-by: henz <henz@comp.nus.edu.sg> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit e2abe18 Author: John Wong <johnwz123@gmail.com> Date: Thu Apr 11 02:16:49 2024 +0800 Add a fullscreen button for the game div container (source-academy#2855) * Add a fullscreen button for the game div container * Modify code to use the useFullscreen hook from the @mantine/hooks package * Bump dependencies * Use `IconNames` instead of magic strings --------- Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: Martin Henz <henz@comp.nus.edu.sg> Co-authored-by: Lee Hyung Woon / 이형운 <leehyungwoonsamuel@gmail.com> commit f4d6e78 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Wed Apr 10 16:10:22 2024 +0800 Fix `xlsx` security vulnerability (source-academy#2914) * Bump and use recommended XLSX version from CDN * Deduplicate dependencies commit 571f8b7 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 14:31:39 2024 +0800 bumping js-slang (source-academy#2922) commit c859f1b Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed Apr 10 14:14:57 2024 +0800 Bump tar from 6.1.15 to 6.2.1 (source-academy#2920) Bumps [tar](https://github.com/isaacs/node-tar) from 6.1.15 to 6.2.1. - [Release notes](https://github.com/isaacs/node-tar/releases) - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md) - [Commits](isaacs/node-tar@v6.1.15...v6.2.1) --- updated-dependencies: - dependency-name: tar dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit bb790df Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 14:05:51 2024 +0800 bumping java-slang to 1.0.6 (source-academy#2924) commit 27e3181 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 13:30:30 2024 +0800 bumping java-slang to 1.0.5 (source-academy#2923) commit 5dba6a5 Author: CZX <CZX123@users.noreply.github.com> Date: Wed Apr 10 07:58:53 2024 +0800 CSE Machine: Fixes for variadic function & global closures, added faded unreferenced objects (source-academy#2906) * Initial Commit * More fixes and added faded gc objects * Run format * Fix params text and added SourceObject to display runes correctly * bumping js-slang * Revamp unreferenced behavior and update snapshots * Run format * Update snapshot * Bump js-slang --------- Co-authored-by: henz <henz@comp.nus.edu.sg>
* Switch Scheme languages fully to CSE Machine * Updated tests with windows machine * Ran tests on different windows machine * resolve all issues with scheme CSE machine * update tests * reenable csc machine for scheme * add prototype visualisations for scheme data types * update tests * simplify logic for checking prelude * Make cse refer to correct closure * Centralise logic for alternate languages * separate scheme as its own file * add scheme primitive representation to cse machine * update representation of control * Squashed commit of the following: commit 27f3fe4 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Sun Apr 14 15:21:16 2024 +0800 bumping js-slang (#2934) commit 812393a Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sun Apr 14 13:28:11 2024 +0800 Migrate to TypeScript v5 (#2850) * Bump TypeScript to v5.4 Also updated tsconfig.json to remove a deprecated config. * Fix type error * Fix type error * Fix type error * Fix type error * Fix type error * Fix lint dependencies and config * Fix type errors * Fix type error * Fix format * Fix type errors Also standardized React hooks import style. * Fix type error * Fix type error * Fix format * Bump typescript to v5.4.3 * Fix type errors * Add some `as any` assertions FIXMEs were also incorporated for future refactoring. * Update lockfile post-merge * Bump dependencies * Update lockfile post-merge * Create type-safe object helpers * Fix type error * Fix type error * Fix type error * Create more type helpers * Fix type error * Fix type error Also removed unnecessary type annotation. * Fix type error * Fix type error * Fix type errors * Fix type error * Fix type error * Fix type errors * Fix type error * Fix type error * Refactor filter logic to fix type error * Fix types * Address comments commit 87e646d Author: CZX <CZX123@users.noreply.github.com> Date: Sat Apr 13 23:05:04 2024 +0800 CSE UI/UX: Animations & UI improvements (#2931) * display array indices * animate moving numbers from agenda to stash * add code to read from previous agenda * Add animation components and some abstraction * Change test cases * Fix bug Properly disable animations when control and stash option is not enabled * display array indices * animate moving numbers from agenda to stash * add code to read from previous agenda * Add animation components and some abstraction * Change test cases * Fix bug Properly disable animations when control and stash option is not enabled * Fix issues with names after rebase * Fix animation bugs and refactoring of animation classes and logic * Fix mistake in test snapshot * Revert "Merge branch 'cse-uiux' of https://github.com/source-academy/frontend into cse-uiux" This reverts commit 7ef87d8, reversing changes made to efa8c57. * Restructure animation classes * Add binary operator animation * Add unary operator animation * Begin work on block separation animation * Improve binary operation animation, and improve the versatility of the base animation components * Improve the unary operation and block animations * Update test cases and remove block animation conditions * Add pop animation (linear movement) * Improve pop animation, and cleanup code for pull request * Revert envVisualizer test snapshot changes * Add assignment animation * Work on binding lookup function * Improve assignment animation and touch up on other animations, added experimental Column component * Add lookup animation (Identifier) * Improve lookup animation * Hide arrows for lookup animation and show them when it's finished * Remove AnimationUtils.tsx file replaced with AnimationUtils.ts * Slow down assignment and lookup animations * Fix issues with merging * Add environment animation * Refactor setDestination and animate to new method animateTo * Improve env animation and rename a utility function * Added animated arrows and also modified GenericArrow and improve assignment animation * Update test snapshot and formatting changes * Add arrow animation to lookup animation, and fix animateTo function behavior * Add FrameCreationAnimation * Rewrote all animation components for greater flexibility and performance * Shorten duration and delay names, and add listener functionality * Move experimental file * Fix issues with `this` keyword * Rewrite AnimatedTextbox to make it easier for both Text and Rect within it to be individually animated * Improve FrameCreationAnimation and bunch of other fixes * Fix some issues with `undefined` inside the control and stash * Make compact components the new default and remove any mentions to the old components. Also removes the experimental button toggle. * Update test snapshots * Clean up testing code a little * Formatting changes * Fix issues after merge * Revert some incorrect merges * Add FunctionFrameCreationAnimation if possible, reusing AssignmentAnimation would make handling fade-in of values easier * Add getNodeDimensions and getNodeLocation * Add ArrowFunctionExpressionAnimation * Add BranchAnimation simple animation for replacing a branch item in the control with the correct code block * Sort instr types in alphabetical order * Add ArrayLiteralAnimation * Added cases for block splitting for/while loops and conditional expressions * Improve animations for arrow functions and branch instruction * Update function application animation * Special changes for js-slang branch: add new objectCount property and filter program bindings * Change dummy binding behavior to match js-slang update * Fix array references being lost in frames due to cloning property descriptors * Simplify code * Add ArrayAccessAnimation * Begin work on ArrayAssignmentAnimation todo: animate arrows for object assignment * Fix application animation for predeclared funcs * Changes to solve issue 2700 and some fixes regarding global frame * Re-add animations * Fix many issues regarding displaying objects on global frame * Formatting * Simplify merging of environment heaps and drawing of bindings * Fix infinite loop in `findObjects` * Disable animations if control is truncated Could allow such functionality in the future, but currently animations break with a truncated control. * Fix AssignmentAnimation previous use of binding.height() causes positioning issues with nested array assignment * Increase space between closure and frame * Change for/while instr to use BranchAnimation * Initial Commit * More fixes and added faded gc objects * Disable variadic function animation * Increase spacing for global closure between closure circles and global frame border * Add missing case 'FunctionExpression' animates the moving of a functionexpression to the stash as a closure * Fix variadic function checker * Improve FunctionApplicationAnimation for nullary functions, allow the closure stash item to fade away * Improve assignment animation * Run format * Simplify check frame creation * Fix params text and added SourceObject to display runes correctly * bumping js-slang * Revamp unreferenced behavior and update snapshots * Run format * Update snapshot * Bump js-slang * Fix issues after merge * Fix frames creeping to the left * Improve rune display, revamp color system and add color interpolation * UI & animation improvements * Big improvements for many animations * More improvements, better transitions between border colors * More improvements and update snapshot * Update types * Remove explicit fragment * Remove explicit fragment again * Update typings * Merge branch 'cse-uiux2' of https://github.com/source-academy/frontend into cse-uiux2 * Fix findObjects * Add docs * Re-add color dependencies for Java CSE * Re-add color dependencies for Java CSE * Fix format * Array access & asgn animation improvements, general polish * Cleanup and update java cse machine colors to use new functions * Move type helpers from animation utils to global type helpers file * Run format * Fix fn to frame arrow, and cleanup arrow code --------- Co-authored-by: notnotmax <156508404+notnotmax@users.noreply.github.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: henz <henz@comp.nus.edu.sg> commit 4f6be6b Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 21:05:41 2024 +0800 Refactor frontend part 7 (#2846) * Improve useRef type arguments for HTML elements * Use named imports for React hooks * Refactor MobileWorkspace * Replace if statements with optional invocation * Move constant `SideContentTab`s out of FC body * Simplify classnames call * Remove unnecessary braces around string attributes Only done for non-UI (non-message/label) strings as these UI strings will be pulled out for internationalization in the future. * Deduplicate dependencies * Create `useTokens` hook * Update default throw behavior for `useTokens` * Render SICP chatbot only when logged in * Fix overloaded types for `useTokens` Done following default behavior change. * Use `useTokens` where applicable * Refactor SICP chatbox * Use `useTokens` * Move API call to separate file * Update React import to default import * Refactor SICP chatbox further * Update imports * Create and use ChatMessage type alias * Reorganize SICP chatbot files * Refactor chat completion logic * Use dependency injection in prompt builder * Refactor prompt builder logic * Refactor prompt builder to separate file * Create type definitions * Move, type, rename SICP section summaries * Improve typing * Refactor SICP chat box component * Remove unnecessary template literal * Refactor constants out of component * Create type definitions * Create `CONTEXT_SIZE` constant to replace magic numbers * Refactor logic to use `CONTEXT_SIZE` constant * Remove unnecessary state variables * Refactor payload generation * Move fetching logic from event handler to effect callback instead * Rename `cleanMessage` to `resetChat` * Decouple rendering logic from chat completion logic * Only store string content in `ChatMessage` type * Move rendering function outside component to prevent unnecessary recreation * Update render function signature * Restore GPT-generated output warning for bot messages * Refactor render function logic * Fix React render warnings * Add TODOs for full Markdown/stories-like parsing Also uses non-greedy regex to match and split code blocks: * Only match JavaScript code blocks * Fix false matches * Supports multiple code blocks in a single message * Fix whitespace issue * Fix filename capitalization * Remove duplicated badge code * Fix double request * Block chat input when loading response commit c1abec1 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 20:35:47 2024 +0800 Bump Blueprint; remove obsolete hotfixes, deprecations (#2773) * Bump minimum Blueprint version Done to allow compatibility with new React 18 `createRoot`. * Migrate from deprecated `Tooltip2`, `Popover2` Done partially so far, with the full migration in a subsequent commit. * Migrate more components to fix deprecations * Update test snapshots * Migrate remaining components to fix deprecations * Remove deprecated package from `requireProvider` This would necessitate a corresponding change in modules to ensure they don't import the deprecated package, or simply just mark it as non-external. * Remove `@blueprintjs/popover2` package completely * Fix format * Fix format * Reformat files post-merge * Bump Blueprint version * Use BP `Classes` utility instead of raw strings Prevents regressions when the CSS namespace changes in the meantime while we still have yet to migrate away fully from the CSS API. * Fix lint * Migrate to new notifications API Removes the old hotfix now that Blueprint supports it. commit d2b322a Author: Josh Thoo Jen Sen <110712708+josh1248@users.noreply.github.com> Date: Sat Apr 13 20:03:17 2024 +0800 Implement isGradingPublished (plus related features) (#2856) * Dummy publish grading function * skeleton redux loop for publishGrading, update GradingOverview * New column filter for isPublished (WIP) * Implement anticipated backend format and route implementations for publish and unpublish buttons * Remove misleading devnote and simplify message contents * fix: Change gradingOverviews to use backend response * Readjust publish button from HTML icon button to Blueprintjs text button * Publish and unpublish buttons set up * set up frontend-only type submissionProgress derived from backend status and isPublished * Implement derived submissionProgress frontend field from status and isGradingPublished from backend * Improve type safety in Grading page * Implement business logic to disable unsubmission if published or not submitted * Use notPublished param in backend * minor type safety change * Update new actions post-merge conflicts * Update tests * Update jsdocs and field names from ungraded to unpublished * adjust field names in test from unpublishedFilter to publishedFilter * Updated showGrading to be based on published status * Update getAssessmentOverviews to compute submission progress * Fix tests * Scaffold function for comprehensive progress status (WIP) * Update RequestsSaga.ts * fix crash * Introduce soon-to-be comprehensive field into table * Shift conversion functions into utils * Update business logic using comprehensive state * Introduce progress status to assessment overviews * clean up display of progressStatus * remove derived submissionProgress field, add in status field from backend * remove direct gradingStatus use in grading page * remove gradingStatus from assessments * Remove more references to gradingStatus * Replace references to gradingStatus with progress * there is a lot of reference to gradingStatus. * Replace gradingStatus with progress in testing * Fully remove gradingStatus and replace with progress * Fix accidental import * Update to use new backend parameter names in backend * Remove isPublished field entirely from grading overviews to avoid confusion with publishing within assessment overviews * Update tests * Dummy publish all button in ground control * redux loop for publishall and unpublishall (part 1) * Remove re-autograde for published or non-submitted assessments * Add publishAll button * Replace deprecated ag-grid functions with current versions * Implement unpublish all button * Add unique key, avoid specialkey flag from react * Fix button layout * Fix button format * increase width for accessibility * autoPublish settings inserted into admin panel configs * cleanup of isAutoPublished field within assessment configs * update tests for assessmentConfiguration * remove un-needed import * remove debug-only submissionStatus in grading submissions table * Revert accidental removal of XP field * bp5-minimal tag to clean up bulk publishing buttons - thanks gabriel :) * Fix errors post-merge * Fix lint error * feat: Implement published and unpublished notifications and remove deprecated ones * chore: Remove commented code * Fix compile error * Remove unnecessary typecast * Remove unnecessary typecast * Remove unused import * update notification types to reflect backend * change notification types to reflect backend changes * remove git stash artifacts * remove git stash artefacts * add tooltips, update assessment fields * remove development artifacts * remove TODO comment as issue has been raised * Update GradingUtils.ts jsdocs * linting * readjust progress statuses and conversion functions * update colours and logos * expose backend isGradingPublished field and update tests * update assessment cards to show purely based on isGradingPublished status without further check for graded * remove hardcoded assessment status * linting * revert yarn lock change * Update yarn.lock * update mocks and tests * remove un-needed import * linting * Use enum values instead of strings for color keys * Use prop over BP CSS API * remove un-needed field calculation, fix typos * update student username to show nusnet id instead of duplicating student name (thanks gabriel :D) --------- Co-authored-by: GabrielCWT <77312579+GabrielCWT@users.noreply.github.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit 4556d3f Author: Liew Xin Yi <e0550381@u.nus.edu> Date: Sat Apr 13 19:43:51 2024 +0800 Implement and Integrate `java-slang` CSEC Visualizer (#2926) * Update ControlBarChapterSelect with Java * Implement Java CSEC Visualizer * Integrate CSEC Visualizer * Linting errors for java-slang-csec * Fix frontend test: rename Object to Obj to avoid potential name clash? * Update snapshot * Update imports from java-slang * Fix lint * Update snapshot * Fix linting * Fix typo Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> * Add TODO for err source node location --------- Co-authored-by: joel chan <joelchanzhiyang@gmail.com> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit 612f68b Author: Lai Mei Tin <77192251+1001mei@users.noreply.github.com> Date: Sat Apr 13 18:02:16 2024 +0800 Integrate Java type checker and compiler into frontend (#2925) * Integrate Java compiler into frontend * Add typechecker from java-slang * Add program terminated succesfully output to Java * Bump java-slang to 1.0.7 * Remove program terminated output from java in frontend * Change ProgramTerminatedSuccessfully to anonymous class in java * Bump java-slang to 1.0.8 * Bump java-slang to 1.0.9 * Add process/browser to craco polyfill * Add java-parser to jest transform ignore patterns * Bump java-slang to 1.0.13 * Add mocks for java-slang functions * Fix wrong error label in java helper * Increase max file size to cache to 20 --------- Co-authored-by: Bryan Loh <bryanlohxz@gmail.com> Co-authored-by: Martin Henz <henz@comp.nus.edu.sg> commit d1c0a45 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Sat Apr 13 14:53:02 2024 +0800 Migrate to Redux Toolkit part 5 (#2866) * Migrate remaining workspace reducers to RTK * Migrate remaining action creators to RTK * Remove `typesafe-actions` dependency Type safety is now achieved via Redux Toolkit. * Update testcase * Fix format * Fix compile error * Fix errors * Restore old NOTIFY_PROGRAM_EVALUATED reducer Done to optimize the diff and will be removed later. commit 0c45606 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Fri Apr 12 12:34:11 2024 +0800 bumping js-slang (#2929) commit 02059bf Author: John Wong <johnwz123@gmail.com> Date: Fri Apr 12 01:59:37 2024 +0800 Modify mobile keyboard to be scrollable (#2915) * Modify mobile keyboard to be scrollable * Mobile Keyboard is now swipeable * Remove mobile-keyboard-row-toggle styles * Fix formatting * Remove console.log statements --------- Co-authored-by: Joven Soh <34702990+JovenSoh@users.noreply.github.com> commit 4cc0204 Author: John Wong <johnwz123@gmail.com> Date: Thu Apr 11 03:28:57 2024 +0800 Add full-screen button for Playground side content (#2911) * Added fullscreen button to playground side content * Refactor fullscreen button to use class as reference and Blueprint's Tooltip * updating snapshots * Remove unnecessary comments * Replace icon with button For more correct semantics. * Remove unnecessary styles Following the change from icon to button, `cursor: pointer` is no longer needed. Also lowered the z-index to a more reasonable value. * Fix format * Update test snapshots --------- Co-authored-by: henz <henz@comp.nus.edu.sg> Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> commit e2abe18 Author: John Wong <johnwz123@gmail.com> Date: Thu Apr 11 02:16:49 2024 +0800 Add a fullscreen button for the game div container (#2855) * Add a fullscreen button for the game div container * Modify code to use the useFullscreen hook from the @mantine/hooks package * Bump dependencies * Use `IconNames` instead of magic strings --------- Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: Martin Henz <henz@comp.nus.edu.sg> Co-authored-by: Lee Hyung Woon / 이형운 <leehyungwoonsamuel@gmail.com> commit f4d6e78 Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Wed Apr 10 16:10:22 2024 +0800 Fix `xlsx` security vulnerability (#2914) * Bump and use recommended XLSX version from CDN * Deduplicate dependencies commit 571f8b7 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 14:31:39 2024 +0800 bumping js-slang (#2922) commit c859f1b Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed Apr 10 14:14:57 2024 +0800 Bump tar from 6.1.15 to 6.2.1 (#2920) Bumps [tar](https://github.com/isaacs/node-tar) from 6.1.15 to 6.2.1. - [Release notes](https://github.com/isaacs/node-tar/releases) - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md) - [Commits](isaacs/node-tar@v6.1.15...v6.2.1) --- updated-dependencies: - dependency-name: tar dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit bb790df Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 14:05:51 2024 +0800 bumping java-slang to 1.0.6 (#2924) commit 27e3181 Author: Martin Henz <henz@comp.nus.edu.sg> Date: Wed Apr 10 13:30:30 2024 +0800 bumping java-slang to 1.0.5 (#2923) commit 5dba6a5 Author: CZX <CZX123@users.noreply.github.com> Date: Wed Apr 10 07:58:53 2024 +0800 CSE Machine: Fixes for variadic function & global closures, added faded unreferenced objects (#2906) * Initial Commit * More fixes and added faded gc objects * Run format * Fix params text and added SourceObject to display runes correctly * bumping js-slang * Revamp unreferenced behavior and update snapshots * Run format * Update snapshot * Bump js-slang --------- Co-authored-by: henz <henz@comp.nus.edu.sg> * update tests --------- Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
Description
Closes #2746
Added a full-screen button and associated functionality for the game div container to improve accessibility on mobile devices. Fullscreen mode on mobile devices would also automatically force the screen orientation to landscape mode.
Type of change
How to test
Checklist