fc增加选择键盘的选项
This commit is contained in:
zhl
parent
069173cc01
commit
4c220a4a15
121
fc/css/gbajs.css
121
fc/css/gbajs.css
@ -546,20 +546,6 @@ canvas {
|
||||
.container::-webkit-scrollbar {
|
||||
display: none; //Safari and Chrome
|
||||
}
|
||||
/*.direct-wrap {*/
|
||||
/* width:300px;*/
|
||||
/* height:300px;*/
|
||||
/* top: 20px;*/
|
||||
/* left: 20px;*/
|
||||
/* position: absolute;*/
|
||||
/* background-image:url(../resources/rocker.png);*/
|
||||
/* display: none;*/
|
||||
/* grid-template-columns: 100px 100px 100px;*/
|
||||
/* grid-template-rows: 100px 100px 100px;*/
|
||||
/*}*/
|
||||
/*.real .dire-wrap {*/
|
||||
/* display: none!important;*/
|
||||
/*}*/
|
||||
.real .dire-ctrl {
|
||||
background-image:url(../resources/rocker.png);
|
||||
}
|
||||
@ -592,4 +578,109 @@ canvas {
|
||||
.real .kay-ST {
|
||||
right:60px!important;;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none!important;
|
||||
}
|
||||
.menu-back {
|
||||
background-color: #000;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right:0;
|
||||
display: none;
|
||||
}
|
||||
.menu-container {
|
||||
background-color: white;
|
||||
width: 100vw;
|
||||
height: 60vw;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-top: -30vw;
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.menu-container .menu-title {
|
||||
height: 80px;
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #777;
|
||||
}
|
||||
.menu-container .menu-body {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
.menu-body .row {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 15px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
}
|
||||
.menu-body .row .row-title {
|
||||
width: 30%;
|
||||
color: #777;
|
||||
}
|
||||
.menu-body .row .row-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.row-body .row-part{
|
||||
width: 50%;
|
||||
}
|
||||
.row-part input[type='radio']{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.menu-container .menu-footer {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
}
|
||||
.menu-container .menu-footer .left-part {
|
||||
flex:1;
|
||||
}
|
||||
.menu-container .menu-footer .right-part {
|
||||
display: flex;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
.menu-container .menu-footer .menu-btn {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 10px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.menu-btn.btn-success{
|
||||
color: #fff;
|
||||
background-color: #449d44;
|
||||
border-color: #398439;
|
||||
}
|
||||
#menu_btn{
|
||||
top: 120px;
|
||||
right: 60px;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
font-size: 30px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
transform: rotate(90deg);
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,.5);
|
||||
opacity: .5;
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(../resources/8.png);
|
||||
z-index: 10;
|
||||
}
|
||||
#menu_btn.real{
|
||||
background-image: url(../resources/flat-button.png);
|
||||
}
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
<script type="text/javascript" src="js/network.js?"></script>
|
||||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
<script type="text/javascript" src="js/nes-embed.js"></script>
|
||||
<script type="text/javascript" src="js/js.cookie.js"></script>
|
||||
<script type="text/javascript" src="js/options.js"></script>
|
||||
<script type="text/javascript">
|
||||
var showInviteMask = function() {
|
||||
document.getElementById('info-mask').style.display = '';
|
||||
@ -45,6 +47,7 @@
|
||||
<!-- <script src="js/rq.js" data-main="js/index.js"></script> -->
|
||||
<div class='background-div'></div>
|
||||
<canvas id="screen" width="256" height="240"></canvas>
|
||||
<div class="" id="menu_btn">选项</div>
|
||||
<div id="ctrl-wrap" class="ctrl-wrap real">
|
||||
<div class="dire-wrap">
|
||||
<div class="dire-ctrl">
|
||||
@ -65,6 +68,30 @@
|
||||
<div class='info-mask' id='info-mask' style="display: none;">
|
||||
<!-- <img id='mask-img' src='resources/invite-mask.jpg'> -->
|
||||
</div>
|
||||
|
||||
<div class="menu-back" id="menu_back">
|
||||
</div>
|
||||
<div class="menu-container hidden" id="menu_container">
|
||||
<div class="menu-title">选项</div>
|
||||
<div class="menu-body">
|
||||
<div class="row">
|
||||
<div class="row-title">按键类型</div>
|
||||
<div class="row-body">
|
||||
<div class="row-part">
|
||||
<input type="radio" value="O" id="radio0" name="key_type" class="md-radiobtn">摇杆
|
||||
</div>
|
||||
<div class="row-part">
|
||||
<input type="radio" value="N" id="radio1" name="key_type" class="md-radiobtn">按键
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-footer">
|
||||
<div class="left-part"></div>
|
||||
<div class="right-part">
|
||||
<div class="menu-btn" id="cancel_btn">取消</div>
|
||||
<div class="menu-btn btn-success" id="save_btn">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
163
fc/js/js.cookie.js
Normal file
163
fc/js/js.cookie.js
Normal file
@ -0,0 +1,163 @@
|
||||
/*!
|
||||
* JavaScript Cookie v2.2.0
|
||||
* https://github.com/js-cookie/js-cookie
|
||||
*
|
||||
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
||||
* Released under the MIT license
|
||||
*/
|
||||
;(function (factory) {
|
||||
var registeredInModuleLoader;
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (!registeredInModuleLoader) {
|
||||
var OldCookies = window.Cookies;
|
||||
var api = window.Cookies = factory();
|
||||
api.noConflict = function () {
|
||||
window.Cookies = OldCookies;
|
||||
return api;
|
||||
};
|
||||
}
|
||||
}(function () {
|
||||
function extend () {
|
||||
var i = 0;
|
||||
var result = {};
|
||||
for (; i < arguments.length; i++) {
|
||||
var attributes = arguments[ i ];
|
||||
for (var key in attributes) {
|
||||
result[key] = attributes[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function decode (s) {
|
||||
return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
|
||||
}
|
||||
|
||||
function init (converter) {
|
||||
function api() {}
|
||||
|
||||
function set (key, value, attributes) {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
attributes = extend({
|
||||
path: '/'
|
||||
}, api.defaults, attributes);
|
||||
|
||||
if (typeof attributes.expires === 'number') {
|
||||
attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
|
||||
}
|
||||
|
||||
// We're using "expires" because "max-age" is not supported by IE
|
||||
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
||||
|
||||
try {
|
||||
var result = JSON.stringify(value);
|
||||
if (/^[\{\[]/.test(result)) {
|
||||
value = result;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
value = converter.write ?
|
||||
converter.write(value, key) :
|
||||
encodeURIComponent(String(value))
|
||||
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
||||
|
||||
key = encodeURIComponent(String(key))
|
||||
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
|
||||
.replace(/[\(\)]/g, escape);
|
||||
|
||||
var stringifiedAttributes = '';
|
||||
for (var attributeName in attributes) {
|
||||
if (!attributes[attributeName]) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '; ' + attributeName;
|
||||
if (attributes[attributeName] === true) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Considers RFC 6265 section 5.2:
|
||||
// ...
|
||||
// 3. If the remaining unparsed-attributes contains a %x3B (";")
|
||||
// character:
|
||||
// Consume the characters of the unparsed-attributes up to,
|
||||
// not including, the first %x3B (";") character.
|
||||
// ...
|
||||
stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
|
||||
}
|
||||
|
||||
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
||||
}
|
||||
|
||||
function get (key, json) {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
var jar = {};
|
||||
// To prevent the for loop in the first place assign an empty array
|
||||
// in case there are no cookies at all.
|
||||
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||
var i = 0;
|
||||
|
||||
for (; i < cookies.length; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var cookie = parts.slice(1).join('=');
|
||||
|
||||
if (!json && cookie.charAt(0) === '"') {
|
||||
cookie = cookie.slice(1, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
var name = decode(parts[0]);
|
||||
cookie = (converter.read || converter)(cookie, name) ||
|
||||
decode(cookie);
|
||||
|
||||
if (json) {
|
||||
try {
|
||||
cookie = JSON.parse(cookie);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
jar[name] = cookie;
|
||||
|
||||
if (key === name) {
|
||||
break;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return key ? jar[key] : jar;
|
||||
}
|
||||
|
||||
api.set = set;
|
||||
api.get = function (key) {
|
||||
return get(key, false /* read as raw */);
|
||||
};
|
||||
api.getJSON = function (key) {
|
||||
return get(key, true /* read as json */);
|
||||
};
|
||||
api.remove = function (key, attributes) {
|
||||
set(key, '', extend(attributes, {
|
||||
expires: -1
|
||||
}));
|
||||
};
|
||||
|
||||
api.defaults = {};
|
||||
|
||||
api.withConverter = init;
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
return init(function () {});
|
||||
}));
|
||||
37
fc/js/options.js
Normal file
37
fc/js/options.js
Normal file
@ -0,0 +1,37 @@
|
||||
$(function () {
|
||||
let keyType = Cookies.get('key_type') || 'N';
|
||||
console.log(`keyType: ${keyType}`);
|
||||
let setKeyType = function (keyType) {
|
||||
$("[name=key_type]").val([keyType]);
|
||||
if (keyType === 'N') {
|
||||
$('#ctrl-wrap').addClass('real');
|
||||
$('#menu_btn').addClass('real');
|
||||
} else {
|
||||
$('#ctrl-wrap').removeClass('real');
|
||||
$('#menu_btn').removeClass('real');
|
||||
}
|
||||
Cookies.set('key_type', keyType);
|
||||
}
|
||||
setKeyType(keyType);
|
||||
$('#menu_btn').click(function () {
|
||||
console.log('menu btn click');
|
||||
showMenu();
|
||||
});
|
||||
let showMenu = function() {
|
||||
$('#menu_back').show();
|
||||
$('#menu_container').removeClass('hidden');
|
||||
}
|
||||
let hideMenu = function() {
|
||||
$('#menu_back').hide();
|
||||
$('#menu_container').addClass('hidden');
|
||||
}
|
||||
|
||||
$('#cancel_btn').click(function () {
|
||||
hideMenu();
|
||||
})
|
||||
$('#save_btn').click(function () {
|
||||
keyType = $('input[name="key_type"]:checked').val();
|
||||
setKeyType(keyType);
|
||||
hideMenu();
|
||||
})
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user