Skip to content
This repository was archived by the owner on Aug 20, 2025. It is now read-only.

dark mode #33

Merged
FreddyMSchubert merged 16 commits into from
Aug 20, 2025
Merged

dark mode #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d02c19d
format html also
FreddyMSchubert Aug 19, 2025
3062070
format css also
FreddyMSchubert Aug 19, 2025
785993a
improved dark mode & fullscreen button positioning
FreddyMSchubert Aug 19, 2025
171dc46
clarify which coordinate is x and y in tooltip positions display
FreddyMSchubert Aug 19, 2025
b89d18c
update all the svgs for ui and gameplay to not manually specify a fil…
FreddyMSchubert Aug 19, 2025
b3b42ec
fix not all svgs iwhtout specified fill from previous commit
FreddyMSchubert Aug 19, 2025
28cfb4e
a lot of css is kinda broken but yes the basic dark mode swithc works…
FreddyMSchubert Aug 19, 2025
0354fa8
fix broken svg sizing
FreddyMSchubert Aug 19, 2025
42ba9b5
basic readability functional again, almost done with everything outsi…
FreddyMSchubert Aug 19, 2025
599fb15
refactor theme colors and button styles for improved accessibility
FreddyMSchubert Aug 19, 2025
d6545ca
dark mode grid and objects
flomero Aug 20, 2025
a66bc8d
status colors in dark mode
flomero Aug 20, 2025
1177e12
various css dark mode tweaks, no more gridlines
FreddyMSchubert Aug 20, 2025
a69f79b
text shadow behind colored tooltip lines for improved readability
FreddyMSchubert Aug 20, 2025
8dcbbaf
lower opacity outline icon units & core for clearer visual team diffe…
FreddyMSchubert Aug 20, 2025
27396c7
automatic user device color scheme detection and loading
FreddyMSchubert Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 125 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,150 @@
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>⚡️ Core Game Visualizer</title>
<script>
(function () {
try {
var o = localStorage.getItem('ui.theme');
var m = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var t = (o === 'dark' || o === 'light') ? o : (m ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', t);
} catch (_) {}
})();
</script>
<link rel="stylesheet" href="/src/css/styles.css" />
</head>
<body>
<script type="module" src="/src/ts/renderer/fireworksRenderer.ts"></script>
<script
type="module"
src="/src/ts/renderer/fireworksRenderer.ts"
></script>
<script type="module" src="/src/ts/main.ts"></script>

<div class="container">
<div class="top-bar">
<!-- Fullscreen Toggle Button -->
<button
id="fullscreen-toggle-button"
class="icon-button icon-left"
title="Toggle Fullscreen"
aria-label="Toggle Fullscreen"
aria-pressed="false"
>
<img
id="fullscreen-icon"
src="/assets/ui-svgs/fullscreen-open.svg"
alt="Enter Fullscreen"
/>
</button>

<!-- Time controls box -->
<div id="time-controls" class="time-controls">
<div class="controls-bar">
<button id="prev-tick-button"><img src="/assets/ui-svgs/tick_previous.svg" alt="Previous Tick" /></button>
<div id="time-controls" class="control-panel">
<div class="control-row">
<button id="prev-tick-button">
<img
src="/assets/ui-svgs/tick_previous.svg"
alt="Previous Tick"
/>
</button>
<div class="slider-group">
<label for="tick-timeline-slider">Ticks</label>
<input type="range" id="tick-timeline-slider" min="0" max="100" value="0" />
<input
type="range"
id="tick-timeline-slider"
min="0"
max="100"
value="0"
/>
</div>
<input type="number" id="tick-timeline-number-input" min="0" max="100" value="0" />
<button id="next-tick-button"><img src="/assets/ui-svgs/tick_next.svg" alt="Next Tick" /></button>
<input
type="number"
id="tick-timeline-number-input"
min="0"
max="100"
value="0"
/>
<button id="next-tick-button">
<img
src="/assets/ui-svgs/tick_next.svg"
alt="Next Tick"
/>
</button>
</div>
<div class="main-buttons">
<button id="skip-start-button"><img src="/assets/ui-svgs/skip_start.svg" alt="Jump to Start" /></button>
<button id="play-pause-button"><img src="/assets/ui-svgs/play.svg" alt="Play/Pause" id="playPauseIcon" /></button>
<button id="skip-end-button"><img src="/assets/ui-svgs/skip_end.svg" alt="Jump to End" /></button>

<div class="control-row primary">
<button id="skip-start-button">
<img
src="/assets/ui-svgs/skip_start.svg"
alt="Jump to Start"
/>
</button>
<button id="play-pause-button">
<img
src="/assets/ui-svgs/play.svg"
alt="Play/Pause"
id="playPauseIcon"
/>
</button>
<button id="skip-end-button">
<img
src="/assets/ui-svgs/skip_end.svg"
alt="Jump to End"
/>
</button>
</div>
<div class="controls-bar">
<button id="speed-down-button"><img src="/assets/ui-svgs/speed_down.svg" alt="Decrease Playback Speed" /></button>

<div class="control-row">
<button id="speed-down-button">
<img
src="/assets/ui-svgs/speed_down.svg"
alt="Decrease Playback Speed"
/>
</button>
<div class="slider-group">
<label for="speed-slider">Ticks/sec</label>
<input type="range" id="speed-slider" min="0.5" max="20" step="0.5" value="5" />
<input
type="range"
id="speed-slider"
min="0.5"
max="20"
step="0.5"
value="5"
/>
</div>
<input type="number" id="speed-number-input" min="0.5" max="20" step="0.5" value="5" />
<button id="speed-up-button"><img src="/assets/ui-svgs/speed_up.svg" alt="Increase Playback Speed" /></button>
<input
type="number"
id="speed-number-input"
min="0.5"
max="20"
step="0.5"
value="5"
/>
<button id="speed-up-button">
<img
src="/assets/ui-svgs/speed_up.svg"
alt="Increase Playback Speed"
/>
</button>
</div>
</div>

<!-- Dark Mode Toggle Button -->
<button
id="theme-toggle-button"
class="icon-button icon-right"
title="Toggle Theme"
aria-label="Toggle Theme"
aria-pressed="false"
>
<img
id="theme-icon"
src="/assets/ui-svgs/dark-mode-moon.svg"
alt="Toggle Theme"
/>
</button>
</div>

<!-- SVG Output Canvas -->
Expand Down Expand Up @@ -65,10 +172,6 @@ <h3 id="winreason"></h3>
<a href="https://coregame.de/" target="_blank">
<button id="corner-top-right" class="corner-button"></button>
</a>

<button id="fullscreen-toggle-button" class="floating-control" title="Toggle Fullscreen" aria-label="Toggle Fullscreen" aria-pressed="false">
<img id="fullscreen-icon" src="/assets/ui-svgs/fullscreen-open.svg" alt="Enter Fullscreen" />
</button>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"fireworks-js": "^2.10.8"
},
"lint-staged": {
"*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
"*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,css}": [
"biome check --write --no-errors-on-unmatched"
]
}
Expand Down
2 changes: 1 addition & 1 deletion public/assets/object-svgs/bomb.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/assets/object-svgs/cores/1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/assets/object-svgs/cores/2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions public/assets/object-svgs/resource.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions public/assets/object-svgs/units/bomberman/1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions public/assets/object-svgs/units/bomberman/2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/assets/object-svgs/units/builder/1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading