dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 22:46:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add brightness sliders for grid lines and intersection dots

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-23 19:47:01 +11:00
parent c2f8e8687b
commit f35b25b903
2 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@@ -155,6 +155,51 @@
<div class="board" id="gameBoard"></div> <div class="board" id="gameBoard"></div>
</div> </div>
<!-- Grid Brightness Controls -->
<div class="grid-controls">
<div class="control-group">
<label for="gridLineOpacity">Grid Lines</label>
<input
type="range"
id="gridLineOpacity"
min="0.1"
max="1"
step="0.1"
value="0.3"
/>
</div>
<div class="control-group">
<label for="dotOpacity">Intersections</label>
<input
type="range"
id="dotOpacity"
min="0.1"
max="1"
step="0.1"
value="0.4"
/>
</div>
</div>
<script>
const gridLineSlider = document.getElementById("gridLineOpacity");
const dotOpacitySlider = document.getElementById("dotOpacity");
gridLineSlider.addEventListener("input", (e) => {
document.documentElement.style.setProperty(
"--grid-line-opacity",
e.target.value
);
});
dotOpacitySlider.addEventListener("input", (e) => {
document.documentElement.style.setProperty(
"--grid-dot-opacity",
e.target.value
);
});
</script>
<!-- Multiplayer Panel --> <!-- Multiplayer Panel -->
<div <div
id="multiplayerPanel" id="multiplayerPanel"

6
styles.css
View File

@@ -16,7 +16,9 @@
--border-medium: rgba(255, 255, 255, 0.2); --border-medium: rgba(255, 255, 255, 0.2);
--success: #10b981; --success: #10b981;
--danger: #ef4444; --danger: #ef4444;
--grid-line: rgba(147, 51, 234, 0.3); --grid-line-opacity: 0.3;
--grid-dot-opacity: 0.4;
--grid-line: rgba(147, 51, 234, var(--grid-line-opacity));
--grid-bg: #0f1420; --grid-bg: #0f1420;
--cell-hover: rgba(147, 51, 234, 0.1); --cell-hover: rgba(147, 51, 234, 0.1);
--win-highlight: hsl(270, 70%, 60%); --win-highlight: hsl(270, 70%, 60%);
@@ -342,7 +344,7 @@ body {
height: 4px; height: 4px;
background: var(--grid-line); background: var(--grid-line);
border-radius: 50%; border-radius: 50%;
opacity: 0.4; opacity: var(--grid-dot-opacity);
} }
.cell:hover:not(.occupied) { .cell:hover:not(.occupied) {