monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add alternate font toggle to WebUI

This commit is contained in:
Chris Wilson 2020-08-31 02:02:54 -04:00
parent 51e15a1aa0
commit 0236097809
11 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
WebHostLib/static/assets/player-settings.js
View File

@ -68,13 +68,16 @@ const handleOptionChange = (event) => {
const keys = settingString.split('.'); const keys = settingString.split('.');
switch (keys.length) { switch (keys.length) {
case 1: case 1:
settings[keys[0]] = isNaN(event.target.value) ? event.target.value : parseInt(event.target.value, 10); settings[keys[0]] = isNaN(event.target.value) ?
event.target.value : parseInt(event.target.value, 10);
break; break;
case 2: case 2:
settings[keys[0]][keys[1]] = isNaN(event.target.value) ? event.target.value : parseInt(event.target.value, 10); settings[keys[0]][keys[1]] = isNaN(event.target.value) ?
event.target.value : parseInt(event.target.value, 10);
break; break;
case 3: case 3:
settings[keys[0]][keys[1]][keys[2]] = isNaN(event.target.value) ? event.target.value : parseInt(event.target.value, 10); settings[keys[0]][keys[1]][keys[2]] = isNaN(event.target.value) ?
event.target.value : parseInt(event.target.value, 10);
break; break;
default: default:
console.warn(`Unknown setting string received: ${settingString}`) console.warn(`Unknown setting string received: ${settingString}`)

34
data/web/package-lock.json generated
View File

@ -25,16 +25,16 @@
} }
}, },
"@babel/core": { "@babel/core": {
"version": "7.11.1", "version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.1.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz",
"integrity": "sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==", "integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.10.4", "@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.0", "@babel/generator": "^7.11.4",
"@babel/helper-module-transforms": "^7.11.0", "@babel/helper-module-transforms": "^7.11.0",
"@babel/helpers": "^7.10.4", "@babel/helpers": "^7.10.4",
"@babel/parser": "^7.11.1", "@babel/parser": "^7.11.4",
"@babel/template": "^7.10.4", "@babel/template": "^7.10.4",
"@babel/traverse": "^7.11.0", "@babel/traverse": "^7.11.0",
"@babel/types": "^7.11.0", "@babel/types": "^7.11.0",
@ -58,9 +58,9 @@
} }
}, },
"@babel/generator": { "@babel/generator": {
"version": "7.11.0", "version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
"integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==", "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/types": "^7.11.0", "@babel/types": "^7.11.0",
@ -115,9 +115,9 @@
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.11.3", "version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
"integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
"dev": true "dev": true
}, },
"@babel/template": { "@babel/template": {
@ -1439,9 +1439,9 @@
} }
}, },
"@babel/generator": { "@babel/generator": {
"version": "7.11.0", "version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
"integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==", "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/types": "^7.11.0", "@babel/types": "^7.11.0",
@ -1496,9 +1496,9 @@
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.11.3", "version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
"integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
"dev": true "dev": true
}, },
"@babel/template": { "@babel/template": {

2
data/web/package.json
View File

@ -28,7 +28,7 @@
"webpack-cli": "^3.3.11" "webpack-cli": "^3.3.11"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.1", "@babel/core": "^7.11.4",
"@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0", "@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4", "@babel/preset-react": "^7.10.4",

2
data/web/public/assets/index.bundle.js
View File

File diff suppressed because one or more lines are too long

8
data/web/src/js/Monitor/Redux/actions/setSimpleFont.js Normal file
View File

@ -0,0 +1,8 @@
const SET_SIMPLE_FONT = 'SET_SIMPLE_FONT';
const setSimpleFont = (simpleFont) => ({
type: SET_SIMPLE_FONT,
simpleFont,
});
export default setSimpleFont;

6
data/web/src/js/Monitor/Redux/reducers/monitorReducer.js
View File

@ -2,6 +2,7 @@ import _assign from 'lodash-es/assign';
const initialState = { const initialState = {
fontSize: 18, fontSize: 18,
simpleFont: false,
showRelevantOnly: false, showRelevantOnly: false,
messageLog: [], messageLog: [],
}; };
@ -19,6 +20,11 @@ const monitorReducer = (state = initialState, action) => {
fontSize: action.fontSize, fontSize: action.fontSize,
}); });
case 'SET_SIMPLE_FONT':
return _assign({}, state, {
simpleFont: action.simpleFont,
});
case 'SET_SHOW_RELEVANT': case 'SET_SHOW_RELEVANT':
return _assign({}, state, { return _assign({}, state, {
showRelevantOnly: action.showRelevant, showRelevantOnly: action.showRelevant,

15
data/web/src/js/Monitor/containers/MonitorControls.js
View File

@ -7,6 +7,7 @@ import '../../../styles/Monitor/containers/MonitorControls.scss';
// Redux actions // Redux actions
import setMonitorFontSize from '../Redux/actions/setMonitorFontSize'; import setMonitorFontSize from '../Redux/actions/setMonitorFontSize';
import setShowRelevant from '../Redux/actions/setShowRelevant'; import setShowRelevant from '../Redux/actions/setShowRelevant';
import setSimpleFont from '../Redux/actions/setSimpleFont';
const mapReduxStateToProps = (reduxState) => ({ const mapReduxStateToProps = (reduxState) => ({
fontSize: reduxState.monitor.fontSize, fontSize: reduxState.monitor.fontSize,
@ -16,6 +17,7 @@ const mapReduxStateToProps = (reduxState) => ({
snesConnected: reduxState.gameState.connections.snesConnected, snesConnected: reduxState.gameState.connections.snesConnected,
serverAddress: reduxState.gameState.connections.serverAddress, serverAddress: reduxState.gameState.connections.serverAddress,
serverConnected: reduxState.gameState.connections.serverConnected, serverConnected: reduxState.gameState.connections.serverConnected,
simpleFont: reduxState.monitor.simpleFont,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
@ -25,6 +27,9 @@ const mapDispatchToProps = (dispatch) => ({
doToggleRelevance: (showRelevantOnly) => { doToggleRelevance: (showRelevantOnly) => {
dispatch(setShowRelevant(showRelevantOnly)); dispatch(setShowRelevant(showRelevantOnly));
}, },
doSetSimpleFont: (simpleFont) => {
dispatch(setSimpleFont(simpleFont));
},
}); });
class MonitorControls extends Component { class MonitorControls extends Component {
@ -129,6 +134,8 @@ class MonitorControls extends Component {
this.props.doToggleRelevance(event.target.checked); this.props.doToggleRelevance(event.target.checked);
}; };
setSimpleFont = (event) => this.props.doSetSimpleFont(event.target.checked);
render() { render() {
return ( return (
<div id="monitor-controls"> <div id="monitor-controls">
@ -194,6 +201,14 @@ class MonitorControls extends Component {
<div> <div>
Only show my items <input type="checkbox" onChange={ this.toggleRelevance } /> Only show my items <input type="checkbox" onChange={ this.toggleRelevance } />
</div> </div>
<div>
Use alternate font
<input
type="checkbox"
onChange={ this.setSimpleFont }
defaultChecked={ this.props.simpleFont }
/>
</div>
</div> </div>
</div> </div>
); );

3
data/web/src/js/WebUI/containers/WebUI.js
View File

@ -14,6 +14,7 @@ import appendMessage from '../../Monitor/Redux/actions/appendMessage';
const mapReduxStateToProps = (reduxState) => ({ const mapReduxStateToProps = (reduxState) => ({
connections: reduxState.gameState.connections, connections: reduxState.gameState.connections,
simpleFont: reduxState.monitor.simpleFont,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
@ -94,7 +95,7 @@ class WebUI extends Component {
render() { render() {
return ( return (
<div id="web-ui" ref={ this.webUiRef }> <div id="web-ui" ref={ this.webUiRef } className={ this.props.simpleFont ? 'simple-font' : null }>
<HeaderBar /> <HeaderBar />
<div id="content-middle"> <div id="content-middle">
<Monitor /> <Monitor />

2
data/web/src/styles/Monitor/containers/MonitorControls.scss
View File

@ -2,7 +2,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 48px;
margin-top: 0.5em; margin-top: 0.5em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
@ -35,7 +34,6 @@
#accessibility{ #accessibility{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 48px;
button{ button{
border-radius: 4px; border-radius: 4px;

10
data/web/src/styles/WebUI/containers/WebUI.scss
View File

@ -1,6 +1,16 @@
@font-face{
font-family: HyliaSerif;
src: local('HyliaSerif'), url('../../../assets/HyliaSerif.otf')
}
#web-ui{ #web-ui{
width: calc(100% - 1.5em); width: calc(100% - 1.5em);
padding: 0.75em; padding: 0.75em;
font-family: HyliaSerif, sans-serif;
&.simple-font{
font-family: sans-serif;
}
#content-middle{ #content-middle{
display: flex; display: flex;

6
data/web/src/styles/index.scss
View File

@ -1,12 +1,6 @@
@font-face{
font-family: HyliaSerif;
src: local('HyliaSerif'), url('../assets/HyliaSerif.otf')
}
body { body {
background-color: #131313; background-color: #131313;
color: #eae703; color: #eae703;
font-family: HyliaSerif, serif;
letter-spacing: 2px; letter-spacing: 2px;
margin: 0; margin: 0;
} }