From 4c220a4a1528e8d208657f17d98cac2456efbcbc Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Tue, 4 Jun 2019 20:27:37 +0800
Subject: [PATCH] =?UTF-8?q?fc=E5=A2=9E=E5=8A=A0=E9=80=89=E6=8B=A9=E9=94=AE?=
 =?UTF-8?q?=E7=9B=98=E7=9A=84=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fc/css/gbajs.css   | 121 ++++++++++++++++++++++++++++-----
 fc/index.html      |  29 +++++++-
 fc/js/js.cookie.js | 163 +++++++++++++++++++++++++++++++++++++++++++++
 fc/js/options.js   |  37 ++++++++++
 4 files changed, 334 insertions(+), 16 deletions(-)
 create mode 100644 fc/js/js.cookie.js
 create mode 100644 fc/js/options.js

diff --git a/fc/css/gbajs.css b/fc/css/gbajs.css
index 0af2bac..b2eb099 100644
--- a/fc/css/gbajs.css
+++ b/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);
+}
diff --git a/fc/index.html b/fc/index.html
index 6732329..69d0a8a 100644
--- a/fc/index.html
+++ b/fc/index.html
@@ -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>
diff --git a/fc/js/js.cookie.js b/fc/js/js.cookie.js
new file mode 100644
index 0000000..0bb7476
--- /dev/null
+++ b/fc/js/js.cookie.js
@@ -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 () {});
+}));
diff --git a/fc/js/options.js b/fc/js/options.js
new file mode 100644
index 0000000..2f22129
--- /dev/null
+++ b/fc/js/options.js
@@ -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();
+  })
+})