Merge pull request 'WIP : Improves handling port mapping' (#29) from fix/port_mapping into master

Reviewed-on: GibCasa/GameServerSupervisor#29

Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.10-alpine
+
+ARG supervisor_dir="/usr/src/GameServerSupervisor"
+
+RUN mkdir -p $supervisor_dir
+
+WORKDIR $supervisor_dir
+
+COPY . $supervisor_dir
+
+RUN pip install --upgrade pip 
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 80

GameServerSupervisor/settings.py

@@ -118,6 +118,9 @@ USE_TZ = True
 
 STATIC_URL = "static/"
 
+MEDIA_URL = '/media/'
+MEDIA_ROOT = BASE_DIR / 'media'
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
 

README.md

@@ -1,15 +1,114 @@
 # GibCasa GameServerSupervisor
 
-# Setup 
+## Table of Contents
+- [Installation using venv](#installation-using-venv)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Installation using Podman](#installation-using-podman)
+  - [Prerequisites](#prerequisites-1)
+  - [Installation](#installation-1)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
 
+## Installation using venv
+
+### Prerequisites
+
+Python 3.10 or above
+
+### Installation
+
+1. Clone the repository:
+```bash
+  git clone https://git.com.de/GibCasa/GameServerSupervisor
+```
+2. Create a virtual environment in Python:
+```bash
+  python -m venv venv
+```
+3. Activate the virtual environment:
+```bash
+  source venv/bin/activate
+```
+4. Install dependencies:
+```bash
+  pip install -r requirements.txt
+```
+5. Run tests:
+```bash
+  ./manage.py test
+```
+6. Run migrations:
+```bash
+  ./manage.py migrate
+```
+7. Create admin user:
+```bash
+  ./manage.py createsuperuser
+```
+8. Run server:
+```bash
+  ./manage.py runserver
+```
+## Installation using Podman
+
+### Prerequisites
+
+Podman
+
+### Installation
+
+1. Clone the repository:
+```bash
+  git clone https://git.com.de/GibCasa/GameServerSupervisor
+```
+2. Build the image:
+```bash
+  podman build . -t supervisor-image
+```
+3. Run a container in an interactive shell:
+```bash
+  podman run -it --network=host localhost/supervisor-image sh
+```
+4. Run tests:
+```bash
+  ./manage.py test
+```
+5. Run migrations:
+```bash
+  ./manage.py migrate
+```
+6. Create admin user:
+```bash
+  ./manage.py createsuperuser
+```
+7. Run server:
+```bash
+  ./manage.py runserver
+```
+-------------
+
+To live sync host directory with container folder, in Step 3:
+```bash
+podman run --network=host -itv /host/src/path:/usr/src/GameServerSupervisor supervisor-image sh
+```
+`/host/src/path` is the absolute path to the repository in the host machine.
+
+## Usage
+
+* Visit http://localhost:8000 for /public and 
+  http://localhost:8000/admin/ to login via the superuser credentials
+
+## Contributing
+
+1. Fork the repository.
+2. Create a new branch: `git checkout -b feature-name`.
+3. Make your changes.
+4. Push your branch: `git push origin feature-name`.
+5. Create a pull request.
+
+## License
+
+This project is licensed under the [AGPL](https://www.gnu.org/licenses/agpl-3.0.html).
 
-* clone the repo
-* create venv `python3 -m venv venv`
-* activate `source venv/bin/activate`
-* `pip install -r requirements.txt`
-* will need docker running 
-* `python manage.py migrate`
-* Create admin user: `python manage.py createsuperuser` 
-* `python manage.py runserver`
-* visit http://localhost:8000 for /public and 
-  http://localhost:8000/admin/ to login via the superuser credentials

requirements.txt

@@ -3,6 +3,7 @@ certifi==2024.12.14
 charset-normalizer==3.4.1
 Django==5.1.5
 idna==3.10
+pillow==11.2.1
 podman==5.2.0
 requests==2.32.3
 sqlparse==0.5.3

webpanel/admin.py

@@ -1,55 +1,64 @@
-from django.contrib import admin
+from django.contrib import admin, messages
 from .models import Game, Server
-from .utils import launch_pod_container, stop_pod_container, remove_pod_container
-import podman
+from django import forms
+from .widgets import PortMappingWidget
+
+class ServerForm(forms.ModelForm):
+    class Meta:
+        model = Server
+        fields = "__all__"
+        widgets = {
+            "port": PortMappingWidget(),
+        }
+    def clean_port(self):
+        keys = self.data.getlist("port_key")
+        values = self.data.getlist("port_value")
+
+        try:
+            return {
+                k.strip(): int(v)
+                for k, v in zip(keys, values)
+                if k.strip() and v.strip()
+            }
+        except ValueError:
+            raise forms.ValidationError("Port values must be integers.")
+@admin.action(description="Launch selected servers")
+def launch_servers(modeladmin, request, queryset):
+    for server in queryset:
+        result = server.launch_pod_container()
+        messages.info(request, f"{server.name}: {result}")
+
+@admin.action(description="Stop selected servers")
+def stop_servers(modeladmin, request, queryset):
+    for server in queryset:
+        result = server.stop_pod_container()
+        messages.info(request, f"{server.name}: {result}")
+
+@admin.action(description="Remove selected servers")
+def remove_servers(modeladmin, request, queryset):
+    for server in queryset:
+        result = server.remove_pod_container()
+        messages.info(request, f"{server.name}: {result}")
 
 @admin.register(Game)
 class GameAdmin(admin.ModelAdmin):
-    list_display = ('name', 'genre')
+    list_display = ('name', 'genre', 'thumbnail')
     search_fields = ('name', 'genre')
     ordering = ('name',)
 
-@admin.action(description='Launch Container')
-def launch_container(modeladmin, request, queryset):
-    client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-    for server in queryset:
-        container_name = f"{server.game.name}_{server.ip_address}_{server.port}"
-        try:
-            # Ensure the command is passed as a list of strings
-            command = server.get_docker_run_command().split() if server.docker_run_command else []
-            container = client.containers.run(
-                server.docker_image,
-                detach=True,
-                name=container_name,
-                command=command,
-                ports={f"{server.port}/tcp": server.port},
-                remove=True,  # Automatically remove on stop
-            )
-            server.sync_status()
-            modeladmin.message_user(request, f"Container launched: {container.id}")
-        except Exception as e:
-            modeladmin.message_user(request, f"Failed to launch {server}: {e}", level="error")
-
-@admin.action(description='Stop Container')
-def stop_container(modeladmin, request, queryset):
-    for server in queryset:
-        container_name = f"{server.game.name}_{server.ip_address}_{server.port}"
-        result = stop_pod_container(container_name)
-        server.sync_status()
-        modeladmin.message_user(request, f"Stop container result for {server}: {result}")
-
-@admin.action(description='Remove Container')
-def remove_container(modeladmin, request, queryset):
-    for server in queryset:
-        container_name = f"{server.game.name}_{server.ip_address}_{server.port}"
-        result = remove_pod_container(container_name)
-        server.sync_status()
-        modeladmin.message_user(request, f"Remove container result for {server}: {result}")
 
 @admin.register(Server)
 class ServerAdmin(admin.ModelAdmin):
-    list_display = ('game', 'name', 'ip_address', 'port', 'status', 'docker_image', 'docker_run_command', 'command_args')
+    form = ServerForm
+    list_display = (
+        'game', 'name', 'ip_address', 'get_ports_display', 'status', 'image', 'run_command', 'command_args'
+    )
     search_fields = ('game__name', 'ip_address', 'port')
+    list_filter = ('status', 'game')
+    ordering = ('game', 'ip_address')
+    actions = [stop_servers, remove_servers, launch_servers]
+
+    readonly_fields = ('get_ports_display',)
 
     def save_model(self, request, obj, form, change):
         super().save_model(request, obj, form, change)
@@ -61,7 +70,3 @@ class ServerAdmin(admin.ModelAdmin):
             server.sync_status()
         return queryset
 
-    list_filter = ('status', 'game')
-    search_fields = ('ip_address', 'game__name', 'docker_image')
-    ordering = ('game', 'ip_address')
-    actions = [launch_container, stop_container, remove_container]

webpanel/migrations/0006_rename_docker_image_server_image_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.5 on 2025-02-09 17:03
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0005_server_command_args_server_docker_run_command"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="server",
+            old_name="docker_image",
+            new_name="image",
+        ),
+        migrations.RenameField(
+            model_name="server",
+            old_name="docker_run_command",
+            new_name="run_command",
+        ),
+    ]

webpanel/migrations/0007_game_thumbnail.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.5 on 2025-04-15 19:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0006_rename_docker_image_server_image_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="game",
+            name="thumbnail",
+            field=models.ImageField(
+                blank=True, null=True, upload_to="game_thumbnails/"
+            ),
+        ),
+    ]

webpanel/migrations/0008_alter_game_thumbnail.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.5 on 2025-04-16 08:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0007_game_thumbnail"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="game",
+            name="thumbnail",
+            field=models.ImageField(
+                blank=True, null=True, upload_to="media/game_thumbnails/"
+            ),
+        ),
+    ]

