gamedata scene

Potato22 · Jan 29, 2024 · cd31b51 · cd31b51
1 parent a4fda0a
commit cd31b51
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 10 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -216,6 +216,10 @@
   animation-delay: -1700ms;
 }
 
+.gameDataMode {
+  width: 736px !important;
+}
+
 @keyframes xWiggle {
   from {
     transform: translateX(0px);
@@ -224,6 +228,17 @@
     transform: translateX(3px);
   }
 }
+.midAlign {
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.centerButtons {
+  justify-content: center !important;
+}
+
 .menuGameplay,
 .submenu-gameplay-where,
 .submenu-gameplay-accessibility,

diff --git a/assets/css/index.scss b/assets/css/index.scss
@@ -227,6 +227,9 @@
         animation-delay: -1700ms;
     }
 }
+.gameDataMode {
+    width: 736px !important;
+}
 
 @keyframes xWiggle {
     from {
@@ -237,7 +240,15 @@
         transform: translateX(3px)
     }
 }
-
+.midAlign {
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.centerButtons {
+    justify-content: center !important;
+}
 .menuGameplay,
 .submenu-gameplay-where,
 .submenu-gameplay-accessibility,

diff --git a/assets/css/palette.scss b/assets/css/palette.scss
@@ -122,6 +122,7 @@ body {
     --ladderLimit: 0em;
 }
 
+
 .hideOrnaments {
     transform: translateX(-1024px);
 }

diff --git a/assets/css/sprites.css b/assets/css/sprites.css
@@ -178,6 +178,41 @@
   pointer-events: none;
 }
 
+.dataCardPercent {
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 0.8rem;
+  color: var(--inactiveText);
+}
+
+.dataPercentage {
+  background: red;
+  --scale: 125px;
+  width: var(--scale);
+  height: var(--scale);
+  color: var(--inactiveText);
+}
+
+.progress {
+  position: absolute;
+  transform: translate(0px, -12px);
+  text-align: center;
+  font-size: 1.5em;
+  color: var(--inactiveText);
+}
+
+.dataPercentageNotation {
+  transform: translateY(10px);
+}
+
+.dataName {
+  padding-left: 12rem;
+}
+.dataName .dataSlot {
+  font-size: 1.7em;
+  line-height: 0.8;
+}
+
 .grid {
   z-index: -5;
   transform: scale(2);

diff --git a/assets/css/sprites.scss b/assets/css/sprites.scss
@@ -52,6 +52,7 @@
     animation: iconData var(--spinner) infinite alternate linear;
 }
 
+
 @keyframes iconSpinner {
     from {
         transform: rotate(0deg);
@@ -191,6 +192,36 @@
     }
 }
 
+.dataCardPercent {
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: .8rem;
+    color: var(--inactiveText);
+}
+.dataPercentage {
+    background: red;
+    --scale: 125px;
+    width: var(--scale);
+    height: var(--scale);
+    color: var(--inactiveText);
+}
+.progress {
+    position: absolute;
+    transform: translate(0px, -12px);
+    text-align: center;
+    font-size: 1.5em;
+    color: var(--inactiveText);
+}
+.dataPercentageNotation {
+    transform: translateY(10px);
+}
+.dataName {
+    padding-left: 12rem;
+    & .dataSlot {
+        font-size: 1.7em;
+        line-height: .8;
+    }
+}
 
 .grid {
     z-index: -5;

diff --git a/assets/js/buttons.js b/assets/js/buttons.js
@@ -167,6 +167,7 @@ $(() => {
                     hideOrnaments();
                 }, ornamentDelay);
                 setTimeout(() => {
+                    centerButtons(true)
                     sceneEnter();
                 }, enterDelay);
                 break;
@@ -234,6 +235,7 @@ $(() => {
                         $(prevSceneName).removeClass('buttonEnter')
                         unhideOrnaments();
                         $('.pageName').html(scenePageName)
+                        centerButtons(false)
                     }, 200);
                 }, 200);
                 break;
