|
|
@@ -14,8 +14,9 @@ function FisherYatesShuffle(array:string[]):string[]{
|
|
|
|
return array;
|
|
|
|
return array;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function BingoController({buzzwords} : {buzzwords?: string[]}){
|
|
|
|
export default function BingoController({buzzwords, maxSize} : {buzzwords?: string[], maxSize?: number}){
|
|
|
|
const [size, setSize] = React.useState(5);
|
|
|
|
if(maxSize == undefined) maxSize = 5;
|
|
|
|
|
|
|
|
const [size, setSize] = React.useState(maxSize!);
|
|
|
|
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"];
|
|
|
|
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);
|
|
|
|
const [items, setItems] = React.useState(buzzwords);
|
|
|
|
const sizeError = (items.length < size);
|
|
|
|
const sizeError = (items.length < size);
|
|
|
@@ -24,7 +25,7 @@ export default function BingoController({buzzwords} : {buzzwords?: string[]}){
|
|
|
|
<div className="w-3/4 flex flex-col m-auto gap-4">
|
|
|
|
<div className="w-3/4 flex flex-col m-auto gap-4">
|
|
|
|
<Bingo size={size} items={items}/>
|
|
|
|
<Bingo size={size} items={items}/>
|
|
|
|
<form className="w-1/3 m-auto">
|
|
|
|
<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)}/>
|
|
|
|
<input type="range" min={3} max={maxSize!} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
|
|
|
|
<div className="w-full flex justify-between text-sm px-2 mb-2">
|
|
|
|
<div className="w-full flex justify-between text-sm px-2 mb-2">
|
|
|
|
<span>3x3</span>
|
|
|
|
<span>3x3</span>
|
|
|
|
<span>4x4</span>
|
|
|
|
<span>4x4</span>
|
|
|
|