chore: gamify

consolelabs · Mar 7, 2023 · f2b36f5 · f2b36f5 · vercel · Mar 7, 2023
1 parent 2dd3dba
commit f2b36f5
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 32 deletions.
diff --git a/components/Logs.tsx b/components/Logs.tsx
@@ -68,22 +68,19 @@ export const Logs = () => {
             return (
               <div
                 className={[
-                  "bg-blue-400 w-40 h-40 md:w-60 md:h-60 p-3 flex flex-col items-center translate-y-48 transition-all text-xl rounded-md",
+                  "bg-black/30 text-white backdrop-blur-sm card card-tl w-40 h-40 md:w-60 md:h-60 p-3 flex flex-col items-center translate-y-48 transition-all text-xl",
                   isLogsExpanded ? "!translate-y-0" : "",
                 ].join(" ")}
                 key={playerId}
               >
-                <div className="text-white text-center mb-2 md:mb-4 px-2 md:px-4">
+                <div className="text-center mb-2 md:mb-4 px-2 md:px-4">
                   {isInspecting ? <>{`P${index + 1}`}&nbsp;</> : ""} Logs
                 </div>
                 <div className="flex-1 w-full overflow-auto">
                   {historyByPlayer[playerId].length > 0 ? (
                     historyByPlayer[playerId].map((history, historyIndex) => {
                       return (
-                        <div
-                          className="bg-white p-1 text-xs"
-                          key={historyIndex}
-                        >
+                        <div className=" p-1 text-xs" key={historyIndex}>
                           {isInspecting ? `P${index + 1}` : "You"}{" "}
                           {history.action} {history.action_result}.
                           {history.got_bomb && (
@@ -111,7 +108,7 @@ export const Logs = () => {
                       );
                     })
                   ) : (
-                    <div className="bg-white h-8 p-1 mb-1 rounded-sm text-xs flex flex-col justify-center text-center">
+                    <div className="h-8 p-1 mb-1 text-xs flex flex-col justify-center text-center">
                       No logs.
                     </div>
                   )}
@@ -122,7 +119,7 @@ export const Logs = () => {
       </div>
       <button
         type="button"
-        className="bg-white rounded-md cursor-pointer absolute bottom-2 md:bottom-4 -right-8 w-6 h-6"
+        className="bg-black/60 cursor-pointer absolute bottom-2 md:bottom-4 -right-8 w-6 h-6"
         onClick={() => setIsLogsExpanded((o) => !o)}
       >
         {!isLogsExpanded ? (
@@ -133,7 +130,7 @@ export const Logs = () => {
             height="24"
           >
             <path fill="none" d="M0 0h24v24H0z" />
-            <path d="M12 8l6 6H6z" />
+            <path d="M12 8l6 6H6z" stroke="white" fill="white" />
           </svg>
         ) : (
           <svg
@@ -143,7 +140,7 @@ export const Logs = () => {
             height="24"
           >
             <path fill="none" d="M0 0h24v24H0z" />
-            <path d="M12 16l-6-6h12z" />
+            <path d="M12 16l-6-6h12z" stroke="white" fill="white" />
           </svg>
         )}
       </button>

diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
@@ -1,3 +1,6 @@
+import { noop } from "@dwarvesf/react-utils";
+import { Dialog } from "@headlessui/react";
+
 export const Modal = ({
   isOpen,
   title,
@@ -18,28 +21,29 @@ export const Modal = ({
   return (
     <>
       {isOpen ? (
-        <>
-          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-            <div className="relative w-auto md:min-w-[384px] my-6 mx-auto max-w-3xl">
+        <Dialog open={isOpen} onClose={onCancel || noop}>
+          <div className="fixed top-0 left-0 w-full h-full flex">
+            <div className="opacity-60 fixed inset-0 z-40 bg-black"></div>
+            <div className="bg-black/50 m-auto z-50 justify-center items-center flex overflow-x-hidden overflow-y-auto inset-0 outline-none focus:outline-none card card-tlbr ">
               {/*content*/}
-              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+              <div className="border-0 shadow-lg relative flex flex-col w-full outline-none focus:outline-none">
                 {/*header*/}
-                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-                  <h3 className="text-2xl font-semibold text-purple-700">
+                <div className="flex items-start justify-between p-5">
+                  <h3 className="text-white text-2xl font-semibold uppercase">
                     {title}
                   </h3>
                 </div>
                 {/*body*/}
-                <div className="relative p-6 flex-auto">
-                  <p className="my-4 text-black text-lg leading-relaxed">
+                <div className="relative p-4 flex-auto">
+                  <p className="my-4 text-white text-lg leading-relaxed">
                     {body}
                   </p>
                 </div>
                 {/*footer*/}
-                <div className="flex items-center gap-4 p-2 md:p-4 border-t border-solid border-slate-200 rounded-b">
+                <div className="flex items-center gap-4 p-2 md:p-4">
                   {onCancel && (
                     <button
-                      className="flex-1 text-red-500 background-transparent outline-none focus:outline-none ease-linear transition-all duration-150 p-2 md:p-4"
+                      className="flex-1 button secondary"
                       type="button"
                       onClick={onCancel}
                     >
@@ -48,7 +52,7 @@ export const Modal = ({
                   )}
                   {onSubmit && (
                     <button
-                      className="flex-1 bg-purple-500 text-white active:bg-purple-600 rounded shadow hover:shadow-lg outline-none focus:outline-none ease-linear transition-all duration-150 p-2 md:p-4"
+                      className="flex-1 button primary"
                       type="button"
                       onClick={onSubmit}
                     >
@@ -59,8 +63,7 @@ export const Modal = ({
               </div>
             </div>
           </div>
-          <div className="opacity-60 fixed inset-0 z-40 bg-black"></div>
-        </>
+        </Dialog>
       ) : null}
     </>
   );

diff --git a/styles/globals.css b/styles/globals.css
@@ -5,10 +5,45 @@
 :root {
   --border-size: 4px;
   --border-corner-size: 16px;
-  --border-path-tlbr: var(--border-corner-size) 0, 100% 0, 100% calc(100% - var(--border-corner-size)), calc(100% - var(--border-corner-size)) 100%, 0 100%, 0 calc(100% - var(--border-size)), calc(100% - var(--border-corner-size)) calc(100% - var(--border-size)), calc(100% - var(--border-size)) calc(100% - var(--border-corner-size)), calc(100% - var(--border-size)) var(--border-size), var(--border-corner-size) var(--border-size), var(--border-size) var(--border-corner-size), var(--border-size) calc(100% - var(--border-size)), 0 calc(100% - var(--border-size)), 0 var(--border-corner-size);
-  --border-path-br: 0 0, 100% 0, 100% calc(100% - var(--border-corner-size)), calc(100% - var(--border-corner-size)) 100%, 0 100%, 0 calc(100% - var(--border-size)), calc(100% - var(--border-corner-size)) calc(100% - var(--border-size)), calc(100% - var(--border-size)) calc(100% - var(--border-corner-size)), calc(100% - var(--border-size)) var(--border-size), var(--border-size) var(--border-size), var(--border-size) var(--border-corner-size), var(--border-size) calc(100% - var(--border-size)), 0 calc(100% - var(--border-size)), 0 0;
-  --container-path-tlbr: var(--border-corner-size) 0, 100% 0, 100% calc(100% - var(--border-corner-size)), calc(100% - var(--border-corner-size)) 100%, 0 100%, 0 var(--border-corner-size);
-  --container-path-br: 0 0, 100% 0, 100% calc(100% - var(--border-corner-size)), calc(100% - var(--border-corner-size)) 100%, 0 100%, 0 var(--border-corner-size);
+  --border-path-tlbr: var(--border-corner-size) 0, 100% 0,
+    100% calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-corner-size)) 100%, 0 100%,
+    0 calc(100% - var(--border-size)),
+    calc(100% - var(--border-corner-size)) calc(100% - var(--border-size)),
+    calc(100% - var(--border-size)) calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-size)) var(--border-size),
+    var(--border-corner-size) var(--border-size),
+    var(--border-size) var(--border-corner-size),
+    var(--border-size) calc(100% - var(--border-size)),
+    0 calc(100% - var(--border-size)), 0 var(--border-corner-size);
+  --border-path-tl: var(--border-corner-size) 0, 100% 0, 100% 100%, 0 100%,
+    0 calc(100% - var(--border-size)),
+    calc(100% - var(--border-size)) calc(100% - var(--border-size)),
+    calc(100% - var(--border-size)) calc(100% - var(--border-size)),
+    calc(100% - var(--border-size)) var(--border-size),
+    var(--border-corner-size) var(--border-size),
+    var(--border-size) var(--border-corner-size),
+    var(--border-size) calc(100% - var(--border-size)),
+    0 calc(100% - var(--border-size)), 0 var(--border-corner-size);
+  --border-path-br: 0 0, 100% 0, 100% calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-corner-size)) 100%, 0 100%,
+    0 calc(100% - var(--border-size)),
+    calc(100% - var(--border-corner-size)) calc(100% - var(--border-size)),
+    calc(100% - var(--border-size)) calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-size)) var(--border-size),
+    var(--border-size) var(--border-size),
+    var(--border-size) var(--border-corner-size),
+    var(--border-size) calc(100% - var(--border-size)),
+    0 calc(100% - var(--border-size)), 0 0;
+  --container-path-tlbr: var(--border-corner-size) 0, 100% 0,
+    100% calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-corner-size)) 100%, 0 100%,
+    0 var(--border-corner-size);
+  --container-path-tl: var(--border-corner-size) 0, 100% 0, 100% 100%, 0 100%,
+    0 var(--border-corner-size);
+  --container-path-br: 0 0, 100% 0, 100% calc(100% - var(--border-corner-size)),
+    calc(100% - var(--border-corner-size)) 100%, 0 100%,
+    0 var(--border-corner-size);
 }
 
 html,
@@ -31,12 +66,13 @@ body,
 
 .button {
   @apply px-4 py-2 font-medium uppercase font-black transition-all;
-  font-family: 'Industry';
+  font-family: "Industry";
   box-shadow: 0px 2px 2px var(--button-shadow-color);
 }
 
 .button:active {
-  box-shadow: 0 0 0 var(--button-shadow-color), inset 0 2px 2px var(--button-shadow-color);
+  box-shadow: 0 0 0 var(--button-shadow-color),
+    inset 0 2px 2px var(--button-shadow-color);
   transform: translate(0, 2px);
 }
 
@@ -46,7 +82,8 @@ body,
 }
 
 .button.secondary {
-  @apply text-black bg-cyan-500;
+  color: white;
+  background-color: #61727b;
   --button-shadow-color: #164e63;
 }
 
@@ -143,7 +180,7 @@ input[type="text"] {
 
 /* Card */
 
-.card { 
+.card {
   @apply relative;
 }
 
@@ -153,8 +190,15 @@ input[type="text"] {
   background-image: linear-gradient(to bottom right, #5b21b6, #06b6d4);
 }
 
+.card-tl {
+  clip-path: polygon(var(--container-path-tl));
+}
+
+.card-tl::before {
+  clip-path: polygon(var(--border-path-tl));
+}
+
 .card-tlbr {
-
   clip-path: polygon(var(--container-path-tlbr));
 }