webpanel/migrations/0009_server_container_id_server_last_log.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.5 on 2025-04-16 14:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0008_alter_game_thumbnail"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="server",
+            name="container_id",
+            field=models.CharField(blank=True, max_length=64, null=True),
+        ),
+        migrations.AddField(
+            model_name="server",
+            name="last_log",
+            field=models.TextField(blank=True, null=True),
+        ),
+    ]

webpanel/migrations/0010_alter_game_thumbnail.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.5 on 2025-04-20 18:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0009_server_container_id_server_last_log"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="game",
+            name="thumbnail",
+            field=models.ImageField(
+                blank=True, null=True, upload_to="game_thumbnails/"
+            ),
+        ),
+    ]

webpanel/migrations/0011_alter_server_port.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.5 on 2025-04-22 19:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0010_alter_game_thumbnail"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="server",
+            name="port",
+            field=models.JSONField(default=dict),
+        ),
+    ]

webpanel/migrations/0012_alter_server_port.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.5 on 2025-04-22 19:42
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0011_alter_server_port"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="server",
+            name="port",
+            field=models.JSONField(blank=True, default=dict),
+        ),
+    ]

webpanel/migrations/0013_migrate_port_to_dict.py

@@ -0,0 +1,32 @@
+# Generated by Django 5.1.5 on 2025-04-22 19:57
+
+from django.db import migrations
+import json
+
+def migrate_port_to_dict(apps, schema_editor):
+    Server = apps.get_model("webpanel", "Server")
+    for gs in Server.objects.all():
+        port = gs.port
+        if isinstance(port, int):
+            gs.port = {"default": port}
+            gs.save()
+        elif isinstance(port, str):
+            try:
+                parsed = json.loads(port)
+                if isinstance(parsed, dict):
+                    gs.port = parsed
+                    gs.save()
+            except json.JSONDecodeError:
+                # Fallback: store as a default port string
+                gs.port = {"default": port}
+                gs.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("webpanel", "0012_alter_server_port"),
+    ]
+
+    operations = [
+        migrations.RunPython(migrate_port_to_dict),
+    ]

