diff --git a/css/styles.css b/css/styles.css index 69672f8..eb75cb0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,6 +2,52 @@ html,body{ height:100%; } + /* Dropdown Button */ +.dropbtn { + background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +} + +/* Dropdown button on hover & focus */ +.dropbtn:hover, .dropbtn:focus { + background-color: #2980B9; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show {display:block;} + + body{ background: #000000; margin:0; diff --git a/dist/tetrion.js b/dist/tetrion.js index 77bae93..e8d061b 100644 --- a/dist/tetrion.js +++ b/dist/tetrion.js @@ -423,10 +423,31 @@ module.exports = gamepadAPI; // export gamepadAPI; },{}],4:[function(require,module,exports){ var gamepad = require('./gamepad.js'); +var utils = require('./utils.js'); // import * as gamepad from './gamepad.js'; var UserInputs = { - init() { + init() { + this.settingsMap = new Map(); + var options = ""; + // var init = utils.getCookie("init"); + // if(init == "") + for(var i in this.settingsList) + utils.setCookie(this.settingsList[i], this.settingsDefault[i], 30); // cookies expire in 30 days + + + + // else + // for(var i in this.settingsList) + // this.settingsDefault[i] = utils.getCookie(this.settingsList[i]); + + for(var i in this.settingsList) + this.settingsMap.set(this.settingsList[i], this.settingsDefault[i]); + + + + //document.getElementById("setting").innerHTML = settings; + document.addEventListener('keydown', this.keyDown.bind(this)); document.addEventListener('keyup', this.keyUp.bind(this)); }, @@ -449,15 +470,21 @@ var UserInputs = { }, processGamepadInput() { - this.gamepadButtonsDown("RB"); - this.gamepadButtonsDown("LB"); - this.gamepadButtonsDown("A"); - this.gamepadButtonsDown("B"); - this.gamepadButtonsDown("DPad-Up"); - this.gamepadButtonsDown("Back"); + // this.gamepadButtonsDown("RB"); // hard drop + // this.gamepadButtonsDown("LB"); // hold + // this.gamepadButtonsDown("A"); // rotate counter + // this.gamepadButtonsDown("B"); // rotate cwise + // this.gamepadButtonsDown("DPad-Up"); // Pop hold stack + // this.gamepadButtonsDown("Back"); // reset //this.gamepadButtonsDown("X"); //this.gamepadButtonsDown("Y"); + this.gamepadButtonsDown(this.settingsMap.get("gamepad_harddrop")); // hard drop + this.gamepadButtonsDown(this.settingsMap.get("gamepad_hold")); // hold + this.gamepadButtonsDown(this.settingsMap.get("gamepad_rotateccw")); // rotate counter + this.gamepadButtonsDown(this.settingsMap.get("gamepad_rotate")); // rotate cwise + this.gamepadButtonsDown(this.settingsMap.get("gamepad_pophold")); // Pop hold stack + this.gamepadButtonsDown(this.settingsMap.get("gamepad_reset")); // reset return; @@ -465,9 +492,9 @@ var UserInputs = { processGamepadDPad() { - this.gamepadDPadDown("DPad-Left"); - this.gamepadDPadDown("DPad-Right"); - this.gamepadDPadDown("DPad-Down"); + this.gamepadDPadDown(this.settingsMap.get("gamepad_left")); // shift left + this.gamepadDPadDown(this.settingsMap.get("gamepad_right")); // shift right + this.gamepadDPadDown(this.settingsMap.get("gamepad_down")); // down return; }, @@ -506,8 +533,8 @@ var UserInputs = { // Direction Pad gamepadDPadDown(finds) { - var DAS = 65.0; - var ARR = 20.0; + var DAS = parseInt(this.settingsMap.get("gamepad_das")); //65.0; + var ARR = parseInt(this.settingsMap.get("gamepad_arr")); //20.0; var isContained = this.gpButtons.includes(finds); var isPrevContained = this.prevGpButtons.includes(finds); @@ -537,14 +564,14 @@ var UserInputs = { return; }, processKeys() { - this.processKeyDown(32); // Space - this.processKeyDown(88); // X - this.processKeyDown(90); // Z - this.processKeyDown(16); // shift - this.processKeyDown(17); // ctrl - this.processKeyDown(81); // q - this.processKeyDown(82); // r - this.processKeyDown(67); // c + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_harddrop"))); //32); // Space - hard drop + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_rotate"))); //88); // X - rotate + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_rotateccw"))); //90); // Z - rotateccw + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_hold"))); //16); // shift - push hold stack + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_pophold"))); // ctrl - pop hold stack + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_background"))); // q - turn off background + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_reset"))); // r - reset + //this.processKeyDown(this.settingsMap.get("keyboard_hold"))); // c - pop hold stack }, // keyboard keys z,x,space @@ -581,14 +608,14 @@ var UserInputs = { }, processKeyShift() { - this.processKeyboardArrowKeys(39); // right - this.processKeyboardArrowKeys(37); // left - this.processKeyboardArrowKeys(40); // down + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_left"))); //39); // right + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_right"))); //37); // left + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_down"))); // down }, // Direction arrows processKeyboardArrowKeys(key) { - var DAS = 65.0; - var ARR = 20.0; + var DAS = parseInt(this.settingsMap.get("keyboard_das")); //65.0; + var ARR = parseInt(this.settingsMap.get("keyboard_arr")); //20.0; if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) { @@ -616,8 +643,8 @@ var UserInputs = { }, keyDown(event) { - // Disable space scrolling etc - event.preventDefault(); + if (! ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8)) + event.preventDefault(); this.keyboardKeys[event.keyCode] = true; this.isKeyBoardKeyDown = true; @@ -661,12 +688,33 @@ var UserInputs = { inputqueue: [], gamepadQueue: [], - ticks: 0 + ticks: 0, + // todo: change to human readable + settingsList: ["init", + "keyboard_das", "keyboard_arr", "keyboard_harddrop", "keyboard_hold", + "keyboard_left", "keyboard_right", "keyboard_rotateccw", "keyboard_rotate", + "keyboard_down", "keyboard_pophold", "keyboard_reset", "keyboard_background", + + "gamepad_das", "gamepad_arr", "gamepad_harddrop", "gamepad_hold", + "gamepad_left", "gamepad_right", "gamepad_rotateccw", "gamepad_rotate", + "gamepad_down","gamepad_pophold", "gamepad_reset", "gamepad_background", + "path", "SameSite"], + + settingsDefault: ["true", + "65.0", "20.0", "32", "16", + "37", "39", "90", "88", + "40", "17", "82", "81", + + "65.0", "10.0", "RB", "LB", + "DPad-Left", "DPad-Right", "A", "B", + "DPad-Down", "DPad-Up", "Back", "", + "=/", "Strict"], + settingsMap: [] }; module.exports = UserInputs; // export UserInputs; -},{"./gamepad.js":3}],5:[function(require,module,exports){ +},{"./gamepad.js":3,"./utils.js":8}],5:[function(require,module,exports){ var utils = require('./utils.js'); var consts = require('./consts.js'); var shapes = require('./shapes.js'); @@ -825,7 +873,7 @@ Tetris.prototype = { views.init(this.id, cfg.maxWidth, cfg.maxHeight); canvas.init(views.scene, views.preview, views.hold); inputs.init(); - + this.createSettings(); // if true no openers. just random tetrinos this.isFreePlay = true; this.currentOpener = 0; @@ -859,6 +907,30 @@ Tetris.prototype = { this.currentOpener = 2; this._restartHandler(); + }, + createSettings: function () { + var list = document.getElementById("settings"); + var settings = inputs.settingsList; + + settings.forEach(function(item) { + var option = document.createElement('option'); + + option.text = item; + option.id = item; + + list.add(option); + }); + }, + updateSettingTextBox: function() { + console.log(document.getElementById("setting_value").value = inputs.settingsDefault[document.getElementById("settings").selectedIndex-1]); + }, + setSettings: function() { + //inputs.settingsDefault[document.getElementById("settings").selectedIndex-1] = document.getElementById("setting_value").value; + + var newVal = document.getElementById("setting_value").value; + utils.setCookie(inputs.settingsList[document.getElementById("settings").selectedIndex-1], newVal, 30); + inputs.settingsMap.set(inputs.settingsList[document.getElementById("settings").selectedIndex-1], newVal); + //console.log("settings " + inputs.settingsList[document.getElementById("settings").selectedIndex-1] + " " + newVal); }, //Reset game reset: function() { @@ -2488,6 +2560,28 @@ module.exports.getShape = getShape; var exports = module.exports = {}; +var setCookie = function(cname, cvalue, exdays) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires="+d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; +}; + +var getCookie = function(cname) { + var name = cname + "="; + var ca = document.cookie.split(';'); + for(var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +}; + var $ = function(id){ return document.getElementById(id); }; @@ -2602,6 +2696,8 @@ exports.$ = $; exports.extend = extend; exports.proxy = proxy; exports.deepClone = deepClone; +exports.setCookie = setCookie; +exports.getCookie = getCookie; // export $; // export extend; // export proxy; diff --git a/index.html b/index.html index 736c6af..3cde2ab 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - +
@@ -99,7 +99,7 @@ document.getElementById("divbg").removeAttribute("tabIndex"); -->
@@ -141,7 +151,8 @@ document.getElementById("divbg").removeAttribute("tabIndex"); document.getElementById("setFreePlay").addEventListener("click", function() { tetrion.setFreePlay(); } ); document.getElementById("setTKIFonzieVar").addEventListener("click", function() { tetrion.setTKIFonzieVar(); } ); document.getElementById("setDTCannonVar").addEventListener("click", function() { tetrion.setDTCannonVar(); } ); - + document.getElementById("settings").addEventListener("change", function() { tetrion.updateSettingTextBox(); } ); + document.getElementById("submitsetting").addEventListener("click", function() { tetrion.setSettings(); } ); tetrion.start(); })(); diff --git a/src/input.js b/src/input.js index 569776e..78fbe2b 100644 --- a/src/input.js +++ b/src/input.js @@ -1,8 +1,29 @@ var gamepad = require('./gamepad.js'); +var utils = require('./utils.js'); // import * as gamepad from './gamepad.js'; var UserInputs = { - init() { + init() { + this.settingsMap = new Map(); + var options = ""; + // var init = utils.getCookie("init"); + // if(init == "") + for(var i in this.settingsList) + utils.setCookie(this.settingsList[i], this.settingsDefault[i], 30); // cookies expire in 30 days + + + + // else + // for(var i in this.settingsList) + // this.settingsDefault[i] = utils.getCookie(this.settingsList[i]); + + for(var i in this.settingsList) + this.settingsMap.set(this.settingsList[i], this.settingsDefault[i]); + + + + //document.getElementById("setting").innerHTML = settings; + document.addEventListener('keydown', this.keyDown.bind(this)); document.addEventListener('keyup', this.keyUp.bind(this)); }, @@ -25,15 +46,21 @@ var UserInputs = { }, processGamepadInput() { - this.gamepadButtonsDown("RB"); - this.gamepadButtonsDown("LB"); - this.gamepadButtonsDown("A"); - this.gamepadButtonsDown("B"); - this.gamepadButtonsDown("DPad-Up"); - this.gamepadButtonsDown("Back"); + // this.gamepadButtonsDown("RB"); // hard drop + // this.gamepadButtonsDown("LB"); // hold + // this.gamepadButtonsDown("A"); // rotate counter + // this.gamepadButtonsDown("B"); // rotate cwise + // this.gamepadButtonsDown("DPad-Up"); // Pop hold stack + // this.gamepadButtonsDown("Back"); // reset //this.gamepadButtonsDown("X"); //this.gamepadButtonsDown("Y"); + this.gamepadButtonsDown(this.settingsMap.get("gamepad_harddrop")); // hard drop + this.gamepadButtonsDown(this.settingsMap.get("gamepad_hold")); // hold + this.gamepadButtonsDown(this.settingsMap.get("gamepad_rotateccw")); // rotate counter + this.gamepadButtonsDown(this.settingsMap.get("gamepad_rotate")); // rotate cwise + this.gamepadButtonsDown(this.settingsMap.get("gamepad_pophold")); // Pop hold stack + this.gamepadButtonsDown(this.settingsMap.get("gamepad_reset")); // reset return; @@ -41,9 +68,9 @@ var UserInputs = { processGamepadDPad() { - this.gamepadDPadDown("DPad-Left"); - this.gamepadDPadDown("DPad-Right"); - this.gamepadDPadDown("DPad-Down"); + this.gamepadDPadDown(this.settingsMap.get("gamepad_left")); // shift left + this.gamepadDPadDown(this.settingsMap.get("gamepad_right")); // shift right + this.gamepadDPadDown(this.settingsMap.get("gamepad_down")); // down return; }, @@ -82,8 +109,8 @@ var UserInputs = { // Direction Pad gamepadDPadDown(finds) { - var DAS = 65.0; - var ARR = 20.0; + var DAS = parseInt(this.settingsMap.get("gamepad_das")); //65.0; + var ARR = parseInt(this.settingsMap.get("gamepad_arr")); //20.0; var isContained = this.gpButtons.includes(finds); var isPrevContained = this.prevGpButtons.includes(finds); @@ -113,14 +140,14 @@ var UserInputs = { return; }, processKeys() { - this.processKeyDown(32); // Space - this.processKeyDown(88); // X - this.processKeyDown(90); // Z - this.processKeyDown(16); // shift - this.processKeyDown(17); // ctrl - this.processKeyDown(81); // q - this.processKeyDown(82); // r - this.processKeyDown(67); // c + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_harddrop"))); //32); // Space - hard drop + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_rotate"))); //88); // X - rotate + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_rotateccw"))); //90); // Z - rotateccw + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_hold"))); //16); // shift - push hold stack + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_pophold"))); // ctrl - pop hold stack + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_background"))); // q - turn off background + this.processKeyDown(parseInt(this.settingsMap.get("keyboard_reset"))); // r - reset + //this.processKeyDown(this.settingsMap.get("keyboard_hold"))); // c - pop hold stack }, // keyboard keys z,x,space @@ -157,14 +184,14 @@ var UserInputs = { }, processKeyShift() { - this.processKeyboardArrowKeys(39); // right - this.processKeyboardArrowKeys(37); // left - this.processKeyboardArrowKeys(40); // down + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_left"))); //39); // right + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_right"))); //37); // left + this.processKeyboardArrowKeys(parseInt(this.settingsMap.get("keyboard_down"))); // down }, // Direction arrows processKeyboardArrowKeys(key) { - var DAS = 65.0; - var ARR = 20.0; + var DAS = parseInt(this.settingsMap.get("keyboard_das")); //65.0; + var ARR = parseInt(this.settingsMap.get("keyboard_arr")); //20.0; if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) { @@ -192,8 +219,8 @@ var UserInputs = { }, keyDown(event) { - // Disable space scrolling etc - event.preventDefault(); + if (! ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8)) + event.preventDefault(); this.keyboardKeys[event.keyCode] = true; this.isKeyBoardKeyDown = true; @@ -237,7 +264,28 @@ var UserInputs = { inputqueue: [], gamepadQueue: [], - ticks: 0 + ticks: 0, + // todo: change to human readable + settingsList: ["init", + "keyboard_das", "keyboard_arr", "keyboard_harddrop", "keyboard_hold", + "keyboard_left", "keyboard_right", "keyboard_rotateccw", "keyboard_rotate", + "keyboard_down", "keyboard_pophold", "keyboard_reset", "keyboard_background", + + "gamepad_das", "gamepad_arr", "gamepad_harddrop", "gamepad_hold", + "gamepad_left", "gamepad_right", "gamepad_rotateccw", "gamepad_rotate", + "gamepad_down","gamepad_pophold", "gamepad_reset", "gamepad_background", + "path", "SameSite"], + + settingsDefault: ["true", + "65.0", "20.0", "32", "16", + "37", "39", "90", "88", + "40", "17", "82", "81", + + "65.0", "10.0", "RB", "LB", + "DPad-Left", "DPad-Right", "A", "B", + "DPad-Down", "DPad-Up", "Back", "", + "=/", "Strict"], + settingsMap: [] }; module.exports = UserInputs; diff --git a/src/main.js b/src/main.js index 573041c..d4e5ab2 100644 --- a/src/main.js +++ b/src/main.js @@ -156,7 +156,7 @@ Tetris.prototype = { views.init(this.id, cfg.maxWidth, cfg.maxHeight); canvas.init(views.scene, views.preview, views.hold); inputs.init(); - + this.createSettings(); // if true no openers. just random tetrinos this.isFreePlay = true; this.currentOpener = 0; @@ -190,6 +190,30 @@ Tetris.prototype = { this.currentOpener = 2; this._restartHandler(); + }, + createSettings: function () { + var list = document.getElementById("settings"); + var settings = inputs.settingsList; + + settings.forEach(function(item) { + var option = document.createElement('option'); + + option.text = item; + option.id = item; + + list.add(option); + }); + }, + updateSettingTextBox: function() { + console.log(document.getElementById("setting_value").value = inputs.settingsDefault[document.getElementById("settings").selectedIndex-1]); + }, + setSettings: function() { + //inputs.settingsDefault[document.getElementById("settings").selectedIndex-1] = document.getElementById("setting_value").value; + + var newVal = document.getElementById("setting_value").value; + utils.setCookie(inputs.settingsList[document.getElementById("settings").selectedIndex-1], newVal, 30); + inputs.settingsMap.set(inputs.settingsList[document.getElementById("settings").selectedIndex-1], newVal); + //console.log("settings " + inputs.settingsList[document.getElementById("settings").selectedIndex-1] + " " + newVal); }, //Reset game reset: function() { diff --git a/src/utils.js b/src/utils.js index 1a321ee..b059ab2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,6 +1,28 @@ var exports = module.exports = {}; +var setCookie = function(cname, cvalue, exdays) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires="+d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; +}; + +var getCookie = function(cname) { + var name = cname + "="; + var ca = document.cookie.split(';'); + for(var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; +}; + var $ = function(id){ return document.getElementById(id); }; @@ -115,6 +137,8 @@ exports.$ = $; exports.extend = extend; exports.proxy = proxy; exports.deepClone = deepClone; +exports.setCookie = setCookie; +exports.getCookie = getCookie; // export $; // export extend; // export proxy;