@robotical/martyblocksjr 1.3.53 → 3.0.2

package/editions/free/src/css/editorleftpanel.css

@@ -4,46 +4,141 @@
     position: absolute;
     margin: 0px;
     padding: 0px;
-    top: ${css_vh(10.38)};
-    left: ${css_vh(0.1)};
-    background:  url('../assets/ui/scratchjr-home.svg');
-    background-repeat: no-repeat;
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    /*width: ${css_vh(29.95)};*/
-    width: ${css_vh(9.95)};
+    top: ${css_vh(0.13)};
+    left: ${css_vh(1.69)};
+    background:  url('../assets/ui/fliplogo.svg');
+    background-size: cover;
+    background-position: right;
+    width: ${css_vh(8.20)};
     height: ${css_vh(8.20)};
 }
 
-.flipme:active {
-    background:  url('../assets/ui/fliplogoPressed.svg');
-    background-size: 100.5%;  /* webview pixelates the image unless we do this */
+/* Styles for the connection buttons area */
+.connectionButtonsArea {
+    box-sizing: border-box;
+    position: absolute;
+    top: ${css_vh(2)};
+    left: ${css_vh(10.94)};
+    font-family: Lato Regular;
+
+    display: flex;
+    justify-content: space-between;
+    width: fit-content; /* Adjust the width based on content */
+
+    background: #FEDF8F;
+    border-radius: 10px;
+    border: 3px solid #F4AD46;
+
+    width: ${css_vh(25)};
+    height: ${css_vh(12)};
+
+    padding: 8px 5px;
+    column-gap: 8px;
 }
 
-.martyConnection {
-    position: absolute;
-    margin: 0px;
-    padding: 0px;
-    /* background-color: #f9e3e5; */
-    /* background-image: url('../assets/ui/marty-not-connected.svg'); */
+/* Styles for each connect button */
+.connectButton {
+    align-self: center;
+    justify-self: center;
+    width: 100%;
+    height: 100%;
+    background: white;
+    border-radius: 10px;
+    border: 3px solid #F4AD46;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+    padding-top: 2px;
+    padding-bottom: 1px;
+}
+
+.connectButtonConnected {
+    /* background: #4bfaa3; */
+}
+
+.iconButtonContainer {
+    width: 65%;
+    height: 18px;
+}
+
+.notConnectedButtonContainer,
+.connectedButtonContainer {
+    background-size: 100%;
     background-repeat: no-repeat;
-    background-position: right center;
-    background-size: contain;
-    border-radius: 5px;
-    margin: 5px;
-    /* padding: 10px; */
-    font-size: 0.7em;
-    font-weight: bold;
-    top: ${css_vh(0.13)};
-    left: ${css_vw(5)};
-    /*width: ${css_vh(29.95)};*/
-    width: ${css_vw(12.95)};
-    /*height: ${css_vh(5.20)};*/
-    height: ${css_vh(8.38)};
+}
+.notConnectedButtonContainer {
+    background-image: url('../assets/connection/connect_btn-default.svg');
+}
+.connectButton:hover .notConnectedButtonContainer {
+    background-image: url('../assets/connection/connect_btn-hover.svg');
+}
+.connectedButtonContainer {
+    background-image: url('../assets/connection/disconnect_btn-default.svg');
+}
+.connectButton:hover .connectedButtonContainer {
+    background-image: url('../assets/connection/disconnect_btn-hover.svg');
+}
+
+.raftNameConnectButton {
+    font-size: 7px;
+    color: #133C46;
+    font-family: 'Lato Regular';
+    text-align: center;
+    margin-bottom: 1px;
+}
+
+.batteryAndSignalContainer {
+    width: 100%;
+    display: flex;
+    /* justify-content: space-evenly; */
+    align-items: flex-end;
+    justify-content: flex-end;
+    column-gap: ${css_vh(1)};
 }
 
-.martyConnected {
-  background-color: #afdde9;
-  background-image: url('../assets/ui/marty-connected.svg');
+.batteryIndicatorContainer {
+    display: grid;
+    width: 50%;
+}
+.signalIndicatorContainer {
+    display: grid;
+    width: 22%;
+}
+
+/* Styles for the icon part of the button */
+.connectIcon {
+    margin-bottom: 1px;
+    display: grid;
+    width: ${css_vh(3.2)}; /* Adjust size as needed */
+}
+
+/* .connectText media query for smaller screens */
+@media (max-width: 1140px) {
+    .connectText {
+        display: none; /* Hide text on smaller screens */
+    }
+    /* .connectButton {
+        width: ${css_vh(8)}; 
+    } */
+}
+
+.connectDot {
+    background: #000000;
+    border-radius: 50%;
+    width: ${css_vh(1.64)};
+    height: ${css_vh(1.64)};
+
+}
+
+.connectText {
+    font-size: ${css_vh(1.8)};
+}
+
+.flipme:active {
+    background:  url('../assets/ui/fliplogoPressed.svg');
+    background-size: 100.5%;  /* webview pixelates the image unless we do this */
 }
 
 .scrollbar {
@@ -54,8 +149,7 @@
     top: 0px;
     left: ${css_vh(32.29)};
     width: ${css_vh(1.04)};
-    /*height: ${css_vh(40.63)};*/
-    height: ${css_vh(30.47)};
+    height: ${css_vh(40.63)};
     background: rgba(255,255,255,0.5);
 }
 
@@ -77,14 +171,11 @@
     display: inline-block;
     margin: 0px;
     padding: 0px;
-    /* top: ${css_vh(9.38)}; */
-    top: ${css_vh(19.38)};
-    width: ${css_vh_ratio_adj(33.85)};
+    top: ${css_vh(15)};
+    width: ${css_vh(33.85)};
     overflow-x: hidden;
 }
 
-
-
 #library .spritethumbs {
     position: relative;
     margin: 0px;
@@ -92,9 +183,8 @@
     display: block;
     overflow-y: scroll;
     overflow-x: hidden;
-    width: ${css_vh_ratio_adj(33.85)};
-    /*max-height: ${css_vh(40.63)};*/
-    max-height: ${css_vh_ratio_adj(30.47)};
+    width: ${css_vh(33.85)};
+    max-height: ${css_vh(40.63)};
 }
 
 .spritethumbs::-webkit-scrollbar {
@@ -103,9 +193,9 @@
 
 #library .spritethumbs .spritecc{
     position: relative;
-    margin: 0px ${css_vh_ratio_adj(2.34)} 0px;
+    margin: 0px ${css_vh(2.34)} 0px;
     padding: 0px;
-    width: ${css_vh_ratio_adj(29.95)};
+    width:  ${css_vh(29.95)};
 }
 
 #library .addsprite {
@@ -113,40 +203,11 @@
     display: inline-block;
     background:  url('../assets/ui/newsprite2.png') no-repeat left top;
     background-size: 100%;
-    width: ${css_vh_ratio_adj(23.18)};
-    height: ${css_vh_ratio_adj(10.29)};
-    margin: 0px ${css_vh_ratio_adj(2.34)} 0px;
+    width:  ${css_vh(23.18)};
+    height: ${css_vh(10.29)};
+    margin: 0px ${css_vh(2.34)} 0px;
 }
 
