Using Bluetooth on mobile

.gitignore

@@ -0,0 +1 @@
+platform-tools

README.md

@@ -1,2 +1,27 @@
 # leaky-ships
 Battleship web app with react frontend and ASP.NET Core backend
+
+## Bluetooth
+
+Download [Android SDK Platform-Tools](https://developer.android.com/studio/releases/platform-tools)
+
+Commands:
+```
+./adb pair 10.1.0.125:38407
+./adb connect 10.1.0.125:39099
+```
+
+Chrome flags to be enabled:
+```
+chrome://flags/#enable-experimental-web-platform-features
+chrome://flags/#enable-web-bluetooth-new-permissions-backend
+```
+
+Dev tool to discover gatt services:
+```
+chrome://bluetooth-internals/#devices
+```
+Other resources:
+
+- [GATT Characteristics](https://btprodspecificationrefs.blob.core.windows.net/assigned-values/16-bit%20UUID%20Numbers%20Document.pdf)
+- [Using Web BLE](https://youtu.be/TsXUcAKi790)

frontend/package.json

@@ -16,6 +16,7 @@
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/sass": "^1.43.1",
+    "@types/web-bluetooth": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { faCrosshairs } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CSSProperties, useEffect, useReducer, useState } from 'react';
+import Bluetooth from './Bluetooth';
 import BorderTiles from './components/BorderTiles';
 import FogImages from './components/FogImages';
 import HitElems from './components/HitElems';
@@ -65,6 +66,29 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
+        <Bluetooth />
+        <p>
+          <span
+            className="App-link"
+            onClick={() => {navigator.clipboard.writeText("chrome://flags/#enable-experimental-web-platform-features")}}
+            // target="_blank"
+            style={{"cursor": "pointer"}}
+            // rel="noopener noreferrer"
+          >
+            Step 1
+          </span>
+          {" "}
+          <span
+            className="App-link"
+            onClick={() => {navigator.clipboard.writeText("chrome://flags/#enable-web-bluetooth-new-permissions-backend")}}
+            // target="_blank"
+            style={{"cursor": "pointer"}}
+            // rel="noopener noreferrer"
+            
+          >
+            Step 2
+          </span>
+        </p>
         <div id="game-frame" style={{ '--i': count } as CSSProperties}>
           {/* Bordes */}
           <BorderTiles count={count} actions={{ setTarget, setTargetPreview, hits, DispatchHits }} />
@@ -73,7 +97,7 @@ function App() {
           <Labeling count={count} />
 
           {/* Ships */}
-          {/* <Ships /> */}
+          <Ships />
 
           <HitElems hits={hits} />
 
@@ -95,7 +119,7 @@ function App() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Battleships designed by macrovector
+          <p>Battleships designed by macrovector</p>
         </a>
       </header>
     </div>

frontend/src/Bluetooth.tsx

@@ -0,0 +1,111 @@
+function Bluetooth() {
+    const connectToDevice = async () => {
+        if (!navigator.bluetooth)
+            console.log('Web Bluetooth is not available!');
+        navigator.bluetooth
+            .requestDevice({
+                filters: [
+                    { namePrefix: "Chromecast Remote" }
+                ],
+                optionalServices: ["battery_service"],
+            })
+            .then(device => {
+                console.log(device);
+                // console.log(device.id, device.name, device.gatt);
+                // Set up event listener for when device gets disconnected.
+                device.addEventListener('gattserverdisconnected', onDisconnected);
+
+                console.log(1)
+                // Attempts to connect to remote GATT Server.
+                const gatt = device.gatt
+                if (!gatt)
+                    throw new Error('no gatt');
+                return gatt.connect();
+            })
+            .then(server => {
+                console.log(2)
+                console.log(server)
+                // Getting Battery Service…
+                return server.getPrimaryService('battery_service');
+            })
+            .then(service => {
+                console.log(3)
+                // Getting Battery Level Characteristic…
+                return service.getCharacteristic('battery_level');
+                // return service.getCharacteristic(0x2a19);
+            })
+            .then(characteristic => {
+                console.log(4)
+                // Reading Battery Level…
+                return characteristic.readValue();
+            })
+            .then(value => {
+                console.log(5)
+                console.log(`Battery percentage is ${value.getUint8(0)}`);
+            })
+            .catch(error => { console.log(error); });
+    }
+    const connectToDevice2 = async () => {
+        if (!navigator.bluetooth)
+            console.log('Web Bluetooth is not available!');
+        let device = await navigator.bluetooth
+        navigator.bluetooth
+            .requestDevice({
+                filters: [
+                    { namePrefix: "Chromecast Remote" }
+                ],
+                optionalServices: ["device_information"],
+            })
+            .then(device => {
+                // Set up event listener for when device gets disconnected.
+                device.addEventListener('gattserverdisconnected', onDisconnected);
+
+                console.log(1)
+                // Attempts to connect to remote GATT Server.
+                const gatt = device.gatt
+                if (!gatt)
+                    throw new Error('no gatt');
+                return gatt.connect();
+            })
+            .then(server => {
+                console.log(2)
+                console.log(server)
+                // Getting Battery Service…
+                return server.getPrimaryService('device_information');
+            })
+            .then(service => {
+                console.log(3)
+                // Getting Battery Level Characteristic…
+                return service.getCharacteristic('manufacturer_name_string');
+            })
+            .then(characteristic => {
+                console.log(4)
+                // Reading Battery Level…
+                return characteristic.readValue();
+            })
+            .then(value => {
+                console.log(5)
+                let decoder = new TextDecoder('utf-8');
+                console.log(decoder.decode(value));
+            })
+            .catch(error => { console.log(error); });
+    }
+
+    const onDisconnected = (event: any) => {
+        // alert("Device Disconnected");
+        // console.log(event);
+        const device = event.target;
+        console.log(`Device "${device.name}" is disconnected.`);
+    }
+
+
+
+    return (
+        <>
+            <button className="bluetooth" onClick={connectToDevice2}>CONNECT</button>
+        </>
+    )
+
+}
+
+export default Bluetooth

frontend/src/styles/App.scss

@@ -41,6 +41,8 @@
   $width: $height;
   height: $height;
   width: $width;
+  max-height: 100vw;
+  max-width: 100vw;
   display: grid;
   align-items: center;
   justify-items: center;