Skip to content

Commit

Permalink
allow to edit controls in play for host
Browse files Browse the repository at this point in the history
  • Loading branch information
n-at committed Sep 7, 2023
1 parent a4985c2 commit e5ac7bf
Show file tree
Hide file tree
Showing 39 changed files with 970 additions and 931 deletions.
25 changes: 25 additions & 0 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,31 @@ html[data-bs-theme="dark"] .list-group-hover .list-group-item:hover {
padding: 0 !important;
}

/*****************************************************************************/

#navbar .navbar-decoration {
position: absolute;
top: 0;
left: 0;
width: 5px;
}

#navbar .navbar-decoration div {
width: 5px;
height: 19px;
}

#navbar .navbar-decoration .decor-red {
background-color: #dc3545;
}
#navbar .navbar-decoration .decor-green {
background-color: #198754;
}
#navbar .navbar-decoration .decor-blue {
background-color: #0d6efd;
}


/*****************************************************************************/

#drop-overlay {
Expand Down
107 changes: 0 additions & 107 deletions assets/netplay-ui-client.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
window.addEventListener('load', () => {
window.addEventListener('resize', setupGameDisplaySize);
document.getElementById('netplay-name-change').addEventListener('click', changeSelfName);
document.getElementById('netplay-control-scheme-save').addEventListener('click', saveControlScheme);
document.getElementById('netplay-control-scheme-reset').addEventListener('click', resetControlScheme);
document.getElementById('netplay-virtual-gamepad-toggle').addEventListener('click', virtualGamepadToggle);
document.getElementById('netplay-play').addEventListener('click', play);

Expand All @@ -28,7 +26,6 @@

gameOverlayEl.focus();

loadControlScheme();
virtualGamepadInit();
virtualGamepadLoad();
setupGameDisplaySize();
Expand Down Expand Up @@ -206,110 +203,6 @@
setInterval(() => netplay.sendControlHeartbeat(), 5000);
}

///////////////////////////////////////////////////////////////////////////
// Control scheme
///////////////////////////////////////////////////////////////////////////

const ControlSchemeMapping = {
0: 'b',
1: 'y',
2: 'select',
3: 'start',
4: 'up',
5: 'down',
6: 'left',
7: 'right',
8: 'a',
9: 'x',
10: 'l',
11: 'r',
12: 'l2',
13: 'r2',
14: 'l3',
15: 'r3',
16: 'l-stick-right',
17: 'l-stick-left',
18: 'l-stick-down',
19: 'l-stick-up',
20: 'r-stick-right',
21: 'r-stick-left',
22: 'r-stick-down',
23: 'r-stick-up',
};

let defaultControlScheme = {};

function loadControlScheme() {
defaultControlScheme = Object.assign({}, window.ControlScheme);

if (!window.localStorage || !window.localStorage.playtimeNetplayControls) {
return;
}

let controls = {};

try {
controls = JSON.parse(window.localStorage.playtimeNetplayControls);
controls = controls[window.GamePlatform];
} catch (e) {
console.error('Unable to load controls', e);
return;
}
if (!controls) {
return;
}
window.ControlScheme = controls;
renderFormControls();
}

function saveControlScheme() {
for (let buttonId in window.ControlScheme) {
const buttonName = ControlSchemeMapping[buttonId];

const keyboardInput = document.querySelector(`input.keyboard[data-btn="${buttonName}"]`);
if (keyboardInput) {
window.ControlScheme[buttonId].value = keyboardInput.value;
}

const gamepadInput = document.querySelector(`input.gamepad[data-btn="${buttonName}"]`);
if (gamepadInput) {
window.ControlScheme[buttonId].value2 = gamepadInput.value;
}
}

if (window.localStorage) {
let controls;
try {
controls = JSON.parse(window.localStorage.playtimeNetplayControls);
} catch (e) {
controls = {};
}
controls[window.GamePlatform] = window.ControlScheme;
window.localStorage.playtimeNetplayControls = JSON.stringify(controls);
}
}

function resetControlScheme() {
window.ControlScheme = Object.assign({}, defaultControlScheme);
renderFormControls();
}

function renderFormControls() {
for (let buttonId in window.ControlScheme) {
const buttonName = ControlSchemeMapping[buttonId];

const keyboardInput = document.querySelector(`input.keyboard[data-btn="${buttonName}"]`);
if (keyboardInput) {
keyboardInput.value = window.ControlScheme[buttonId].value;
}

const gamepadInput = document.querySelector(`input.gamepad[data-btn="${buttonName}"]`);
if (gamepadInput) {
gamepadInput.value = window.ControlScheme[buttonId].value2;
}
}
}

///////////////////////////////////////////////////////////////////////////
// Self name and player
///////////////////////////////////////////////////////////////////////////
Expand Down
181 changes: 181 additions & 0 deletions assets/play-control-scheme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
(() => {

const ControlSchemeMapping = {
0: 'b',
1: 'y',
2: 'select',
3: 'start',
4: 'up',
5: 'down',
6: 'left',
7: 'right',
8: 'a',
9: 'x',
10: 'l',
11: 'r',
12: 'l2',
13: 'r2',
14: 'l3',
15: 'r3',
16: 'l-stick-right',
17: 'l-stick-left',
18: 'l-stick-down',
19: 'l-stick-up',
20: 'r-stick-right',
21: 'r-stick-left',
22: 'r-stick-down',
23: 'r-stick-up',
//24: 'quick-save-state', (in PlaytimeControls)
//25: 'quick-load-state', (in PlaytimeControls)
//26: 'change-state-slot', (unused)
27: 'fast-forward',
28: 'rewind',
29: 'slow-motion',
};

const ControlSchemeMappingState = {
'save': 'quick-save-state',
'load': 'quick-load-state',
};

window.addEventListener('load', () => {
if (window.ControlSchemeVariant === 'host') {
document.getElementById('play-control-scheme-save').addEventListener('click', saveHostControlScheme);
document.getElementById('play-control-scheme-reset').addEventListener('click', resetHostControlScheme);
loadHostControlScheme();
resetHostControlScheme();
} else if (window.ControlSchemeVariant === 'client') {
document.getElementById('netplay-control-scheme-save').addEventListener('click', saveClientControlScheme);
document.getElementById('netplay-control-scheme-reset').addEventListener('click', resetClientControlScheme);
loadClientControlScheme();
resetClientControlScheme();
}
});

///////////////////////////////////////////////////////////////////////////

function loadHostControlScheme() {
//nothing here - already loaded
}

function saveHostControlScheme() {
window.EJS_emulator.controls = {};
window.PlaytimeControls = {};

['0', '1', '2' , '3'].forEach(player => {
console.log(gatherInputs(player, ControlSchemeMappingState));
window.EJS_emulator.controls[player.toString()] = gatherInputs(player, ControlSchemeMapping);
window.PlaytimeControls[player.toString()] = gatherInputs(player, ControlSchemeMappingState);
});

//TODO gather and send to the server
}

function resetHostControlScheme() {
['0', '1', '2' , '3'].forEach(player => {
if (window.EJS_emulator && window.EJS_emulator.controls) {
assignInputs(player, window.EJS_emulator.controls[player], ControlSchemeMapping);
} else {
assignInputs(player, window.EJS_defaultControls[player], ControlSchemeMapping);
}
assignInputs(player, window.PlaytimeControls[player], ControlSchemeMappingState);
});
}

///////////////////////////////////////////////////////////////////////////

function loadClientControlScheme() {
if (!window.localStorage || !window.localStorage.playtimeNetplayControls) {
return;
}
try {
let controls = JSON.parse(window.localStorage.playtimeNetplayControls)[window.GamePlatform];
if (controls) {
window.ControlScheme = controls;
}
} catch (e) {
console.error('Unable to load controls', e);
}
}

function saveClientControlScheme() {
window.ControlScheme = gatherInputs('0', ControlSchemeMapping);

if (!window.localStorage) {
return;
}

let controls;
try {
controls = JSON.parse(window.localStorage.playtimeNetplayControls);
} catch (e) {
controls = {};
}
controls[window.GamePlatform] = window.ControlScheme;
window.localStorage.playtimeNetplayControls = JSON.stringify(controls);
}

function resetClientControlScheme() {
assignInputs('0', window.ControlScheme, ControlSchemeMapping);
}

///////////////////////////////////////////////////////////////////////////

/**
* Assign controls values to form inputs
*
* @param {string} player
* @param {Object} controls
* @param {Object} mapping
*/
function assignInputs(player, controls, mapping) {
for (let buttonId in controls) {
const buttonName = mapping[buttonId];

const keyboardInput = document.querySelector(`input.keyboard[data-player="${player}"][data-btn="${buttonName}"]`);
if (keyboardInput) {
keyboardInput.value = controls[buttonId].value;
}

const gamepadInput = document.querySelector(`input.gamepad[data-player="${player}"][data-btn="${buttonName}"]`);
if (gamepadInput) {
gamepadInput.value = controls[buttonId].value2;
}
}
}

/**
* Gather values from form inputs
*
* @param {string} player
* @param {Object} mapping
* @returns {{}}
*/
function gatherInputs(player, mapping) {
const controls = {};

for (let buttonId in mapping) {
const buttonName = mapping[buttonId];

if (!controls[buttonId]) {
controls[buttonId] = {
value: null,
value2: null,
};
}

const keyboardInput = document.querySelector(`input.keyboard[data-player="${player}"][data-btn="${buttonName}"]`);
if (keyboardInput) {
controls[buttonId].value = keyboardInput.value;
}

const gamepadInput = document.querySelector(`input.gamepad[data-player="${player}"][data-btn="${buttonName}"]`);
if (gamepadInput) {
controls[buttonId].value2 = gamepadInput.value;
}
}

return controls;
}

})();
File renamed without changes.
6 changes: 0 additions & 6 deletions templates/includes/control_scheme/control.twig

This file was deleted.

50 changes: 0 additions & 50 deletions templates/includes/control_scheme/controls_by_platform.twig

This file was deleted.

Loading

0 comments on commit e5ac7bf

Please sign in to comment.