1  import { useState } from "preact/hooks"
 2  import Phase from "../components/Phase.tsx"
 3  
 4  const initialMessage = 'you awaken inside a strange metal box. the smell of iron and stale doughnuts draws your attention to the double doors. to the right of the doors, you notice a button that is highlighted in red - the letter B gently blinks. you see an unopened can of grapefruit spindrift in the corner - who knows when that was left there?'
 5  
 6  const getPhaseMessage = (possibleMessages: string[]) => {
 7    const nmi = Math.floor(Math.random() * possibleMessages.length)
 8    return possibleMessages[nmi]
 9  }
10  
11  export default function Prompt() {
12    const [message, setMessage] = useState(initialMessage);
13  
14    setMessage(message => {
15      return message
16    })
17  
18    let nextMessage = ''
19    let randomItem = ''
20  
21    if (Phase.value.stage === 0) {
22      // We are at the beginning
23      nextMessage = 'you have decided to advance. wise choice.'
24    } else {
25      // Possible message
26      const possiblePhaseMessages = [
27        'test1phaseLast',
28        'test2phaseLast',
29        'test3phaseLast',
30        'test4phaseLast',
31        'test5phaseLast'
32      ]
33      nextMessage = getPhaseMessage(possiblePhaseMessages)
34    }
35    // Possible items
36    const possibleItems = [
37      'an unknown book with its cover removed',
38      'a still frozen oopskey',
39      'an old logitech keyboard'
40    ]
41  
42    // "Randomly" generated way to see if an item is available for pickup
43    const isItemAvailable = !Math.round(Math.random())
44  
45    if (isItemAvailable) {
46      // An item is available for pickup!
47      const randomItemIndex = Math.floor(Math.random() * possibleItems.length)
48      randomItem = possibleItems[randomItemIndex]
49      nextMessage += `\nyou spot ${randomItem}`
50    }
51  
52    return (
53      <div class="items-center justify-start h-1/2 w-4/5">
54        <p class="font-mono p-3 mx-3">a message for you...</p>
55        <div class="border-2 border-solid rounded-lg">
56          <p class="font-mono p-3 mx-3 h-96">{ message }</p>
57        </div>
58        <button
59          class="text-center border-2 border-solid rounded-lg font-mono p-3 mx-3 my-3 bg-green-100 hover:bg-green-400"
60          onClick={() => { 
61            console.log(Phase.value)
62            setMessage(nextMessage)
63            Phase.value = {
64              stage: ++Phase.value.stage,
65              isItemAvailable,
66              item: isItemAvailable ? randomItem : ''
67            }
68          }}
69      >
70          proceed
71      </button>
72      </div>
73    );
74  }