webpanel/models.py

@@ -1,11 +1,15 @@
 from django.db import models
 import podman
+import shlex
+import re
+from typing import Optional,List
 
 class Game(models.Model):
     name = models.CharField(max_length=100)
     genre = models.CharField(max_length=50, blank=True, null=True)
+    thumbnail = models.ImageField(upload_to='game_thumbnails/', null=True, blank=True)
 
-    def __str__(self):
+    def __str__(self) -> str:
         return self.name
 
 class Server(models.Model):
@@ -13,25 +17,36 @@ class Server(models.Model):
         ('online', 'Online'),
         ('offline', 'Offline'),
     ]
-
+    last_log = models.TextField(blank=True, null=True)
     game = models.ForeignKey(Game, on_delete=models.CASCADE)
     name = models.CharField(max_length=100)
     ip_address = models.GenericIPAddressField(null=True)
-    port = models.PositiveIntegerField(null=True)
-    docker_image = models.CharField(max_length=200, null=True)
-    docker_run_command = models.CharField(max_length=500, blank=True, null=True) 
+    port = models.JSONField(default=dict, blank=True)
+    image = models.CharField(max_length=200, null=True)
+    run_command = models.CharField(max_length=500, blank=True, null=True) 
     command_args = models.TextField(blank=True, null=True)
+    container_id = models.CharField(max_length=64, blank=True, null=True)
     status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='offline')
 
-    def __str__(self):
+    def __str__(self)-> str:
         return f"{self.game.name} Server at {self.ip_address}:{self.port}"
 
