Cleanup

css/main.css

@@ -1,4 +1,3 @@
-@import "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css";
 @import url("https://fonts.googleapis.com/css2?family=Handjet:wght@700&display=swap");
 @tailwind base;
 @tailwind components;
@@ -25,7 +24,7 @@ html {
 }
 
 #mapScreen {
-  @apply pt-12 px-6 pb-0;
+  @apply pt-12 px-6 pb-0 absolute top-0 left-0 w-full h-full bg-neutral-900;
   background-image: url(./img/twinkle.gif);
   background-size: cover;
   position: relative;
@@ -39,9 +38,8 @@ html {
   z-index: 0;
   grid-template-areas:
     ". p1 . p2 ."
-    "p3 . . . p4"
-    ". . p5 . ."
-    "p6 . . . p7";
+    "p3 . p5 . p4"
+    ". . p6 . .";
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(4, 1fr);
   gap: 10px;
@@ -110,6 +108,13 @@ html {
 body[data-tags~="map-screen"] {
   padding: 0;
 }
+body.customization {
+  @apply pt-12 px-6 pb-0 absolute top-0 left-0 w-full h-full bg-neutral-900 text-neutral-400;
+  background-image: url(./img/twinkle.gif);
+}
+body.customization h1 {
+  @apply text-4xl font-bold text-neutral-100;
+}
 tw-story {
   max-width: 100vw;
   line-height: normal;
@@ -122,40 +127,55 @@ tw-story {
   z-index: 10; /* Make sure it's above other elements */
 }
 
+.planet-container {
+  position: relative;
+  display: inline-block; /* or your preferred display type */
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 100%; /* Adjust to position above the image */
+  left: 50%; /* Center horizontally */
+  transform: translate(-50%, -10px); /* Adjust to fine-tune the position */
+  white-space: nowrap; /* Keep the tooltip text on one line */
+  /* Add your styles for padding, background, etc. */
+}
+
 .planet {
   width: 100px;
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
   margin: 0 auto;
+}
+.planet-container {
   display: flex;
   align-self: center;
 }
-
 .planet:hover {
   transform: scale(1.1);
 }
 
-.planet1 {
+.planet-container1 {
   grid-area: p1;
 }
-.planet2 {
+.planet-container2 {
   grid-area: p2;
 }
-.planet3 {
+.planet-container3 {
   grid-area: p3;
 }
-.planet4 {
+.planet-container4 {
   grid-area: p4;
 }
-.planet5 {
+.planet-container5 {
   grid-area: p5;
 }
-.planet6 {
+.planet-container-player {
   grid-area: p6;
 }
-.planet7 {
+/* .planet-container7 {
   grid-area: p7;
-}
+} */
 
 #sidebar ul {
   @apply p-0 list-none;
@@ -168,3 +188,50 @@ tw-story {
 #sidebar li:hover {
   background-color: #555;
 }
+
+#tooltips {
+  @apply absolute top-0 left-0 z-50 w-full h-full pointer-events-none;
+}
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip {
+  @apply absolute font-mono whitespace-nowrap bg-black text-neutral-300 px-2 py-1 text-3xl rounded-md;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -10px);
+}
+
+/* Tooltip arrow */
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+/* Show the tooltip text when you hover over the tooltip container */
+.tooltip-container:hover .tooltip-text {
+  visibility: visible;
+}
+
+.customization-form label {
+  @apply text-neutral-100;
+}
+.customization-form div {
+  @apply mt-4;
+}
+.customization-text-input {
+  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+}
+.customization-textarea {
+  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+}

package.json

@@ -10,14 +10,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-nesting": "^12.0.1",
     "tailwindcss": "^3.3.5"
-  },
-  "dependencies": {
-    "flowbite": "^2.0.0"
   }
 }

tailwind.config.js

@@ -2,7 +2,6 @@
 module.exports = {
   content: [
     "./twine_src/**/*.{html,js,twee}",
-    "./node_modules/flowbite/**/*.js",
   ],
   theme: {
     extend: {
@@ -13,5 +12,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography"), require("flowbite/plugin")],
+  plugins: [require("@tailwindcss/typography"), require('@tailwindcss/forms')],
 };