Home Explore Help
Register Sign In
cek
/
airboardgame
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Update style

Jeremie Pardou-Piquemal 3 years ago
parent
4d9d9f68ec
commit
3047bc7c84
16 changed files with 203 additions and 94 deletions
Split View Show Diff Stats
  1. 5 0
      package-lock.json
  2. 1 0
      package.json
  3. BIN
      public/favicon.ico
  4. 3 8
      public/index.html
  5. BIN
      public/logo192.png
  6. BIN
      public/logo512.png
  7. 20 18
      src/components/BoardMenu.js
  8. 1 1
      src/components/users/UserList.js
  9. BIN
      src/images/favicon.png
  10. BIN
      src/images/favicon32x32.png
  11. BIN
      src/images/logo.png
  12. 15 6
      src/index.css
  13. 5 1
      src/index.js
  14. 57 24
      src/ui/Modal.js
  15. 44 0
      src/views/LoadSaveModal.js
  16. 52 36
      src/views/NavBar.js

+ 5 - 0
package-lock.json
View File 

@@ -7546,6 +7546,11 @@
 
         }
 
       }
 
     },
 
+    "chota": {
 
+      "version": "0.8.0",
 
+      "resolved": "https://registry.npmjs.org/chota/-/chota-0.8.0.tgz",
 
+      "integrity": "sha512-6Y6MrULPNVup+9i+bFF5mXvifw4/N0AqcTO6VkhRcmRqY0XD2/EKq2kD8y7dX/PJnDq9ruHl2NURlPtGkMSNsg=="
 
+    },
 
     "chownr": {
 
       "version": "1.1.4",
 
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",

+ 1 - 0
package.json
View File 

@@ -9,6 +9,7 @@
 
     "@welldone-software/why-did-you-render": "^4.2.5",
 
     "aws-sdk": "^2.738.0",
 
     "body-parser": "^1.19.0",
 
+    "chota": "^0.8.0",
 
     "client2client.io": "^1.3.0",
 
     "color2k": "^1.0.0-rc.5",
 
     "cors": "^2.8.5",

BIN
public/favicon.ico
View File


+ 3 - 8
public/index.html
View File 

@@ -10,12 +10,7 @@
 
     <meta name="theme-color" content="#202b38" />
 
     <meta name="description" content="Play board game online" />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <!--link
 
-      rel="stylesheet"
 
-      href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"
 
-    /-->
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic" />
 
-
 
+    <link rel="stylesheet" href="https://unpkg.com/chota@latest">
 
     <link
 
       href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap"
 
       rel="stylesheet"
 
@@ -35,9 +30,9 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>Airboardgame</title>
 
+    <title>Air board game</title>
 
   </head>
 
-  <body>
 
+  <body class="dark">
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
     <!--

BIN
public/logo192.png
View File


BIN
public/logo512.png
View File


+ 20 - 18
src/components/BoardMenu.js
View File 

@@ -78,26 +78,28 @@ const BoardMenu = ({ setShowLoadGameModal, isOpen, setMenuOpen }) => {
 
   }
 
 
   return (
 
-    <Menu
 
-      isOpen={isOpen}
 
-      styles={styles}
 
-      onStateChange={handleStateChange}
 
-      disableAutoFocus
 
-    >
 
-      <h3>{t("Save")}</h3>
 
-      <LoadLastGameLink />
 
-      <button
 
-        className="button"
 
-        onClick={() => {
 
-          setShowLoadGameModal(true);
 
-          setMenuOpen(false);
 
-        }}
 
+    <>
 
+      <Menu
 
+        isOpen={isOpen}
 
+        styles={styles}
 
+        onStateChange={handleStateChange}
 
+        disableAutoFocus
 
       >
 
-        {t("Load game")}
 
-      </button>
 
+        <h3>{t("Save")}</h3>
 
+        <LoadLastGameLink />
 
+        <button
 
+          className="button"
 
+          onClick={() => {
 
+            setShowLoadGameModal(true);
 
+            setMenuOpen(false);
 
+          }}
 
+        >
 
+          {t("Load game")}
 
+        </button>
 
 
-      <DownloadGameLink />
 
-    </Menu>
 
+        <DownloadGameLink />
 
+      </Menu>
 
+    </>
 
   );
 
 };

+ 1 - 1
src/components/users/UserList.js
View File 

