datalore/buzzword-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: Added orientation warning

Browse Source
This commit is contained in:
datalore 2024-02-18 10:15:34 +01:00
parent 3b63a4ce00
commit e1be96557a
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/components/bingocontroller.tsx
View File

@ -15,6 +15,24 @@ function FisherYatesShuffle(array:string[]):string[]{
}
export default function BingoController({buzzwords} : {buzzwords?: string[]}){
const [orientation, setOrientation] = React.useState("");
React.useEffect(()=>{
function updateOrientation()
{
setOrientation(window.screen.orientation.type);
}
// init
updateOrientation();
window.addEventListener("orientationchange", updateOrientation);
// destructor
return () => {
window.removeEventListener("orientationchange", updateOrientation);
}
});
const [size, setSize] = React.useState(5);
if(buzzwords == undefined || buzzwords.length < 1) buzzwords = ["Cloud", "Cyber-[Something]", "Distrupt[ive]", "AI", "Meta [Something]", "Gamification", "Web 2.0/3.0", "Industry 4.0", "Internet of Things", "Multiexperience", "Big Data", "Crypto", "[Something] as a service", "Emerging [Something]", "Streamline", "Ecosystem", "Leverage", "Outside the Box", "Pivot", "Strategic", "Agile", "Smart Tech", "Data Warehouse", "Actionable Insights", "Holistic Approach", "Digital Transformation", "Growth Hacking"];
const [items, setItems] = React.useState(buzzwords);
@ -22,6 +40,10 @@ export default function BingoController({buzzwords} : {buzzwords?: string[]}){
return(
<>
<div className="w-full md:w-3/4 flex flex-col m-auto gap-4">
{orientation != "landscape-primary" && <div role="alert" className="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Please rotate your device</span>
</div>}
<Bingo size={size} items={items}/>
<form className="w-1/3 m-auto">
<input type="range" min={3} max={5} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>