-    def sync_status(self):
-        """Check the real-time status of the Docker container and update the field."""
-        client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-        container_name = f"{self.game.name}_{self.ip_address}_{self.port}"
+    @property
+    def safe_name(self) -> str:
+        """Return a container-safe version of the server name"""
+        return re.sub(r'[^a-zA-Z0-9_.-]', '_', self.name)
+
+    def _log_error(self, msg):
+        self.last_log = msg
+        self.save(update_fields=["status", "last_log"])
+    def _get_podman_client(self) -> podman.PodmanClient:
+        """Get a configured Podman client instance."""
+        return podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
+
+    def sync_status(self) -> None:
+        """Check the real-time status of the container and update the field."""
         try:
-            container = client.containers.get(container_name)
+            container = self._get_podman_client().containers.get(self.safe_name)
             if container.status == "running":
                 self.status = "online"
             else:
@@ -39,17 +54,76 @@ class Server(models.Model):
         except podman.errors.NotFound:
             self.status = "offline"
         except Exception as e:
-            self.status = "offline"  # Fallback in case of unexpected errors
+            self.status = "offline"
         self.save()
 
-    def get_docker_run_command(self):
-        """Returns the Podman run command, falling back to default image if not set."""
-        if self.docker_run_command:
-            # Return command as a string to be split later
-            return self.docker_run_command
-        else:
-            # Default command with image and arguments
-            base_command = f"{self.image}"
-            if self.command_args:
-                base_command += " " + self.command_args
-            return base_command
+    def get_ports_display(self):
+        return ", ".join(f"{k}→{v}" for k, v in self.port.items())
+    get_ports_display.short_description = "Ports"  # display name in admin
+
+
+    def launch_pod_container(self) -> str:
+        try:
+            port_bindings = {
+                container_port: ('0.0.0.0', host_port)
+                for container_port, host_port in self.port.items()
+            }
+
+            container = self._get_podman_client().containers.create(
+                name=self.safe_name,
+                image=self.image,
+                ports=port_bindings,
+                command=shlex.split(self.run_command),
+                detach=True,
+            )
+            container.start()
+            self.container_id = container.id
+            self.last_log = f"Launched container {container.id}"
+            self.sync_status()
+            self.save()
+            return f"Container launched successfully: {container.id}"
+        except podman.errors.APIError as e:
+            self.last_log = f"API Error: {str(e)}"
+            self.save()
+            return f"API Error: {e}"
+        except Exception as e:
+            self.last_log = f"Error: {str(e)}"
+            self.save()
+            return f"Error: {e}"
+
+    def stop_pod_container(self) -> str:
+        try:
+            container = self._get_podman_client().containers.get(self.safe_name)
+            container.stop()
+            self.status = "offline"
+            self.last_log = f"Stopped container {container.id}"
+            self.sync_status()
+            self.save()
+            return f"Container stopped successfully: {container.id}"
+        except podman.errors.NotFound:
+            self.last_log = f"Container '{self.safe_name}' not found"
+            self.save()
+            return f"Error: Container '{self.safe_name}' not found"
+        except Exception as e:
+            self.last_log = f"Error stopping container: {str(e)}"
+            self.save()
+            return f"Error: {e}"
+
+    def remove_pod_container(self) -> str:
+        try:
+            container = self._get_podman_client().containers.get(self.safe_name)
+            container.remove(force=True)
+            self.status = "offline"
+            self.container_id = None
+            self.last_log = f"Removed container {self.safe_name}"
+            self.sync_status()
+            self.save()
+            return f"Container removed successfully: {self.safe_name}"
+        except podman.errors.NotFound:
+            self.last_log = f"Container '{self.safe_name}' not found"
+            self.save()
+            return f"Error: Container '{self.safe_name}' not found"
+        except Exception as e:
+            self.last_log = f"Error removing container: {str(e)}"
+            self.save()
+            return f"Error: {e}"

