manuel/labyrinth-frontend
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Some fiddling, but also version upgrades and a new button for downloading a pdf version of the current maze.
Some checks reported errors
continuous-integration/drone/push Build encountered an error
Details

Browse source
This commit is contained in:
Manuel Friedli 2026-01-24 05:30:33 +01:00
parent 79467e29f2
commit b6359bcb5d
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
21 changed files with 2002 additions and 927 deletions
Download patch file Download diff file Expand all files Collapse all files

186
src/app/cell.scss Normal file
View file

@ -0,0 +1,186 @@
.solution {
background-color: var(--color-maze-cell-solution);
&:hover {
background-color: var(--color-maze-cell-solution-highlight);
}
}
.top {
border-top-color: var(--color-maze-border);
}
.right {
border-right-color: var(--color-maze-border);
}
.bottom {
border-bottom-color: var(--color-maze-border);
}
.left {
border-left-color: var(--color-maze-border);
}
.userSELF {
background: radial-gradient(
ellipse 16% 16% at center,
var(--color-maze-cell-user) 0,
var(--color-maze-cell-user) 100%,
#0000 100%
);
&.solution {
background: radial-gradient(
ellipse 16% 16% at center,
var(--color-maze-cell-user-solution) 0,
var(--color-maze-cell-user-solution) 100%,
#0000 100%
);
&:hover {
background: radial-gradient(
ellipse 33% 33% at center,
var(--color-maze-cell-user-solution) 0,
var(--color-maze-cell-user-solution) 80%,
#0000 100%
);
}
}
&:hover {
background: radial-gradient(
ellipse 33% 33% at center,
var(--color-maze-cell-user) 0,
var(--color-maze-cell-user) 80%,
#0000 100%
);
}
}
.marker {
display: inline-block;
position: absolute;
&:hover {
background: #fc08;
}
}
.userUP .marker.UP {
height: 50%;
width: 100%;
background: linear-gradient(
90deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user) 33%,
var(--color-maze-cell-user) 66%,
#0000 66%,
#0000 100%
);
}
.solution.userUP .marker.UP {
height: 50%;
width: 100%;
background: linear-gradient(
90deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user-solution) 33%,
var(--color-maze-cell-user-solution) 66%,
#0000 66%,
#0000 100%
);
}
.userRIGHT .marker.RIGHT {
height: 100%;
width: 50%;
left: 50%;
background: linear-gradient(
0deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user) 33%,
var(--color-maze-cell-user) 66%,
#0000 66%,
#0000 100%
);
}
.solution.userRIGHT .marker.RIGHT {
height: 100%;
width: 50%;
left: 50%;
background: linear-gradient(
0deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user-solution) 33%,
var(--color-maze-cell-user-solution) 66%,
#0000 66%,
#0000 100%
);
}
.userDOWN .marker.DOWN {
height: 50%;
width: 100%;
top: 50%;
background: linear-gradient(
90deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user) 33%,
var(--color-maze-cell-user) 66%,
#0000 66%,
#0000 100%
);
}
.solution.userDOWN .marker.DOWN {
height: 50%;
width: 100%;
top: 50%;
background: linear-gradient(
90deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user-solution) 33%,
var(--color-maze-cell-user-solution) 66%,
#0000 66%,
#0000 100%
);
}
.userLEFT .marker.LEFT {
height: 100%;
width: 50%;
background: linear-gradient(
0deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user) 33%,
var(--color-maze-cell-user) 66%,
#0000 66%,
#0000 100%
);
}
.solution.userLEFT .marker.LEFT {
height: 100%;
width: 50%;
background: linear-gradient(
0deg,
#0000 0,
#0000 33%,
var(--color-maze-cell-user-solution) 33%,
var(--color-maze-cell-user-solution) 66%,
#0000 66%,
#0000 100%
);
}