big ui refractor

client/src/styles/components/kanji/_index.scss

@@ -0,0 +1,2 @@
+@use 'kanji-canvas';
+@use 'kanji-svg-viewer';

client/src/styles/components/kanji/_kanji-canvas.scss

@@ -0,0 +1,55 @@
+@use '../../abstracts' as *;
+
+.canvas-container {
+	position: relative;
+	@include flex-center;
+}
+
+.canvas-wrapper {
+	position: relative;
+	width: $size-canvas;
+	height: $size-canvas;
+	background: $color-surface;
+	border-radius: $radius-lg;
+	border: $border-width-sm solid $color-border;
+	box-shadow: $shadow-inset;
+	overflow: hidden;
+	cursor: crosshair;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		touch-action: none;
+		z-index: $z-above;
+	}
+}
+
+@keyframes shake-x {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(-0.375rem);
+	}
+	40% {
+		transform: translateX(0.375rem);
+	}
+	60% {
+		transform: translateX(-0.375rem);
+	}
+	80% {
+		transform: translateX(0.375rem);
+	}
+}
+
+.shake {
+	animation: shake-x 0.4s ease-in-out;
+	border-color: $color-danger !important;
+}

client/src/styles/components/kanji/_kanji-svg-viewer.scss

@@ -0,0 +1,161 @@
+@use '../../abstracts' as *;
+@use 'sass:color';
+
+.svg-container {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	background: $color-surface;
+	border-radius: $radius-lg;
+	border: $border-width-sm solid $color-border;
+	box-shadow: $shadow-inset;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+		border-color: $color-border;
+		border-style: dashed;
+		border-width: 0;
+		z-index: $z-normal;
+	}
+
+	&::before {
+		top: 50%;
+		left: $size-play-btn-offset;
+		right: $size-play-btn-offset;
+		border-top-width: $border-width-sm;
+	}
+
+	&::after {
+		left: 50%;
+		top: $size-play-btn-offset;
+		bottom: $size-play-btn-offset;
+		border-left-width: $border-width-sm;
+	}
+
+	&.hero-mode {
+		background: linear-gradient(145deg, $color-surface, $color-zinc-900);
+		border: $border-width-md solid $color-border;
+		box-shadow: 0 0.25rem 1.25rem hsl(0deg 0% 0% / 40%);
+
+		.stroke-path.drawn {
+			stroke: $color-text-white;
+			filter: drop-shadow(0 0 0.125rem hsl(0deg 0% 100% / 25%));
+		}
+
+		&::before,
+		&::after {
+			display: none;
+		}
+	}
+}
+
+.kanji-svg {
+	z-index: $z-above;
+	display: block;
+	padding: 12%;
+	width: 100%;
+	height: 100%;
+}
+
+.stroke-path {
+	fill: none;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: $stroke-width-main;
+	transition:
+		stroke $duration-normal ease,
+		opacity $duration-normal ease;
+
+	&.drawn {
+		stroke: $color-stroke-drawn;
+	}
+	&.hidden {
+		opacity: 0;
+	}
+	&.animating {
+		stroke: $color-primary;
+		stroke-dasharray: var(--len);
+		stroke-dashoffset: var(--len);
+		animation: draw-stroke var(--duration) linear forwards;
+	}
+}
+
+.stroke-ghost {
+	fill: none;
+	stroke: $color-stroke-inactive;
+	stroke-width: $stroke-width-main;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	opacity: 0.5;
+	stroke-dasharray: 0.625rem 0.9375rem;
+}
+
+.stroke-badge-group {
+	filter: drop-shadow(0 0.0625rem 0.125rem hsl(0deg 0% 0% / 50%));
+	pointer-events: none;
+}
+
+.stroke-badge-bg {
+	fill: $color-primary;
+	opacity: 0.9;
+	transition: transform $duration-fast ease;
+}
+
+.stroke-badge-text {
+	fill: $color-bg-dark;
+	font-size: $font-size-svg-number;
+	font-family: sans-serif;
+	font-weight: $weight-black;
+	user-select: none;
+	text-anchor: middle;
+	dominant-baseline: central;
+}
+
+.stroke-arrow-line {
+	fill: none;
+	stroke: $color-primary;
+	stroke-width: 1.5px;
+	vector-effect: non-scaling-stroke;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	pointer-events: none;
+	filter: drop-shadow(0 0 0.125rem hsl(0deg 0% 0% / 50%));
+}
+
+.play-btn {
+	position: absolute;
+	top: $size-play-btn-offset;
+	right: $size-play-btn-offset;
+	width: $size-icon-btn;
+	height: $size-icon-btn;
+	border-radius: $radius-circle;
+	background: $bg-glass-strong;
+	border: 1px solid color.change($color-primary, $alpha: 0.3);
+	color: $color-primary;
+	@include flex-center;
+	cursor: pointer;
+	z-index: $z-play-btn;
+	transition: all $duration-fast ease;
+
+	&:hover {
+		transform: scale(1.05);
+		background: color.change($color-primary, $alpha: 0.2);
+	}
+	svg {
+		width: $size-icon-small;
+		height: $size-icon-small;
+	}
+}
+
+@keyframes draw-stroke {
+	to {
+		stroke-dashoffset: 0;
+	}
+}