Skip to content

Commit 822a5ca

Browse files
ppeccinppeccin
committed
Option to flip Touch Controls horizontally
1 parent d90e1d4 commit 822a5ca

File tree

9 files changed

+101
-29
lines changed

9 files changed

+101
-29
lines changed

‎src/main/room/controls/ControllersHub.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,9 @@ wmsx.ControllersHub = function(room, machineControls) {
151151
case wmsx.PeripheralControls.TOUCH_TOGGLE_DIR_BIG:
152152
var dirBig = touchControls.isDirBig();
153153
return { label: dirBig ? "ON" : "OFF", active: dirBig };
154+
case wmsx.PeripheralControls.TOUCH_TOGGLE_MIRRORED:
155+
var mirror = touchControls.isMirrored();
156+
return { label: mirror ? "ON" : "OFF", active: mirror };
154157
case wmsx.PeripheralControls.HAPTIC_FEEDBACK_TOGGLE_MODE:
155158
return { label: hapticFeedbackEnabled ? "ON" : "OFF", active: !!hapticFeedbackEnabled };
156159
case wmsx.PeripheralControls.TURBO_FIRE_TOGGLE:

‎src/main/room/controls/DOMPeripheralControls.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ wmsx.DOMPeripheralControls = function(room) {
3030
this.getControlReport = function(control) {
3131
switch (control) {
3232
case pc.TOUCH_TOGGLE_DIR_BIG:
33+
case pc.TOUCH_TOGGLE_MIRRORED:
3334
case pc.TURBO_FIRE_TOGGLE:
3435
case pc.HAPTIC_FEEDBACK_TOGGLE_MODE:
3536
return controllersHub.getControlReport(control);
@@ -289,6 +290,8 @@ wmsx.DOMPeripheralControls = function(room) {
289290
controllersHub.toggleTouchControlsMode(altPower, secPort); break; // altPower for skip auto option, secPort for dec
290291
case pc.TOUCH_TOGGLE_DIR_BIG:
291292
controllersHub.getTouchControls().toggleDirBig(); break;
293+
case pc.TOUCH_TOGGLE_MIRRORED:
294+
controllersHub.getTouchControls().toggleMirrored(); break;
292295
case pc.TURBO_FIRE_TOGGLE:
293296
controllersHub.toggleTurboFireSpeed(secPort); break; // secPort for dec
294297
case pc.HAPTIC_FEEDBACK_TOGGLE_MODE:
@@ -553,8 +556,8 @@ wmsx.DOMPeripheralControls = function(room) {
553556

554557
pc.MACHINE_POWER_TOGGLE, pc.MACHINE_POWER_RESET,
555558

556-
pc.KEYBOARD_TOGGLE_HOST_LAYOUT, pc.JOYSTICKS_TOGGLE_MODE, pc.JOYKEYS_TOGGLE_MODE, pc.TOUCH_TOGGLE_MODE, pc.TOUCH_TOGGLE_DIR_BIG, pc.TURBO_FIRE_TOGGLE,
557-
pc.HAPTIC_FEEDBACK_TOGGLE_MODE,
559+
pc.KEYBOARD_TOGGLE_HOST_LAYOUT, pc.JOYSTICKS_TOGGLE_MODE, pc.JOYKEYS_TOGGLE_MODE, pc.TOUCH_TOGGLE_MODE, pc.TOUCH_TOGGLE_DIR_BIG, pc.TOUCH_TOGGLE_MIRRORED,
560+
pc.HAPTIC_FEEDBACK_TOGGLE_MODE, pc.TURBO_FIRE_TOGGLE,
558561

559562
pc.COPY_STRING, pc.OPEN_PASTE_STRING, pc.OPEN_ENTER_STRING, pc.CAPTURE_SCREEN,
560563

‎src/main/room/controls/DOMTouchControls.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,21 @@ wmsx.DOMTouchControls = function(room, hub, keyboard, machineControls) {
9999
this.controllersSettingsStateUpdate();
100100
};
101101

102+
this.toggleMirrored = function() {
103+
mirror = !mirror;
104+
prefs.mirrored = mirror;
105+
WMSX.userPreferences.setDirty();
106+
this.controllersSettingsStateUpdate();
107+
};
108+
102109
this.isDirBig = function() {
103110
return dirBig;
104111
};
105112

113+
this.isMirrored = function() {
114+
return mirror;
115+
};
116+
106117
this.getPortActive = function() {
107118
return port;
108119
};
@@ -207,7 +218,8 @@ wmsx.DOMTouchControls = function(room, hub, keyboard, machineControls) {
207218
var active = !!hub.getSettingsState().touchActive;
208219
document.documentElement.classList.toggle("wmsx-touch-active", active);
209220
document.documentElement.classList.toggle("wmsx-dir-big", dirBig);
210-
screen.touchControlsActiveUpdate(active, dirBig);
221+
document.documentElement.classList.toggle("wmsx-touch-mirror", mirror);
222+
screen.touchControlsActiveUpdate(active, dirBig, mirror);
211223
};
212224

213225
this.machinePowerAndUserPauseStateUpdate = function(power, paused) {
@@ -370,6 +382,7 @@ wmsx.DOMTouchControls = function(room, hub, keyboard, machineControls) {
370382
function applyPreferences() {
371383
prefs = WMSX.userPreferences.current.touch;
372384
dirBig = !!prefs.directionalBig;
385+
mirror = !!prefs.mirrored;
373386
}
374387

375388

@@ -382,6 +395,7 @@ wmsx.DOMTouchControls = function(room, hub, keyboard, machineControls) {
382395
var port = -1;
383396
var turboFireClocks = 0, turboFireClockCount = 0, turboFireFlipClock = 0;
384397
var dirBig = false;
398+
var mirror = false;
385399

386400
var dirElement = null, dirTouchID = null, dirTouchCenterX, dirTouchCenterY, dirCurrentDir = -1, dirDeadZone = 0;
387401
var buttonElements = { };
@@ -421,6 +435,7 @@ wmsx.DOMTouchControls = function(room, hub, keyboard, machineControls) {
421435
resetStates();
422436
if (s.p) {
423437
delete s.p.directionalBig; // Does not consider in savestates
438+
delete s.p.mirrored; // Does not consider in savestates
424439
for (var pref in s.p) prefs[pref] = s.p[pref];
425440
// Backward compatibility. Update MSX key mappings character texts
426441
for (var b in prefs.buttons) {

‎src/main/room/controls/PeripheralControls.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@ wmsx.PeripheralControls = {
2222
MACHINE_LOAD_STATE_FILE: 104, MACHINE_SAVE_STATE_FILE: 105, MACHINE_LOAD_STATE_MENU: 106, MACHINE_SAVE_STATE_MENU: 107,
2323
MACHINE_SELECT: 108, EXTENSION_TOGGLE: 109,
2424

25-
KEYBOARD_TOGGLE_HOST_LAYOUT: 201, JOYSTICKS_TOGGLE_MODE: 202, JOYKEYS_TOGGLE_MODE: 203, MOUSE_TOGGLE_MODE: 204, MOUSE_TOGGLE_LOCK: 205, TOUCH_TOGGLE_MODE: 206, TOUCH_TOGGLE_DIR_BIG: 207, TURBO_FIRE_TOGGLE: 208,
25+
KEYBOARD_TOGGLE_HOST_LAYOUT: 201, JOYSTICKS_TOGGLE_MODE: 202, JOYKEYS_TOGGLE_MODE: 203, MOUSE_TOGGLE_MODE: 204, MOUSE_TOGGLE_LOCK: 205, TOUCH_TOGGLE_MODE: 206, TOUCH_TOGGLE_DIR_BIG: 207, TOUCH_TOGGLE_MIRRORED: 208,
2626
HAPTIC_FEEDBACK_TOGGLE_MODE: 209,
2727

28+
TURBO_FIRE_TOGGLE: 210,
29+
2830
COPY_STRING: 301, OPEN_PASTE_STRING: 302, OPEN_ENTER_STRING: 303, CAPTURE_SCREEN: 304,
2931

3032
DISK_LOAD_FILES: 20, DISK_ADD_FILES: 21, DISK_LOAD_URL: 22, DISK_LOAD_FILES_AS_DISK: 23, DISK_LOAD_ZIP_AS_DISK: 24, DISK_REMOVE: 25, DISK_EMPTY: 26, DISK_BOOT: 27, DISK_SAVE_FILE: 29,

‎src/main/room/screen/CanvasDisplay.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -598,10 +598,11 @@ wmsx.CanvasDisplay = function(room, mainElement) {
598598
showCursorAndBar();
599599
};
600600

601-
this.touchControlsActiveUpdate = function(active, dirBig) {
602-
if (touchControlsActive === active && touchControlsDirBig === dirBig) return;
601+
this.touchControlsActiveUpdate = function(active, dirBig, mirror) {
602+
if (touchControlsActive === active && touchControlsDirBig === dirBig && touchControlsMirror === mirror) return;
603603
touchControlsActive = active;
604604
touchControlsDirBig = dirBig;
605+
touchControlsMirror = mirror;
605606
if (isFullscreen) {
606607
if (touchControlsActive) controllersHub.setupTouchControlsIfNeeded(fsElementCenter);
607608
this.requestReadjust(true);
@@ -1910,7 +1911,7 @@ wmsx.CanvasDisplay = function(room, mainElement) {
19101911
var canvasImageRenderingValue;
19111912
var scanlinesImage;
19121913

1913-
var touchControlsActive = false, touchControlsDirBig = false;
1914+
var touchControlsActive = false, touchControlsDirBig = false, touchControlsMirror = false;
19141915
var virtualKeyboardMode = 0;
19151916
var virtualKeyboardElement, virtualKeyboard;
19161917

‎src/main/room/screen/dialogs/MachineSelectDialog.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ wmsx.MachineSelectDialog = function(mainElement, machineTypeSocket, peripheralCo
7777
function defineList() {
7878
listElement.innerHTML = "";
7979
var machines = Object.keys(WMSX.MACHINES_CONFIG);
80-
var height = 43;
80+
var height = 40;
8181
for (var i = 0; i < machines.length; ++i) {
8282
var conf = WMSX.MACHINES_CONFIG[machines[i]];
8383
if (!conf.DESC) continue; // Exclude Machines that are not user selectable

‎src/main/room/screen/dialogs/TouchConfigDialog.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@ wmsx.TouchConfigDialog = function(fsElement, mainElement, controllersHub, periph
105105
options = [
106106
{ label: "Touch Controller", control: wmsx.PeripheralControls.TOUCH_TOGGLE_MODE },
107107
{ label: "Turbo Fire", control: wmsx.PeripheralControls.TURBO_FIRE_TOGGLE },
108-
{ label: "&#128190;&nbsp; Big Directionals", control: wmsx.PeripheralControls.TOUCH_TOGGLE_DIR_BIG },
108+
{ label: "&#128190;&nbsp; Big Directional", control: wmsx.PeripheralControls.TOUCH_TOGGLE_DIR_BIG },
109+
{ label: "&#128190;&nbsp; Right Directional", control: wmsx.PeripheralControls.TOUCH_TOGGLE_MIRRORED },
109110
{ label: "&#128190;&nbsp; Haptic Feedback", control: wmsx.PeripheralControls.HAPTIC_FEEDBACK_TOGGLE_MODE }
110111
];
111112

‎src/main/room/screen/es6/ScreenGUI.js‎

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -575,7 +575,7 @@ html.wmsx-bar-auto-hide #wmsx-bar.wmsx-hidden {
575575
576576
#wmsx-savestate {
577577
width: 280px;
578-
height: 406px;
578+
height: 403px;
579579
}
580580
#wmsx-savestate.wmsx-load {
581581
height: 438px;
@@ -1445,7 +1445,7 @@ input#wmsx-netplay-link-text {
14451445
top: 0; bottom: 0;
14461446
left: 0; right: 0;
14471447
width: 294px;
1448-
height: 269px;
1448+
height: 304px;
14491449
margin: auto;
14501450
padding: 0 16px;
14511451
color: white;
@@ -1921,6 +1921,26 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
19211921
box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
19221922
}
19231923
1924+
html.wmsx-full-screen.wmsx-touch-active.wmsx-dir-big #wmsx-touch-left .wmsx-touch-dir {
1925+
transform: scale(1.2);
1926+
transform-origin: left center;
1927+
}
1928+
html.wmsx-full-screen.wmsx-touch-active.wmsx-touch-mirror.wmsx-dir-big #wmsx-touch-left .wmsx-touch-dir {
1929+
transform-origin: right center;
1930+
}
1931+
1932+
#wmsx-touch-left .wmsx-touch-button {
1933+
margin-left: 11px;
1934+
}
1935+
html.wmsx-touch-mirror #wmsx-touch-left .wmsx-touch-button {
1936+
margin-left: 47px;
1937+
}
1938+
#wmsx-touch-T_X {
1939+
margin-bottom: var(--touch-left-button-vert-margin);
1940+
}
1941+
#wmsx-touch-T_Y {
1942+
margin-top: var(--touch-left-button-vert-margin);
1943+
}
19241944
19251945
@media only screen and (orientation: landscape) { /* Landscape */
19261946
#wmsx-touch-left {
@@ -1933,27 +1953,23 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
19331953
left: calc(-6px - ` + this.TOUCH_CONTROLS_LEFT_WIDTH_BIG + `px);
19341954
--touch-left-button-vert-margin: 20px;
19351955
}
1936-
1937-
#wmsx-touch-left .wmsx-touch-button {
1938-
margin-left: 11px;
1939-
}
1940-
#wmsx-touch-T_X {
1941-
margin-bottom: var(--touch-left-button-vert-margin);
1942-
}
1943-
#wmsx-touch-T_Y {
1944-
margin-top: var(--touch-left-button-vert-margin);
1956+
html.wmsx-touch-mirror #wmsx-touch-left {
1957+
right: calc(-6px - ` + this.TOUCH_CONTROLS_LEFT_WIDTH + `px);
1958+
left: initial !important;
19451959
}
1946-
1947-
html.wmsx-full-screen.wmsx-touch-active.wmsx-dir-big #wmsx-touch-left .wmsx-touch-dir {
1948-
transform: scale(1.2);
1949-
transform-origin: left center;
1960+
html.wmsx-full-screen.wmsx-touch-active.wmsx-touch-mirror.wmsx-dir-big #wmsx-touch-left {
1961+
right: calc(-6px - ` + this.TOUCH_CONTROLS_LEFT_WIDTH_BIG + `px);
19501962
}
19511963
19521964
#wmsx-touch-right {
19531965
right: calc(5px - ` + this.TOUCH_CONTROLS_RIGHT_WIDTH + `px);
19541966
bottom: 50%;
19551967
transform: translateY(50%);
19561968
}
1969+
html.wmsx-touch-mirror #wmsx-touch-right {
1970+
left: calc(5px - ` + this.TOUCH_CONTROLS_RIGHT_WIDTH + `px);
1971+
right: initial !important;
1972+
}
19571973
19581974
#wmsx-touch-speed {
19591975
position: absolute;
@@ -1963,6 +1979,13 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
19631979
html.wmsx-full-screen.wmsx-touch-active.wmsx-dir-big #wmsx-touch-speed {
19641980
left: -130px;
19651981
}
1982+
html.wmsx-touch-mirror #wmsx-touch-speed {
1983+
right: -106px;
1984+
left: initial !important;
1985+
}
1986+
html.wmsx-full-screen.wmsx-touch-active.wmsx-touch-mirror.wmsx-dir-big #wmsx-touch-speed {
1987+
right: -130px;
1988+
}
19661989
19671990
/* Adjust centered elements leaving space to the touch controls on both sides */
19681991
html.wmsx-full-screen.wmsx-touch-active #wmsx-screen-fs-center {
@@ -1973,6 +1996,13 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
19731996
left: ` + this.TOUCH_CONTROLS_LEFT_WIDTH_BIG + `px;
19741997
}
19751998
1999+
html.wmsx-full-screen.wmsx-touch-active.wmsx-touch-mirror #wmsx-screen-fs-center {
2000+
right: ` + this.TOUCH_CONTROLS_LEFT_WIDTH + `px;
2001+
left: ` + this.TOUCH_CONTROLS_RIGHT_WIDTH + `px;
2002+
}
2003+
html.wmsx-full-screen.wmsx-touch-active.wmsx-touch-mirror.wmsx-dir-big #wmsx-screen-fs-center {
2004+
right: ` + this.TOUCH_CONTROLS_LEFT_WIDTH_BIG + `px;
2005+
}
19762006
}
19772007
19782008
@media only screen and (orientation: landscape) and (max-height: 511px) { /* Medium/Large Landscape */
@@ -2023,9 +2053,9 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
20232053
left: 2px;
20242054
bottom: 182px;
20252055
}
2026-
html.wmsx-full-screen.wmsx-touch-active.wmsx-dir-big #wmsx-touch-left .wmsx-touch-dir {
2027-
transform: scale(1.2);
2028-
transform-origin: left center;
2056+
html.wmsx-touch-mirror #wmsx-touch-left {
2057+
right: 2px;
2058+
left: initial !important;
20292059
}
20302060
20312061
#wmsx-touch-right {
@@ -2034,12 +2064,20 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
20342064
width: 112px;
20352065
height: 224px;
20362066
}
2067+
html.wmsx-touch-mirror #wmsx-touch-right {
2068+
left: 77px;
2069+
right: initial !important;
2070+
}
20372071
20382072
#wmsx-touch-speed {
20392073
position: absolute;
20402074
left: 19px;
20412075
bottom: ` + (this.BAR_HEIGHT + 10) + `px;
20422076
}
2077+
html.wmsx-touch-mirror #wmsx-touch-speed {
2078+
right: 19px;
2079+
left: initial !important;
2080+
}
20432081
20442082
.wmsx-touch-button {
20452083
position: absolute;
@@ -2052,7 +2090,13 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
20522090
#wmsx-touch-T_F { bottom: 0%; right: 100%; }
20532091
#wmsx-touch-T_G { bottom: 0%; right: 0%; }
20542092
#wmsx-touch-T_X { display: none; }
2055-
#wmsx-touch-T_Y { left: 4px; bottom: -88px; }
2093+
#wmsx-touch-T_Y { bottom: -88px; }
2094+
2095+
html.wmsx-touch-mirror #wmsx-touch-T_B { right: 100%; }
2096+
html.wmsx-touch-mirror #wmsx-touch-T_C { right: 0%; }
2097+
html.wmsx-touch-mirror #wmsx-touch-T_E { right: 100%; }
2098+
html.wmsx-touch-mirror #wmsx-touch-T_F { right: 0%; }
2099+
html.wmsx-touch-mirror #wmsx-touch-T_G { right: 100%; }
20562100
20572101
html.wmsx-full-screen.wmsx-virtual-keyboard-active #wmsx-touch-left, html.wmsx-full-screen.wmsx-virtual-keyboard-active #wmsx-touch-right {
20582102
display: none;
@@ -2081,11 +2125,13 @@ html.wmsx-full-screen.wmsx-touch-active #wmsx-touch-speed {
20812125
bottom: -74px;
20822126
}
20832127
2084-
#wmsx-touch-T_E, #wmsx-touch-T_X {
2128+
#wmsx-touch-T_E, #wmsx-touch-T_Y {
20852129
display: none;
20862130
}
20872131
#wmsx-touch-T_D { bottom: 50%; right: 0%; }
20882132
2133+
html.wmsx-touch-mirror #wmsx-touch-T_D { right: 100%; }
2134+
20892135
}`;
20902136

20912137
};

‎src/main/userprefs/UserPreferences.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ WMSX.userPreferences.defaults = function() {
116116
touch: {
117117
directional: "JOYSTICK", // JOYSTICK, KEYBOARD
118118
directionalBig: false,
119+
mirrored: false,
119120
buttons: {
120121
T_A: j.J_A,
121122
T_B: j.J_B,

0 commit comments

Comments
 (0)