deploy (submission/GitHub.com): Final Commit

Intent: Submission
Issue:
    -  Check the draw state: all turns no winners -> UI message
    - See #15
    -  check the invalid state/move and update the UI
    - See TBC
    -  one click beyond win state: reference error
Tag: #GameLogic(), #NativeJS, #README
Sprint:    05: Ends 23-01-23
Deadline:  Submit: Saturday 23 January 2024
Bump: 02.01.000 due to breaking change and switch to Native JS.
Previous:  23-01-23 v02.01.00.11
Changelog: 23-01-23 v02.03.00.00
Branch: nativejs/game-app-v2.0
- bug:
    - draw state
    - invalid/bad move
    - one click beyond win state: reference error
- added
- modified:
    -
- documented:
      - `README.md`
        - DONE:
          - Section: ✅✅✅
            1.0 Introduction ✅
            2.0 Solution:  Tic Tac Toe: ✅
            3.0 User Experience: 3.1 -> 3.6: ✅
            4.0 Design: 4.1 - 4.3
                - Exiting Excalidraw and change design to minimalist
            5.0 Build:  ✅
            6.0 Code: ✅
                6.0.1 -> 6.0.5✅
                6.1 -> 6.3 ✅
            7.0 Logic:  Code Flow Diagrams to explain Logic.js ✅
            8.0: Testing: 8.1 -> 8.2  ✅
            9.0 Features, Screenshots, Acceptance, Responsiveness
            10.0: Deployment:  10.1 -> 10.4 ✅ ✅
            11.0 Assessments: Credits etc
        - `PROJECTS.md`
           - P2 Project criteria re-presented as Definition of Done checklist,
- refactor:
- rename:
- removed:
- fixed:
- logging:
- linted: ✅ Completed 2024/01/22
- edits:
- deploy:
Refs:
-

refs/design/logic.excalidraw

@@ -0,0 +1,10 @@
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "https://excalidraw-jetbrains-plugin",
+  "elements": [],
+  "appState": {
+    "gridSize": null,
+    "viewBackgroundColor": "#ffffff"
+  }
+}

src/assets/css/tailwind-src.css

@@ -1,3 +1,112 @@
+/*noinspection Stylelint*/
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+@layer typography {
+    #myModal * {
+        font-family: 'Inter', sans-serif;
+    }
+}
+
+@layer GridAndButtons {
+    .help-button {
+        font-size: 16px;
+        border: none;
+        text-decoration: none;
+    }
+
+    .control-shaddow {
+        /* Credit https://manuarora.in/boxshadows Style India */
+        box-shadow: 0 4px 2px 0  rgba(240, 46, 170, 0.5);
+    }
+
+    .hover-brighten {
+        transition: filter 0.3s ease; /* Add transition for smooth hover effect */
+        filter: brightness(100%);
+    }
+
+    .hover-brighten:hover,
+    .hover-brighten:focus, /* Add style for when element is in focus */
+    .hover-brighten:active { /* Add style for when element is active (clicked or tapped) */
+        filter: brightness(120%);
+    }
+
+    .hover-brighten:focus-visible { /* Highlight outline when element is accessed via keyboard */
+        outline: 2px solid #FF9900; /* Change color as needed */
+    }
+
+    .hover-brighten:not(:hover) {
+        filter: brightness(80%);
+    }
+
+    .cell {
+        background-color: #6B7280; /* Corresponds to bg-blue-gray-500 in Tailwind */
+        transition: all 0.3s ease; /* Corresponds to transition-all and duration-300 in Tailwind */
+        filter: brightness(100%);
+    }
+
+    .cell:hover,
+    .cell:focus,
+    .cell:active {
+        background-color: #305b7f; /* Corresponds to bg-blue-gray-400 in Tailwind */
+        filter: brightness(120%);
+        outline: none;
+        border-radius: 1rem; /* Corresponds to rounded-2xl in Tailwind */
+    }
+
+    .cell:focus-visible {
+        outline: 2px solid rgba(237, 187, 105, 0.91); /* Corresponds to outline-2 and outline-yellow-500 in Tailwind */
+    }
+
+    .cell:not(:hover) {
+        filter: brightness(80%);
+    }
+
+}
+
+@layer TokenStyles {
+    .text-x {
+        color: rgba(240, 46, 170, 0.5);
+        text-shadow: #6366f1 1px 0 10px;
+    }
+
+    .text-o {
+        color: #6366f1;
+        text-shadow: rgba(240, 46, 170, 0.5) 1px 0 10px;
+    }
+}
+
+@layer UIModals {
+    .modal {
+        display: none; /* Hidden by default */
+    }
+
+    .modal-content {
+        border: none; /* remove border made by Tailwind as it can't be mixed with custom CSS attributes */
+    }
+}
+
+@layer gameArea {
+    .game-area-shadow {
+        /* https://manuarora.in/boxshadows Style India*/
+        box-shadow: 0 14px 7px 0  rgba(240, 46, 170, 0.5);
+    }
+}
+
+@layer animation {
+    /* Very Bouncy Tokens */
+    @keyframes bounce {
+        0%   { transform: scale(1,1)      translateY(0); }
+        10%  { transform: scale(1.1,.9)   translateY(0); }
+        30%  { transform: scale(.9,1.1)   translateY(-100px); }
+        50%  { transform: scale(1.05,.95) translateY(0); }
+        57%  { transform: scale(1,1)      translateY(-7px); }
+        64%  { transform: scale(1,1)      translateY(0); }
+        100% { transform: scale(1,1)      translateY(0); }
+    }
+
+    .bounce {
+        animation: bounce 1.5s ease-in-out;
+    }
+}