Skip to content

Commit

Permalink
gameplay settings 💀
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmsderp
nmsderp authored Dec 18, 2023
1 parent 7ee20a2 commit 0d3724c
Show file tree
Hide file tree
Showing 6 changed files with 266 additions and 176 deletions.
255 changes: 141 additions & 114 deletions src/components/menu-bar/menu-bar.jsx
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/components/stage-header/stage-header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ const messages = defineMessages({
id: 'gui.stageHeader.fullscreenControl'
},
openSettingsMessage: {
defaultMessage: 'Open advanced settings',
description: 'Button to open advanced settings in embeds',
id: 'tw.openAdvanced'
defaultMessage: 'Open gameplay settings',
description: 'Button to open gameplay settings in embeds',
id: 'pm.openGameplay'
}
});

Expand Down Expand Up @@ -260,4 +260,4 @@ StageHeaderComponent.defaultProps = {

export default injectIntl(connect(
mapStateToProps
)(StageHeaderComponent));
)(StageHeaderComponent));
40 changes: 39 additions & 1 deletion src/components/tw-settings-modal/settings-modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@
flex-direction: row;
align-items: center;
}
.label-unset-height {
height: initial;
}

.setting table {
border-collapse: collapse;
Expand Down Expand Up @@ -84,11 +87,46 @@
background-image: url("./help-white.svg");
}

.custom-stage-size {
display: flex;
flex-direction: column;
align-items: flex-start;
height: initial;
}
.custom-stage-size-container {
display: flex;
align-items: center;
}
.custom-stage-size > * {
margin-right: 0.5rem;
}
.custom-stage-size-button {
margin: 8px;
background: white;
border-radius: 10px;
font-size: 40px;
width: 168px;
height: 126px;
border: 4px solid rgba(0, 0, 0, 0.1);
outline: 4px white solid;
}
[theme="dark"] .custom-stage-size-button {
outline-color: $ui-primary;
background: $ui-primary;
border-color: rgba(255, 255, 255, 0.1);
}
.custom-stage-size-button[data-widescreen="true"] {
width: 224px;
}
.custom-stage-size-button[data-selected="true"] {
border-color: $motion-primary;
}
.custom-stage-size-button:active {
border-color: $motion-transparent;
}
.custom-stage-size-input {
width: 80px;
margin: 3px 8px;
}

.info {
Expand Down Expand Up @@ -133,4 +171,4 @@
}
[theme="dark"] .warning {
background: rgb(114, 102, 0);
}
}
110 changes: 69 additions & 41 deletions src/components/tw-settings-modal/settings-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ const BufferedInput = BufferedInputHOC(Input);

