成果物 — 旅先ルーレット

export type Spot = {
  name: string;
  hint: string;
};

export const SPOTS: Spot[] = [
  { name: '直島', hint: '港からレンタサイクルで一周' },
  { name: '尾道', hint: '坂の途中に猫がたくさん' },
  { name: '金沢', hint: '雨の日の石畳がきれい' },
  { name: '松本', hint: '夕方の城といえばここ' },
  { name: '函館', hint: '朝市で朝ごはんから' },
  { name: '高知', hint: '日曜市を端から端まで' },
];

/**
 * 候補から1つ選ぶ。
 *
 * random を外から渡せるようにしてあるのは、同じ答えを何度でも出せるように
 * するため。ふだんは省略して Math.random が使われる。
 */
export function pick(spots: Spot[], random: () => number = Math.random): Spot {
  return spots[Math.floor(random() * spots.length)];
}

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { pick, SPOTS, type Spot } from './lib/roulette';

export default function App() {
  const [spot, setSpot] = useState<Spot | null>(null);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>旅先ルーレット</Text>
      <Text style={styles.lead}>はるとの、次の行き先を決める道具</Text>

      <View style={styles.result}>
        {spot === null ? (
          <Text style={styles.waiting}>ボタンを押してください</Text>
        ) : (
          <>
            <Text style={styles.name}>{spot.name}</Text>
            <Text style={styles.hint}>{spot.hint}</Text>
          </>
        )}
      </View>

      <Pressable style={styles.button} onPress={() => setSpot(pick(SPOTS))}>
        <Text style={styles.buttonLabel}>まわす</Text>
      </Pressable>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fbf8f4',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2f2a26',
  },
  lead: {
    marginTop: 8,
    fontSize: 15,
    color: '#6b6058',
  },
  result: {
    height: 140,
    alignItems: 'center',
    justifyContent: 'center',
  },
  waiting: {
    fontSize: 15,
    color: '#a1968c',
  },
  name: {
    fontSize: 44,
    fontWeight: 'bold',
    color: '#8a6a4f',
  },
  hint: {
    marginTop: 10,
    fontSize: 15,
    color: '#6b6058',
  },
  button: {
    backgroundColor: '#8a6a4f',
    paddingVertical: 16,
    paddingHorizontal: 48,
    borderRadius: 999,
  },
  buttonLabel: {
    color: '#ffffff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});