diff --git a/src/app.jsx b/src/app.jsx index 5d6972b..1f12d13 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,9 +1,11 @@ import MainMenu from "./mainMenu"; +import Game from "./game"; export default () => { return (
- + {/* */} +
); }; diff --git a/src/game.jsx b/src/game.jsx new file mode 100644 index 0000000..f52c6c3 --- /dev/null +++ b/src/game.jsx @@ -0,0 +1,79 @@ +import logo from "../assets/logo.svg"; +import restart from "../assets/icon-restart.svg"; + +import Cross from "../assets/icon-x.svg?react"; +import Oval from "../assets/icon-o.svg?react"; +import CrossOutline from "../assets/icon-x-outline.svg?react"; +import OvalOutline from "../assets/icon-o-outline.svg?react"; + +export default () => { + const grid = ["", "X", "O", "X", "O", "X", "", "O", "X"]; + + const renderSymbol = (symbol) => { + let Component; + let colorClass; + + if (symbol == "X") { + Component = Cross; + colorClass = "text-blue-700"; + } else if (symbol == "O") { + Component = Oval; + colorClass = "text-yellow-700"; + } else { + return ( + + ); + } + + return ; + }; + + return ( +
+
+
+ logo +
+
+
+ +

Turn

+
+
+
+ +
+
+ +
+ {grid.map((symbol) => ( + + ))} +
+ + +
+ ); +}; diff --git a/tailwind.config.js b/tailwind.config.js index b0ea069..11299f7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,7 +21,7 @@ const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) { return { [`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: { - filter: `drop-shadow(0 ${spacingValue} ${colorValue})`, + "box-shadow": `inset 0 -${spacingValue} ${colorValue}`, }, }; });