diff --git a/web/css/main.css b/web/css/main.css
index 3c620f7d..14a886ad 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -1,3 +1,9 @@
+html {
+ /* force full size for Firefox */
+ width: 100%;
+ height: 100%;
+}
+
body {
background-image: url('/static/img/background.jpg');
background-repeat: repeat;
@@ -76,7 +82,7 @@ body {
}
.dpad-empty {
- background-image: url('/static/img/ui/bt MOVE EMPTY.png') !important;
+ background-image: url('/static/img/ui/bt MOVE EMPTY.png') !important;
}
#guide-txt {
@@ -86,6 +92,8 @@ body {
left: 30px;
width: 1000px;
position: absolute;
+
+ user-select: none;
}
#circle-pad {
@@ -97,14 +105,16 @@ body {
top: 15px;
left: 15px;
+ pointer-events: none;
+
opacity: 0.5;
background-image: url('/static/img/ui/bong.png');
}
.bong-full {
- opacity: 1.0 !important;
- background-image: url('/static/img/ui/bong full.png') !important;
+ opacity: 1.0 !important;
+ background-image: url('/static/img/ui/bong full.png') !important;
}
.dpad {
@@ -318,6 +328,20 @@ body {
background-image: url('/static/img/ui/bt Y.png');
}
+#btn-settings {
+ width: 65px;
+ height: 21px;
+
+ top: 9%;
+ left: 55px;
+
+ padding: 0;
+
+ transform: translateY(-50%);
+ background-image: url('/static/img/ui/bt OPTIONS.png');
+
+ opacity: .7;
+}
#lights-holder {
display: block;
@@ -390,12 +414,12 @@ body {
.pressed {
- filter: brightness(50%);
+ filter: brightness(50%);
}
.dpad-pressed {
- background-color: #333 !important;
- opacity: 0.75;
+ background-color: #333 !important;
+ opacity: 0.75;
}
#bottom-screen {
@@ -458,7 +482,6 @@ body {
}
-
@font-face {
font-family: 'Roboto'; /*a name to be used later*/
src: url('/static/fonts/Roboto-Regular.ttf'); /*URL to font*/
@@ -514,34 +537,64 @@ body {
@-moz-keyframes horizontally {
- 0% { transform: translateX(0%); }
- 25% { transform: translateX(-20%); }
- 50% { transform: translateX(0%); }
- 75% { transform: translateX(20%); }
- 100% { transform: translateX(0%); }
-}
-@-webkit-keyframes horizontally {
- 0% { transform: translateX(0%); }
- 25% { transform: translateX(-20%); }
- 50% { transform: translateX(0%); }
- 75% { transform: translateX(20%); }
- 100% { transform: translateX(0%); }
-}
-@keyframes horizontally {
- 0% { transform: translateX(0%); }
- 25% { transform: translateX(-20%); }
- 50% { transform: translateX(0%); }
- 75% { transform: translateX(20%); }
- 100% { transform: translateX(0%); }
+ 0% {
+ transform: translateX(0%);
+ }
+ 25% {
+ transform: translateX(-20%);
+ }
+ 50% {
+ transform: translateX(0%);
+ }
+ 75% {
+ transform: translateX(20%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
}
+@-webkit-keyframes horizontally {
+ 0% {
+ transform: translateX(0%);
+ }
+ 25% {
+ transform: translateX(-20%);
+ }
+ 50% {
+ transform: translateX(0%);
+ }
+ 75% {
+ transform: translateX(20%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+@keyframes horizontally {
+ 0% {
+ transform: translateX(0%);
+ }
+ 25% {
+ transform: translateX(-20%);
+ }
+ 50% {
+ transform: translateX(0%);
+ }
+ 75% {
+ transform: translateX(20%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+}
#noti-box {
display: none;
padding: 5px 10px 0 10px;
height: 20px;
background-color: #ddd;
- opacity: 0.8;
position: absolute;
border: 5px #000;
@@ -566,60 +619,62 @@ body {
top: 90px;
left: 20px;
width: 100px;
+
+ user-select: none;
}
/* The slider itself */
.slider {
- -webkit-appearance: none; /* Override default CSS styles */
- appearance: none;
- width: 100%; /* Full-width */
- height: 25px; /* Specified height */
- outline: none; /* Remove outline */
- /*opacity: 0.7; [> Set transparency (for mouse-over effects on hover) <]*/
- -webkit-transition: .2s; /* 0.2 seconds transition on hover */
- transition: opacity .2s;
+ -webkit-appearance: none; /* Override default CSS styles */
+ appearance: none;
+ width: 100%; /* Full-width */
+ height: 25px; /* Specified height */
+ outline: none; /* Remove outline */
+ /*opacity: 0.7; [> Set transparency (for mouse-over effects on hover) <]*/
+ -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+ transition: opacity .2s;
- background-color: transparent;
- background-repeat: no-repeat;
- background-size: contain;
- background-image: url('/static/img/ui/FramePlayerIndex.png');
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url('/static/img/ui/FramePlayerIndex.png');
}
/* Mouse-over effects */
.slider:hover {
- opacity: 1; /* Fully shown on mouse-over */
+ opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
- -webkit-appearance: none; /* Override default look */
- appearance: none;
- width: 25px; /* Set a specific slider handle width */
- height: 25px; /* Slider handle height */
- cursor: pointer; /* Cursor on hover */
+ -webkit-appearance: none; /* Override default look */
+ appearance: none;
+ width: 25px; /* Set a specific slider handle width */
+ height: 25px; /* Slider handle height */
+ cursor: pointer; /* Cursor on hover */
- background-color: transparent;
- background-repeat: no-repeat;
- background-size: contain;
- background-image: url('/static/img/ui/bt PlayerIndex.png');
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url('/static/img/ui/bt PlayerIndex.png');
}
.slider::-moz-range-thumb {
- appearance: none;
- width: 25px; /* Set a specific slider handle width */
- height: 25px; /* Slider handle height */
- cursor: pointer; /* Cursor on hover */
+ appearance: none;
+ width: 25px; /* Set a specific slider handle width */
+ height: 25px; /* Slider handle height */
+ cursor: pointer; /* Cursor on hover */
- border: 0px;
- background-color: transparent;
- background-repeat: no-repeat;
- background-size: contain;
- background-image: url('/static/img/ui/bt PlayerIndex.png');
+ border: 0px;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url('/static/img/ui/bt PlayerIndex.png');
}
* {
- touch-action: manipulation;
- }
+ touch-action: manipulation;
+}
#stats-overlay {
position: absolute;
@@ -653,7 +708,7 @@ body {
margin-bottom: 1em;
}
-#stats-overlay>div>div {
+#stats-overlay > div > div {
display: inline-block;
font-weight: 500;
width: 4em;
@@ -675,53 +730,53 @@ body {
}
.dpad-toggle-label {
- position: relative;
- display: inline-block;
- width: 35px;
- height: 20px;
+ position: relative;
+ display: inline-block;
+ width: 35px;
+ height: 20px;
- top: 44px;
- left: 85px;
+ top: 44px;
+ left: 85px;
}
.dpad-toggle-label input {
- opacity: 0;
- width: 0;
- height: 0;
+ opacity: 0;
+ width: 0;
+ height: 0;
}
.dpad-toggle-slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #515151;
- -webkit-transition: .4s;
- transition: .4s;
- border-radius: 20px;
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #515151;
+ -webkit-transition: .4s;
+ transition: .4s;
+ border-radius: 20px;
}
.dpad-toggle-slider:before {
- position: absolute;
- content: "";
- height: 14px;
- width: 14px;
- left: 3px;
- bottom: 3px;
- background-color: #5f5f5f;
- -webkit-transition: .4s;
- transition: .4s;
- border-radius: 50%;
+ position: absolute;
+ content: "";
+ height: 14px;
+ width: 14px;
+ left: 3px;
+ bottom: 3px;
+ background-color: #5f5f5f;
+ -webkit-transition: .4s;
+ transition: .4s;
+ border-radius: 50%;
}
input:checked + .dpad-toggle-slider {
- background-color: #515151;
+ background-color: #515151;
}
input:checked + .dpad-toggle-slider:before {
- -webkit-transform: translateX(15px);
- -ms-transform: translateX(15px);
- transform: translateX(15px);
+ -webkit-transform: translateX(15px);
+ -ms-transform: translateX(15px);
+ transform: translateX(15px);
}
diff --git a/web/css/ui.css b/web/css/ui.css
index 798dadd7..d537a0d8 100644
--- a/web/css/ui.css
+++ b/web/css/ui.css
@@ -3,11 +3,6 @@
display: none;
}
-#btn-settings {
- top: 14px;
- left: 70px;
-}
-
.modal-window {
position: fixed;
diff --git a/web/img/darkui/Help.png b/web/img/darkui/Help.png
deleted file mode 100644
index 6728fe31..00000000
Binary files a/web/img/darkui/Help.png and /dev/null differ
diff --git a/web/img/darkui/PLAYER INDEX.png b/web/img/darkui/PLAYER INDEX.png
deleted file mode 100644
index a92ba3dd..00000000
Binary files a/web/img/darkui/PLAYER INDEX.png and /dev/null differ
diff --git a/web/img/darkui/Pgsdgddgdsgd.png b/web/img/darkui/Pgsdgddgdsgd.png
deleted file mode 100644
index 43d8011e..00000000
Binary files a/web/img/darkui/Pgsdgddgdsgd.png and /dev/null differ
diff --git a/web/img/darkui/Ui4.jpg b/web/img/darkui/Ui4.jpg
deleted file mode 100644
index 396bbbf8..00000000
Binary files a/web/img/darkui/Ui4.jpg and /dev/null differ
diff --git a/web/img/darkui/bg.png b/web/img/darkui/bg.png
deleted file mode 100644
index da513c59..00000000
Binary files a/web/img/darkui/bg.png and /dev/null differ
diff --git a/web/img/darkui/bong copy.png b/web/img/darkui/bong copy.png
deleted file mode 100644
index 6685a974..00000000
Binary files a/web/img/darkui/bong copy.png and /dev/null differ
diff --git a/web/img/darkui/bong.png b/web/img/darkui/bong.png
deleted file mode 100644
index a2e477b4..00000000
Binary files a/web/img/darkui/bong.png and /dev/null differ
diff --git a/web/img/darkui/bt A copy.png b/web/img/darkui/bt A copy.png
deleted file mode 100644
index 10834f6d..00000000
Binary files a/web/img/darkui/bt A copy.png and /dev/null differ
diff --git a/web/img/darkui/bt A.png b/web/img/darkui/bt A.png
deleted file mode 100644
index f0d46a72..00000000
Binary files a/web/img/darkui/bt A.png and /dev/null differ
diff --git a/web/img/darkui/bt B copy.png b/web/img/darkui/bt B copy.png
deleted file mode 100644
index e26ae80e..00000000
Binary files a/web/img/darkui/bt B copy.png and /dev/null differ
diff --git a/web/img/darkui/bt B.png b/web/img/darkui/bt B.png
deleted file mode 100644
index d715973d..00000000
Binary files a/web/img/darkui/bt B.png and /dev/null differ
diff --git a/web/img/darkui/bt LOAD copy.png b/web/img/darkui/bt LOAD copy.png
deleted file mode 100644
index 5d139b2f..00000000
Binary files a/web/img/darkui/bt LOAD copy.png and /dev/null differ
diff --git a/web/img/darkui/bt LOAD.png b/web/img/darkui/bt LOAD.png
deleted file mode 100644
index c5ea67cb..00000000
Binary files a/web/img/darkui/bt LOAD.png and /dev/null differ
diff --git a/web/img/darkui/bt MOVE copy.png b/web/img/darkui/bt MOVE copy.png
deleted file mode 100644
index 0e798f1f..00000000
Binary files a/web/img/darkui/bt MOVE copy.png and /dev/null differ
diff --git a/web/img/darkui/bt MOVE.png b/web/img/darkui/bt MOVE.png
deleted file mode 100644
index 0f16c697..00000000
Binary files a/web/img/darkui/bt MOVE.png and /dev/null differ
diff --git a/web/img/darkui/bt PlayIndex copy.png b/web/img/darkui/bt PlayIndex copy.png
deleted file mode 100644
index a9e13907..00000000
Binary files a/web/img/darkui/bt PlayIndex copy.png and /dev/null differ
diff --git a/web/img/darkui/bt PlayIndex.png b/web/img/darkui/bt PlayIndex.png
deleted file mode 100644
index 93cab526..00000000
Binary files a/web/img/darkui/bt PlayIndex.png and /dev/null differ
diff --git a/web/img/darkui/bt QUIT copy.png b/web/img/darkui/bt QUIT copy.png
deleted file mode 100644
index 01015185..00000000
Binary files a/web/img/darkui/bt QUIT copy.png and /dev/null differ
diff --git a/web/img/darkui/bt QUIT.png b/web/img/darkui/bt QUIT.png
deleted file mode 100644
index 8b4a3057..00000000
Binary files a/web/img/darkui/bt QUIT.png and /dev/null differ
diff --git a/web/img/darkui/bt SAVE copy.png b/web/img/darkui/bt SAVE copy.png
deleted file mode 100644
index f6e232b2..00000000
Binary files a/web/img/darkui/bt SAVE copy.png and /dev/null differ
diff --git a/web/img/darkui/bt SAVE.png b/web/img/darkui/bt SAVE.png
deleted file mode 100644
index 0d5c764a..00000000
Binary files a/web/img/darkui/bt SAVE.png and /dev/null differ
diff --git a/web/img/darkui/bt SELECT copy.png b/web/img/darkui/bt SELECT copy.png
deleted file mode 100644
index 4c665af1..00000000
Binary files a/web/img/darkui/bt SELECT copy.png and /dev/null differ
diff --git a/web/img/darkui/bt SELECT.png b/web/img/darkui/bt SELECT.png
deleted file mode 100644
index a13bf4f9..00000000
Binary files a/web/img/darkui/bt SELECT.png and /dev/null differ
diff --git a/web/img/darkui/bt SHARE copy.png b/web/img/darkui/bt SHARE copy.png
deleted file mode 100644
index a40828a2..00000000
Binary files a/web/img/darkui/bt SHARE copy.png and /dev/null differ
diff --git a/web/img/darkui/bt SHARE.png b/web/img/darkui/bt SHARE.png
deleted file mode 100644
index 5985385d..00000000
Binary files a/web/img/darkui/bt SHARE.png and /dev/null differ
diff --git a/web/img/darkui/bt START copy.png b/web/img/darkui/bt START copy.png
deleted file mode 100644
index f35cf20b..00000000
Binary files a/web/img/darkui/bt START copy.png and /dev/null differ
diff --git a/web/img/darkui/bt START.png b/web/img/darkui/bt START.png
deleted file mode 100644
index 8b431f03..00000000
Binary files a/web/img/darkui/bt START.png and /dev/null differ
diff --git a/web/img/darkui/bt X copy.png b/web/img/darkui/bt X copy.png
deleted file mode 100644
index 4c3283f4..00000000
Binary files a/web/img/darkui/bt X copy.png and /dev/null differ
diff --git a/web/img/darkui/bt X.png b/web/img/darkui/bt X.png
deleted file mode 100644
index fe23f5ee..00000000
Binary files a/web/img/darkui/bt X.png and /dev/null differ
diff --git a/web/img/darkui/bt Y copy.png b/web/img/darkui/bt Y copy.png
deleted file mode 100644
index 3e630eae..00000000
Binary files a/web/img/darkui/bt Y copy.png and /dev/null differ
diff --git a/web/img/darkui/bt Y.png b/web/img/darkui/bt Y.png
deleted file mode 100644
index f8a21a93..00000000
Binary files a/web/img/darkui/bt Y.png and /dev/null differ
diff --git a/web/img/darkui/frame.png b/web/img/darkui/frame.png
deleted file mode 100644
index 318a60c9..00000000
Binary files a/web/img/darkui/frame.png and /dev/null differ
diff --git a/web/img/darkui/framePlayIndex.png b/web/img/darkui/framePlayIndex.png
deleted file mode 100644
index 271d17e2..00000000
Binary files a/web/img/darkui/framePlayIndex.png and /dev/null differ
diff --git a/web/img/darkui/frameTEXT.png b/web/img/darkui/frameTEXT.png
deleted file mode 100644
index b9ca3b98..00000000
Binary files a/web/img/darkui/frameTEXT.png and /dev/null differ
diff --git a/web/img/darkui/hept copy.png b/web/img/darkui/hept copy.png
deleted file mode 100644
index 03af2894..00000000
Binary files a/web/img/darkui/hept copy.png and /dev/null differ
diff --git a/web/img/ui/Help-2.png b/web/img/ui/Help-2.png
deleted file mode 100644
index 8f4f4407..00000000
Binary files a/web/img/ui/Help-2.png and /dev/null differ
diff --git a/web/img/ui/PLAYER INDEX.png b/web/img/ui/PLAYER INDEX.png
deleted file mode 100644
index be487c0b..00000000
Binary files a/web/img/ui/PLAYER INDEX.png and /dev/null differ
diff --git a/web/img/ui/Pgsdgddgdsgd.png b/web/img/ui/Pgsdgddgdsgd.png
deleted file mode 100644
index 90cc3eaf..00000000
Binary files a/web/img/ui/Pgsdgddgdsgd.png and /dev/null differ
diff --git a/web/img/ui/Ui.jpg b/web/img/ui/Ui.jpg
deleted file mode 100644
index 3461dcc1..00000000
Binary files a/web/img/ui/Ui.jpg and /dev/null differ
diff --git a/web/img/ui/bong-2.png b/web/img/ui/bong-2.png
deleted file mode 100644
index 71d1dc67..00000000
Binary files a/web/img/ui/bong-2.png and /dev/null differ
diff --git a/web/img/ui/bt A-2.png b/web/img/ui/bt A-2.png
deleted file mode 100644
index d7f147de..00000000
Binary files a/web/img/ui/bt A-2.png and /dev/null differ
diff --git a/web/img/ui/bt B-2.png b/web/img/ui/bt B-2.png
deleted file mode 100644
index c7f1fa21..00000000
Binary files a/web/img/ui/bt B-2.png and /dev/null differ
diff --git a/web/img/ui/bt B.png b/web/img/ui/bt B.png
index dcaf1c03..7458ebd1 100644
Binary files a/web/img/ui/bt B.png and b/web/img/ui/bt B.png differ
diff --git a/web/img/ui/bt LOAD-2.png b/web/img/ui/bt LOAD-2.png
deleted file mode 100644
index 93239248..00000000
Binary files a/web/img/ui/bt LOAD-2.png and /dev/null differ
diff --git a/web/img/ui/bt MOVE-2.png b/web/img/ui/bt MOVE-2.png
deleted file mode 100644
index 6bc248fd..00000000
Binary files a/web/img/ui/bt MOVE-2.png and /dev/null differ
diff --git a/web/img/ui/bt MOVE.png b/web/img/ui/bt MOVE.png
index 9bdf9b42..d05cd3b8 100644
Binary files a/web/img/ui/bt MOVE.png and b/web/img/ui/bt MOVE.png differ
diff --git a/web/img/ui/bt OPTIONS.png b/web/img/ui/bt OPTIONS.png
new file mode 100644
index 00000000..15390f4b
Binary files /dev/null and b/web/img/ui/bt OPTIONS.png differ
diff --git a/web/img/ui/bt PlayerIndex-2.png b/web/img/ui/bt PlayerIndex-2.png
deleted file mode 100644
index f3b05ce9..00000000
Binary files a/web/img/ui/bt PlayerIndex-2.png and /dev/null differ
diff --git a/web/img/ui/bt QUIT-2.png b/web/img/ui/bt QUIT-2.png
deleted file mode 100644
index 84c9c0ae..00000000
Binary files a/web/img/ui/bt QUIT-2.png and /dev/null differ
diff --git a/web/img/ui/bt SAVE-2.png b/web/img/ui/bt SAVE-2.png
deleted file mode 100644
index 193d43ed..00000000
Binary files a/web/img/ui/bt SAVE-2.png and /dev/null differ
diff --git a/web/img/ui/bt SELECT-2.png b/web/img/ui/bt SELECT-2.png
deleted file mode 100644
index 9c9d26d3..00000000
Binary files a/web/img/ui/bt SELECT-2.png and /dev/null differ
diff --git a/web/img/ui/bt SHARE-2.png b/web/img/ui/bt SHARE-2.png
deleted file mode 100644
index 68e4e977..00000000
Binary files a/web/img/ui/bt SHARE-2.png and /dev/null differ
diff --git a/web/img/ui/bt START-2.png b/web/img/ui/bt START-2.png
deleted file mode 100644
index b891177b..00000000
Binary files a/web/img/ui/bt START-2.png and /dev/null differ
diff --git a/web/img/ui/bt X-2.png b/web/img/ui/bt X-2.png
deleted file mode 100644
index 004b8cb9..00000000
Binary files a/web/img/ui/bt X-2.png and /dev/null differ
diff --git a/web/img/ui/bt X.png b/web/img/ui/bt X.png
index 5cb28e20..f1631c12 100644
Binary files a/web/img/ui/bt X.png and b/web/img/ui/bt X.png differ
diff --git a/web/img/ui/bt Y-2.png b/web/img/ui/bt Y-2.png
deleted file mode 100644
index 4f753c60..00000000
Binary files a/web/img/ui/bt Y-2.png and /dev/null differ
diff --git a/web/img/ui/bt Y.png b/web/img/ui/bt Y.png
index 9a95f0c1..6da62c85 100644
Binary files a/web/img/ui/bt Y.png and b/web/img/ui/bt Y.png differ
diff --git a/web/index.html b/web/index.html
index dacc7e16..2f6d306c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -49,45 +49,43 @@
* -- applied after application restart
@@ -111,11 +109,10 @@
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149"
class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
-
-
-
+
+
diff --git a/web/js/controller.js b/web/js/controller.js
index b963924b..8eeecdb6 100644
--- a/web/js/controller.js
+++ b/web/js/controller.js
@@ -19,15 +19,14 @@
})();
let prevDir = DIR.IDLE;
- const menuScreen = $('#menu-screen');
- const helpOverlay = $('#help-overlay');
- const popupBox = $('#noti-box');
+ const menuScreen = document.getElementById('menu-screen');
+ const helpOverlay = document.getElementById('help-overlay');
const playerIndex = document.getElementById('playeridx');
// keymap
const keyButtons = {};
Object.keys(KEY).forEach(button => {
- keyButtons[KEY[button]] = $(`#btn-${KEY[button]}`);
+ keyButtons[KEY[button]] = document.getElementById(`btn-${KEY[button]}`);
});
/**
@@ -61,7 +60,7 @@
};
const onGameRoomAvailable = () => {
- popup('Now you can share you game!');
+ message.show('Now you can share you game!');
};
const onConnectionReady = () => {
@@ -74,7 +73,7 @@
};
const onLatencyCheck = (data) => {
- popup('Connecting to fastest server...');
+ message.show('Connecting to fastest server...');
const timeoutMs = 1111;
// deduplicate
const addresses = [...new Set(data.addresses || [])];
@@ -102,13 +101,13 @@
if (isGameScreen) {
stream.toggle(!show);
} else {
- menuScreen.toggle(!show);
+ gui.toggle(menuScreen, !show);
}
- keyButtons[KEY.SAVE].toggle(show || isGameScreen);
- keyButtons[KEY.LOAD].toggle(show || isGameScreen);
+ gui.toggle(keyButtons[KEY.SAVE], show || isGameScreen);
+ gui.toggle(keyButtons[KEY.LOAD], show || isGameScreen);
- helpOverlay.toggle(show);
+ gui.toggle(helpOverlay, show);
this.shown = show;
@@ -120,23 +119,23 @@
log.debug('[control] loading menu screen');
stream.toggle(false);
- keyButtons[KEY.SAVE].hide();
- keyButtons[KEY.LOAD].hide();
+ gui.hide(keyButtons[KEY.SAVE]);
+ gui.hide(keyButtons[KEY.LOAD]);
gameList.show();
- menuScreen.show();
+ gui.show(menuScreen);
setState(app.state.menu);
};
const startGame = () => {
if (!rtcp.isConnected()) {
- popup('Game cannot load. Please refresh');
+ message.show('Game cannot load. Please refresh');
return;
}
if (!rtcp.isInputReady()) {
- popup('Game is not ready yet. Please wait');
+ message.show('Game is not ready yet. Please wait');
return;
}
@@ -155,10 +154,10 @@
// clear menu screen
input.poll().disable();
- menuScreen.hide();
+ gui.hide(menuScreen);
stream.toggle(true);
- keyButtons[KEY.SAVE].show();
- keyButtons[KEY.LOAD].show();
+ gui.show(keyButtons[KEY.SAVE]);
+ gui.show(keyButtons[KEY.LOAD]);
// end clear
input.poll().enable();
};
@@ -166,9 +165,6 @@
const saveGame = utils.debounce(socket.saveGame, 1000);
const loadGame = utils.debounce(socket.loadGame, 1000);
- const _popup = (message) => popupBox.html(message).fadeIn().fadeOut();
- const popup = utils.throttle(_popup, 1000);
-
const _dpadArrowKeys = [KEY.UP, KEY.DOWN, KEY.LEFT, KEY.RIGHT];
// pre-state key press handler
@@ -176,9 +172,9 @@
const button = keyButtons[data.key];
if (_dpadArrowKeys.includes(data.key)) {
- button.addClass('dpad-pressed');
+ button.classList.add('dpad-pressed');
} else {
- if (button) button.addClass('pressed');
+ if (button) button.classList.add('pressed');
}
if (state !== app.state.settings) {
@@ -192,12 +188,10 @@
const onKeyRelease = data => {
const button = keyButtons[data.key];
- if (!button) return;
-
if (_dpadArrowKeys.includes(data.key)) {
- button.removeClass('dpad-pressed');
+ button.classList.remove('dpad-pressed');
} else {
- if (button) button.removeClass('pressed');
+ if (button) button.classList.remove('pressed');
}
if (state !== app.state.settings) {
@@ -314,13 +308,13 @@
startGame();
break;
case KEY.QUIT:
- popup('You are already in menu screen!');
+ message.show('You are already in menu screen!');
break;
case KEY.LOAD:
- popup('Loading the game.');
+ message.show('Loading the game.');
break;
case KEY.SAVE:
- popup('Saving the game.');
+ message.show('Saving the game.');
break;
case KEY.STATS:
event.pub(STATS_TOGGLE);
@@ -351,7 +345,7 @@
// save when click share
saveGame();
room.copyToClipboard();
- popup('Shared link copied to the clipboard!');
+ message.show('Shared link copied to the clipboard!');
break;
case KEY.SAVE:
saveGame();
@@ -390,7 +384,7 @@
socket.quitGame(room.getId());
room.reset();
- popup('Quit!');
+ message.show('Quit!');
window.location = window.location.pathname;
break;
@@ -410,9 +404,11 @@
// subscriptions
event.sub(GAME_ROOM_AVAILABLE, onGameRoomAvailable, 2);
- event.sub(GAME_SAVED, () => popup('Saved'));
- event.sub(GAME_LOADED, () => popup('Loaded'));
- event.sub(GAME_PLAYER_IDX, idx => popup(+idx + 1));
+ event.sub(GAME_SAVED, () => message.show('Saved'));
+ event.sub(GAME_LOADED, () => message.show('Loaded'));
+ event.sub(GAME_PLAYER_IDX, idx => {
+ if (!isNaN(+idx)) message.show(+idx + 1);
+ });
event.sub(MEDIA_STREAM_INITIALIZED, (data) => {
rtcp.start(data.stunturn);
@@ -428,16 +424,16 @@
socket.abort();
});
event.sub(LATENCY_CHECK_REQUESTED, onLatencyCheck);
- event.sub(GAMEPAD_CONNECTED, () => popup('Gamepad connected'));
- event.sub(GAMEPAD_DISCONNECTED, () => popup('Gamepad disconnected'));
+ event.sub(GAMEPAD_CONNECTED, () => message.show('Gamepad connected'));
+ event.sub(GAMEPAD_DISCONNECTED, () => message.show('Gamepad disconnected'));
// touch stuff
event.sub(MENU_HANDLER_ATTACHED, (data) => {
- menuScreen.on(data.event, data.handler);
+ menuScreen.addEventListener(data.event, data.handler);
});
event.sub(KEY_PRESSED, onKeyPress);
event.sub(KEY_RELEASED, onKeyRelease);
event.sub(KEY_STATE_UPDATED, data => rtcp.input(data));
- event.sub(SETTINGS_CHANGED, () => popup('Settings have been updated'));
+ event.sub(SETTINGS_CHANGED, () => message.show('Settings have been updated'));
event.sub(SETTINGS_CLOSED, () => {
state.keyRelease(KEY.SETTINGS);
});
@@ -446,4 +442,4 @@
// initial app state
setState(app.state.eden);
-})($, document, event, env, gameList, input, KEY, log, room, settings, socket, stats, stream, utils);
+})(document, event, env, gameList, input, KEY, log, message, room, settings, socket, stats, stream, utils);
diff --git a/web/js/env.js b/web/js/env.js
index f6ef4178..66e49451 100644
--- a/web/js/env.js
+++ b/web/js/env.js
@@ -1,57 +1,41 @@
const env = (() => {
// UI
- const doc = $(document);
- const gameBoy = $('#gamebody');
- const ghRibbon = $('#ribbon');
+ const page = document.getElementsByTagName('html')[0];
+ const gameBoy = document.getElementById('gamebody');
+ const ghRibbon = document.getElementById('ribbon');
let isLayoutSwitched = false;
// Window rerender / rotate screen if needed
const fixScreenLayout = () => {
- let targetWidth = Math.round(doc.width() * 0.9 / 2) * 2,
- targetHeight = Math.round(doc.height() * 0.9 / 2) * 2;
+ let pw = getWidth(page),
+ ph = getHeight(page),
+ targetWidth = Math.round(pw * 0.9 / 2) * 2,
+ targetHeight = Math.round(ph * 0.9 / 2) * 2;
- // mobile == full screen
- if (env.getOs() === 'android') {
- targetWidth = doc.width();
- targetHeight = doc.height();
- }
-
- // Should have maximum box for desktop?
- // targetWidth = 800; targetHeight = 600; // test on desktop
+ // save page rotation
+ isLayoutSwitched = isPortrait();
rescaleGameBoy(targetWidth, targetHeight);
- let st = isLayoutSwitched ? 'rotate(90deg)' : '';
- ghRibbon.css({
- 'bottom': isLayoutSwitched ? 0 : '',
- 'top': isLayoutSwitched ? '' : 0,
- 'transform': st,
- '-webkit-transform': st,
- '-moz-transform': st
- })
+ ghRibbon.style['bottom'] = isLayoutSwitched ? 0 : '';
+ ghRibbon.style['top'] = isLayoutSwitched ? '' : 0;
+ ghRibbon.style['transform'] = isLayoutSwitched ? 'rotate(90deg)' : '';
};
const rescaleGameBoy = (targetWidth, targetHeight) => {
const transformations = ['translate(-50%, -50%)'];
- // rotate portrait layout
- isLayoutSwitched = isPortrait();
if (isLayoutSwitched) {
transformations.push('rotate(90deg)');
[targetWidth, targetHeight] = [targetHeight, targetWidth]
}
// scale, fit to target size
- const scale = Math.min(targetWidth / gameBoy.width(), targetHeight / gameBoy.height());
+ const scale = Math.min(targetWidth / getWidth(gameBoy), targetHeight / getHeight(gameBoy));
transformations.push(`scale(${scale})`);
- const transform = transformations.join(' ');
- gameBoy.css({
- 'transform': transform,
- '-webkit-transform': transform,
- '-moz-transform': transform
- });
+ gameBoy.style['transform'] = transformations.join(' ');
}
const getOS = () => {
@@ -74,19 +58,7 @@ const env = (() => {
return browserName;
};
- // !to use more sophisticated approach / lib
- const isPortrait = () => {
- // ios / mobile app
- switch (window.orientation) {
- case 0:
- case 180:
- return true;
- }
-
- // desktop
- const orientation = screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;
- return orientation === 'portrait-primary';
- };
+ const isPortrait = () => getWidth(page) < getHeight(page);
const toggleFullscreen = (enable, element) => {
const el = enable ? element : document;
@@ -114,6 +86,14 @@ const env = (() => {
}
};
+ function getHeight(el) {
+ return parseFloat(getComputedStyle(el, null).height.replace("px", ""));
+ }
+
+ function getWidth(el) {
+ return parseFloat(getComputedStyle(el, null).width.replace("px", ""));
+ }
+
window.addEventListener('resize', fixScreenLayout);
window.addEventListener('orientationchange', fixScreenLayout);
document.addEventListener('DOMContentLoaded', () => fixScreenLayout(), false);
@@ -130,4 +110,4 @@ const env = (() => {
isLayoutSwitched: isLayoutSwitched
})
}
-})($, document, log, navigator, screen, window);
+})(document, log, navigator, screen, window);
diff --git a/web/js/gameList.js b/web/js/gameList.js
index 0116db10..f309295d 100644
--- a/web/js/gameList.js
+++ b/web/js/gameList.js
@@ -9,8 +9,8 @@ const gameList = (() => {
let gamePickTimer = null;
// UI
- const listBox = $('#menu-container');
- const menuItemChoice = $('#menu-item-choice');
+ const listBox = document.getElementById('menu-container');
+ const menuItemChoice = document.getElementById('menu-item-choice');
const MENU_TOP_POSITION = 102;
let menuTop = MENU_TOP_POSITION;
@@ -22,22 +22,17 @@ const gameList = (() => {
const render = () => {
log.debug('[games] load game menu');
- listBox.html(games
- .map(game => ``)
- .join('')
- );
+ listBox.innerHTML = games
+ .map(game => ``)
+ .join('');
};
const show = () => {
render();
- menuItemChoice.show();
+ menuItemChoice.style.display = "block";
pickGame();
};
- const hide = () => {
- menuItemChoice.hide();
- };
-
const pickGame = (index) => {
let idx = undefined !== index ? index : gameIndex;
@@ -47,16 +42,17 @@ const gameList = (() => {
if (idx >= games.length) idx = 0;
// transition menu box
- listBox.css('transition', 'top 0.2s');
- listBox.css('-moz-transition', 'top 0.2s');
- listBox.css('-webkit-transition', 'top 0.2s');
+ listBox.style['transition'] = 'top 0.2s';
menuTop = MENU_TOP_POSITION - idx * 36;
- listBox.css('top', `${menuTop}px`);
+ listBox.style['top'] = `${menuTop}px`;
// overflow marquee
- $('.menu-item .pick').removeClass('pick');
- $(`.menu-item:eq(${idx}) span`).addClass('pick');
+ let pick = document.querySelectorAll('.menu-item .pick')[0];
+ if (pick) {
+ pick.classList.remove('pick');
+ }
+ document.querySelectorAll(`.menu-item span`)[idx].classList.add('pick');
gameIndex = idx;
};
@@ -80,10 +76,8 @@ const gameList = (() => {
};
const onMenuPressed = (newPosition) => {
- listBox.css('transition', '');
- listBox.css('-moz-transition', '');
- listBox.css('-webkit-transition', '');
- listBox.css('top', `${menuTop - newPosition}px`);
+ listBox.style['transition'] = '';
+ listBox.style['top'] = `${menuTop - newPosition}px`;
};
const onMenuReleased = (position) => {
@@ -100,8 +94,7 @@ const gameList = (() => {
stopGamePickerTimer: stopGamePickerTimer,
pickGame: pickGame,
show: show,
- hide: hide,
set: setGames,
getCurrentGame: () => games[gameIndex]
}
-})($, event, log);
+})(document, event, log);
diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
index 5b01d83c..e6c7ad91 100644
--- a/web/js/gui/gui.js
+++ b/web/js/gui/gui.js
@@ -56,9 +56,70 @@ const gui = (() => {
return el;
}
+ const show = (el) => {
+ el.style.display = 'block';
+ }
+
+ const hide = (el) => {
+ el.style.display = 'none';
+ }
+
+ const toggle = (el, what) => {
+ if (what) {
+ show(el)
+ } else {
+ hide(el)
+ }
+ }
+
+ const fadeIn = async (el, speed = .1) => {
+ el.style.opacity = '0';
+ el.style.display = 'block';
+ return new Promise((done) => (function fade() {
+ let val = parseFloat(el.style.opacity);
+ const proceed = ((val += 0.1) <= 1);
+ if (proceed) {
+ el.style.opacity = '' + val;
+ requestAnimationFrame(fade);
+ } else {
+ done();
+ }
+ })()
+ );
+ }
+
+ const fadeOut = async (el, speed = .1) => {
+ el.style.opacity = '1';
+ return new Promise((done) => (function fade() {
+ if ((el.style.opacity -= speed) < 0) {
+ el.style.display = "none";
+ done();
+ } else {
+ requestAnimationFrame(fade);
+ }
+ })()
+ )
+ }
+
+ const sleep = async (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+ const fadeInOut = async (el, wait = 1000, speed = .1) => {
+ await fadeIn(el, speed)
+ await sleep(wait);
+ await fadeOut(el, speed)
+ }
+
return {
+ anim: {
+ fadeIn,
+ fadeOut,
+ fadeInOut,
+ },
create: _create,
select,
binding,
+ show,
+ hide,
+ toggle,
}
})(document);
diff --git a/web/js/gui/message.js b/web/js/gui/message.js
new file mode 100644
index 00000000..4289b9b5
--- /dev/null
+++ b/web/js/gui/message.js
@@ -0,0 +1,46 @@
+/**
+ * App UI message module.
+ *
+ * @version 1
+ */
+const message = (() => {
+ const popupBox = document.getElementById('noti-box');
+
+ // fifo queue
+ let queue = [];
+ const queueMaxSize = 5;
+
+ let isScreenFree = true;
+
+ const _popup = () => {
+ // recursion edge case:
+ // no messages in the queue or one on the screen
+ if (!(queue.length > 0 && isScreenFree)) {
+ return;
+ }
+
+ isScreenFree = false;
+ popupBox.innerText = queue.shift();
+ gui.anim.fadeInOut(popupBox, 1000, .05).finally(() => {
+ isScreenFree = true;
+ _popup();
+ })
+ }
+
+ const _storeMessage = (text) => {
+ if (queue.length <= queueMaxSize) {
+ queue.push(text);
+ }
+ }
+
+ const _proceed = (text) => {
+ _storeMessage(text);
+ _popup();
+ }
+
+ const show = utils.throttle(_proceed, 1000);
+
+ return Object.freeze({
+ show: show
+ })
+})(document, gui, utils);
diff --git a/web/js/input/touch.js b/web/js/input/touch.js
index 42a01cc3..89662078 100644
--- a/web/js/input/touch.js
+++ b/web/js/input/touch.js
@@ -16,37 +16,36 @@ const touch = (() => {
let vpadTouchIdx = null;
let vpadTouchDrag = null;
- let vpadHolder = $("#circle-pad-holder");
- let vpadCircle = $("#circle-pad");
+ let vpadHolder = document.getElementById('circle-pad-holder');
+ let vpadCircle = document.getElementById('circle-pad');
- const window_ = $(window);
- const buttons = $(".btn");
- const playerSlider = $("#playeridx")
- const dpad = $(".dpad");
+ const buttons = Array.from(document.getElementsByClassName('btn'));
+ const playerSlider = document.getElementById('playeridx');
+ const dpad = Array.from(document.getElementsByClassName('dpad'));
const dpadToggle = document.getElementById('dpad-toggle')
dpadToggle.addEventListener('change', (e) => {
- event.pub(DPAD_TOGGLE, {checked: e.target.checked});
+ event.pub(DPAD_TOGGLE, {checked: e.target.checked});
});
let dpadMode = true;
const deadZone = 0.1;
function onDpadToggle(checked) {
- if (dpadMode === checked) {
- return //error?
- }
- if (dpadMode) {
- dpadMode = false;
- vpadHolder.addClass('dpad-empty');
- vpadCircle.addClass('bong-full');
- // reset dpad keys pressed before moving to analog stick mode
- resetVpadState()
- } else {
- dpadMode = true;
- vpadHolder.removeClass('dpad-empty');
- vpadCircle.removeClass('bong-full');
- }
+ if (dpadMode === checked) {
+ return //error?
+ }
+ if (dpadMode) {
+ dpadMode = false;
+ vpadHolder.classList.add('dpad-empty');
+ vpadCircle.classList.add('bong-full');
+ // reset dpad keys pressed before moving to analog stick mode
+ resetVpadState()
+ } else {
+ dpadMode = true;
+ vpadHolder.classList.remove('dpad-empty');
+ vpadCircle.classList.remove('bong-full');
+ }
}
function resetVpadState() {
@@ -63,7 +62,8 @@ const touch = (() => {
vpadTouchDrag = null;
vpadTouchIdx = null;
- dpad.removeClass('pressed');
+
+ dpad.forEach(arrow => arrow.classList.remove('pressed'));
}
function checkVpadState(axis, state) {
@@ -82,9 +82,7 @@ const touch = (() => {
}
function handleVpadJoystickDown(event) {
- vpadCircle.css('transition', '0s');
- vpadCircle.css('-moz-transition', '0s');
- vpadCircle.css('-webkit-transition', '0s');
+ vpadCircle.style['transition'] = '0s';
if (event.changedTouches) {
resetVpadState();
@@ -99,12 +97,8 @@ const touch = (() => {
function handleVpadJoystickUp() {
if (vpadTouchDrag === null) return;
- vpadCircle.css('transition', '.2s');
- vpadCircle.css('-moz-transition', '.2s');
- vpadCircle.css('-webkit-transition', '.2s');
- vpadCircle.css('transform', 'translate3d(0px, 0px, 0px)');
- vpadCircle.css('-moz-transform', 'translate3d(0px, 0px, 0px)');
- vpadCircle.css('-webkit-transform', 'translate3d(0px, 0px, 0px)');
+ vpadCircle.style['transition'] = '.2s';
+ vpadCircle.style['transform'] = 'translate3d(0px, 0px, 0px)';
resetVpadState();
}
@@ -137,10 +131,7 @@ const touch = (() => {
yNew = -tmp;
}
- let style = `translate(${xNew}px, ${yNew}px)`;
- vpadCircle.css('transform', style);
- vpadCircle.css('-webkit-transform', style);
- vpadCircle.css('-moz-transform', style);
+ vpadCircle.style['transform'] = `translate(${xNew}px, ${yNew}px)`;
let xRatio = xNew / MAX_DIFF;
let yRatio = yNew / MAX_DIFF;
@@ -156,33 +147,29 @@ const touch = (() => {
}
}
- /*
- Right side - Control buttons
- */
+ // right side - control buttons
+ const _handleButton = (key, state) => checkVpadState(key, state)
function handleButtonDown() {
- checkVpadState($(this).attr('value'), true);
- // add touchIdx?
+ _handleButton(this.getAttribute('value'), true);
}
function handleButtonUp() {
- checkVpadState($(this).attr('value'), false);
+ _handleButton(this.getAttribute('value'), false);
}
-
- /*
- Player index slider
- */
+ function handleButtonClick() {
+ _handleButton(this.getAttribute('value'), true);
+ setTimeout(() => {
+ _handleButton(this.getAttribute('value'), false);
+ }, 30);
+ }
function handlePlayerSlider() {
- socket.updatePlayerIndex($(this).val() - 1);
+ socket.updatePlayerIndex(this.value - 1);
}
-
- /*
- Touch menu
- */
-
+ // Touch menu
let menuTouchIdx = null;
let menuTouchDrag = null;
let menuTouchTime = null;
@@ -240,9 +227,7 @@ const touch = (() => {
menuTouchDrag = null;
}
- /*
- Common events
- */
+ // Common events
function handleWindowMove(event) {
event.preventDefault();
handleVpadJoystickMove(event);
@@ -255,10 +240,11 @@ const touch = (() => {
// check class
let elem = document.elementFromPoint(event.changedTouches[i].clientX, event.changedTouches[i].clientY);
+
if (elem.classList.contains('btn')) {
- $(elem).trigger('touchstart');
+ elem.dispatchEvent(new Event('touchstart'));
} else {
- buttons.trigger('touchend');
+ elem.dispatchEvent(new Event('touchend'));
}
}
}
@@ -268,23 +254,31 @@ const touch = (() => {
function handleWindowUp(ev) {
handleVpadJoystickUp(ev);
handleMenuUp(ev);
- buttons.trigger('touchend');
+ buttons.forEach((btn) => {
+ btn.dispatchEvent(new Event('touchend'));
+ });
}
// touch/mouse events for control buttons. mouseup events is binded to window.
- buttons.on('mousedown', handleButtonDown);
- buttons.on('touchstart', handleButtonDown);
- buttons.on('touchend', handleButtonUp);
+ buttons.forEach((btn) => {
+ btn.addEventListener('mousedown', handleButtonDown);
+ btn.addEventListener('touchstart', handleButtonDown);
+ btn.addEventListener('touchend', handleButtonUp);
+ });
// touch/mouse events for dpad. mouseup events is binded to window.
- vpadHolder.on('mousedown', handleVpadJoystickDown);
- vpadHolder.on('touchstart', handleVpadJoystickDown);
- vpadHolder.on('touchend', handleVpadJoystickUp);
+ vpadHolder.addEventListener('mousedown', handleVpadJoystickDown);
+ vpadHolder.addEventListener('touchstart', handleVpadJoystickDown);
+ vpadHolder.addEventListener('touchend', handleVpadJoystickUp);
+
+ dpad.forEach((arrow) => {
+ arrow.addEventListener('click', handleButtonClick);
+ });
// touch/mouse events for player slider.
- playerSlider.on('oninput', handlePlayerSlider);
- playerSlider.on('onchange', handlePlayerSlider);
- playerSlider.on('mouseup', handlePlayerSlider);
+ playerSlider.addEventListener('oninput', handlePlayerSlider);
+ playerSlider.addEventListener('onchange', handlePlayerSlider);
+ playerSlider.addEventListener('mouseup', handlePlayerSlider);
// Bind events for menu
// TODO change this flow
@@ -297,16 +291,15 @@ const touch = (() => {
return {
init: () => {
// add buttons into the state 🤦
- $('.btn, .btn-big').each((_, el) => {
- vpadState[$(el).attr('value')] = false;
+ Array.from(document.querySelectorAll('.btn,.btn-big')).forEach((el) => {
+ vpadState[el.getAttribute('value')] = false;
});
- // Bind events for window
- window_.on('mousemove', handleWindowMove);
- window_[0].addEventListener('touchmove', handleWindowMove, {passive: false});
- window_.on('mouseup', handleWindowUp);
+ window.addEventListener('mousemove', handleWindowMove);
+ window.addEventListener('touchmove', handleWindowMove, {passive: false});
+ window.addEventListener('mouseup', handleWindowUp);
log.info('[input] touch input has been initialized');
}
}
-})($, document, event, KEY, window);
+})(document, event, KEY, window);
diff --git a/web/js/lib/jquery-3.4.1.min.js b/web/js/lib/jquery-3.4.1.min.js
deleted file mode 100644
index a1c07fd8..00000000
--- a/web/js/lib/jquery-3.4.1.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0
+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/