Skip to content

Commit

Permalink
Theme support init
Browse files Browse the repository at this point in the history
  • Loading branch information
Sadanand Pai committed Oct 1, 2023
1 parent 0ac8a03 commit dfc6da8
Show file tree
Hide file tree
Showing 37 changed files with 349 additions and 139 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/icons/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Algo Visualizer</title>
<style data-id="animation-element"></style>
Expand Down
File renamed without changes
1 change: 1 addition & 0 deletions public/icons/moon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
3 changes: 3 additions & 0 deletions public/icons/sun.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
19 changes: 9 additions & 10 deletions src/apps/sorting-visualizer/components/bar/bar-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import { UIProps } from "@/apps/sorting-visualizer/models/interfaces";
import classes from "./bar.module.scss";
import { colors } from "@/apps/sorting-visualizer/config";
import { useMemo } from "react";

function BarUI({ array, sortPositions, highlightPositions, pivot }: UIProps) {
function BarUI({ array, sorts, highlights, pivot }: UIProps) {
const max = useMemo(() => Math.max(...array), [array]);

function getBarColor(idx: number) {
let backgroundColor = "";
let cellClass = "";

if (pivot === idx) {
backgroundColor = colors.pivot;
cellClass = "pivot";
}

if (highlightPositions.includes(idx)) {
backgroundColor = colors.highlight;
if (sorts.includes(idx)) {
cellClass = "sort";
}

if (sortPositions.includes(idx)) {
backgroundColor = colors.sort;
if (highlights.includes(idx)) {
cellClass = "highlight";
}

return backgroundColor;
return cellClass;
}

return (
Expand All @@ -30,9 +29,9 @@ function BarUI({ array, sortPositions, highlightPositions, pivot }: UIProps) {
{array.map((item, idx) => (
<li
key={idx}
className={classes[getBarColor(idx)]}
style={{
height: `${(item / max) * 100}%`,
backgroundColor: getBarColor(idx),
}}
></li>
))}
Expand Down
14 changes: 9 additions & 5 deletions src/apps/sorting-visualizer/components/bar/bar.module.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
@use "/src/apps/sorting-visualizer/styles/cell-colors";

.arrayContainer {
position: relative;
padding: 25px 0 40px;
overflow-x: auto;
position: relative;

.values {
display: flex;
align-items: flex-end;
height: var(--bar-max-height);

li {
border: 1px solid var(--bar-bg);
flex-shrink: 1;
width: var(--bar-size);
min-width: var(--bar-min-size);
background-color: var(--bar-bg);
flex-shrink: 1;
margin: 0 calc(var(--bar-margin) / 2);
background-color: var(--color-bar);
border: 1px solid var(--color-bar);
}

@include cell-colors.sort-status-colors;
}

.indices {
Expand All @@ -27,9 +31,9 @@
opacity: 0.4;

li {
flex-shrink: 1;
width: var(--bar-size);
min-width: var(--bar-min-size);
flex-shrink: 1;
margin: 0 calc(var(--bar-margin) / 2);
}
}
Expand Down
26 changes: 13 additions & 13 deletions src/apps/sorting-visualizer/components/cell/cell-ui.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,34 @@ import classes from "./cell.module.scss";

const CellUI = function CellUI({
array,
swapPositions,
sortPositions,
highlightPositions,
movePositions,
swaps,
sorts,
highlights,
moves,
pivot,
}: UIProps) {
function getCell(idx: number, item: number) {
if (swapPositions.includes(idx)) {
if (swaps.includes(idx)) {
return (
<SwappingCell
key={idx}
originalOrder={idx}
order={swapPositions[0] === idx ? swapPositions[1] : swapPositions[0]}
order={swaps[0] === idx ? swaps[1] : swaps[0]}
value={item}
isHighlighted={highlightPositions.includes(idx)}
isHighlighted={highlights.includes(idx)}
/>
);
}

if (movePositions && idx >= movePositions[0] && idx <= movePositions[1]) {
if (moves && idx >= moves[0] && idx <= moves[1]) {
return (
<MovingCell
key={idx}
originalOrder={idx}
order={idx === movePositions[0] ? movePositions[1] : idx - 1}
isSwap={idx === movePositions[0]}
order={idx === moves[0] ? moves[1] : idx - 1}
isSwap={idx === moves[0]}
value={item}
isHighlighted={highlightPositions.includes(idx)}
isHighlighted={highlights.includes(idx)}
/>
);
}
Expand All @@ -43,8 +43,8 @@ const CellUI = function CellUI({
key={idx}
order={idx}
value={item}
isSorted={sortPositions.includes(idx)}
isHighlighted={highlightPositions.includes(idx)}
isSorted={sorts.includes(idx)}
isHighlighted={highlights.includes(idx)}
isPivot={idx === pivot}
/>
);
Expand Down
11 changes: 9 additions & 2 deletions src/apps/sorting-visualizer/components/cell/cell.module.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use "/src/styles/theme";
@use "/src/apps/sorting-visualizer/styles/cell-colors";

.arrayContainer {
position: relative;
padding: 0 20px;
Expand All @@ -15,10 +18,14 @@
width: var(--cell-size);
height: var(--cell-size);
margin: 0 calc(var(--cell-margin) / 2);
border: 1px solid black;
color: black;
background-color: white;
border: 1px solid theme.$base;
border-radius: 4px;
box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
box-shadow: 0 4px 4px theme.$shadow1;
}

@include cell-colors.sort-status-colors;
}

.indices {
Expand Down
16 changes: 7 additions & 9 deletions src/apps/sorting-visualizer/components/cell/cell.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CellProps } from "@/apps/sorting-visualizer/models/interfaces";
import classes from "./cell.module.scss";
import { colors } from "@/apps/sorting-visualizer/config";

function Cell({
order,
Expand All @@ -10,27 +9,26 @@ function Cell({
isHighlighted = false,
isPivot = false,
}: CellProps) {
let backgroundColor = "";
let cellClass = "";

if (isPivot) {
backgroundColor = colors.pivot;
cellClass = "pivot";
}

if (isHighlighted) {
backgroundColor = colors.highlight;
if (isSorted) {
cellClass = "sort";
}

if (isSorted) {
backgroundColor = colors.sort;
if (isHighlighted) {
cellClass = "highlight";
}

return (
<li
className={classes.cell}
className={`${classes.cell} ${classes[cellClass]}`}
style={{
animation,
order,
backgroundColor,
}}
>
{value}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "/src/styles/theme";

.controllerWrapper {
padding: 0 20px;
margin-bottom: 16px;
Expand All @@ -12,9 +14,11 @@
gap: 16px;

.arrayInput {
width: 100%;
flex: 1;
width: 100%;
padding: 5px;
color: black;
background-color: white;
border: 1px solid black;
border-radius: 4px;
}
Expand All @@ -27,7 +31,7 @@
.rndmBtn {
padding: 5px 10px;
color: white;
background-color: #2b4bfe;
background-color: theme.$primary;
border: none;
border-radius: 4px;
}
Expand Down Expand Up @@ -86,9 +90,9 @@

.switchContainer {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
gap: 20px;
}

@media screen and (width >= 960px) {
Expand All @@ -100,3 +104,16 @@
}
}
}

@media screen and (prefers-color-scheme: dark) {
img {
filter: invert(1);
}
}

[data-theme="dark"] {
/* stylelint-disable-next-line no-descending-specificity */
.controllerWrapper img {
filter: invert(1);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
import { useAppDispatch, useAppSelector } from "@/store/hooks";

import classes from "./controls.module.scss";
import pauseIcon from "/pause.svg";
import playIcon from "/play.svg";
import resetIcon from "/reset.svg";
import pauseIcon from "/icons/pause.svg";
import playIcon from "/icons/play.svg";
import resetIcon from "/icons/reset.svg";
import { useEffect } from "react";

function Execution() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,19 @@ function TypeSwitch() {

return (
<div className={classes.switchContainer}>
Cell
<label>Cell</label>
<Switch
id="visualizerType"
onChange={() => dispatch(toggleVisualizerType())}
checked={visualizerType === "bar"}
checkedIcon={false}
uncheckedIcon={false}
height={20}
width={40}
offColor="#2b4bfe"
onColor="#2b4bfe"
/>
Bar
<label>Bar</label>
</div>
);
}
Expand Down
31 changes: 24 additions & 7 deletions src/apps/sorting-visualizer/components/navbar/navbar.module.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
@use "/src/styles/theme";

.navbar {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
margin-bottom: 24px;
box-shadow: 0 4px 4px rgb(0 0 0 / 15%);
box-shadow: 0 4px 4px theme.$shadow1;

img {
width: 25px;
Expand Down Expand Up @@ -33,8 +35,8 @@
width: 100%;
padding-bottom: 12px;
list-style: none;
background-color: white;
box-shadow: 0 4px 4px rgb(0 0 0 / 15%);
background-color: theme.$background;
box-shadow: 0 4px 4px theme.$shadow1;

&[data-toggle="false"] {
display: none;
Expand All @@ -43,23 +45,22 @@
li {
width: 100%;
padding: 10px;
background-color: white;

a {
display: block;
width: auto;
padding: 8px;
padding: 8px 6px;
text-transform: capitalize;
border-radius: 8px;
}

a.active {
color: white;
background-color: rgb(255 64 0);
background-color: theme.$primary;
}

a:hover {
outline: 1px solid rgb(255 163 132);
outline: 1px solid theme.$primary;
}
}
}
Expand All @@ -86,3 +87,19 @@
}
}
}

@media screen and (prefers-color-scheme: dark) {
.navbar {
img {
filter: invert(1);
}
}
}

[data-theme="dark"] {
.navbar {
img {
filter: invert(1);
}
}
}
Loading

0 comments on commit dfc6da8

Please sign in to comment.