@@ -7,7 +7,7 @@ import styled from "styled-components";
 
 const UserList = styled.ul.attrs(() => ({ className: "uk-card" }))`
 
   position: absolute;
 
   right: 0;
 
-  top: 3.2em;
 
+  top: 4em;
 
   background-color: #ffffff40;
 
   padding: 0.2em;
 
   list-style: none;

BIN
src/images/favicon.png
View File


BIN
src/images/favicon32x32.png
View File


BIN
src/images/logo.png
View File


+ 15 - 6
src/index.css
View File 

@@ -1,12 +1,21 @@
 
 body {
 
-  /*max-width: 100vw;*/
 
   margin: 0;
 
   padding: 0;
 
-  background-color: #202b38;
 
 }
 
 
-#root {
 
-  /*width: 100vw;
 
-  height: 100vh;
 
-  overflow: hidden;*/
 
+:root {
 
+  --bg-color: #2a2a2aff;
 
+  --bg-secondary-color: #00a698ff;
 
+  --font-color: #f9fbfaff;
 
+  --color-grey: #404040ff;
 
+  --color-darkGrey: #777;
 
+  --color-primary: #db5034ff;
 
+  --color-lightGrey: #9a9a9aff;
 
+  --color-error: #d43939;
 
+  --color-success: #28bd14;
 
+  --grid-maxWidth: 120rem;
 
+  --grid-gutter: 2rem;
 
+  --font-size: 1.6rem;
 
+  --font-family-sans: sans-serif;
 
+  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 
 }

+ 5 - 1
src/index.js
View File 

@@ -2,8 +2,12 @@ import "./wdyr";
 
 
 import React from "react";
 
 import ReactDOM from "react-dom";
 
+
 
+//import "chota/dist/chota.css";
 
 import "./index.css";
 
-import "./i18n"; // Keep this import
 
+
 
+import "./i18n"; // load translation system
 
+
 
 import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";

+ 57 - 24
src/ui/Modal.js
View File 

@@ -1,35 +1,68 @@
 
 import React from "react";
 
 
+import styled from "styled-components";
 
+
 
+const StyledModal = styled.div`
 
+  position: fixed;
 
+  z-index: 1;
 
+  left: 0;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: auto;
 
+  background-color: rgb(0, 0, 0);
 
+  background-color: rgba(0, 0, 0, 0.4);
 
+  .modal-content {
 
+    max-width: 50%;
 
+    position: relative;
 
+    margin: 10% auto;
 
+    padding: 8px 8px 8px 8px;
 
+    border-radius: 2px;
 
+    background: var(--bg-secondary-color);
 
+  }
 
+  .close {
 
+    position: absolute;
 
+    top: 0.5em;
 
+    right: 0.5em;
 
+  }
 
