Toggle Fullscreen

src/Game/Toolbar.css

@@ -0,0 +1,6 @@
+#toolbar {
+    a {
+        font-weight: bold;
+        font-size: 40px;
+    }
+}

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>
+}

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">

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;