Update new UI (#160)

* Update new ui

* Update script version

web/css/main.css

@@ -8,18 +8,29 @@ body {
     display: block;
     width: 556px;
     height: 278px;
-    background-color: #edf1f0;
-    -moz-border-radius: 30px;
-    -webkit-border-radius: 30px;
-    border-radius: 30px;
     top: 50%;
     left: 50%;
     position: fixed;
     transform: translate(-50%, -50%);
 
-    -webkit-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    -moz-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
+    /*-webkit-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
+    /*-moz-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
+    /*box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
+
+    background-image: url('/static/img/ui/bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+#ui-emulator-bg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+
+    background-image: url('/static/img/ui/bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 }
 
 #help-overlay {
@@ -56,36 +67,31 @@ body {
     height: 100px;
     position: absolute;
     top: 155px;
-    left: 30px;
-    background-color: #eaebeb;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    -webkit-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    -moz-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);
+    left: 22px;
+    background-size: contain;
+    background-image: url('/static/img/ui/bt MOVE.png');
 }
 
+#guide-txt {
+    color: #bababa;
+    font-size: 8px;
+    top: 263px;
+    left: 30px;
+    width: 1000px;
+    position: absolute;
+}
 
 #circle-pad {
     display: block;
     width: 70px;
     height: 70px;
     position: absolute;
-    /* transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -webkit-transform: translate(-50%, -50%); */
+    background-size: contain;
     top: 15px;
     left: 15px;
-    background-color: #00f;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    -webkit-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    -moz-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
 
     opacity: 0.5;
+    background-image: url('/static/img/ui/bong.png');
 }
 
 
@@ -94,15 +100,21 @@ body {
     height: 20px;
     display: block;
     position: absolute;
-    background-color: #e4e5e5;
-    border: 2px solid rgba(219, 222, 222, 1);
 }
 
+#player-index {
+    border-bottom: 0px;
+
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url('/static/img/ui/bt PlayerIndex.png');
+}
 
 #btn-up {
     top: 18px;
     left: 50%;
     border-bottom: 0px;
+    border-radius: 3px;
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
@@ -112,6 +124,7 @@ body {
     bottom: 18px;
     left: 50%;
     border-top: 0px;
+    border-radius: 3px;
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
@@ -122,6 +135,7 @@ body {
     left: 18px;
     top: 50%;
     border-right: 0px;
+    border-radius: 3px;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
@@ -131,6 +145,7 @@ body {
     right: 18px;
     top: 50%;
     border-left: 0px;
+    border-radius: 3px;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
@@ -150,10 +165,10 @@ body {
     -moz-border-radius: 5px 5px 5px 5px;
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
-    
+
     -webkit-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
     -moz-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
+    box-shadow: 0px 0px 2px 2px rgba(25, 25, 25, 1);
 }
 
 #color-button-holder {
@@ -171,13 +186,9 @@ body {
     text-align: center;
     width: 40px;
     height: 30px;
+    background-size: contain;
     position: absolute;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    -webkit-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    -moz-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
+    background-repeat: no-repeat;
 }
 
 
@@ -188,68 +199,63 @@ body {
     width: 100px;
     height: 25px;
     position: absolute;
-    -moz-border-radius: 25px;
-    -webkit-border-radius: 25px;
-    border-radius: 25px;
-    -webkit-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    -moz-box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
-    box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1);
 }
 
 #btn-help {
     padding-top: 0px;
-    width: 40px;
-    height: 20px;
-    font-size: 15px;
+    width: 28px;
+    height: 28px;
 
     top: 10px;
-    left: 15px;
+    left: 23px;
 
-    background-color: lightskyblue;
+    background-image: url('/static/img/ui/Help.png');
 }
 
 #btn-load {
     top: 20px;
     left: 435px;
-    background-color: #f5a54b;
+
+    background-image: url('/static/img/ui/bt LOAD.png');
 }
 
 #btn-save {
     top: 60px;
     left: 435px;
-    background-color: #b844ee;
+
+    background-image: url('/static/img/ui/bt SAVE.png');
 }
 
 #btn-join {
-    background-color: #52f367;
     top: 70px;
-    left: 20px;
-    border-radius: 25px 0 0 25px;
-    width: 55px;
+    left: 22px;
+    height: 25px;
+
+    background-image: url('/static/img/ui/bt SHARE.png');
 }
 
 #btn-quit {
-    background-color: #5947f5;
     top: 70px;
     left: 75px;
