ricochet toy

packages/website/src/components/TankopediaToys/index.module.css

@@ -0,0 +1,151 @@
+.visualizer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: none;
+  border-radius: inherit;
+  background-color: var(--gray-2);
+}
+
+.armor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 33%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, var(--gray-a4));
+}
+
+.armor-texture {
+  width: 100%;
+  height: 100%;
+  opacity: 0.125;
+  background-image: url("/media/random/armor-hash.png");
+}
+
+.zones {
+  position: absolute;
+  top: 0;
+  left: 33%;
+  width: 67%;
+  height: 100%;
+  background: conic-gradient(
+    at 0 50%,
+    var(--ruby-a2),
+    var(--ruby-a1) calc(90deg - var(--ricochet-angle)),
+    var(--jade-a2) calc(90deg - var(--ricochet-angle)),
+    var(--jade-a4) calc(90deg - var(--normalization-angle)),
+    var(--cyan-a5) calc(90deg - var(--normalization-angle)),
+    var(--cyan-a3) calc(90deg + var(--normalization-angle)),
+    var(--jade-a2) calc(90deg + var(--normalization-angle)),
+    var(--jade-a4) calc(90deg + var(--ricochet-angle)),
+    var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
+    var(--ruby-a2) 180deg
+  );
+}
+
+.shell-path,
+.effective-path {
+  position: absolute;
+  top: 50%;
+  left: 33%;
+  transform: translateX(-50%) rotate(var(--rotation-angle));
+  transform-origin: top center;
+}
+
+.shell-path {
+  width: 0;
+  height: 100%;
+}
+
+.shell-path-extension {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  width: var(--space-0);
+  height: 100%;
+  transform: translateX(-50%);
+  background-color: var(--gray-a8);
+}
+
+.shell-path-line {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--space-2);
+  height: 100%;
+  transform: translateX(-50%);
+  background: linear-gradient(var(--gray-a11), var(--gray-a4));
+}
+
+.shell {
+  position: absolute;
+  top: 6rem;
+  left: 0;
+  width: var(--space-5);
+  height: var(--space-5);
+  object-fit: contain;
+  transform: translate(-50%, -50%) rotate(-45deg);
+  filter: drop-shadow(0 0 var(--space-4) black);
+}
+
+.effective-path {
+  width: 0;
+  height: 100%;
+}
+
+.effective-path-line {
+  position: absolute;
+  left: 50%;
+  top: -100%;
+  width: var(--space-2);
+  height: 100%;
+  transform: translateX(-50%);
+  background: linear-gradient(var(--gray-a4), var(--gray-a11));
+}
+
+.corner-stat {
+  position: absolute;
+  display: flex;
+  gap: var(--space-2);
+  color: var(--gray-11);
+  font-size: var(--font-size-minor);
+}
+
+.corner-stat-value {
+  color: var(--gray-12);
+  font-size: inherit;
+}
+
+.corner-stat[data-position="top-left"] {
+  top: var(--space-3);
+  left: var(--space-3);
+}
+
+.corner-stat[data-position="top-right"] {
+  top: var(--space-3);
+  right: var(--space-3);
+}
+
+.corner-stat[data-position="bottom-left"] {
+  bottom: var(--space-3);
+  left: var(--space-3);
+}
+
+.corner-stat[data-position="bottom-right"] {
+  right: var(--space-3);
+  bottom: var(--space-3);
+}
+
+.explosive-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  color: var(--gray-11);
+  text-align: center;
+  background: radial-gradient(var(--black-a7), var(--black-a11));
+}