latest update 27 jul 24

src/components/RouletteWheel.css

@@ -0,0 +1,88 @@
+/* src/RouletteWheel.css */
+/* html,
+body,
+img {
+    overflow: hidden;
+} */
+
+.roulette-wheel-container {
+    position: fixed;
+    left: 50%;
+    /* Center the container horizontally */
+    top: 30%;
+    transform: translate(-40%, 20%);
+    scale: 3;
+    max-width: 100vw;
+    /* Limit container width to viewport width */
+    max-height: 100vh;
+    /* Limit container height to viewport height */
+    overflow: hidden;
+    /* Hide overflowing content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    -webkit-user-select: none;
+    /* Safari */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
+}
+
+.roulette-wheel {
+    width: 300px;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    border-radius: 50%;
+    transition: transform 0.2s ease-out;
+}
+
+.roulette-image {
+    width: 200px;
+    height: 200px;
+    user-select: none;
+    /* Prevents the image from being selected */
+    pointer-events: none;
+}
+
+.roulette-input {
+    position: absolute;
+    width: 30%;
+    /* Increase size for better visibility */
+    height: auto;
+    /* Increase size for better visibility */
+    border: none;
+    /* Remove border for simplicity */
+    border-radius: 5px;
+    /* Add border radius for rounded corners */
+    color: rgb(2, 2, 2);
+    /* Text color */
+    font-size: 16px;
+    /* Font size */
+    border: 2px solid #ccc;
+}
+
+.roulette-button {
+    z-index: 100;
+    position: absolute;
+    width: 30%;
+    /* Increase size for better visibility */
+    height: auto;
+    /* Increase size for better visibility */
+    border: none;
+    /* Remove border for simplicity */
+    border-radius: 5px;
+    /* Add border radius for rounded corners */
+    color: rgb(2, 2, 2);
+    /* Text color */
+    font-size: 16px;
+    /* Font size */
+    border: 2px solid #ccc;
+}
+.hidden {
+    display: none;
+}