UPdate Web endpoints and remove uneeded logging.

roll_witch/dice_bot/event_listener.py

@@ -19,9 +19,6 @@ async def on_message(self, message):
         if message.author == self.user:
             return
         try:
-            print(message)
-            print(f" Channel: {message.channel}")
-            print(f"Message: {message.content}")
             command, roll_string = get_command(message_content=message.content)
             print(f"Command {command}")
             if command:

roll_witch/web_app/roller.py

@@ -8,17 +8,43 @@
 async def roll(request: Request):
     data = await request.post()
     try:
-        bot_operation = command.get_command(
-            message_content=data["roll_operation"]
+        roll_operation = data['roll_operation']
+        if not(roll_operation.startswith('!r')):
+            roll_operation = f"!r {roll_operation}"
+
+        bot_operation, roll_string = command.get_command(
+            message_content=roll_operation
         )
+        print(f"Roll Request: {roll_string}")
         if bot_operation:
-            operation_output = bot_operation.execute()
-            return {"output": operation_output}
+            operation_output = bot_operation.execute(
+                roll_string=roll_string,
+                user='',
+            )
+            print(f"Output: {operation_output}")
+            return {
+                "output": {
+                    "roll_request": roll_string,
+                    "roll_result": operation_output,
+                }
+            }
     except ValueError:
-        return {"output": " Invalid Command"}
+        return {
+            "output": {
+                "error": "Invalid Command",
+                "roll_request": data['roll_operation'],
+                "roll_result": "Error"
+            }
+        }
     except Exception as e:
         if hasattr(e, "message"):
             msg = e.message
         else:
             msg = str(e)
-        return {"output": f"I ain't Dead \n {msg}"}
+        return {
+            "output": {
+                "error": msg,
+                "roll_request": data['roll_operation'],
+                "roll_result": "Error"
+            }
+        }

roll_witch/web_app/router.py

@@ -5,11 +5,6 @@
 import os
 
 
-@aiohttp_jinja2.template("index.jinja2")
-async def handle(request):
-    return {"output": None}
-
-
 @aiohttp_jinja2.template("roller.jinja2")
 async def handle_roller(request):
     return {"output": None}
@@ -24,12 +19,14 @@ async def start_app():
 
     dirname = os.path.dirname(__file__)
     filename = os.path.join(dirname, "templates")
+    staticfiles = os.path.join(dirname, "static")
     aiohttp_jinja2.setup(app, loader=jinja2.FileSystemLoader(filename))
 
-    app.router.add_get("/", handle)
+    app.router.add_get("/", handle_roller)
     app.router.add_post("/roll", roller.roll)
     app.router.add_get("/roll", handle_roller)
     app.router.add_get("/_ah/warmup", warmup)
+    app.router.add_static("/static", staticfiles)
     runner = web.AppRunner(app)
     await runner.setup()
 

roll_witch/web_app/static/styles.css

@@ -0,0 +1,173 @@
+
+body {
+    font-family: sans-serif; /* Readable font for body text */
+    margin: 40px; /* Adds visual space around content */
+}
+
+header {
+    text-align: center; /* Centers the heading */
+    margin-bottom: 40px; /* Adds spacing below the header */
+}
+
+h1 {
+    font-size: 24px; /* Appropriate size for the main heading */
+}
+
+p {
+    margin-bottom: 10px; /* Adds spacing between paragraphs */
+}
+
+.error {
+    color: red; /* Visually distinguishes error messages */
+}
+
+form {
+    display: flex; /* Arranges form elements horizontally */
+    flex-direction: column; /* Stacks elements vertically */
+    align-items: center; /* Aligns elements centrally */
+}
+
+label {
+    margin-bottom: 5px; /* Adds spacing between label and input */
+}
+
+input[type="text"] {
+    padding: 10px; /* Adds padding to input field */
+    border: 1px solid #ccc; /* Creates a visible border */
+    border-radius: 5px; /* Softens corners */
+    margin-bottom: 10px; /* Adds spacing below input */
+}
+
+button[type="submit"] {
+    background-color: #4CAF50; /* Green background for visual emphasis */
+    color: white; /* White text for contrast */
+    padding: 10px 20px; /* Adjusts button size */
+    border: none; /* Removes default border */
+    border-radius: 5px; /* Softens corners */
+    cursor: pointer; /* Indicates clickability */
+}
+
+main section {
+    display: flex; /* Arranges main elements horizontally */
+    flex-direction: column; /* Stacks elements vertically */
+    align-items: left; /* Aligns elements centrally */
+}
+
+aside {
+    text-align: center; /* Center the inline-block article */
+    width:20%; /* Set a width for the article */
+}
+
+main {
+    display: flex;
+    justify-content: center;
+    width:100%;
+}
+aside img {
+    width: 100%;
+}
+
+article {
+    display: inline-block; /* Shrink to fit content */
+    /* Optional adjustments: */
+    max-width: 600px; /* Set a maximum width */
+    padding: 20px; /* Add padding around content */
+}
+
+:root {
+  --charcoal: #2C3333;
+  --teal: #53A3BE;
+  --gray: #8F8F8F;
+}
+
+/* Body and Background */
+
+body {
+  background-color: var(--charcoal);
+  color: var(--gray);
+  font-family: sans-serif;
+}
+
+/* Headings and Text */
+
+h1, h2, h3 {
+  color: var(--gray);
+  font-weight: 400;
+  margin: 1rem 0;
+}
+
+p {
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--teal);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Components and Elements */
+
+.article {
+  background-color: rgba(var(--charcoal), 0.9);
+  padding: 1rem;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form label {
+  color: var(--gray);
+  margin-bottom: 0.5rem;
+}
+
+.form input,
+.form button {
+  background-color: rgba(var(--charcoal), 0.8);
+  border: 1px solid var(--gray);
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  color: var(--gray);
+}
+
+.form button {
+  cursor: pointer;
+  color: var(--teal);
+  background-color: var(--teal);
+  border-color: var(--teal);
+  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+}
+
+.form button:hover {
+  color: white;
+  background-color: rgba(var(--teal), 0.8);
+}
+
+/* Additional Enhancements */
+
+.error {
+  color: red;
+  font-weight: bold;
+}
+
+.highlight {
+  color: var(--teal);
+  font-weight: bold;
+}
+
+/* Responsive Design */
+
+@media only screen and (min-width: 768px) {
+  .article {
+    width: 60%;
+  }
+}

roll_witch/web_app/templates/roller.jinja2

@@ -1,19 +1,43 @@
-<html>
-<p>Welcome to Roll Witch</p>
-{% if output %}
-<p>
-Roll Result: {{ output }}
-</p>
-{% endif %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roll Witch</title>
+    <link rel="stylesheet" href="/static/styles.css"> </head>
+<body>
+<header>
+    <h1>Roll Witch</h1>
+    <p>Roll Witch is a simple dice roller. It can roll any number of dice with any number of sides, and can add or subtract a modifier.</p>
+</header>
 
-<form action="/roll" method="post" accept-charset="utf-8"
-      enctype="application/x-www-form-urlencoded">
+<main>
+<section>
+    {% if output %}
+        <article>
+        {% if output.error %}
+            <h3>Error</h3>
+            <p class="error">{{ output.error }}</p>
+        {% endif %}
+        <h3>Roll Request</h3>
+        <p>{{ output.roll_request }}</p>
+        <h3>Roll Result</h3>
+        <p>{{ output.roll_result }}</p>
+        </article>
+    {% endif %}
+<article>
+    <h3>Roll</h3>
+    <form action="/roll" method="post">
+        <label for="roll_operation">What would you like me to roll?</label>
+        <input type="text" id="roll_operation" name="roll_operation" required>
+        <button type="submit">Roll</button>
+    </form>
+</article>
+</section>
 
-    <label for="author">name</label>
-    <input id="author" name="author" type="text" value="" autofocus/>
-    <label for="roll_operation">What would you like me to roll?</label>
-    <input id="roll_operation" name="roll_operation" type="text" value=""/>
-
-    <input type="submit" value="Roll"/>
-</form>
-</html>
+<aside>
+    <img src="/static/witch.png" alt="Roll Witch">
+</aside>
+</main>
+</body>
+</html>