webpanel/templates/webpanel/active_servers.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Active Servers</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        .server-box {
-            border: 2px solid #007BFF;
-            border-radius: 5px;
-            padding: 10px;
-            margin-bottom: 15px;
-            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
-        }
-        legend {
-            font-weight: bold;
-            color: #007BFF;
-        }
-        .server-details {
-            margin-left: 15px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Active Servers</h1>
-    {% if servers %}
-        {% for server in servers %}
-            <fieldset class="server-box">
-                <legend>Server: {{ server.game.name }}</legend>
-                <div class="server-details">
-                    <p><strong>Genre:</strong> {{ server.game.genre }}</p>
-                    <p><strong>IP Address:</strong> {{ server.ip_address }}</p>
-                    <p><strong>Port:</strong> {{ server.port }}</p>
-                    <p><strong>Status:</strong> Online</p>
-                </div>
-            </fieldset>
-        {% endfor %}
-    {% else %}
-        <p>No active servers found.</p>
-    {% endif %}
-</body>
-</html>

webpanel/templates/webpanel/base.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}GibCasa{% endblock %}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: monospace;
+        }
+
+        body {
+            background-color: #111;
+            color: #ccc;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .navbar {
+            
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #222;
+            padding: 1em 2em;
+            border-bottom: 1px solid #444;
+        }
+
+        .navbar .left,
+        .navbar .right {
+            display: flex;
+            align-items: center;
+        }
+
+        .navbar a {
+            color: white;
+            text-decoration: none;
+            margin-right: 1.5em;
+            font-size: 1em;
+        }
+
+        .navbar a:hover {
+            color: limegreen;
+        }
+/* 
+        .search-box input {
+            padding: 5px;
+            background: #333;
+            border: 1px solid #555;
+            color: #fff;
+        } */
+
+        .profile {
+            width: 35px;
+            height: 35px;
+            background: #444;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .content {
+            width: 80%;
+            padding: 1.5em;
+        }
+
+        footer {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            border-top: 1px solid #444;
+            padding: 1em;
+            margin-top: auto;
+        }
+
+        footer a {
+            color: white;
+            text-decoration: none;
+            margin: 0 10px;
+        }
+
+        footer a:hover {
+            color: limegreen;
+        }
+
+        .sub-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid #444;
+            margin-bottom: 20px;
+        }
+
+        .sub-nav a {
+            color: white;
+            text-decoration: none;
+            margin-right: 15px;
+        }
+
+        .sub-nav a.active {
+            color: limegreen;
+        }
+
+        .right-links a {
+            color: #a36eff;
+            text-decoration: none;
+            margin-left: 10px;
+        }
+
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            width: 100%;
+            margin-top: 20px;
+        }
+
+        .box {
+            background: #222;
+            padding: 20px;
+            border-radius: 5px;
+            color: #ff5500;
+        }
+
+        .upcoming {
+            color: #ffcc00;
+            opacity: 0.8;
+        }
+
+        .stats {
+            color: white;
+        }
+
+        .game-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin-top: 20px;
+            width: 100%;
+            justify-items: center;
+        }
+
+        .game-box {
+            width: 200px;
+            height: 270px;
+            border: 1px solid #888;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #111;
+            text-align: center;
+            color: white;
+            font-size: 14px;
+        }
+
+        /* .game-box img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px;
+        } */
+    </style>
+</head>
+
+<body>
+    <div class="navbar">
+        <div class="center">
+            <pre>
+┬   ┌┬┐ ┬─┐ ┌─┐ ┬─┐ ┐─┐ ┬─┐
+│    │  │─│ │   │─┤ └─┐ │─┤
+┘─┘ └┴┘ │─┘ └─┘ ┘ │ ──┘ ┘ │
+            </pre>
+        </div>
+        <div class="navbar">
+            <div class="left">
+            <a href="{% url 'home' %}">Home</a>
+            <a href="{% url 'games' %}">Games</a>
+        </div>
+        </div>
+        </div class="navbar">
+        <!-- <div class="right">  -->
+            <!-- <div class="search-box">
+                <input type="text" placeholder="Search...">
+            </div> -->
+            <!-- <a href="#">Auth / Settings</a> -->
+            <!-- <div class="profile">Dp</div> -->
+        <!-- </div> -->
+    </div> 
+
+    <div class="content">
+        {% block content %}{% endblock %}
+    </div>
+
+    <footer>
+        <a href="https://ozFrags.net">Other Communities</a>
+        <a href="https://liberta.casa/rules.html">Terms of Service WIP</a>
+        <a href="#">License: AGPLish</a>
+        <a href="#">Contribute (WIP)</a> 
+        <a href="https://liberta.casa/gamja/#gibcasa">Support</a>
+    </footer>
+</body>
+
+</html>

webpanel/templates/webpanel/game_detail.html

