dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-07-05 19:20:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

start working on dice loading screen

Browse source
This commit is contained in:
Daniel Bulant 2022-07-27 20:19:49 +02:00
parent 0d969e838a
commit f2c794c44c
1 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
client/src/routes/cube.svelte Normal file
View file

@ -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>