Skip to content

Commit 7d3f553

Browse files
author
Mike Upton
committed
something
1 parent ad7445d commit 7d3f553

File tree

1 file changed

+112
-106
lines changed

1 file changed

+112
-106
lines changed

‎src/components/Menu/index.tsx

Lines changed: 112 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -300,97 +300,24 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
300300

301301
<Menu.Item style={{ marginRight: "auto" }}>
302302
<Dropdown
303+
button
303304
disabled={isPlaying}
304305
onChange={handleDropdownSpeed}
305-
text={`Playback speed x${currentSpeed}` || "Change Speed"}
306+
text={`Speed x${currentSpeed}` || "Change Speed"}
306307
value={currentSpeed}
307-
selection
308308
options={playSpeeds}
309309
/>
310310
&nbsp; {/* Essentially just a fancy space */}
311311
<Dropdown
312+
button
312313
disabled={isPlaying}
313314
onChange={handleDropdownChange}
314315
text={selectedAlgo || "Choose an Algorithm"}
315316
value={selectedAlgo}
316-
selection
317317
options={algorithms}
318318
/>
319319
</Menu.Item>
320320

321-
<Menu.Item>
322-
<Dropdown
323-
className="grid-size-dropdown"
324-
button
325-
disabled={isPlaying}
326-
text="Change Grid Size"
327-
fluid={true}
328-
color="pink"
329-
>
330-
<Dropdown.Menu>
331-
<Input
332-
onClick={(e: any) => e.stopPropagation()}
333-
size="small"
334-
type="number"
335-
label="Cols"
336-
fluid={true}
337-
value={mazeCols}
338-
onChange={(e) => this.setState({ mazeCols: +e.target.value })}
339-
onBlur={() =>
340-
mazeCols < 20 ? this.setState({ mazeCols: 20 }) : null
341-
}
342-
/>
343-
<Input
344-
onClick={(e: any) => e.stopPropagation()}
345-
size="small"
346-
type="number"
347-
label="Rows"
348-
fluid={true}
349-
value={mazeRows}
350-
onChange={(e) => this.setState({ mazeRows: +e.target.value })}
351-
onBlur={() =>
352-
mazeRows < 20 ? this.setState({ mazeRows: 20 }) : null
353-
}
354-
/>
355-
<Button
356-
color="yellow"
357-
circular
358-
onClick={() => handleChangeGridSize(mazeCols, mazeRows)}
359-
>
360-
<span>Update Size</span>
361-
</Button>
362-
</Dropdown.Menu>
363-
</Dropdown>
364-
&nbsp; {/* Essentially just a fancy space */}
365-
<div className="row1">
366-
<Button
367-
color="purple"
368-
circular
369-
onClick={toggleMoveStart}
370-
disabled={isPlaying}
371-
>
372-
<Icon
373-
name={canMoveStart ? "circle" : "circle outline"}
374-
style={{ marginRight: "0.5rem" }}
375-
/>
376-
<span>Move Start Point</span>
377-
</Button>
378-
&nbsp;
379-
<Button
380-
color="teal"
381-
circular
382-
onClick={toggleMoveEnd}
383-
disabled={isPlaying}
384-
>
385-
<Icon
386-
name={canMoveEnd ? "circle" : "circle outline"}
387-
style={{ marginRight: "0.5rem" }}
388-
/>
389-
<span>Move End Point</span>
390-
</Button>
391-
</div>
392-
</Menu.Item>
393-
394321
<Menu.Item>
395322
<Button
396323
color="orange"
@@ -500,36 +427,115 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
500427
</Menu.Item>
501428
</Menu>
502429
{/* Legend */}
503-
<Message attached="bottom">
504-
<Label image>
505-
<img
506-
src={process.env.PUBLIC_URL + "./startpoint.png"}
507-
alt="startpoint tag"
508-
/>
509-
Start Point
510-
</Label>
511-
<Label image>
512-
<img
513-
src={process.env.PUBLIC_URL + "./endpoint.png"}
514-
alt="endpoint tag"
515-
/>
516-
End Point
517-
</Label>
518-
<Label image>
519-
<img src={process.env.PUBLIC_URL + "./wall.png"} alt="wall tag" />
520-
Wall
521-
</Label>
522-
<Label image>
523-
<img
524-
src={process.env.PUBLIC_URL + "./visited.png"}
525-
alt="visited tag"
526-
/>
527-
Visited Point
528-
</Label>
529-
<Label image>
530-
<img src={process.env.PUBLIC_URL + "./lava.png"} alt="path tag" />
531-
Path
532-
</Label>
430+
<Message
431+
attached="bottom"
432+
style={{
433+
display: "flex",
434+
alignItem: "center",
435+
}}
436+
>
437+
<div>
438+
<Label image>
439+
<img
440+
src={process.env.PUBLIC_URL + "./startpoint.png"}
441+
alt="startpoint tag"
442+
/>
443+
Start Point
444+
</Label>
445+
<Label image>
446+
<img
447+
src={process.env.PUBLIC_URL + "./endpoint.png"}
448+
alt="endpoint tag"
449+
/>
450+
End Point
451+
</Label>
452+
<Label image>
453+
<img src={process.env.PUBLIC_URL + "./wall.png"} alt="wall tag" />
454+
Wall
455+
</Label>
456+
<Label image>
457+
<img
458+
src={process.env.PUBLIC_URL + "./visited.png"}
459+
alt="visited tag"
460+
/>
461+
Visited Point
462+
</Label>
463+
<Label image>
464+
<img src={process.env.PUBLIC_URL + "./lava.png"} alt="path tag" />
465+
Path
466+
</Label>
467+
</div>
468+
<div className="row1" style={{ marginLeft: "auto" }}>
469+
<Button
470+
color="purple"
471+
circular
472+
onClick={toggleMoveStart}
473+
disabled={isPlaying}
474+
>
475+
<Icon
476+
name={canMoveStart ? "circle" : "circle outline"}
477+
style={{ marginRight: "0.5rem" }}
478+
/>
479+
<span>Move Start Point</span>
480+
</Button>
481+
&nbsp;
482+
<Button
483+
color="teal"
484+
circular
485+
onClick={toggleMoveEnd}
486+
disabled={isPlaying}
487+
>
488+
<Icon
489+
name={canMoveEnd ? "circle" : "circle outline"}
490+
style={{ marginRight: "0.5rem" }}
491+
/>
492+
<span>Move End Point</span>
493+
</Button>
494+
</div>
495+
&nbsp;
496+
<Dropdown
497+
className="grid-size-dropdown"
498+
button
499+
disabled={isPlaying}
500+
text="Change Grid Size"
501+
fluid={true}
502+
color="pink"
503+
>
504+
<Dropdown.Menu>
505+
<Input
506+
onClick={(e: any) => e.stopPropagation()}
507+
size="small"
508+
type="number"
509+
label="Cols"
510+
fluid={true}
511+
value={mazeCols}
512+
onChange={(e) => this.setState({ mazeCols: +e.target.value })}
513+
onBlur={() =>
514+
mazeCols < 20 ? this.setState({ mazeCols: 20 }) : null
515+
}
516+
/>
517+
<Input
518+
onClick={(e: any) => e.stopPropagation()}
519+
size="small"
520+
type="number"
521+
label="Rows"
522+
fluid={true}
523+
value={mazeRows}
524+
onChange={(e) => this.setState({ mazeRows: +e.target.value })}
525+
onBlur={() =>
526+
mazeRows < 20 ? this.setState({ mazeRows: 20 }) : null
527+
}
528+
/>
529+
<Button
530+
color="yellow"
531+
circular
532+
onClick={() => handleChangeGridSize(mazeCols, mazeRows)}
533+
>
534+
<span>Update Size</span>
535+
</Button>
536+
</Dropdown.Menu>
537+
</Dropdown>
538+
&nbsp; {/* Essentially just a fancy space */}
533539
</Message>
534540
</div>
535541
);

0 commit comments

Comments
 (0)