-#library .martymode {
-    position: relative;
-    display: inline-block;
-    background:  url('../assets/ui/martyMode.png') no-repeat left top;
-    background-size: 100%;
-    width: ${css_vh_ratio_adj(10.29)};
-    height: ${css_vh_ratio_adj(10.29)};
-    margin: 0px ${css_vh_ratio_adj(2.34)} 0px;
-}
-
-#library .buttonwrapper {
-    position: fixed;
-    top: ${css_vh(50)};
-    /*left: ${css_vh(2.34)};*/
-}
-
-
-#library .standardmode {
-    position: relative;
-    display: inline-block;
-    background:  url('../assets/ui/scatchJrLogo.png') no-repeat left top;
-    background-size: 100%;
-    width: ${css_vh_ratio_adj(10.29)};
-    /*height: ${css_vh(8.33)};*/
-    height: ${css_vh_ratio_adj(10.29)};
-    margin: 0px ${css_vh_ratio_adj(2.34)} 0px;
-}
-
-
 
 /* sprites thumbnails */
 .spritethumb {
@@ -154,39 +215,39 @@
     position: relative;
     display: inline-block;
     word-spacing: -1;
-    width: ${css_vh_ratio_adj(29.95)};
-    height: ${css_vh_ratio_adj(10.16)};
+    width: ${css_vh(29.95)};
+    height: ${css_vh(10.16)};
     margin: 0px;
-    margin-bottom: ${css_vh_ratio_adj(-0.39)};
+    margin-bottom: ${css_vh(-0.39)};
     padding: 0px;
 }
 
 .spritethumb .thumbcanvas{
     position: absolute;
-    margin: ${css_vh_ratio_adj(0.65)} ${css_vh_ratio_adj(0.65)} 0px;
+    margin: ${css_vh(0.65)} ${css_vh(0.65)} 0px;
     padding: 0px;
 }
 
 .spritethumb.off {
     background: url('../assets/ui/viewOff.png') no-repeat left top;
-    background-size: ${css_vh_ratio_adj(23.18)};
+    background-size: ${css_vh(23.18)};
 }
 
 .spritethumb.off.target {
     background: url('../assets/ui/viewOffTarget.png') no-repeat left top;
-    background-size: ${css_vh_ratio_adj(23.18)};
+    background-size: ${css_vh(23.18)};
 }
 
 .spritethumb.on.target {
     background: url('../assets/ui/viewOnTarget.png') no-repeat left top;
     background-size: 100%;
-    width: ${css_vh_ratio_adj(29.95)};
+    width: ${css_vh(29.95)};
 }
 
 .spritethumb.on {
     background: url('../assets/ui/viewOn.png') no-repeat left top;
     background-size: 100%;
-    width: ${css_vh_ratio_adj(29.95)};
+    width: ${css_vh(29.95)};
 }
 
 .spritethumb.noneditable {
@@ -198,8 +259,8 @@
     position: absolute;
     margin: 0px 0px 0px;
     left: 0px;
-    width: ${css_vh_ratio_adj(5.86)};
-    height: ${css_vh_ratio_adj(5.73)};
+    width: ${css_vh(5.86)};
+    height: ${css_vh(5.73)};
     background: url('../assets/ui/closeit.svg');
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
@@ -210,8 +271,8 @@
     position: absolute;
     margin: 0px 0px 0px;
     left: 0px;
-    width: ${css_vh_ratio_adj(5.86)};
-    height: ${css_vh_ratio_adj(5.73)};
+    width: ${css_vh(5.86)};
+    height: ${css_vh(5.73)};
     background: url('../assets/ui/closeit.svg');
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
@@ -222,10 +283,10 @@
     position: absolute;
     top: ${css_vh(0.65)};
     left: ${css_vh(1.04)};
-    width: ${css_vh_ratio_adj(8.33)};
-    height: ${css_vh_ratio_adj(8.33)};
-    margin: ${css_vh_ratio_adj(0.00)};
-    padding: ${css_vh_ratio_adj(0.00)};
+    width: ${css_vh(8.33)};
+    height: ${css_vh(8.33)};
+    margin: ${css_vh(0.00)};
+    padding: ${css_vh(0.00)};
     overflow: hidden;
 }
 