@@ -1,15 +1,36 @@
-<!DOCTYPE html>
-<html>
-<head><title>{{ game.name }}</title></head>
-<body>
-    <h1>{{ game.name }}</h1>
-    <p>{{ game.description }}</p>
-    <h2>Servers</h2>
-    <ul>
-        {% for server in game.servers.all %}
-            <li>{{ server.ip_address }}:{{ server.port }} - {{ server.status }}</li>
-        {% endfor %}
-    </ul>
-    <a href="/">Back to Games</a>
-</body>
-</html>
+{% extends 'webpanel/base.html' %}
+
+{% block title %}{{ game.name }} - Game Details{% endblock %}
+
+{% block content %}
+    <h2>{{ game.name }}</h2>
+
+
+    <div class="game-detail">
+        <div class="game-box" style="width: 150px; text-align: center;">
+            <a href="{% url 'game_detail' game.name %}">
+                <img src="{{ game.thumbnail.url }}" alt="{{ game.name }}" style="width: 100%; height: auto;">
+                <p>{{ game.name }}</p>
+            </a>
+        </div>
+        <div class="active-servers">
+            {% if active_servers %}
+            {% for server in active_servers %}
+                <fieldset class="server-box">
+                    <legend>Server: {{ game.name }}</legend>
+                    <div class="server-details">
+                        <p><strong>IP Address:</strong> {{ server.ip_address }}</p>
+                        <p><strong>Port:</strong> {{ server.port }}</p>
+                        <p><strong>Status:</strong> Online</p>
+                    </div>
+                </fieldset>
+            {% endfor %}
+            {% else %}
+                <p>No active servers found for this game.</p>
+            {% endif %}
+        </div>
+        <div class="game-info">
+            <p>Pull data from some open API to populate information about the game and render it.</p>
+        </div>
+    </div>
+{% endblock %}

