Trireme.md

Trireme.md

Write a function using the React JavaScript framework to navigate a trireme using the stars.

import React, { useState } from 'react';

// Example star directions
const STAR_DIRECTIONS = [
  { name: 'North Star (Polaris)', heading: 'North' },
  { name: 'Orion\'s Belt', heading: 'East' },
  { name: 'Southern Cross', heading: 'South' },
  { name: 'Venus (Morning Star)', heading: 'West' },
];

function TriremeNavigator() {
  const [heading, setHeading] = useState('Unknown');
  const [selectedStar, setSelectedStar] = useState(null);

  const handleStarSelect = (star) => {
    setSelectedStar(star.name);
    setHeading(star.heading);
  };

  return (
    <div style={{ padding: '2rem', fontFamily: 'serif' }}>
      <h2>Trireme Star Navigation</h2>
      <p>
        Select a star to navigate your trireme:
      </p>
      <ul>
        {STAR_DIRECTIONS.map(star => (
          <li key={star.name}>
            <button onClick={() => handleStarSelect(star)}>
              {star.name}
            </button>
          </li>
        ))}
      </ul>
      <hr />
      <p>
        <strong>Current Heading:</strong> {heading}
      </p>
      {selectedStar && (
        <p>
          You are steering by <strong>{selectedStar}</strong>.
        </p>
      )}
    </div>
  );
}

export default TriremeNavigator;