Skip to content

Commit

Permalink
made check boxes not lame
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaintSampo
SaintSampo committed Feb 15, 2024
1 parent b7545fe commit 6104455
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 96 deletions.
35 changes: 13 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,39 +42,30 @@
<div class="container" id="interface">
<button id="ButtonBLE">CONNECT</button>
<div id="settings-grid">
<div class="settings-box">Mobile Layout</div>
<div class="settings-label">Mobile Layout</div>

<div class="settings-box">
<label class="settings-toggle">
<input type="checkbox" id="toggle-gamepad-layout"><span
class="round-toggle round"></span></input>
</label>
<div class="settings-toggle">
<div id="toggle-mobile-layout" class="toggle-round"><div class="toggle-nub"></div></div>
</div>

<div class="settings-box">Override axes <br> with WASD</div>
<div class="settings-label">Override axes <br> with WASD</div>

<div class="settings-box">
<label class="settings-toggle">
<input type="checkbox" id="toggle-keyboard-style"><span
class="round-toggle round"></span></input>
</label>
<div class="settings-toggle">
<div id="toggle-keyboard-style" class="toggle-round"><div class="toggle-nub"></div></div>
</div>

<div class="settings-box">Old packet style (for robots coded before 2-14-24)</div>
<div class="settings-label">Old packet style (for robots coded before 2-14-24)</div>

<div class="settings-box">
<label class="settings-toggle">
<input type="checkbox" id="toggle-legacy"><span class="round-toggle round"></span></input>
</label>
<div class="settings-toggle">
<div id="toggle-legacy" class="toggle-round"><div class="toggle-nub"></div></div>
</div>

<div class="settings-box">Help/Info!</div>
<div class="settings-label">Help/Info!</div>

<div class="settings-box">
<label class="settings-toggle">
<input type="checkbox" id="toggle-info"><span class="round-toggle round"></span></input>
</label>
<div class="settings-toggle">
<div id="toggle-info" class="toggle-round"><div class="toggle-nub"></div></div>
</div>

</div>
</div>

Expand Down
104 changes: 52 additions & 52 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,89 +7,89 @@ let gamepadAgent = createGamepadAgent();
let axisCallback = null
let buttonCallback = null



let mobileElements = document.getElementsByClassName("mobile-only");
let desktopElements = document.getElementsByClassName("desktop-only");
let infoElement = document.getElementById("info-container");
let hackSpacerElement = document.getElementById("hack-spacer");

let toggleGamepad = document.getElementById('toggle-gamepad-layout');
let toggleKeyboard = document.getElementById('toggle-keyboard-style');
let toggleLegacy = document.getElementById('toggle-legacy');
let toggleMobile = document.getElementById('toggle-mobile-layout');
let toggleKeyboardWASD = document.getElementById('toggle-keyboard-style');
let toggleLegacyPacket = document.getElementById('toggle-legacy');
let toggleInfo = document.getElementById('toggle-info');

// --------------------------- state management ------------------------------------ //

if (localStorage.getItem('layout') == null) {
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
if (isMobile) {
localStorage.setItem('layout', 'mobile');
} else {
localStorage.setItem('layout', 'gamepad');
}
}
//if (localStorage.getItem('mobileLayout') == null) {
// let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
// if (isMobile) {
// localStorage.setItem('mobileLayout', 'true');
// } else {
// localStorage.setItem('mobileLayout', 'false');
// }
//}

document.addEventListener('DOMContentLoaded', function () {

if (localStorage.getItem('layout') == 'mobile') toggleGamepad.checked = true;
updateLayout();
toggleGamepad.addEventListener('change', updateLayout);

if (localStorage.getItem('keyboardStyle') == 'wasdAxes') toggleKeyboard.checked = true;
updateKeyboardStyle();
toggleKeyboard.addEventListener('change', updateKeyboardStyle);

if (localStorage.getItem('legacyPacket') == 'true') toggleLegacy.checked = true;
updateLegacyStyle();
toggleLegacy.addEventListener('change', updateLegacyStyle);

if (localStorage.getItem('showInfo') == 'true') toggleInfo.checked = true;
updateInfo();
toggleInfo.addEventListener('change', updateInfo);
toggleMobile.onclick = updateMobileSlider.bind(null, toggleMobile, true);
toggleKeyboardWASD.onclick = updateSlider.bind(null, toggleKeyboardWASD, true);
toggleLegacyPacket.onclick = updateSlider.bind(null, toggleLegacyPacket, true);
toggleInfo.onclick = updateInfoSlider.bind(null, toggleInfo, true);

if (localStorage.getItem(toggleMobile.id) === 'true') updateMobileSlider(toggleMobile, false);
if (localStorage.getItem(toggleKeyboardWASD.id) === 'true') updateSlider(toggleKeyboardWASD, false);
if (localStorage.getItem(toggleLegacyPacket.id) === 'true') updateSlider(toggleLegacyPacket, false);
if (localStorage.getItem(toggleInfo.id) === 'true') updateInfoSlider(toggleInfo, false);
});

