From f2c794c44c1f550dcc9c9f6fdcf1a7349601518e Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Wed, 27 Jul 2022 20:19:49 +0200
Subject: [PATCH] start working on dice loading screen

---
 client/src/routes/cube.svelte | 41 +++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 client/src/routes/cube.svelte

diff --git a/client/src/routes/cube.svelte b/client/src/routes/cube.svelte
new file mode 100644
index 0000000..3f63329
--- /dev/null
+++ b/client/src/routes/cube.svelte
@@ -0,0 +1,41 @@
+<script>
+    const radius = 10;
+</script>
+
+<div class="dice">
+    <svg width="100" height="100" class="front">
+        <circle cx="50" cy="50" r={radius} fill="black" />
+    </svg>
+    <svg width="100" height="100" class="top">
+        <circle cx="33" cy="33" r={radius} fill="black" />
+        <circle cx="66" cy="66" r={radius} fill="black" />
+    </svg>
+    <svg width="100" height="100" class="left">
+        <circle cx="30" cy="30" r={radius} fill="black" />
+        <circle cx="50" cy="50" r={radius} fill="black" />
+        <circle cx="70" cy="70" r={radius} fill="black" />
+    </svg>
+</div>
+
+<style>
+    svg {
+        border-radius: 5px;
+        border: 1px solid black;
+        box-shadow: 0 0 2px black;
+        position: absolute;
+    }
+    .front {
+        transform: translateZ(50px);
+    }
+    .top {
+        transform: translateZ(50px) rotateX(90deg);
+    }
+    .left {
+        transform: translateZ(50px) rotateY(-90deg);
+    }
+    .dice {
+        margin-top: 20px;
+        margin-left: 20px;
+        position: relative;
+    }
+</style>
\ No newline at end of file