@@ -327,6 +329,15 @@ $(() => {
         $('#screenOrnaments').removeClass('hideOrnaments');
     }
 
+    function centerButtons(state) {
+        if (state == true) {
+            $('#buttonArrayInline').addClass('centerButtons');
+        } else {
+            $('#buttonArrayInline').removeClass('centerButtons');
+        }
+    }
+
+
     function bgmChanger(bgmTarget) {
         updateVolumeValues()
         console.log("changing to bgm", bgmTarget, "...")

diff --git a/assets/js/driver.mjs b/assets/js/driver.mjs
@@ -67,7 +67,7 @@ $(() => {
 
     })
     //DEBUG:: SKIP
-    //debugSkipIntro();
+    debugSkipIntro();
 
     $('#shutdown').on('click', function () {
         $('.wrapper').css('pointer-events', 'none');
@@ -103,7 +103,7 @@ function debugSkipIntro() {
     $('.cover').css('display', 'none');
     $('.grid, #buttonArrayInline, #screenOrnaments, .bglive').show();
     $('.fader').attr('started', 'true');
-    enter.play(), bgm.play()
+    enter.play(), //bgm.play()
     $('.logoSplash').css({
         'opacity': '0'
     })

diff --git a/...Potto - Retro Style UX Animation - Settings [JW4epapyoT4 - 937x703 - 0m27s].png b/...Potto - Retro Style UX Animation - Settings [JW4epapyoT4 - 937x703 - 0m27s].png
diff --git a/assets/sprites/datacard.svg b/assets/sprites/datacard.svg
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
     <script src="assets/js/buttons.js" type="module" defer></script>
     <!-- <script src="assets/js/soundVolHandler.mjs" type="module"></script> -->
     <script src="assets/js/driver.mjs" type="module"></script>
-    
+
     <script defer>
         var readyState = false
         minload();
@@ -147,7 +147,7 @@
                     <div class="pageName light">SETTINGS</div>
                 </div>
             </div>
-            <div id="buttonArrayInline">
+            <div id="buttonArrayInline" class="">
                 <div class="menuButtons initMenu">
                     <div button-state=false class="buttonComponent" buttonData="gameplay">
                         <div class="buttonText">GAMEPLAY</div>
@@ -261,8 +261,7 @@
                         </svg>
                         <div class="buttonHighlight highlightToggle" toggle-marker="true">ON</div>
                     </div>
-                    <div button-state=false class="buttonComponent" buttonData="dark" toggle=true
-                        toggleData="dark">
+                    <div button-state=false class="buttonComponent" buttonData="dark" toggle=true toggleData="dark">
                         <div class="buttonText">D A R K</div>
                         <svg class="menuButton" width="455.84" height="100.27" version="1.1" viewBox="0 0 120.61 26.53">
                             <g transform="translate(-48.458 -55.241)">
@@ -320,9 +319,28 @@
                     </div>
                 </div>
                 <!-- GAME DATA -->
-                <div class="menuButtons menuGameData buttonEnter">
-                    <div button-state=false class="buttonComponent" buttonData="?">
-                        <div class="buttonText">placeholder</div>
+                <div class="menuButtons menuGameData buttonEnter midAlign noladder">
+                    <div button-state=false class="buttonComponent gameDataMode" buttonData="subButton" buttonInherit="gameData"
+                        subButtonData="accessibility">
+                        <div class="dataCardPercent buttonText">
+                            <div class="dataPercentage"></div>
+                            <div class="progress">100</div>
+                            <div class="dataPercentageNotation">%</div>
+                        </div>
+                        <div class="dataName buttonText">
+                            <div class="dataSlot">SLOT1</div>
+                            <div class="dataChapter">M20 - DETHRONE</div>
+                        </div>
+                        <svg class="menuButton " width="1159.5341" height="267" version="1.1"
+                            viewBox="0 0 306.78901 70.644">
+                            <path
+                                d="M 0.5220551,0.52554628 V 70.119204 H 306.26695 V 11.615189 L 295.37868,0.52479628 Z" />
+                        </svg>
+
+                        <div class="buttonHighlight"></div>
+                    </div>
+                    <div button-state=false class="buttonComponent" buttonData="subButton" buttonInherit="gameData"
+                        subButtonData="where">
                         <svg class="menuButton" width="455.84" height="100.27" version="1.1" viewBox="0 0 120.61 26.53">
                             <g transform="translate(-48.458 -55.241)">
                                 <path d="m48.808 55.591h36.179l5.2075 2.8655h67.347l11.175 8.2343v14.73h-119.91z" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -122,6 +122,7 @@ body { @@
         --ladderLimit: 0em;
     }
     .hideOrnaments {
         transform: translateX(-1024px);
     }
@@ Expand Down @@