+`;
 
+
 
 export const Modal = ({ setShow, show, children, footer, title }) => {
 
+  console.log(show);
 
   if (!show) {
 
     return null;
 
   }
 
 
   return (
 
-    <div className="modal">
 
-      <input id="modal_1" type="checkbox" checked={show} readOnly />
 
-      <div
 
-        className="overlay"
 
-        onClick={() => {
 
-          setShow(false);
 
-        }}
 
-      ></div>
 
-      <article>
 
-        <header>
 
-          <h3>{title}</h3>
 
-          <button
 
-            onClick={() => {
 
-              setShow(false);
 
-            }}
 
-            className="close"
 
-          >
 
-            &times;
 
-          </button>
 
-        </header>
 
-        <section className="content">{children}</section>
 
-        <footer>{footer}</footer>
 
-      </article>
 
-    </div>
 
+    <StyledModal
 
+      onClick={() => {
 
+        setShow(false);
 
+      }}
 
+    >
 
+      <div className="modal-content">
 
+        <div
 
+          className="overlay"
 
+          onClick={() => {
 
+            setShow(false);
 
+          }}
 
+        ></div>
 
+        <article>
 
+          <header>
 
+            <h3 className="title">{title}</h3>
 
+            <button
 
+              onClick={() => {
 
+                setShow(false);
 
+              }}
 
+              className="close"
 
+            >
 
+              &times;
 
+            </button>
 
+          </header>
 
+          <section className="content">{children}</section>
 
+          <footer>{footer}</footer>
 
+        </article>
 
+      </div>
 
+    </StyledModal>
 
   );
 
 };

+ 44 - 0
src/views/LoadSaveModal.js
View File 

@@ -0,0 +1,44 @@
 
+import React from "react";
 
+import { useTranslation } from "react-i18next";
 
+
 
+import LoadLastGameLink from "../components/LoadLastGameLink";
 
+import DownloadGameLink from "../components/DownloadGameLink";
 
+
 
+import Modal from "../ui/Modal";
 
+
 
+const LoadSaveGameModal = ({ show, setShow }) => {
 
+  const { t } = useTranslation();
 
+
 
+  return (
 
+    <Modal
 
+      title={t("Game save")}
 
+      setShow={setShow}
 
+      show={show}
 
+      footer={
 
+        <button
 
+          onClick={() => {
 
+            setShow(false);
 
+          }}
 
+          className="button"
 
+        >
 
+          {t("Close")}
 
+        </button>
 
+      }
 
+    >
 
+      <h3>{t("Save")}</h3>
 
+      <LoadLastGameLink />
 
+      <button
 
+        className="button"
 
+        onClick={() => {
 
+          setShow(false);
 
+        }}
 
+      >
 
+        {t("Load game")}
 
+      </button>
 
+
 
+      <DownloadGameLink />
 
+    </Modal>
 
+  );
 
+};
 
+
 
+export default LoadSaveGameModal;

+ 52 - 36
src/views/NavBar.js
View File 

@@ -5,45 +5,61 @@ import { useTranslation } from "react-i18next";
 
 
 import { useC2C } from "../hooks/useC2C";
 
 
-const NavBar = ({
 
-  setMenuOpen,
 
-  setShowHelpModal,
 
-  setShowInfoModal,
 
-  setEditMode,
 
-  edit,
 
-}) => {
 
+import styled from "styled-components";
 
+
 
+import HelpModal from "../views/HelpModal";
 
+import InfoModal from "../views/InfoModal";
 
+import LoadSaveModal from "../views/LoadSaveModal";
 
+
 
+const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))``;
 
+
 
+const NavBar = ({}) => {
 
   const { t } = useTranslation();
 
 
-  const [, , isMaster] = useC2C();
 
+  const [showLoadGameModal, setShowLoadGameModal] = React.useState(false);
 
+  const [showHelpModal, setShowHelpModal] = React.useState(false);
 
+  const [showInfoModal, setShowInfoModal] = React.useState(false);
 
+
 
   return (
 
-    <nav style={{ backgroundColor: "#FFFFFF40" }}>
 
-      <span className="brand">
 
-        <Link to="/games/">
 
-          <span>{t("Back to home")}</span>
 
-        </Link>
 
-      </span>
 
-
 
-      {isMaster && (
 
-        <button
 
-          className="pseudo button"
 
-          onClick={() => setMenuOpen((prev) => !prev)}
 
-        >
 
-          {t("Menu")}
 
-        </button>
 
-      )}
 
-
 
-      <div className="menu">
 
-        <button className="pseudo" onClick={() => setEditMode((prev) => !prev)}>
 
-          {!edit ? t("Edit mode") : t("Play")}
 
-        </button>
 
-        <button onClick={() => setShowInfoModal((prev) => !prev)}>
 
-          {t("Info")}
 
-        </button>
 
-        <button onClick={() => setShowHelpModal((prev) => !prev)}>
 
-          {t("Help")}
 
-        </button>
 
-      </div>
 
-    </nav>
 
+    <>
 
+      <StyledNavBar>
 
+        <div className="nav-left">
 
+          <Link to="/games/" className="brand">
 
+            <span>{t("Home")}</span>
 
+          </Link>
 
+          <a
 
+            className="button outline"
 
+            onClick={() => setShowLoadGameModal((prev) => !prev)}
 
+          >
 
+            {t("Load/Save")}
 
+          </a>
 
+        </div>
 
+
 
+        <div className="nav-center">
 
+          <h3>Air Board Game</h3>
 
+          <a
 
+            className="button outline"
 
+            onClick={() => setShowInfoModal((prev) => !prev)}
 
+          >
 
+            {t("Info")}
 
+          </a>
 
+        </div>
 
+
 
+        <div className="nav-right">
 
+          <a
 
+            className="button outline"
 
+            onClick={() => setShowHelpModal((prev) => !prev)}
 
+          >
 
+            {t("Help")}
 
+          </a>
 
+        </div>
 
+
 
+        <div className="menu"></div>
 
+      </StyledNavBar>
 
+      <HelpModal show={showHelpModal} setShow={setShowHelpModal} />
 
+      <InfoModal show={showInfoModal} setShow={setShowInfoModal} />
 
+      <LoadSaveModal show={showLoadGameModal} setShow={setShowLoadGameModal} />
 
+    </>
 
   );
 
 };