Implement CSS grid click effect
This commit is contained in:
parent
b0b118c1b3
commit
63e26e62fa
GPG key ID:
816B7707426FC612
5 changed files with 231 additions and 115 deletions
153
frontend/src/components/Bluetooth.tsx
Normal file
153
frontend/src/components/Bluetooth.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { useState } from "react"
|
||||
|
||||
function Bluetooth() {
|
||||
const [startDisabled, setStartDisabled] = useState(true)
|
||||
const [stopDisabled, setStopDisabled] = useState(true)
|
||||
|
||||
const deviceName = 'Chromecast Remote'
|
||||
// ble UV Index
|
||||
const bleService = 'environmental_sensing'
|
||||
const bleCharacteristic = 'uv_index'
|
||||
|
||||
// ble Battery percentage
|
||||
// const bleService = 'battery_service'
|
||||
// const bleCharacteristic = 'battery_level'
|
||||
|
||||
// ble Manufacturer Name
|
||||
// const bleService = 'device_information'
|
||||
// const bleCharacteristic = 'manufacturer_name_string'
|
||||
let bluetoothDeviceDetected: BluetoothDevice
|
||||
let gattCharacteristic: BluetoothRemoteGATTCharacteristic
|
||||
|
||||
function isWebBluetoothEnabled() {
|
||||
if (!navigator.bluetooth) {
|
||||
alert('Web Bluetooth API is not available in this browser!')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
function getDeviceInfo() {
|
||||
const options = {
|
||||
// acceptAllDevices: true,
|
||||
filters: [
|
||||
{ name: deviceName }
|
||||
],
|
||||
// optionalServices: ['battery_service'],
|
||||
}
|
||||
|
||||
console.log('Requesting Bluetooth Device...')
|
||||
|
||||
return navigator.bluetooth
|
||||
.requestDevice(options)
|
||||
.then(device => {
|
||||
bluetoothDeviceDetected = device
|
||||
console.log('> Name: ' + device.name)
|
||||
device.addEventListener('gattserverdisconnected', onDisconnected)
|
||||
})
|
||||
.catch(error => console.log('Argh! ' + error))
|
||||
}
|
||||
function read() {
|
||||
if (!isWebBluetoothEnabled())
|
||||
return
|
||||
return getDeviceInfo()
|
||||
.then(connectGatt)
|
||||
.then(_ => {
|
||||
console.log('Reading UV Index...')
|
||||
return gattCharacteristic.readValue()
|
||||
})
|
||||
.catch(error => console.log('Waiting to start reading: ' + error))
|
||||
}
|
||||
function connectGatt() {
|
||||
if (bluetoothDeviceDetected.gatt && bluetoothDeviceDetected.gatt.connected && gattCharacteristic)
|
||||
return Promise.resolve()
|
||||
if (!bluetoothDeviceDetected || !bluetoothDeviceDetected.gatt)
|
||||
return Promise.reject()
|
||||
return bluetoothDeviceDetected.gatt.connect()
|
||||
.then(server => {
|
||||
console.log('Getting GATT Service...')
|
||||
return server.getPrimaryService(bleService)
|
||||
})
|
||||
.then(service => {
|
||||
console.log('Getting GATT Characteristic...')
|
||||
return service.getCharacteristic(bleCharacteristic)
|
||||
})
|
||||
.then(characteristic => {
|
||||
gattCharacteristic = characteristic
|
||||
characteristic.addEventListener('characteristicvaluechanged', handleChangedValue)
|
||||
|
||||
setStartDisabled(false)
|
||||
setStopDisabled(true)
|
||||
})
|
||||
}
|
||||
function handleChangedValue(event: Event) {
|
||||
const characteristic = event.target as BluetoothRemoteGATTCharacteristic
|
||||
if (!characteristic.value) {
|
||||
console.log('Characteristic undefined!')
|
||||
return
|
||||
}
|
||||
const value = characteristic.value.getUint8(0)
|
||||
const now = new Date()
|
||||
// Output the UV Index
|
||||
console.log(`> ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()} UV Index is ${value}`)
|
||||
|
||||
// Output the Battery percentage
|
||||
// console.log(`> ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()} Battery percentage is ${value}`)
|
||||
|
||||
// Output the Manufacturer Name
|
||||
// let decoder = new TextDecoder('utf-8')
|
||||
// console.log(`> ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()} Manufacturer Name is ${decoder.decode(characteristic.value)}`)
|
||||
}
|
||||
function start() {
|
||||
if (!isWebBluetoothEnabled())
|
||||
return
|
||||
gattCharacteristic.startNotifications()
|
||||
.then(_ => {
|
||||
console.log('Start reading...')
|
||||
setStartDisabled(true)
|
||||
setStopDisabled(false)
|
||||
})
|
||||
.catch(error => console.log('[ERROR] Start: ' + error))
|
||||
}
|
||||
function stop() {
|
||||
if (!isWebBluetoothEnabled())
|
||||
return
|
||||
gattCharacteristic.stopNotifications()
|
||||
.then(_ => {
|
||||
console.log('Stop reading...')
|
||||
setStartDisabled(false)
|
||||
setStopDisabled(true)
|
||||
})
|
||||
.catch(error => console.log('[ERROR] Stop: ' + error))
|
||||
}
|
||||
function onDisconnected(event: Event) {
|
||||
alert("Device Disconnected")
|
||||
// console.log(event)
|
||||
const device = event.target as BluetoothDevice
|
||||
console.log(`Device "${device.name}" is disconnected.`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
id="read"
|
||||
className="bluetooth"
|
||||
onClick={read}
|
||||
>Connect with BLE device</button>
|
||||
<button
|
||||
id="start"
|
||||
className="bluetooth"
|
||||
disabled={startDisabled}
|
||||
onClick={start}
|
||||
>Start</button>
|
||||
<button
|
||||
id="stop"
|
||||
className="bluetooth"
|
||||
disabled={stopDisabled}
|
||||
onClick={stop}
|
||||
>Stop</button>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default Bluetooth
|
||||
126
frontend/src/components/Gamefield.tsx
Normal file
126
frontend/src/components/Gamefield.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
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 './BorderTiles';
|
||||
import FogImages from './FogImages';
|
||||
import HitElems from './HitElems';
|
||||
import Labeling from './Labeling';
|
||||
import Ships from './Ships';
|
||||
import { hitReducer, initlialTarget, initlialTargetPreview, isHit } from '../helpers';
|
||||
import { HitType, TargetPreviewType, TargetType } from '../interfaces';
|
||||
|
||||
function Gamefield() {
|
||||
|
||||
const count = 12;
|
||||
const [target, setTarget] = useState<TargetType>(initlialTarget);
|
||||
const [targetPreview, setTargetPreview] = useState<TargetPreviewType>(initlialTargetPreview);
|
||||
const [hits, DispatchHits] = useReducer(hitReducer, [] as HitType[]);
|
||||
|
||||
// handle visibility and position change of targetPreview
|
||||
useEffect(() => {
|
||||
const { newX, newY, shouldShow, appearOK, eventReady, show, x, y } = targetPreview;
|
||||
const positionChange = !(x === newX && y === newY);
|
||||
// if not ready or no new position
|
||||
if (!eventReady || (!positionChange && show))
|
||||
return;
|
||||
if (show) {
|
||||
// hide preview to change position when hidden
|
||||
setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: false }));
|
||||
} else if (shouldShow && appearOK && !isHit(hits, newX, newY).length) {
|
||||
// BUT only appear again if it's supposed to (in case the mouse left over the edge) and ()
|
||||
setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: true, x: newX, y: newY }));
|
||||
}
|
||||
}, [targetPreview, hits])
|
||||
|
||||
// enable targetPreview event again after 200 mil. sec.
|
||||
useEffect(() => {
|
||||
if (targetPreview.eventReady)
|
||||
return;
|
||||
const autoTimeout = setTimeout(() => {
|
||||
setTargetPreview(e => ({ ...e, eventReady: true }));
|
||||
}, 200);
|
||||
|
||||
// or abort if state has changed early
|
||||
return () => {
|
||||
clearTimeout(autoTimeout);
|
||||
}
|
||||
}, [targetPreview.eventReady]);
|
||||
|
||||
// approve targetPreview new position after 200 mil. sec.
|
||||
useEffect(() => {
|
||||
// early return to start cooldown only when about to show up
|
||||
if (!targetPreview.shouldShow)
|
||||
return;
|
||||
const autoTimeout = setTimeout(() => {
|
||||
setTargetPreview(e => ({ ...e, appearOK: true }));
|
||||
}, 350);
|
||||
|
||||
// or abort if movement is repeated early
|
||||
return () => {
|
||||
clearTimeout(autoTimeout);
|
||||
}
|
||||
}, [targetPreview.shouldShow, targetPreview.newX, targetPreview.newY]);
|
||||
|
||||
return (
|
||||
<div id='gamefield'>
|
||||
<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 }} />
|
||||
|
||||
{/* Collumn lettes and row numbers */}
|
||||
<Labeling count={count} />
|
||||
|
||||
{/* Ships */}
|
||||
<Ships />
|
||||
|
||||
<HitElems hits={hits} />
|
||||
|
||||
{/* Fog images */}
|
||||
<FogImages />
|
||||
<div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}>
|
||||
<FontAwesomeIcon icon={faCrosshairs} />
|
||||
</div>
|
||||
<div className={`hit-svg target-preview ${targetPreview.show && (target.x !== targetPreview.x || target.y !== targetPreview.y) ? 'show' : ''}`} style={{ '--x': targetPreview.x, '--y': targetPreview.y } as CSSProperties}>
|
||||
<FontAwesomeIcon icon={faCrosshairs} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p> */}
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://www.freepik.com/free-vector/militaristic-ships-set-navy-ammunition-warship-submarine-nuclear-battleship-float-cruiser-trawler-gunboat-frigate-ferry_10704121.htm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<p>Battleships designed by macrovector</p>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Gamefield
|
||||
65
frontend/src/components/Homepage.tsx
Normal file
65
frontend/src/components/Homepage.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { CSSProperties, useEffect, useMemo, useState } from 'react'
|
||||
import '../styles/home.scss'
|
||||
|
||||
function Homepage() {
|
||||
|
||||
const [columns, setColumns] = useState(floorClient(document.body.clientWidth))
|
||||
const [rows, setRows] = useState(floorClient(document.body.clientHeight))
|
||||
const [quantity, setQuantity] = useState(columns * rows)
|
||||
const [position, setPosition] = useState([0, 0])
|
||||
const [active, setActve] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setColumns(floorClient(document.body.clientWidth))
|
||||
setRows(floorClient(document.body.clientHeight))
|
||||
}
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => setQuantity(columns * rows), 500)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [columns, rows])
|
||||
|
||||
|
||||
function floorClient(number: number) {
|
||||
return Math.floor(number / 50)
|
||||
}
|
||||
|
||||
function createTile(index: number) {
|
||||
const x = index % columns
|
||||
const y = Math.floor(index / columns)
|
||||
const xDiff = (x - position[0]) / 10
|
||||
const yDiff = (y - position[1]) / 10
|
||||
const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2)
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={"tile " + (active ? 'active' : '')}
|
||||
style={{ '--delay': pos + 's' } as CSSProperties}
|
||||
onClick={() => {
|
||||
setPosition([x, y])
|
||||
setActve(e => !e)
|
||||
}}
|
||||
>
|
||||
{/* {pos} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const createTiles = useMemo(() => {
|
||||
console.log(3, columns, rows, quantity)
|
||||
// return <p>{quantity}</p>
|
||||
return (
|
||||
<div id='tiles' style={{ '--columns': columns, '--rows': rows } as CSSProperties}>
|
||||
{Array.from(Array(quantity)).map((tile, index) => createTile(index))}
|
||||
</div>
|
||||
)
|
||||
}, [quantity, position])
|
||||
|
||||
return createTiles
|
||||
}
|
||||
|
||||
export default Homepage
|
||||
Loading…
Add table
Add a link
Reference in a new issue