@@ -240,42 +301,43 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    font-family: Roboto;
+    font-family: 'Lato Regular';
     font-weight: bold;
     font-size:  ${css_vh(1.69)};
-    width: ${css_vh_ratio_adj(11.97)};
+    width: ${css_vh(11.97)};
     cursor: default;
     color: #999999;
 }
 
 .spritethumb.off .sname{
     color: #999999;
-    top: ${css_vh_ratio_adj(3.52)};
-    left: ${css_vh_ratio_adj(9.89)};
-    width: ${css_vh_ratio_adj(11.97)};
+    top: ${css_vh(3.52)};
+    left: ${css_vh(9.89)};
+    width: ${css_vh(11.97)};
 }
 
 .spritethumb.on .sname{
     color: #F9A737;
-    top: ${css_vh_ratio_adj(3.91)};
-    left: ${css_vh_ratio_adj(9.24)};
-    width: ${css_vh_ratio_adj(11.97)};
+    top: ${css_vh(3.91)};
+    left: ${css_vh(9.24)};
+    width: ${css_vh(11.97)};
 }
 .spritethumb.noneditable .sname{
     color: #999;
-    top: ${css_vh_ratio_adj(3.91)};
-    left: ${css_vh_ratio_adj(9.24)};
-    width: ${css_vh_ratio_adj(11.97)};
+    top: ${css_vh(3.91)};
+    left: ${css_vh(9.24)};
+    width: ${css_vh(11.97)};
 }
 
 .spritethumb .brush {
+    display: none; // Hide the brush icon until we fix the issue with editing svgs
     position: absolute;
     background:  url('../assets/paint/paintbrush.svg');
     background-size: ${css_vh(7.03)} ${css_vh(7.03)};
-    width: ${css_vh_ratio_adj(7.03)};
-    height: ${css_vh_ratio_adj(7.03)};
+    width: ${css_vh(7.03)};
+    height: ${css_vh(7.03)};
     top: ${css_vh(1.30)};
-    left: ${css_vh_ratio_adj(21.75)};
+    left: ${css_vh(21.75)};
     margin: 0px;
     padding: 0px;
 }

