From 5cea1fc6a8cefde0235af6afca21ceedf432e3ea Mon Sep 17 00:00:00 2001 From: DumitruDruta Date: Sun, 19 Nov 2023 16:55:53 +0100 Subject: [PATCH 1/2] Light-Dark theme switch --- package-lock.json | 23 ++++++++++++++++++----- package.json | 4 ++-- src/App.js | 15 ++++++++++++++- src/styles.css | 28 ++++++++++++++++++++++++++++ 4 files changed, 62 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index d4acebb..69f74e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", - "react-scripts": "^5.0.0" + "react-scripts": "^5.0.0", + "react-switch": "^7.0.0" }, "devDependencies": {} }, @@ -14072,6 +14073,18 @@ } } }, + "node_modules/react-switch": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz", + "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -15953,16 +15966,16 @@ } }, "node_modules/typescript": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", - "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { diff --git a/package.json b/package.json index 2c033c3..a686f46 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", - "react-scripts": "^5.0.0" + "react-scripts": "^5.0.0", + "react-switch": "^7.0.0" }, "main": "/index.js", - "devDependencies": {}, "name": "vy6j3f", "description": null, "version": "0.0.0", diff --git a/src/App.js b/src/App.js index 18de78c..025a53f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,7 @@ import { useState } from 'react'; +import ReactSwitch from 'react-switch'; + + function Square({ value, onSquareClick }) { return ( @@ -57,6 +60,11 @@ export default function Game() { const [currentMove, setCurrentMove] = useState(0); const xIsNext = currentMove % 2 === 0; const currentSquares = history[currentMove]; + const [theme, setTheme] = useState("dark"); + + const toggleTheme = () => { + setTheme((curr) => (curr === "light" ? "dark": "light")); + } function handlePlay(nextSquares) { const nextHistory = [...history.slice(0, currentMove + 1), nextSquares]; @@ -83,7 +91,10 @@ export default function Game() { }); return ( -
+ +
+ +
@@ -91,6 +102,8 @@ export default function Game() {
    {moves}
+ + ); } diff --git a/src/styles.css b/src/styles.css index 9365e74..1b920c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,6 +2,9 @@ box-sizing: border-box; } + + + body { font-family: sans-serif; margin: 20px; @@ -88,3 +91,28 @@ body { .game-info { margin-left: 20px; } + +#light { + color: #000; + background-color: #fff; +} + +#light .square { + color: #000; + background-color: #fff; +} + +#dark { + color: #fff; + background-color: #000000; +} + +#dark .square { + color: #fff; + background-color: #000000; +} + +#dark button { + color: #fff; + background-color: #5c5c5c; +} From ca707d72067f876151d62e04bdb1716f2ed51390 Mon Sep 17 00:00:00 2001 From: DumitruDruta Date: Wed, 22 Nov 2023 15:10:39 +0100 Subject: [PATCH 2/2] Prettier code formating --- src/App.js | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 025a53f..21d63f6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,5 @@ -import { useState } from 'react'; -import ReactSwitch from 'react-switch'; - - +import { useState } from "react"; +import ReactSwitch from "react-switch"; function Square({ value, onSquareClick }) { return ( @@ -18,9 +16,9 @@ function Board({ xIsNext, squares, onPlay }) { } const nextSquares = squares.slice(); if (xIsNext) { - nextSquares[i] = 'X'; + nextSquares[i] = "X"; } else { - nextSquares[i] = 'O'; + nextSquares[i] = "O"; } onPlay(nextSquares); } @@ -28,9 +26,9 @@ function Board({ xIsNext, squares, onPlay }) { const winner = calculateWinner(squares); let status; if (winner) { - status = 'Winner: ' + winner; + status = "Winner: " + winner; } else { - status = 'Next player: ' + (xIsNext ? 'X' : 'O'); + status = "Next player: " + (xIsNext ? "X" : "O"); } return ( @@ -63,8 +61,8 @@ export default function Game() { const [theme, setTheme] = useState("dark"); const toggleTheme = () => { - setTheme((curr) => (curr === "light" ? "dark": "light")); - } + setTheme((curr) => (curr === "light" ? "dark" : "light")); + }; function handlePlay(nextSquares) { const nextHistory = [...history.slice(0, currentMove + 1), nextSquares]; @@ -79,9 +77,9 @@ export default function Game() { const moves = history.map((squares, move) => { let description; if (move > 0) { - description = 'Go to move #' + move; + description = "Go to move #" + move; } else { - description = 'Go to game start'; + description = "Go to game start"; } return (
  • @@ -91,10 +89,9 @@ export default function Game() { }); return ( - -
    - - +
    + +
    @@ -102,8 +99,6 @@ export default function Game() {
      {moves}
    - - ); }