Initial commit

src/components/ReloadButton.js

+import React from "react";
+import retry from "../images/retry.png";
+
+function RealoadButton({ onRestart }) {
+  return (
+    <button onClick={onRestart} className="restart-button">
+      <img className="retry" src={retry} alt="retry" />
+    </button>
+  );
+}
+
+export default RealoadButton;

src/index.js

+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

src/styles/main.css

+body {
+  font-family: "Arial", sans-serif;
+  background-color: #6d6d6d;
+  margin: 0;
+  width: 100%;
+}
+
+.header {
+  width: 100%;
+  height: 15vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #313131;
+  color: white;
+}
+
+.game-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  background-color: #0077cc;
+  padding: 10px;
+  border-radius: 0 0 10px 10px;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+  width: 70vh;
+  height: 60vh;
+}
+
+.column {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.cell {
+  width: 100%;
+  height: 0;
+  padding-top: 100%;
+  background-color: white;
+  border-radius: 50%;
+  position: relative;
+  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
+}
+
+.cell:before {
+  background-color: #6d6d6d95;
+  content: "";
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  right: 10%;
+  bottom: 10%;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+}
+
+.cell.rouge:before {
+  background-color: red;
+}
+
+.cell.jaune:before {
+  background-color: #ffe102;
+}
+
+.message {
+  margin-top: 20px;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 1.2em;
+  color: #333;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+}
+
+.players {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-top: 7vh;
+}
+
+.player {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 20vh;
+  color: white;
+  border-radius: 10px;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  font-weight: bold;
+  background-color: #969696;
+}
+
+.current-player {
+  background-color: #313131;
+}
+
+.jeton {
+  width: 10vh;
+  height: 10vh;
+  border-radius: 50%;
+  margin-bottom: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.475);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.retry {
+  width: 10vh;
+  height: 10vh;
+  border-radius: 50%;
+}
+
+.retry:hover {
+  animation: rotate 0.7s;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10vh;
+}
+
+.bonus-count {
+  font-size: large;
+  font-weight: bold;
+}
+
+/* hover du jeton avec un zoom */
+
+.current-player > .jeton:hover {
+  transform: scale(1.1);
+}
+
+/* hover de la colonne avec un zoom */
+
+.cell:hover {
+  transform: scale(1.04);
+}
+
+.reverse-button .switch {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  width: 30px;
+}
+
+.switch:hover {
+  transform: scale(1.15);
+}
+
+.reversal-buttons {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.grid-prime {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.switch-home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  background-color: #313131;
+}
+
+.switch-home > .restart-button > .retry {
+  width: 5vh;
+  height: 5vh;
+}