package/editions/free/src/css/editormodal.css

@@ -109,7 +109,7 @@
 }
 
 .record.fade {
-    -webkit-transition: opacity .3s linear, top .3s ease-out;
+    -webkit-transition: opacity 2s linear, top 2s ease-out;
     top: -100%;
     opacity: 0;
 }

package/editions/free/src/css/editorstage.css

@@ -14,7 +14,7 @@
 
 .fullscreen.presentationmode#full {
     left: 0px;
-    top: ${css_vh(10.65)};
+    top: 0px;
     background:  url('../assets/ui/fullOn2.svg');
     background-size: 100%;
 }
@@ -32,7 +32,6 @@
 .gridToggle.off {background:  url('../assets/ui/gridOn.svg'); background-size: 100%; }
 .gridToggle.on {background:  url('../assets/ui/gridOff.svg'); background-size: 100%; }
 
-
 .traceToggle {
     position: absolute;
     margin: 0px;
@@ -66,7 +65,7 @@
     margin: 0px;
     padding: 0px;
     top: ${css_vh(0.65)};
-    left: ${css_vh(44.89)};
+    left: ${css_vh(44)};
 
     width: ${css_vh(8.33)};
     height: ${css_vh(8.33)};
@@ -74,7 +73,6 @@
     background-size: 100.5%; /* webview pixelates the image unless we do this */
 }
 
-
 .addText:active {
     background:  url('../assets/ui/addTextPressed.svg');
     background-size: 100.5%; /* webview pixelates the image unless we do this */
@@ -85,7 +83,7 @@
     margin: 0px;
     padding: 0px;
     top: ${css_vh(0.65)};
-    left: ${css_vh(36.30)};
+    left: ${css_vh(36)};
 
     width: ${css_vh(8.33)};
     height: ${css_vh(8.33)};
@@ -286,7 +284,7 @@
     text-shadow: 0 ${css_vh(0.26)} #000;
     line-height: ${css_vh(13.02)};
     font-weight: bold;
-    font-family: Roboto;
+    font-family: 'Lato Regular';
 }
 
 .textuisize.t1{ font-size: ${css_vh(1.56)};}
@@ -428,6 +426,41 @@
 
 .prevpage.off {display: none;}
 