-    border-radius: 0px 25px 25px 0px;
-    width: 55px;
+    height: 25px;
+
+    background-image: url('/static/img/ui/bt QUIT.png');
 }
 
 #btn-select {
-    background-color: #F7EDE3;
     top: 100px;
-    left: 425px;
-    border-radius: 25px 0 0 25px;
-    width: 55px;
+    left: 435px;
+    height: 25px;
+
+    background-image: url('/static/img/ui/bt SELECT.png');
 }
 
 #btn-start {
-    background-color: #F7EDE3;
     top: 100px;
-    left: 490px;
-    border-radius: 0px 25px 25px 0px;
-    width: 55px;
+    left: 489px;
+    width: 60px;
+
+    background-image: url('/static/img/ui/bt START.png');
 }
 
 #btn-a {
@@ -258,7 +264,8 @@ body {
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
-    background-color: #ea6e4a;
+
+    background-image: url('/static/img/ui/bt A.png');
 }
 
 
@@ -268,7 +275,8 @@ body {
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
-    background-color: #d4b95e;
+
+    background-image: url('/static/img/ui/bt B.png');
 }
 
 #btn-x {
@@ -277,7 +285,8 @@ body {
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
-    background-color: #6fa8eb;
+
+    background-image: url('/static/img/ui/bt X.png');
 }
 
 
@@ -287,7 +296,8 @@ body {
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
-    background-color: #43be85;
+
+    background-image: url('/static/img/ui/bt Y.png');
 }
 
 
@@ -300,40 +310,6 @@ body {
     left: 460px;
 }
 
