From bbd7c86015bb4b13c6c214eee93724a601fb7e62 Mon Sep 17 00:00:00 2001
From: Dean Sofer <Dean.Sofer@sony.com>
Date: Sat, 18 May 2024 00:37:14 +0300
Subject: [PATCH] Toggle Fullscreen

---
 src/Game/Toolbar.css |  6 ++++++
 src/Game/Toolbar.tsx | 13 +++++++++++++
 src/Game/index.tsx   |  3 ++-
 src/index.css        |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/Game/Toolbar.css
 create mode 100644 src/Game/Toolbar.tsx

diff --git a/src/Game/Toolbar.css b/src/Game/Toolbar.css
new file mode 100644
index 0000000..3ee13d0
--- /dev/null
+++ b/src/Game/Toolbar.css
@@ -0,0 +1,6 @@
+#toolbar {
+    a {
+        font-weight: bold;
+        font-size: 40px;
+    }
+}
\ No newline at end of file
diff --git a/src/Game/Toolbar.tsx b/src/Game/Toolbar.tsx
new file mode 100644
index 0000000..63bf46e
--- /dev/null
+++ b/src/Game/Toolbar.tsx
@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+import './Toolbar.css'
+export default function Toolbar() {
+    const toggleFullscreen = useCallback(() => {
+        if (document.fullscreenElement) 
+            document.exitFullscreen()
+        else
+            document.documentElement.requestFullscreen()
+    }, [])
+    return <div id="toolbar">
+        <a onClick={toggleFullscreen}>&#x26F6;</a>
+    </div>
+}
\ No newline at end of file
diff --git a/src/Game/index.tsx b/src/Game/index.tsx
index 95eee0c..92670d0 100644
--- a/src/Game/index.tsx
+++ b/src/Game/index.tsx
@@ -2,6 +2,7 @@ import './Game.css';
 import Dice from './Dice';
 import Point from './Point';
 import Piece from './Piece';
+import Toolbar from './Toolbar';
 import { useCallback, useState, type DragEventHandler } from 'react';
 
 
@@ -91,7 +92,7 @@ export default function Game() {
     }, [move])
 
     return <div id="board">
-        <div id="toolbar"></div>
+        <Toolbar />
         <Dice onClick={roll} values={dice} />
 
         <div className="bar">
diff --git a/src/index.css b/src/index.css
index 4230044..03b9e51 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
+  color: #213547;
   background-color: #242424;
   background-color: #ffffff;
   font-synthesis: none;