Progress on fixing shitty groups code?

app/app.php

@@ -1,6 +1,8 @@
 <?php
 namespace App;
 
+use Exception;
+
 class Make {
     /*
     |-------------------------------------------------------------
@@ -205,16 +207,20 @@ class Group {
             $group_array = mysqli_fetch_assoc($query);
         }
 
-        $image_list = explode(" ", $group_array['image_list']);
+        try {
-
+            $image_list = explode(" ", $group_array['image_list']);
-        foreach ($image_list as $image) {
+            $user_array = array();
-            $image_request = mysqli_query($conn, "SELECT author FROM images WHERE id = ".$image);
+            foreach ($image_list as $image) {
-
+                $image_request = mysqli_query($conn, "SELECT author FROM images WHERE id = ".$image);
-            while ($author = mysqli_fetch_column($image_request)) {
+    
-                if (!in_array($author, $user_array)) {
+                while ($author = mysqli_fetch_column($image_request)) {
-                    array_push($user_array, $author); 
+                    if (!in_array($author, $user_array)) {
+                        $user_array[] = $author;
+                    }
                 }
             }
+        } catch (Exception) {
+
         }
 
         return($user_array);

app/image/group.php

@@ -141,3 +141,26 @@ if (isset($_POST['title_submit'])) {
         }
     }
 }
+
+if (isset($_POST['new_group_submit'])) {
+    if ($user_info->is_loggedin()) {        
+        $group_name = $_SESSION['username']." new image group";
+        $sql = "INSERT INTO groups (group_name, author, image_list) VALUES('$group_name', '".$_SESSION['id']."', '')";
+        
+        mysqli_query($conn, $sql);
+
+        $group_id = mysqli_insert_id($conn);
+
+        ?>
+            <script>
+                window.location.href = "group.php?id=<?php echo $group_id; ?>";
+            </script>
+        <?php
+    } else {
+        ?>
+            <script>
+                sniffleAdd('Denied', 'You must have an account to preform this action!', 'var(--red)', 'assets/icons/cross.svg');
+            </script>
+        <?php
+    }
+}

assets/ui/nav.php

@@ -12,19 +12,19 @@ $loggedin = new Account();
 	<div class="nav-links">
 		<a class='btn' href='index.php'><img class='svg' src='assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
 		<hr>
+		<a class='btn' href='group.php'><img class='svg' src='assets/icons/package.svg'><span class='nav-hide'>Groups</span></a>
+		<hr>
 		<?php
 		if ($loggedin->is_loggedin()) {
-		?>
+			?>
-			<a class='btn' href='upload.php'><img class='svg' src='assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>
+				<a class='btn' href='upload.php'><img class='svg' src='assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>
-			<hr>
+				<hr>
-			<a class='btn' href='group.php'><img class='svg' src='assets/icons/package.svg'><span class='nav-hide'>Groups</span></a>
+				<a class='btn' href='account.php'><img class='svg' src='assets/icons/gear.svg'><span class='nav-hide'><?php echo substr($_SESSION["username"], 0, 15); ?></span></a>
-			<hr>
+			<?php
-			<a class='btn' href='account.php'><img class='svg' src='assets/icons/gear.svg'><span class='nav-hide'><?php echo substr($_SESSION["username"], 0, 15); ?></span></a>
-		<?php
 		} else {
-		?>
+			?>
-			<a class='btn' href='account.php'><img class='svg' src='assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>
+				<a class='btn' href='account.php'><img class='svg' src='assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>
-		<?php
+			<?php
 		}
 		?>
 	</div>

css/main.css

@@ -527,6 +527,71 @@ nav .btn {
   opacity: 1;
 }
 
+.group-make {
+  margin: 0.25rem;
+  padding: 0;
+  height: auto;
+  max-width: calc(20% - 0.5rem);
+  min-width: calc(20% - 0.5rem);
+  border-radius: -0.1rem;
+  position: relative;
+  overflow: hidden;
+  flex: 1 0 150px;
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.group-make:hover {
+  outline: #E8E3E3 0.2rem solid;
+}
+.group-make:after {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+.group-make button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background-color: #121212;
+  border-radius: -0.1rem;
+  border: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  z-index: 5;
+  text-decoration: none;
+  font-family: "Secular One", sans-serif;
+}
+.group-make button:hover {
+  color: #E8E3E3;
+  cursor: pointer;
+}
+.group-make button span {
+  text-align: center;
+}
+.group-make button img {
+  margin: 0.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+@media (max-width: 800px) {
+  .group-make {
+    max-width: calc(25% - 0.5rem);
+    min-width: calc(25% - 0.5rem);
+  }
+}
+@media (max-width: 550px) {
+  .group-make {
+    max-width: calc(33.33% - 0.5rem);
+    min-width: calc(33.33% - 0.5rem);
+  }
+}
 /*
  |-------------------------------------------------------------
  | profile
@@ -814,34 +879,6 @@ nav .btn {
   top: 0;
 }
 
-/*
- |-------------------------------------------------------------
- | PASSWORD RESET
- |-------------------------------------------------------------
-*/
-.password-reset-root {
-  background-color: #151515;
-  color: #E8E3E3;
-  border-radius: 0.4rem;
-  border: 0.2rem solid #B66467;
-  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-}
-.password-reset-root h1,
-.password-reset-root h2,
-.password-reset-root h3,
-.password-reset-root h4,
-.password-reset-root h5 {
-  font-family: "Lexend Deca", sans-serif;
-  text-rendering: optimizeLegibility;
-}
-.password-reset-root p,
-.password-reset-root a,
-.password-reset-root button,
-.password-reset-root input {
-  font-family: "Secular One", sans-serif;
-  text-rendering: optimizeLegibility;
-}
-
 /*
  |-------------------------------------------------------------
  | FOOTER

css/scss/_body.scss

@@ -431,6 +431,89 @@
         }
     }
 }
+
+.group-make {
+    margin: 0.25rem;
+    padding: 0;
+
+    height: auto;
+    max-width: calc(20% - 0.5rem);
+    min-width: calc(20% - 0.5rem);
+
+    border-radius: calc($rad - 0.5rem);
+
+    position: relative;
+
+    overflow: hidden;
+
+    flex: 1 0 150px;
+
+    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        outline: $white 0.2rem solid;
+    }
+
+    &:after {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
+
+    button {
+        @include flexDown(center);
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+        
+        padding: 0;
+
+        background-color: $black;
+        border-radius: calc($rad - 0.5rem);
+        border: none;
+
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        position: absolute;
+        z-index: 5;
+
+        text-decoration: none;
+        font-family: $font-body;
+
+        &:hover {
+            color: $fg;
+
+            cursor: pointer;
+        }
+
+        span {
+            text-align: center;
+        }
+
+        img {
+            margin: 0.25rem;
+
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+    }
+}
+@media (max-width: 800px) {
+    .group-make {
+        max-width: calc(25% - 0.5rem);
+        min-width: calc(25% - 0.5rem);
+    }
+}
+@media (max-width: 550px) {
+    .group-make {
+        max-width: calc(33.33% - 0.5rem);
+        min-width: calc(33.33% - 0.5rem);
+    }
+}
 /*
  |-------------------------------------------------------------
  | profile
@@ -509,18 +592,16 @@
  | UPLOAD
  |-------------------------------------------------------------
 */
-.upload-root {
+.upload-root  > img {
-    & > img {
+    margin: 0 auto;
-        margin: 0 auto;
 
-        max-width: 100%;
+    max-width: 100%;
-        max-height: 15rem;
+    max-height: 15rem;
 
-        border-radius: calc($rad - 0.7rem);
+    border-radius: calc($rad - 0.7rem);
 
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-    }
 }
 
 /*
@@ -750,14 +831,4 @@
     background-color: $bg;
     position: sticky;
     top: 0;
-}
-
-/*
- |-------------------------------------------------------------
- | PASSWORD RESET
- |-------------------------------------------------------------
-*/
-.password-reset-root {
-    @include defaultDecoration($red);
-    @include defaultFont();
 }

group.php

@@ -10,6 +10,12 @@
     $image_info = new Image;
     $group_info = new Group;
     $diff = new Diff();
+
+    if (isset($_GET['id'])) {
+        $group = $group_info->get_group_info($conn, $_GET['id']);
+
+        if (!isset($group) || empty($group)) header("Location: group.php");
+    }
 ?>
 
 <!DOCTYPE html>
@@ -22,8 +28,6 @@
 
     <?php
         if (isset($_GET['id'])) {
-            $group = $group_info->get_group_info($conn, $_GET['id']);
-            if (!isset($group) || empty($group)) header("Location: group.php");
             $image_list = array_reverse(explode(" ", $group['image_list']));
 
             echo "<div class='defaultDecoration defaultSpacing defaultFonts'>";
@@ -34,12 +38,14 @@
             echo "<p>By: ".$author_info['username']."</p>";
 
             $group_members = $group_info->get_group_members($conn, $_GET['id']);
-            $members_array = array();
+            if (!empty($group_members)) {
-            foreach ($group_members as $member) {
+                $members_array = array();
-                $member_info = $user_info->get_user_info($conn, $member);
+                foreach ($group_members as $member) {
-                array_push($members_array, $member_info['username']);
+                    $member_info = $user_info->get_user_info($conn, $member);
+                    if (!empty($member_info['username'])) $members_array[] = $member_info['username'];
+                }
+                echo "<p>Members: ".implode(", ", $members_array)."</p>";
             }
-            echo "<p>Members: ".implode(", ", $members_array)."</p>";
 
             $upload_time = new DateTime($group['created_on']);
             echo "<p id='updateTime'>Created at: ".$upload_time->format('d/m/Y H:i:s T')."</p;>";
@@ -167,11 +173,15 @@
                                 var groupSubmit = $("#groupSubmit").val();
                                 var images = getList();
 
-                                $("#sniffle").load("app/image/group.php", {
+                                if (images <= 0) {
-                                    group_images: images,
+                                    sniffleAdd('Oppsie', 'Groups need at least 1 image in them. Alternativly, you can delete this group.', 'var(--red)', 'assets/icons/cross.svg');
-                                    group_id: <?php echo $_GET['id']; ?>,
+                                } else {
-                                    group_submit: groupSubmit
+                                    $("#sniffle").load("app/image/group.php", {
-                                });
+                                        group_images: images,
+                                        group_id: <?php echo $_GET['id']; ?>,
+                                        group_submit: groupSubmit
+                                    });
+                                }
                             });
                         </script>
                     <?php
@@ -207,6 +217,24 @@
                     }
                 }
             } elseif (!isset($_GET['id']) && empty($_GET['id'])) {
+                if ($user_info->is_loggedin()) {
+                    echo "<div class='group-make'>
+                        <button id='createGroup'><img class='svg' src='assets/icons/plus.svg'><span>Make new group</span></button>
+                        </div>";
+
+                    ?>
+                        <script>
+                            $('#createGroup').click(function() {
+                                sniffleAdd('*Thinking*', 'Creating your group now!', 'var(--green)', 'assets/icons/package.svg');
+                                
+                                $("#sniffle").load("app/image/group.php", {
+                                    new_group_submit: "uwu"
+                                });
+                            });
+                        </script>
+                    <?php
+                }
+
                 $group_list = mysqli_query($conn, "SELECT * FROM groups ORDER BY id DESC");
 
                 foreach ($group_list as $group) {
@@ -214,11 +242,16 @@
                     $image = $image_info->get_image_info($conn, $image_list[array_rand($image_list, 1)]);
 
                     // Getting thumbnail
-                    if (file_exists("images/thumbnails/".$image['imagename'])) {
+                    if (!empty($image['imagename'])) {
-                        $image_path = "images/thumbnails/".$image['imagename'];
+                        if (file_exists("images/thumbnails/".$image['imagename'])) {
+                            $image_path = "images/thumbnails/".$image['imagename'];
+                        } else {
+                            $image_path = "images/".$image['imagename'];
+                        } 
                     } else {
-                        $image_path = "images/".$image['imagename'];
+                        $image_path = "assets/no_image.png";
                     }
+                    
 
                     // Check for NSFW tag
                     if (str_contains($image['tags'], "nsfw")) {

index.php

@@ -1,10 +1,4 @@
-<?php
+<?php require_once __DIR__."/app/required.php"; ?>
-	require_once __DIR__."/app/required.php";
-	
-	use App\Image;
-
-	$image_info = new Image;
-	?>
 
 <!DOCTYPE html>
 <html>
@@ -54,40 +48,6 @@
 	?>
 </div>
 
-<div class="gallery-root defaultDecoration">
-	<?php
-		// Reading images from table
-		$group_list = mysqli_query($conn, "SELECT * FROM groups ORDER BY id DESC");
-
-		foreach ($group_list as $group) {
-			$image_list = array_reverse(explode(" ", $group['image_list']));
-			$image = $image_info->get_image_info($conn, $image_list[array_rand($image_list, 1)]);
-
-			// Getting thumbnail
-			if (file_exists("images/thumbnails/".$image['imagename'])) {
-				$image_path = "images/thumbnails/".$image['imagename'];
-			} else {
-				$image_path = "images/".$image['imagename'];
-			}
-
-			// Check for NSFW tag
-			if (str_contains($image['tags'], "nsfw")) {
-				echo "<div class='gallery-item group-item'>
-					<a href='group.php?id=".$group['id']."' class='nsfw-warning gallery-group'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>
-					<a href='group.php?id=".$group['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$group['id']."'></a>
-					<a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a>
-					</div>";
-			} else {
-				echo "<div class='gallery-item group-item'>
-					<a href='group.php?id=".$group['id']."' class='gallery-group'></a>
-					<a href='group.php?id=".$group['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$group['id']."'></a>
-					<a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a>
-					</div>";
-			}
-		}
-	?>
-</div>
-
 <div class="gallery-root defaultDecoration">
 	<?php
 		// Reading images from table

upload.php

@@ -24,7 +24,7 @@
 		}
 	?>
 
-	<div class="defaultDecoration defaultSpacing defaultFonts">
+	<div class="upload-root defaultDecoration defaultSpacing defaultFonts">
 		<h2>Upload image</h2>
 		<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
 		<img id="imagePreview" src="">