webpanel/templates/webpanel/game_servers.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Active Servers for {{ game.name }}</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        h1 {
-            color: #007BFF;
-        }
-        .server-box {
-            border: 2px solid #007BFF;
-            border-radius: 5px;
-            padding: 10px;
-            margin-bottom: 15px;
-            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
-        }
-        legend {
-            font-weight: bold;
-            color: #007BFF;
-        }
-        .server-details {
-            margin-left: 15px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Active Servers for {{ game.name }}</h1>
-    <h3>Genre: {{ game.genre }}</h3>
-    {% if servers %}
-        {% for server in servers %}
-            <fieldset class="server-box">
-                <legend>Server: {{ game.name }}</legend>
-                <div class="server-details">
-                    <p><strong>IP Address:</strong> {{ server.ip_address }}</p>
-                    <p><strong>Port:</strong> {{ server.port }}</p>
-                    <p><strong>Status:</strong> Online</p>
-                </div>
-            </fieldset>
-        {% endfor %}
-    {% else %}
-        <p>No active servers found for this game.</p>
-    {% endif %}
-</body>
-</html>

webpanel/templates/webpanel/games.html

@@ -0,0 +1,20 @@
+{% extends 'webpanel/base.html' %}
+
+{% block title %}Games - Game Servers{% endblock %}
+
+{% block content %}
+    <h2>Games</h2>
+
+    <div class="game-grid" style="display: flex; flex-wrap: wrap; gap: 10px;">
+        {% for game in games %}
+            <div class="game-box" style="width: 150px; text-align: center;">
+                <a href="{% url 'game_detail' game.name %}">
+                    <img src="{{ game.thumbnail.url }}" alt="{{ game.name }}" style="width: 100%; height: auto;">
+                    <p>{{ game.name }}</p>
+                </a>
+            </div>
+        {% empty %}
+            <p>No games available.</p>
+        {% endfor %}
+    </div>
+{% endblock %}

webpanel/templates/webpanel/home.html

@@ -1,53 +1,74 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GibCasa GSM</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        h1 {
-            color: #007BFF;
-        }
-        ul {
-            list-style-type: none;
-            padding: 0;
-        }
-        li {
-            margin: 10px 0;
-        }
-        a {
-            text-decoration: none;
-            color: #007BFF;
-            font-weight: bold;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-    </style>
-</head>
-<body>
-    <h1>Game Hosting Panel</h1>
-    <h2>Quick Links</h2>
-    <ul>
-        <li><a href="{% url 'active-servers' %}">View All Active Servers</a></li>
-    </ul>
-    <h2>Games</h2>
-    <ul>
-        {% for game in games %}
-            <li>
-                <a href="{% url 'game-servers' game.name %}">
-                    View Active Servers for {{ game.name }}
-                </a>
-            </li>
-        {% empty %}
-            <li>No games available.</li>
-        {% endfor %}
-    </ul>
-</body>
-</html>
+{% extends 'webpanel/base.html' %}
 
-            
+{% block title %}Home - Game Servers{% endblock %}
+<style>
+    .sub-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #444;
+    margin-bottom: 20px;
+}
+
+.sub-nav a {
+    color: white;
+    text-decoration: none;
+    margin-right: 15px;
+}
+
+.sub-nav a.active {
+    color: limegreen;
+}
+
+.right-links a {
+    color: #a36eff;
+    text-decoration: none;
+    margin-left: 10px;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.box {
+    background: #222;
+    padding: 20px;
+    border-radius: 5px;
+    color: #ff5500;
+}
+
+.upcoming {
+    color: #ffcc00;
+    opacity: 0.8;
+}
+
+.stats {
+    color: white;
+}
+
+</style>
+
+{% block content %}
+    <h2>Public Game Servers</h2>
+
+    <div class="grid-container">
+        <div class="box highlight">
+            <p>Concise yet extreme 3D RGB features and services list</p>
+        </div>
+        <div class="box upcoming">
+            <p>Upcoming shit</p>
+        </div>
+        <div class="box stats">
+            <ol>
+                <li>Server Uptime & reliability</li>
+                <li>Craziest Player Stats</li>
+                <li>??</li>
+            </ol>
+        </div>
+    </div>
+{% endblock %}

webpanel/templates/webpanel/port_mapping_widget.html

@@ -0,0 +1,45 @@
+<div id="{{ widget.name }}_container">
+    {% for k, v in widget.value.items %}
+    <div class="port-entry">
+      <input type="text" name="{{ widget.name }}_key[]" value="{{ k }}" placeholder="port/proto">
+      <input type="number" name="{{ widget.name }}_value[]" value="{{ v }}" placeholder="host port">
+      <button type="button" class="remove-port-entry">×</button>
+    </div>
+    {% empty %}
+    <div class="port-entry">
+      <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
+      <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
+      <button type="button" class="remove-port-entry">×</button>
+    </div>
+    {% endfor %}
+  </div>
+  <button type="button" id="add-port-{{ widget.name|slugify }}">+ Add</button>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const container = document.getElementById("{{ widget.name }}_container");
+      const addButton = document.getElementById("add-port-{{ widget.name|slugify }}");
+      addButton.addEventListener("click", () => {
+        const div = document.createElement("div");
+        div.className = "port-entry";
+        div.innerHTML = `
+          <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
+          <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
+          <button type="button" class="remove-port-entry">×</button>
+        `;
+        container.appendChild(div);
+      });
+      container.addEventListener("click", (e) => {
+        if (e.target.classList.contains("remove-port-entry")) {
+          e.target.parentElement.remove();
+        }
+      });
+    });
+  </script>
+  <style>
+    .port-entry {
+      margin-bottom: 5px;
+    }
+    .port-entry input {
+      margin-right: 5px;
+    }
+  </style>

webpanel/test_models.py

@@ -0,0 +1,11 @@
+from django.test import TestCase
+from webpanel.models import Game
+
+class GameTestCase(TestCase):
+    def setUp(self):
+        Game.objects.create(name="Assassin's Creed")
+
+    def test_game_creation(self):
+        assassins = Game.objects.get(name="Assassin's Creed")
+        assert str(assassins) == "Assassin's Creed"
+

webpanel/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

webpanel/urls.py

@@ -1,9 +1,10 @@
+from django.conf import settings
+from django.conf.urls.static import static
 from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('', views.home_view, name='home'),
-    path('<int:pk>/', views.game_detail, name='game_detail'),
-    path('active-servers/', views.active_servers_view, name='active-servers'),
-    path('games/<str:game_name>/', views.game_servers_view, name='game-servers'),
-]
+    path('', views.home, name='home'),
+    path('games/', views.games, name='games'),
+    path('games/<str:game_name>/', views.game_detail, name='game_detail'),
+] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

webpanel/utils.py