+@keyframes counterUpdate {
+    0% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(1.5);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.counter {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    margin: 0px;
+    padding: 0px;
+    width: ${css_vh(7.51)};
+    height: ${css_vh(7.51)};
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: ${css_vh(4)};
+    transition: font-size 0.3s ease;
+}
+
+.counter.animate {
+    animation: counterUpdate 0.3s ease-in-out;
+}
+
 
 /* Grid */
 
@@ -436,7 +469,7 @@ p.stylelabel {
     position: relative; text-align: center;
     margin-top: 5px;
     color: #C9C9C9;
-    font-family: Roboto;
+    font-family: 'Lato Regular';
     font-weight: bold;
     margin-left: auto;
     margin-right: auto;
@@ -453,7 +486,7 @@ p.stylelabel {
     text-align: center;
     margin-top: 5px;
     color: #ffffff;
-    font-family: Roboto;
+    font-family: 'Lato Regular';
     font-weight: bold;
     margin-left: auto; margin-right: auto;
     width: 24;

package/editions/free/src/css/font.css

@@ -1,27 +1,27 @@
-/* latin */
 @font-face {
-  font-family: Roboto;
+  font-family: 'BigNoodleTitling Regular';
   font-style: normal;
-  font-weight: 400;
-  /*src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');*/
-  src: url(../assets/fonts/Roboto-400.woff2);
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+  font-weight: normal;
+  src: local('BigNoodleTitling Regular'),
+    url('../assets/fonts/big_noodle_titling.woff') format('woff');
 }
-/* latin */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'BigNoodleTitling Oblique';
   font-style: normal;
-  font-weight: 500;
-  /*src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');*/
-  src: url(../assets/fonts/Roboto-500.woff2);
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+  font-weight: normal;
+  src: local('BigNoodleTitling Oblique'),
+    url('../assets/fonts/big_noodle_titling_oblique.woff') format('woff');
 }
-/* latin */
+
 @font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 700;
-  /*src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');*/
-  src: url(../assets/fonts/Roboto-700.woff2);
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+  font-family: 'Lato Regular';
+  font-weight: normal;
+  src: url('../assets/fonts/Lato-Regular.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'Lato Bold';
+  font-weight: bold;
+  src: url('../assets/fonts/Lato-Bold.ttf') format('truetype');
+}

package/editions/free/src/css/librarymodal.css

@@ -63,7 +63,7 @@
     color:  #4682B5;
     font-weight: 500 !important;
     text-shadow: 0px -${1 * scaleMultiplier}px #0D1D28;
-    font-family: Roboto;
+    font-family: 'Lato Regular';
     line-height: ${css_vh(4.69)};
     cursor: default;
     outline: ${css_vh(0.00)};

package/editions/free/src/css/lobby.css

@@ -67,9 +67,9 @@ div.frame {
 
 #topbar ul.topbar-nav .logo .logo-icon {
     display: block;
-    width: ${css_vh(10)};
-    height: ${css_vh(10)};
-    background: url('../assets/lobby/backButton.svg');
+    width: ${css_vh(28.65)};
+    height: ${css_vh(10.03)};
+    background: url('../assets/lobby/scratchJrlogo.svg');
     background-size: 101%;
     padding: 0;
     margin: auto auto;
@@ -281,7 +281,7 @@ ul#settings.reference {
 
 /* Localization menu */
 h1.localizationtitle {
-    font-family: Roboto;
+    font-family: 'Lato Regular';
     font-size: ${css_vh(4.5)};
     color: #f5a322;
     text-align: center;

package/editions/free/src/css/media-queries.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 1200px) {
+/* @media only screen and (max-width: 1200px) {
     html {
         font-size: 65%;
     }
@@ -29,4 +29,4 @@
     }
   }
   
-  
+   */

package/editions/free/src/css/paintlook.css

@@ -29,7 +29,7 @@
 .spriteform input{
     text-align: center;
     color: #929497;
-    font-family: Roboto;
+    font-family: Verdana;
     font-size: ${css_vh(2.60)};
     cursor: default;
     padding: ${css_vh(0.26)};
@@ -93,7 +93,7 @@ spriteform.off {visibility: hidden; };
 
 .phototopbar {
     position: fixed;
-    top: ${css_vh(15.29)};
+    top: 0;
     left: 0;
     height: ${css_vh(10.29)};
     width: ${css_vw(100)};

package/editions/free/src/css/start.css

@@ -56,12 +56,11 @@ div.frame {
 
 *.catface {
     position: absolute;
-    top: 10%;
+    top: 18%;
     margin: 0px;
-    height: 35%;
+    height: 22%;
     z-index: 5;
-    background: url('../assets/start/MartyFull.svg');
-    transform: rotate(13deg);
+    background: url('../assets/start/Cat.svg');
     width: 100%;
     background-position: center center;
     background-repeat: no-repeat;
@@ -70,12 +69,12 @@ div.frame {
 
 *.jrlogo {
     position: absolute;
-    top: 27%;
+    top: 39%;
     width: 100%;
     margin: 0px;
-    height: 30%;
+    height: 16%;
     z-index: 10;
-    background: url('../assets/start/MartyBlocksJr_BasedOnScratchJr.png');
+    background: url('../assets/start/ScratchJrLogo.svg');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: auto 100%;
@@ -133,11 +132,9 @@ div.frame {
     top: 65%;
     left: 59%;
     margin: 0px;
-    /* width: 17%; */
-    /* height: 22%; */
-    width: 0%;
-    height: 0%;
-    /* background: url('../assets/start/helpOn.svg'); */
+    width: 17%;
+    height: 22%;
+    background: url('../assets/start/helpOn.svg');
     background-repeat: no-repeat;
     background-size: auto 100%;
     background-position-x: center;
@@ -175,8 +172,7 @@ div.frame {
 .startcode {
     position: absolute;
     top: 65%;
-    left: 42%;
-    /* left: 24%; */
+    left: 24%;
     margin: 0px;
     width: 17%;
     height: 22%;