Platform mechanism and tutorial optimizations

DreymaR · Nov 26, 2023 · 194afbb · 194afbb
1 parent a71135c
commit 194afbb
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 39 deletions.
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
@@ -1,10 +1,10 @@
 <nav id="navbar">
  <div id="platforms">
  <div class="platform-picker">
- <a id="win"></a>
- <a id="linux"></a>
- <a id="tmk"></a>
- <a id="mac"></a>
+ <a id="win"><div class="tooltip">Windows/EPKL</div></a>
+ <a id="linux"><div class="tooltip">Linux/XKB</div></a>
+ <a id="tmk"><div class="tooltip">MacOS</div></a>
+ <a id="mac"><div class="tooltip">Controllers/TMK</div></a>
  </div>
  </div>
 

diff --git a/docs/content/styles/main.css b/docs/content/styles/main.css
@@ -109,6 +109,10 @@ table td p.legend {
  left: 120px;
 }
 
+#tutorialScreen2 #tutorialClose {
+ left: 118px;
+}
+
 #tutorialPlatform {
  position: absolute;
  left: 20px;
@@ -130,10 +134,9 @@ table td p.legend {
  height: 38px;
  position: absolute;
  top: 13px;
- right: 0;
+ left: 68px;
  font-weight: bold;
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
+ border-radius: 20px;
  background-color: #FFF;
 }
 
@@ -157,10 +160,21 @@ table td p.legend {
  border: 3px solid #AA77BB;
 }
 
-div[class="platform-box"],
-.platform-box.platform-box-empty {
- border: none;
- border-top: 3px solid #AA77BB;
+div[class="platform-box"]:after,
+div[class="platform-box platform-box-empty"]:after,
+.platform-box.platform-box-empty.win:after,
+.platform-box.platform-box-empty.linux:after,
+.platform-box.platform-box-empty.tmk:after,
+.platform-box.platform-box-empty.mac:after {
+ content: "No extra info on this topic for the chosen platform.";
+ display: block;
+ margin: 14px 0 0;
+ color: #696969;
+}
+
+div[class="platform-box"]:after,
+div[class="platform-box platform-box-empty"]:after {
+ content: "Select a platform to see more specific info, if available.";
 }
 
 .platform-box[class='platform-box'] .platform-toggle,
@@ -306,7 +320,7 @@ div[class="platform-box"],
  top: 59px;
  width: 100px;
  height: 105px;
- padding: 5px 5px 5px 13px;
+ padding: 28px 5px 5px 13px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
@@ -324,6 +338,21 @@ div[class="platform-box"],
  transition: all .15s ease-in-out;
 }
 
+.platform-picker:not(.mini):before,
+.platform-picker.mini:after {
+ content: "Choose a platform";
+ position: absolute;
+ top: 8px;
+ margin-left: -5px;
+ font-size: 11px;
+ font-weight: bold;
+ color: #FFF;
+}
+
+.platform-picker.mini:after {
+ margin-left: -8px;
+}
+
 .platform-picker #linux {
  background-image: url("../img/linux_gray.svg");
 }
@@ -344,17 +373,51 @@ div[class="platform-box"],
  background-image: url("../img/mac_gray.svg");
 }
 