@@ -1,51 +0,0 @@
-import podman
-
-def launch_pod_container(image, run_command, name, ports):
-    client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-    try:
-        container = client.containers.create(
-            name=name,
-            image=image,
-            # ports=ports,
-            command=run_command,
-            detach=True,
-            network_mode='host'
-        )
-        container.start()
-        return f"Container launched successfully: {container.id}"
-    except podman.errors.APIError as e:
-        return f"API Error: {e}"
-    except Exception as e:
-        return f"Error: {e}"
-
-def stop_pod_container(name):
-    client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-    try:
-        container = client.containers.get(name)
-        container.stop()
-        return f"Container stopped: {name}"
-    except podman.errors.NotFound:
-        return f"Container not found: {name}"
-    except Exception as e:
-        return f"Error stopping container {name}: {e}"
-
-def remove_pod_container(name):
-    client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-    try:
-        container = client.containers.get(name)
-        container.remove(force=True)  # Force removal if the container is running
-        return f"Container removed: {name}"
-    except podman.errors.NotFound:
-        return f"Container not found: {name}"
-    except Exception as e:
-        return f"Error removing container {name}: {e}"
-
-def is_container_running(name):
-    client = podman.PodmanClient(base_url="unix:///run/user/1000/podman/podman.sock")
-    try:
-        container = client.containers.get(name)
-        return container.status == "running"
-    except podman.errors.NotFound:
-        return False
-    except Exception as e:
-        return f"Error checking container {name}: {e}"

webpanel/views.py

@@ -1,41 +1,22 @@
 from django.shortcuts import render, get_object_or_404
 from .models import Game, Server
 
-def home_view(request):
+def home(request):
     """Display the home page with links to other views."""
     games = Game.objects.all()  # Fetch all games
     return render(request, 'webpanel/home.html', {'games': games})
 
-# def game_list(request):
-#     games = Game.objects.all()
-#     return render(request, 'webpanel/game_list.html', {'games': games})
+def games(request):
+    games = Game.objects.all()
+    return render(request, 'webpanel/games.html', {'games': games})
 
-def game_detail(request, pk):
-    game = get_object_or_404(Game, pk=pk)
-    return render(request, 'webpanel/game_detail.html', {'game': game})
-
-def active_servers_view(request):
-    """Fetch and display all active servers."""
-    # Sync server status before fetching
-    servers = Server.objects.all()
-    for server in servers:
-        server.sync_status()
-    
-    # Fetch only servers with status 'online'
-    active_servers = Server.objects.filter(status='online')
-    
-    return render(request, 'webpanel/active_servers.html', {'servers': active_servers})
-
-def game_servers_view(request, game_name):
-    """Fetch and display active servers for a specific game."""
+def game_detail(request, game_name):
+    print(f"Looking for game: {game_name}")
     game = get_object_or_404(Game, name=game_name)
-
-    # Sync server status before fetching
     servers = Server.objects.filter(game=game)
     for server in servers:
         server.sync_status()
-
-    # Fetch only active servers for the game
-    active_servers = servers.filter(status='online')
-
-    return render(request, 'webpanel/game_servers.html', {'game': game, 'servers': active_servers})
+    dormant_servers = servers.filter(status='offline')
+    active_servers = servers.filter(status='online') 
+    return render(request, 'webpanel/game_detail.html', {'game': game,
+                'active_servers': active_servers, 'dormant_servers': dormant_servers})

webpanel/widgets.py

@@ -0,0 +1,35 @@
+from django import forms
+from django.utils.safestring import mark_safe
+import json
+
+class PortMappingWidget(forms.Widget):
+    template_name = "webpanel/port_mapping_widget.html"
+
+    def format_value(self, value):
+        if isinstance(value, str):
+            try:
+                value = json.loads(value)
+            except json.JSONDecodeError:
+                value = {}
+        return value or {}
+
+    def value_from_datadict(self, data, files, name):
+        raw = {}
+        keys = data.getlist(f"{name}_key")
+        values = data.getlist(f"{name}_value")
+        for k, v in zip(keys, values):
+            if k:
+                try:
+                    raw[k] = int(v)
+                except ValueError:
+                    raw[k] = v
+        return json.dumps(raw)  # <-- FIX: return JSON string instead of dict
+
+    def get_context(self, name, value, attrs):
+        value = self.format_value(value)
+        context = super().get_context(name, value, attrs)
+        context["widget"].update({
+            "name": name,
+            "value": value,
+        })
+        return context