Skip to content

Commit

Permalink
feat: enhance checkbox styling and layout for sound and ROM compatibi…
Browse files Browse the repository at this point in the history 
…lity settings
  • Loading branch information
@franciscodelahoz
franciscodelahoz committed Nov 4, 2024
1 parent 30c2687 commit 51191dd
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 34 deletions.
80 changes: 48 additions & 32 deletions src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,12 @@ <h2 class="configuration-title">General Settings</h2>
<h2 class="configuration-title">Sound Settings</h2>
<ul class="quirks-list">
<li>
<label>
<input type="checkbox" name="sound-state-checkbox" id="sound-state-checkbox">
Enable/Disable sound
</label>
<div class="checkbox-container-centered">
<input type="checkbox" name="sound-state-checkbox" id="sound-state-checkbox" class="default-checkbox">
<label class="checkbox-label">
Enable/Disable sound
</label>
</div>
</li>
<li>
<label class="block-item">
Expand All @@ -99,46 +101,60 @@ <h2 class="configuration-title">Sound Settings</h2>
<h2 class="configuration-title">ROM Compatibility</h2>
<ul class="quirks-list">
<li>
<label>
<input type="checkbox" name="vf-quirk-checkbox" id="vf-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="vfQuirk">
The AND, OR and XOR opcodes reset the flags register to zero.
</label>
<div class="checkbox-container">
<input type="checkbox" name="vf-quirk-checkbox" id="vf-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="vfQuirk">
<label class="checkbox-label">
The AND, OR and XOR opcodes reset the flags register to zero.
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="memory-quirk-checkbox" id="memory-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="memoryQuirk">
The save and load opcodes (Fx55 and Fx65) increment the index register.
</label>
<div class="checkbox-container">
<input type="checkbox" name="memory-quirk-checkbox" id="memory-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="memoryQuirk">
<label class="checkbox-label">
The save and load opcodes (Fx55 and Fx65) increment the index register.
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="display-wait-quirk-checkbox" id="display-wait-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="displayWaitQuirk">
Drawing sprites to the display waits for the vertical blank interrupt, limiting their speed to max 60 sprites per second.
</label>
<div class="checkbox-container">
<input type="checkbox" name="display-wait-quirk-checkbox" id="display-wait-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="displayWaitQuirk">
<label class="checkbox-label">
Drawing sprites to the display waits for the vertical blank interrupt, limiting their speed to max 60 sprites per second.
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="clipping-quirk-checkbox" id="clipping-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="clipQuirks">
Sprites drawn at the bottom edge of the screen get clipped instead of wrapping around to the top of the screen.
</label>
<div class="checkbox-container">
<input type="checkbox" name="clipping-quirk-checkbox" id="clipping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="clipQuirks">
<label class="checkbox-label">
Sprites drawn at the bottom edge of the screen get clipped instead of wrapping around to the top of the screen.
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="shifting-quirk-checkbox" id="shifting-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="shiftQuirk">
The shift opcodes only operate on vX instead of storing the shifted version of vY in vX
</label>
<div class="checkbox-container">
<input type="checkbox" name="shifting-quirk-checkbox" id="shifting-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="shiftQuirk">
<label class="checkbox-label">
The shift opcodes only operate on vX instead of storing the shifted version of vY in vX
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="jumping-quirk-checkbox" id="jumping-quirk-checkbox" class="quirk-checkbox" data-quirk-property-name="jumpQuirks">
The Bnnn instruction doesn't use v0, but vX instead where X is the highest nibble of nnn
</label>
<div class="checkbox-container">
<input type="checkbox" name="jumping-quirk-checkbox" id="jumping-quirk-checkbox" class="quirk-checkbox default-checkbox" data-quirk-property-name="jumpQuirks">
<label class="checkbox-label">
The Bnnn instruction doesn't use v0, but vX instead where X is the highest nibble of nnn
</label>
</div>
</li>
<li>
<label>
<input type="checkbox" name="zero-height-sprite-lores-quirk" id="zero-height-sprite-lores-quirk" class="quirk-checkbox" data-quirk-property-name="zeroHeightSpriteLoresQuirk">
Adjusts for ROMs that define sprite height as zero in low-resolution mode, interpreting it as a height of 8 pixels.
</label>
<div class="checkbox-container">
<input type="checkbox" name="zero-height-sprite-lores-quirk" id="zero-height-sprite-lores-quirk" class="quirk-checkbox default-checkbox" data-quirk-property-name="zeroHeightSpriteLoresQuirk">
<label class="checkbox-label">
Adjusts for ROMs that define sprite height as zero in low-resolution mode, interpreting it as a height of 8 pixels.
</label>
</div>
</li>
</ul>
</section>
Expand Down
64 changes: 62 additions & 2 deletions src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,64 @@ input[type='range']::-moz-range-thumb {
transition: .2s ease-in-out;
}

.checkbox-container {
display: flex;
align-items: flex-start;
font-family: verdana;
}

.checkbox-container-centered {
display: flex;
align-items: center;
font-family: verdana;
}

.default-checkbox {
-webkit-appearance: none;
appearance: none;
width: 17px;
height: 17px;
border: 2px solid #CCCCCC;
background-color: #222222;
outline: none;
cursor: pointer;
margin-right: 8px;
position: relative;
flex-shrink: 0;
margin-top: 3px;
border-radius: 5px;
}

.default-checkbox:checked {
border-color: #34ff66;
}

.default-checkbox:checked::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='%2334ff66'><rect x='5' y='5' width='14' height='14' rx='3' ry='3' /></svg>") no-repeat center center;
}

.checkbox-label {
user-select: none;
margin: 0;
}

.default-checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.default-checkbox:disabled + .checkbox-label {
opacity: 0.5;
cursor: not-allowed;
}

.keyboard-indicator {
position: absolute;
bottom: 0.01em;
Expand Down Expand Up @@ -293,10 +351,11 @@ input[type='range']::-moz-range-thumb {

.configuration-title {
color: #34ff66;
font-size: 1rem;
font-size: 0.95rem;
text-align: center;
padding: 5px;
background-color: #222;
background-color: #222222;
font-family: Verdana;
}

.configuration-subtitle {
Expand All @@ -312,6 +371,7 @@ input[type='range']::-moz-range-thumb {
.configuration-content > section > ul > li {
font-size: .78em;
margin: 0.8rem auto;
font-family: Verdana;
}

.configuration-subsection {
Expand Down

0 comments on commit 51191dd

Please sign in to comment.