const messages = defineMessages({
title: {
defaultMessage: 'Advanced Settings',
defaultMessage: 'Settings',
description: 'Title of settings modal',
id: 'tw.settingsModal.title'
id: 'pm.settingsModal.title'
},
help: {
defaultMessage: 'Click for help',
Expand Down Expand Up @@ -70,7 +70,9 @@ class UnwrappedSetting extends React.Component {
[styles.active]: this.props.active
})}
>
<div className={styles.label}>
<div className={classNames(styles.label, {
[styles.labelUnsetHeight]: this.props.unsetHeight === true
})}>
{this.props.primary}
<button
className={styles.helpIcon}
Expand Down Expand Up @@ -121,8 +123,6 @@ BooleanSetting.propTypes = {
label: PropTypes.node.isRequired
};

/*
dd back: nohqpen
const HighQualityPen = props => (
<BooleanSetting
{...props}
Expand All @@ -144,7 +144,6 @@ const HighQualityPen = props => (
slug="high-quality-pen"
/>
);
*/

const CustomFPS = props => (
<BooleanSetting
Expand Down Expand Up @@ -301,36 +300,62 @@ const CustomStageSize = ({
stageWidth,
onStageWidthChange,
stageHeight,
onStageHeightChange
onStageHeightChange,
onStagePresetUsed
}) => (
<Setting
active={customStageSizeEnabled}
unsetHeight={true}
primary={(
<div className={classNames(styles.label, styles.customStageSize)}>
<FormattedMessage
defaultMessage="Custom Stage Size:"
description="Custom Stage Size option"
id="tw.settingsModal.customStageSize"
/>
<BufferedInput
value={stageWidth}
onSubmit={onStageWidthChange}
className={styles.customStageSizeInput}
type="number"
min="0"
max="1024"
step="1"
/>
<span>{'×'}</span>
<BufferedInput
value={stageHeight}
onSubmit={onStageHeightChange}
className={styles.customStageSizeInput}
type="number"
min="0"
max="1024"
step="1"
defaultMessage="Stage Size:"
description="Stage Size option"
id="pm.settingsModal.stageSize"
/>
<div>
<button
className={styles.customStageSizeButton}
data-selected={stageWidth === 480 && stageHeight === 360}
onClick={() => onStagePresetUsed(false)}
>
4:3
</button>
<button
className={styles.customStageSizeButton}
data-selected={stageWidth === 640 && stageHeight === 360}
data-widescreen={true}
onClick={() => onStagePresetUsed(true)}
>
16:9
</button>
</div>
<div className={styles.customStageSizeContainer}>
<FormattedMessage
defaultMessage="Custom Stage Size:"
description="Custom Stage Size option"
id="tw.settingsModal.customStageSize"
/>
<BufferedInput
value={stageWidth}
onSubmit={onStageWidthChange}
className={styles.customStageSizeInput}
type="number"
min="0"
max="1024"
step="1"
/>
<span>{'×'}</span>
<BufferedInput
value={stageHeight}
onSubmit={onStageHeightChange}
className={styles.customStageSizeInput}
type="number"
min="0"
max="1024"
step="1"
/>
</div>
</div>
)}
secondary={
Expand Down Expand Up @@ -362,7 +387,8 @@ CustomStageSize.propTypes = {
stageWidth: PropTypes.number,
onStageWidthChange: PropTypes.func,
stageHeight: PropTypes.number,
onStageHeightChange: PropTypes.func
onStageHeightChange: PropTypes.func,
onStagePresetUsed: PropTypes.func
};

const StoreProjectOptions = ({ onStoreProjectOptions }) => (
Expand Down Expand Up @@ -406,16 +432,21 @@ Header.propTypes = {
const SettingsModalComponent = props => (
<Modal
className={styles.modalContent}
onRequestClose={props.onClose}
onRequestClose={(...args) => {
if (!props.isEmbedded) {
props.onStoreProjectOptions();
}
props.onClose(...args)
}}
contentLabel={props.intl.formatMessage(messages.title)}
id="settingsModal"
>
<Box className={styles.body}>
<Header>
<FormattedMessage
defaultMessage="Featured"
defaultMessage="Gameplay"
description="Settings modal section"
id="tw.settingsModal.featured"
id="pm.settingsModal.gameplay"
/>
</Header>
<CustomFPS
Expand All @@ -427,13 +458,10 @@ const SettingsModalComponent = props => (
value={props.interpolation}
onChange={props.onInterpolationChange}
/>
{/*
add back: nohqpen
<HighQualityPen
value={props.highQualityPen}
onChange={props.onHighQualityPenChange}
/>
*/}
<WarpTimer
value={props.warpTimer}
onChange={props.onWarpTimerChange}
Expand All @@ -459,21 +487,21 @@ const SettingsModalComponent = props => (
/>
<Header>
<FormattedMessage
defaultMessage="Danger Zone"
defaultMessage="Screen Resolution"
description="Settings modal section"
id="tw.settingsModal.dangerZone"
id="pm.settingsModal.screenResolution"
/>
</Header>
{!props.isEmbedded && (
<CustomStageSize
{...props}
/>
)}
{!props.isEmbedded && (
{/* {!props.isEmbedded && (
<StoreProjectOptions
{...props}
/>
)}
)} */}
</Box>
</Modal>
);
Expand Down Expand Up @@ -501,4 +529,4 @@ SettingsModalComponent.propTypes = {
onDisableCompilerChange: PropTypes.func
};

export default injectIntl(SettingsModalComponent);
export default injectIntl(SettingsModalComponent);
22 changes: 13 additions & 9 deletions src/containers/tw-settings-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,38 +21,34 @@ class UsernameModal extends React.Component {
bindAll(this, [
'handleFramerateChange',
'handleCustomizeFramerate',
/*
add back: nohqpen
'handleHighQualityPenChange',
*/
'handleInterpolationChange',
'handleInfiniteClonesChange',
'handleRemoveFencingChange',
'handleRemoveLimitsChange',
'handleWarpTimerChange',
'handleStageWidthChange',
'handleStageHeightChange',
'handleStagePresetUsed',
'handleDisableCompilerChange',
'handleStoreProjectOptions'
]);
}
handleFramerateChange (e) {
this.props.vm.setFramerate(e.target.checked ? 60 : 30);
}
handleCustomizeFramerate () {
async handleCustomizeFramerate () {
// prompt() returns Promise in desktop app
// eslint-disable-next-line no-alert
const newFramerate = prompt(this.props.intl.formatMessage(messages.newFramerate), this.props.framerate);
const newFramerate = await prompt(this.props.intl.formatMessage(messages.newFramerate), this.props.framerate);
const parsed = parseFloat(newFramerate);
if (isFinite(parsed)) {
this.props.vm.setFramerate(parsed);
}
}
/*
add back: nohqpen
handleHighQualityPenChange (e) {
this.props.vm.renderer.setUseHighQualityRender(e.target.checked);
}
*/
handleInterpolationChange (e) {
this.props.vm.setInterpolation(e.target.checked);
}
Expand Down Expand Up @@ -87,6 +83,13 @@ class UsernameModal extends React.Component {
handleStageHeightChange (value) {
this.props.vm.setStageSize(this.props.customStageSize.width, value);
}
handleStagePresetUsed (widescreen) {
if (widescreen) {
this.props.vm.setStageSize(640, 360);
return;
}
this.props.vm.setStageSize(480, 360);
}
handleStoreProjectOptions () {
this.props.vm.storeProjectOptions();
}
Expand All @@ -111,6 +114,7 @@ class UsernameModal extends React.Component {
onWarpTimerChange={this.handleWarpTimerChange}
onStageWidthChange={this.handleStageWidthChange}
onStageHeightChange={this.handleStageHeightChange}
onStagePresetUsed={this.handleStagePresetUsed}
onDisableCompilerChange={this.handleDisableCompilerChange}
stageWidth={this.props.customStageSize.width}
stageHeight={this.props.customStageSize.height}
Expand Down Expand Up @@ -175,4 +179,4 @@ const mapDispatchToProps = dispatch => ({
export default injectIntl(connect(
mapStateToProps,
mapDispatchToProps
)(UsernameModal));
)(UsernameModal));
7 changes: 0 additions & 7 deletions src/playground/render-interface.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,6 @@ const Footer = () => (
id="tw.examples"
/>
</a>
<a href={`https://snail-ide.vercel.app/report?type=project&id=${projectId}`}>
<FormattedMessage
defaultMessage="Report this Projoct"
description="Report the Project"
id="tw.report"
/>
</a>
<a href="https://snail-ide.js.org/editor.html?livetests">
<FormattedMessage
defaultMessage="Live Tests"
Expand Down

0 comments on commit 0d3724c

Please sign in to comment.