-#light-1 {
-    display: block;
-    width: 5px;
-    height: 10px;
-    background-color: #009BEB;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-#light-2 {
-    display: block;
-    width: 5px;
-    height: 10px;
-    background-color: #7a7e7d;
-    position: absolute;
-    top: 0;
-    left: 20px;
-}
-
-#light-3 {
-    display: block;
-    width: 5px;
-    height: 10px;
-    background-color: #7a7e7d;
-    position: absolute;
-    top: 0;
-    left: 40px;
-    animation: blink 1.5s cubic-bezier(1.0, 0, 0, 1.0) infinite;
-    -webkit-animation: blink 1.5s cubic-bezier(1.0, 0, 0, 1.0) infinite;
-    -moz-animation: blink 1.5s cubic-bezier(1.0, 0, 0, 1.0) infinite;
-}
-
-
 @-webkit-keyframes blink {
     0% {
         background: #7a7e7d;
@@ -375,18 +351,33 @@ body {
 
 #room-txt {
     position: absolute;
-    width: 110px;
-    top: 40px;
-    left: 25px;
-    padding-left: 2px;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
+    width: 98px;
+    top: 45px;
+    left: 23px;
+    color: #bababa;
+    padding-left: 0px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+
+    outline: none;
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    border-bottom-style: hidden;
+
+    background-image: url('/static/img/ui/FrameTEXT.png');
+    background-size: cover;
 }
 
 
 .pressed {
-    background-color: #333 !important;
+  filter: brightness(50%);
+}
+
+.dpad-pressed {
+  background-color: #333 !important;
+  opacity: 0.75;
 }
 
 #bottom-screen {
@@ -540,6 +531,7 @@ body {
     padding-top: 10px;
     text-align: center;
 
+    color: #bababa;
     position: absolute;
     top: 90px;
     left: 20px;
@@ -552,12 +544,15 @@ body {
   appearance: none;
   width: 100%; /* Full-width */
   height: 25px; /* Specified height */
-  background: #d3d3d3; /* Grey background */
   outline: none; /* Remove outline */
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  /*opacity: 0.7; [> Set transparency (for mouse-over effects on hover) <]*/
   -webkit-transition: .2s; /* 0.2 seconds transition on hover */
   transition: opacity .2s;
-  border-radius: 8px;
+
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url('/static/img/ui/FramePlayerIndex.png');
 }
 
 /* Mouse-over effects */
@@ -571,17 +566,22 @@ body {
   appearance: none;
   width: 25px; /* Set a specific slider handle width */
   height: 25px; /* Slider handle height */
-  background: #4CAF50; /* Green background */
   cursor: pointer; /* Cursor on hover */
-  border-radius: 8px;
+
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url('/static/img/ui/bt PlayerIndex.png');
 }
 
 .slider::-moz-range-thumb {
   width: 25px; /* Set a specific slider handle width */
   height: 25px; /* Slider handle height */
-  background: #4CAF50; /* Green background */
   cursor: pointer; /* Cursor on hover */
   border-radius: 8px;
+
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url('/static/img/ui/bt PlayerIndex.png');
 }
 
 * {

web/game.html

@@ -7,11 +7,11 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta property="og:type" content="cloud-game" />
-    <meta property="og:title" content="Cloud Gaming - NES Emulator" />
+    <meta property="og:title" content="Web-based Cloud Gaming for Retro Games" />
     <meta property="og:description" content="Play and share cloud gaming experience with your friends" />
     <meta property="og:image" content="http://cloud.webgame2d.com/static/img/ogimage.jpg" />
     <meta property="og:url" content="" />
-    <meta property="og:site_name" content="Cloud gaming" />
+    <meta property="og:site_name" content="Cloud Retro" />
     <meta property="og:author" content="giongto35 trichimtrich" />
 
     <link href="/static/css/font-awesome.css?1" rel="stylesheet">
@@ -20,6 +20,8 @@
 
 <body>
     <div id="gamebody">
+        <!--<div id="ui-emulator-bg"></div>-->
+
         <div id="circle-pad-holder">
             <div id="btn-up" class="dpad" value="up"></div>
             <div id="btn-down" class="dpad" value="down"></div>
@@ -34,7 +36,6 @@
                 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
             -->
             <video id="game-screen" muted playinfullscreen="false" playsinline onloadstart="this.volume=0.5" poster="/static/img/screen_loading.gif"></video>
-            <!--<video id="game-screen" autoplay=true poster="/static/img/screen_loading.gif"></video>-->
 
             <div id="menu-screen">
                 <div id="menu-container">
@@ -45,30 +46,25 @@
 
         </div>
 
-        <div id="btn-load" unselectable="on" class="btn big unselectable" value="load">load</div>
-        <div id="btn-save" unselectable="on" class="btn big unselectable" value="save">save</div>
-        <div id="btn-join" unselectable="on" class="btn big unselectable" value="join">play</div>
+        <div id="guide-txt"><b>Arrows</b>(move),<b>ZXCVAS</b>(game ABXYLR),<b>1/2</b>(1st/2nd player),<b>Shift/Enter/K/L</b>(select/start/save/load),<b>F</b>(fullscreen),<b>share</b>(copy sharelink to clipboard)</div>
+        <div id="btn-load" unselectable="on" class="btn big unselectable" value="load"></div>
+        <div id="btn-save" unselectable="on" class="btn big unselectable" value="save"></div>
+        <div id="btn-join" unselectable="on" class="btn big unselectable" value="join"></div>
         <div id="slider-playeridx" class="slidecontainer">
           player index
           <input type="range" min="1" max="4" value="1" class="slider" id="playeridx" onkeydown="event.preventDefault()">
         </div>
 
-        <div id="btn-quit" unselectable="on" class="btn big unselectable" value="quit">quit</div>
-        <div id="btn-select" unselectable="on" class="btn big unselectable" value="select">Select</div>
-        <div id="btn-start" unselectable="on" class="btn big unselectable" value="start">Start</div>
+        <div id="btn-quit" unselectable="on" class="btn big unselectable" value="quit"></div>
+        <div id="btn-select" unselectable="on" class="btn big unselectable" value="select"></div>
+        <div id="btn-start" unselectable="on" class="btn big unselectable" value="start"></div>
 
 
         <div id="color-button-holder">
-            <div id="btn-a" unselectable="on" class="btn unselectable" value="a">A</div>
-            <div id="btn-b" unselectable="on" class="btn unselectable" value="b">B</div>
-            <div id="btn-x" unselectable="on" class="btn unselectable" value="x">X</div>
-            <div id="btn-y" unselectable="on" class="btn unselectable" value="y">Y</div>
-        </div>
-
-        <div id="lights-holder">
-            <div id="light-1"></div>
-            <div id="light-2"></div>
-            <div id="light-3"></div>
+            <div id="btn-a" unselectable="on" class="btn unselectable" value="a"></div>
+            <div id="btn-b" unselectable="on" class="btn unselectable" value="b"></div>
+            <div id="btn-x" unselectable="on" class="btn unselectable" value="x"></div>
+            <div id="btn-y" unselectable="on" class="btn unselectable" value="y"></div>
         </div>
 
         <!-- TODO: remove -->
@@ -80,7 +76,7 @@
             <div id="help-overlay-background"></div>
             <div id="help-overlay-detail"></div>
         </div>
-        <div id="btn-help" unselectable="on" class="btn unselectable" value="help">Help</div>
+        <div id="btn-help" unselectable="on" class="btn unselectable" value="help"></div>
     </div>
 
     <a id="ribbon" style="position: fixed; right: 0; top: 0;" href="https://github.com/giongto35/cloud-game"><img width="149" height="149" 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"></a>
@@ -92,22 +88,22 @@
 
     <script src="/static/js/lib/jquery-3.4.1.min.js"></script>
 
-    <script src="/static/js/log.js?v=1"></script>
-    <script src="/static/js/env.js?v=1"></script>
-    <script src="/static/js/event/event.js?v=1"></script>
-    <script src="/static/js/input/keys.js?v=1"></script>
-    <script src="/static/js/input/input.js?v=1"></script>
-    <script src="/static/js/gameList.js?v=1"></script>
-    <script src="/static/js/room.js?v=1"></script>
-    <script src="/static/js/controller.js?v=2"></script>
-    <script src="/static/js/input/keyboard.js?v=1"></script>
-    <script src="/static/js/input/touch.js?v=1"></script>
-    <script src="/static/js/input/joystick.js?v=1"></script>
-    <script src="/static/js/network/ajax.js?v=1"></script>
-    <script src="/static/js/network/socket.js?v=2"></script>
-    <script src="/static/js/network/rtcp.js?v=1"></script>
+    <script src="/static/js/log.js?v=3"></script>
+    <script src="/static/js/env.js?v=3"></script>
+    <script src="/static/js/event/event.js?v=3"></script>
+    <script src="/static/js/input/keys.js?v=3"></script>
+    <script src="/static/js/input/input.js?v=3"></script>
+    <script src="/static/js/gameList.js?v=3"></script>
+    <script src="/static/js/room.js?v=3"></script>
+    <script src="/static/js/controller.js?v=3"></script>
+    <script src="/static/js/input/keyboard.js?v=3"></script>
+    <script src="/static/js/input/touch.js?v=3"></script>
+    <script src="/static/js/input/joystick.js?v=3"></script>
+    <script src="/static/js/network/ajax.js?v=3"></script>
+    <script src="/static/js/network/socket.js?v=3"></script>
+    <script src="/static/js/network/rtcp.js?v=3"></script>
 
-    <script src="/static/js/init.js?v=1"></script>
+    <script src="/static/js/init.js?v=3"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145078282-1"></script>

web/js/controller.js

@@ -30,7 +30,7 @@
     };
 
     const onGameRoomAvailable = () => {
-        keyButtons[KEY.JOIN].html('share');
+        //keyButtons[KEY.JOIN].html('share');
         popup('Now you can share you game!');
     };
 
@@ -98,7 +98,7 @@
         gameList.hide();
         keyButtons[KEY.SAVE].hide();
         keyButtons[KEY.LOAD].hide();
-        keyButtons[KEY.JOIN].html('play');
+        //keyButtons[KEY.JOIN].html('play');
 
         // show menu scene
         gameScreen.show().delay(0).fadeOut(0, () => {
@@ -164,7 +164,11 @@
     };
 
     const onKeyPress = (data) => {
-        keyButtons[data.key].addClass('pressed');
+        if (data.key == "up" || data.key == "down" || data.key == "left" || data.key == "right") {
+            keyButtons[data.key].addClass('dpad-pressed');
+        } else {
+            keyButtons[data.key].addClass('pressed');
+        }
 
         if (KEY.HELP === data.key) helpScreen.show(true);
 
@@ -172,7 +176,11 @@
     };
 
     const onKeyRelease = (data) => {
-        keyButtons[data.key].removeClass('pressed');
+        if (data.key == "up" || data.key == "down" || data.key == "left" || data.key == "right") {
+            keyButtons[data.key].removeClass('dpad-pressed');
+        } else {
+            keyButtons[data.key].removeClass('pressed');
+        }
 
         if (KEY.HELP === data.key) helpScreen.show(false);
 
@@ -217,7 +225,7 @@
                     gameScreen.hide();
                     menuScreen.hide();
                     gameList.hide();
-                    keyButtons[KEY.JOIN].html('play');
+                    //keyButtons[KEY.JOIN].html('play');
 
                     gameList.show();
 

web/js/input/keys.js

@@ -6,8 +6,6 @@ const KEY = (() => {
         Y: 'y',
         L: 'l',
         R: 'r',
-        L: 'l',
-        R: 'r',
         START: 'start',
         SELECT: 'select',
         LOAD: 'load',