+.platform-picker a {
+ position: relative;
+}
+
+.platform-picker .tooltip {
+ position: absolute;
+ top: calc(100% + 15px);
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #5b5b5b;
+ color: #F7F7F7;
+ border-radius: 5px;
+ padding: 8px;
+ display: none;
+ z-index: 1;
+}
+
+.platform-picker .tooltip::before {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #5b5b5b;
+ top: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.platform-picker a:hover .tooltip {
+ display: block;
+}
+
 .platform-picker.mini {
  top: 45px;
  right: unset;
  left: -28px;
  width: 90px;
  height: 95px;
- padding: 5px 5px 5px 9px;
+ padding: 28px 8px 5px 14px;
  border-radius: 20px;
 }
 
-.platform-picker.mini :before {
+.platform-picker.mini:before {
  content: '';
  display: block;
  width: 0;
@@ -1018,14 +1081,6 @@ kbd {
  width: 181px;
  }
 
- #tutorialClose {
- left: 0;
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
-
  #navbar {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;

diff --git a/docs/scripts/main.js b/docs/scripts/main.js
@@ -24,23 +24,28 @@ document.onload = function () {
  platform = localStorage.getItem('platform');
  }
 
- if (!localStorage.getItem('website_visited')) {
- drawTutorialScreen();
- }
-
  togglePlatform(platform, true);
 
- let platformsElement = document.getElementById('platforms');
- platformsElement.addEventListener('mouseover', function () {
- if (!localStorage.getItem('platforms_opened')) {
- drawTutorialScreen(2);
- }
- });
- platformsElement.addEventListener('touchstart', function () {
- if (!localStorage.getItem('platforms_opened')) {
- drawTutorialScreen(2);
+
+ let isTouchscreen = window.matchMedia('(pointer: coarse)').matches;
+ if (isTouchscreen) {
+ if (!localStorage.getItem('website_visited')) {
+ drawTutorialScreen();
  }
- });
+
+
+ let platformsElement = document.getElementById('platforms');
+ platformsElement.addEventListener('mouseover', function () {
+ if (!localStorage.getItem('platforms_opened')) {
+ drawTutorialScreen(2);
+ }
+ });
+ platformsElement.addEventListener('touchstart', function () {
+ if (!localStorage.getItem('platforms_opened')) {
+ drawTutorialScreen(2);
+ }
+ });
+ }
 
  hookPlatformToggleOnClick(platforms);
  hookSpoilersToggleOnClick([].slice.call(document.getElementsByClassName('spoiler'))); 
@@ -324,9 +329,9 @@ function drawTutorialScreen(tutorialNumber = 1) {
  closeButton.id = 'tutorialCloseButton';
 
  if (tutorialNumber == 1) {
- updateTutorialPosition(null, [platformIcon, arrow, text]);
+ updateTutorialPosition(null, [platformIcon, arrow, text, closeDiv]);
  } else {
- updateTutorialPosition(null, [platformIcon, arrow, text], 2);
+ updateTutorialPosition(null, [platformIcon, arrow, text, closeDiv], 2);
  }
 
  window.addEventListener('resize', updateTutorialPosition);
@@ -367,20 +372,28 @@ function updateTutorialPosition(event = null, existingTutorialElements = false,
  tutorialPlatformIcon = document.getElementById('tutorialPlatform');
  tutorialArrow = document.getElementById('tutorialArrow');
  tutorialText = document.getElementById('tutorialText');
+ tutorialClose = document.getElementById('tutorialClose');
  } else {
  tutorialPlatformIcon = existingTutorialElements[0];
  tutorialArrow = existingTutorialElements[1];
  tutorialText = existingTutorialElements[2];
+ tutorialClose = existingTutorialElements[3];
  }
 
+ setTimeout(() => {
+ tutorialCloseTop = tutorialText.offsetTop + tutorialText.offsetHeight + 20;
+ tutorialClose.style.top = tutorialCloseTop + 'px';
+ }, 0);
+
  if (window.innerWidth >= 1100) {
  if (tutorialPlatformIcon && platformsElement) {
  tutorialPlatformIconLeft = platformsElement.offsetLeft - offsetLeftCorrection;
  tutorialPlatformIcon.style.left = tutorialPlatformIconLeft + 'px';
  tutorialArrow.style.left = tutorialPlatformIconLeft - 80 + 'px';
  tutorialArrow.style.transform = 'scaleX(-1)';
  tutorialText.style.left = tutorialPlatformIconLeft - 230 + 'px';
-
+ tutorialCloseLeft = platformsElement.offsetLeft + platformsElement.offsetWidth / 2 - offsetLeftCorrection - 45;
+ tutorialClose.style.left = tutorialCloseLeft + 'px';
  }
  } else {
  tutorialPlatformIcon.style.removeProperty('top');
@@ -390,6 +403,7 @@ function updateTutorialPosition(event = null, existingTutorialElements = false,
  tutorialArrow.style.removeProperty('transform');
  tutorialText.style.removeProperty('top');
  tutorialText.style.removeProperty('left');
+ tutorialClose.style.removeProperty('left');
  }
 }