function updateLayout() {
if (toggleGamepad.checked) {
localStorage.setItem('layout', 'mobile');
function updateMobileSlider(sliderElement, toggleState){
updateSlider(sliderElement, toggleState);

if (localStorage.getItem(toggleMobile.id) === 'true') {
for (let element of desktopElements) element.style.display = "none";
for (let element of mobileElements) element.style.display = "grid";
axisCallback = axisAgent.getAxes
buttonCallback = buttonAgent.getButtons
} else {
localStorage.setItem('layout', 'gamepad');

for (let element of mobileElements) element.style.display = "none";
for (let element of desktopElements) element.style.display = "grid";
axisCallback = gamepadAgent.getAxes
buttonCallback = gamepadAgent.getButtons
}
}

function updateKeyboardStyle() {
if (toggleKeyboard.checked) {
localStorage.setItem('keyboardStyle', 'wasdAxes');
function updateInfoSlider(sliderElement, toggleState){
updateSlider(sliderElement, toggleState);

if (localStorage.getItem(toggleInfo.id) === 'true') {
infoElement.style.display = "grid";
hackSpacerElement.style.display = "none";
} else {
localStorage.setItem('keyboardStyle', 'default');
infoElement.style.display = "none";
hackSpacerElement.style.display = "grid";
}
}

function updateLegacyStyle() {
if (toggleLegacy.checked) {
localStorage.setItem('legacyPacket', 'true');
} else {
localStorage.setItem('legacyPacket', 'false');
function updateSlider(sliderElement, toggleState){
if(toggleState){
if ( localStorage.getItem(sliderElement.id) === 'true') {
localStorage.setItem(sliderElement.id, 'false');
} else {
localStorage.setItem(sliderElement.id, 'true');
}
}
}

function updateInfo() {
if (toggleInfo.checked) {
localStorage.setItem('showInfo', 'true');
infoElement.style.display = "grid";
hackSpacerElement.style.display = "none";
if ( localStorage.getItem(sliderElement.id) === 'true') {
sliderElement.style.backgroundColor = 'var(--alf-green)';
sliderElement.firstElementChild.style.transform = 'translateX(2vw)';
sliderElement.firstElementChild.style.webkitTransform = 'translateX(2vw)';
sliderElement.firstElementChild.style.msTransform = 'translateX(2vw)';

} else {
localStorage.setItem('showInfo', 'false');
hackSpacerElement.style.display = "grid";
infoElement.style.display = "none";
sliderElement.style.backgroundColor = 'rgb(189, 188, 188)';
sliderElement.firstElementChild.style.transform = 'none';
sliderElement.firstElementChild.style.webkitTransform = 'none';
sliderElement.firstElementChild.style.msTransform = 'none';
}
}

Expand Down Expand Up @@ -129,7 +129,7 @@ function renderLoop() {

function clampUint8(value) { return Math.max(0, Math.min(value, 255)) }

if (localStorage.getItem('keyboardStyle') == 'wasdAxes') {
if (localStorage.getItem(toggleKeyboardWASD.id) === 'true') {
for (let key of keyboardArray) {
if (key === 27 || key === 41) rawPacket[1] = clampUint8(rawPacket[1] - 128);
if (key === 29 || key === 37) rawPacket[1] = clampUint8(rawPacket[1] + 128);
Expand All @@ -142,7 +142,7 @@ function renderLoop() {
}
}

if (localStorage.getItem('legacyPacket') == 'true') {
if (localStorage.getItem(toggleLegacyPacket.id) === 'true') {
rawPacket[0] = rawPacket[1]
rawPacket[1] = rawPacket[2]
rawPacket[2] = rawPacket[3]
Expand Down
28 changes: 6 additions & 22 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ body {
padding-left: 2vw;
border-radius: 2vw;
font-size: 1vw;
height: 40vw;
}

#hack-spacer {
Expand Down Expand Up @@ -193,15 +192,17 @@ body {
grid-template-columns: 2fr 1fr;
background-color: grey;
border-radius: 1vw;
justify-content: center;
align-items: center;
text-align: center;
}

.settings-box {
.settings-label {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.2vw;

}

.settings-toggle {
Expand All @@ -212,13 +213,7 @@ body {
touch-action: manipulation;
}

.settings-toggle input {
opacity: 0;
width: 0;
height: 0;
}

.round-toggle {
.toggle-round {
position: absolute;
cursor: pointer;
top: 0;
Expand All @@ -229,11 +224,7 @@ body {
border-radius: 3vw;
}

input:checked+.round-toggle {
background-color: var(--alf-green);
}

.round-toggle:before {
.toggle-nub {
position: absolute;
content: "";
height: 2vw;
Expand All @@ -242,11 +233,4 @@ input:checked+.round-toggle {
bottom: 0.5vw;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}

input:checked+.round-toggle:before {
-webkit-transform: translateX(2vw);
-ms-transform: translateX(2vw);
transform: translateX(2vw);
}

0 comments on commit 6104455

Please sign in to comment.