🌈 Kids' Story Adventure 📖

\n \n {/* Username Section */}\n

\n {isEditingUsername ? (\n <>\n setUsername(e.target.value)}\n placeholder=\"Enter your name\"\n style={{ \n padding: '10px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ddd'\n }}\n />\n \n \n ) : (\n <>\n \n 👤 Username: {username || 'Not Set'}\n \n \n \n )}\n

\n \n {!currentStory ? (\n

Choose a story to read!

\n {STORIES.map(story => (\n \n ))}\n

\n ) : (\n

{currentStory.title}

{currentStory.content}

\n Moral of the story: {currentStory.moral}\n

\n \n\n {/* Comments Section */}\n

Story Discussion 💬

\n {/* Display existing comments */}\n {comments[currentStory.id] && comments[currentStory.id]\n .sort((a, b) => b.timestamp - a.timestamp)\n .map((comment, index) => (\n

\n \n {comment.username}\n \n {comment.text}\n

\n ))}\n\n {/* Comment Input */}\n

\n setNewComment(e.target.value)}\n placeholder={\n username \n ? `Share your thoughts, ${username}...` \n : \"Set a username first!\"\n }\n disabled={!username}\n style={{ \n flex: 1, \n padding: '10px', \n borderRadius: '5px', \n border: '1px solid #ddd',\n backgroundColor: username ? 'white' : '#f0f0f0'\n }}\n />\n \n

\n )}\n \n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Kids' Story Adventure\n \n 📖\">\n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/Chechegify/kidStoryApp/code/main.tsx","extension","actionData","errors"]