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('.');
switch (keys.length) {
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;
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;
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;
default:
console.warn(`Unknown setting string received: ${settingString}`)

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

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

2
data/web/package.json
View File

@ -28,7 +28,7 @@
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/core": "^7.11.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@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 = {
fontSize: 18,
simpleFont: false,
showRelevantOnly: false,
messageLog: [],
};
@ -19,6 +20,11 @@ const monitorReducer = (state = initialState, action) => {
fontSize: action.fontSize,
});
case 'SET_SIMPLE_FONT':
return _assign({}, state, {
simpleFont: action.simpleFont,
});
case 'SET_SHOW_RELEVANT':
return _assign({}, state, {
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
import setMonitorFontSize from '../Redux/actions/setMonitorFontSize';
import setShowRelevant from '../Redux/actions/setShowRelevant';
import setSimpleFont from '../Redux/actions/setSimpleFont';
const mapReduxStateToProps = (reduxState) => ({
fontSize: reduxState.monitor.fontSize,
@ -16,6 +17,7 @@ const mapReduxStateToProps = (reduxState) => ({
snesConnected: reduxState.gameState.connections.snesConnected,
serverAddress: reduxState.gameState.connections.serverAddress,
serverConnected: reduxState.gameState.connections.serverConnected,
simpleFont: reduxState.monitor.simpleFont,
});
const mapDispatchToProps = (dispatch) => ({
@ -25,6 +27,9 @@ const mapDispatchToProps = (dispatch) => ({
doToggleRelevance: (showRelevantOnly) => {
dispatch(setShowRelevant(showRelevantOnly));
},
doSetSimpleFont: (simpleFont) => {
dispatch(setSimpleFont(simpleFont));
},
});
class MonitorControls extends Component {
@ -129,6 +134,8 @@ class MonitorControls extends Component {
this.props.doToggleRelevance(event.target.checked);
};
setSimpleFont = (event) => this.props.doSetSimpleFont(event.target.checked);
render() {
return (
<div id="monitor-controls">
@ -194,6 +201,14 @@ class MonitorControls extends Component {
<div>
Only show my items <input type="checkbox" onChange={ this.toggleRelevance } />
</div>
<div>
Use alternate font
<input
type="checkbox"
onChange={ this.setSimpleFont }
defaultChecked={ this.props.simpleFont }
/>
</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) => ({
connections: reduxState.gameState.connections,
simpleFont: reduxState.monitor.simpleFont,
});
const mapDispatchToProps = (dispatch) => ({
@ -94,7 +95,7 @@ class WebUI extends Component {
render() {
return (
<div id="web-ui" ref={ this.webUiRef }>
<div id="web-ui" ref={ this.webUiRef } className={ this.props.simpleFont ? 'simple-font' : null }>
<HeaderBar />
<div id="content-middle">
<Monitor />

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

@ -2,7 +2,6 @@
display: flex;
flex-direction: row;
justify-content: space-between;
height: 48px;
margin-top: 0.5em;
padding-bottom: 0.5em;
@ -35,7 +34,6 @@
#accessibility{
display: flex;
flex-direction: column;
height: 48px;
button{
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{
width: calc(100% - 1.5em);
padding: 0.75em;
font-family: HyliaSerif, sans-serif;
&.simple-font{
font-family: sans-serif;
}
#content-middle{
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 {
background-color: #131313;
color: #eae703;
font-family: HyliaSerif, serif;
letter-spacing: 2px;
margin: 0;
}