started working on the inventory

src/app/journal/journal-inventory/journal-inventory.component.html

@@ -1,15 +1,36 @@
-<div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img
-    style="height: 100%"
-    src="assets/images/inventory_coming_soon.jpeg"
-    alt=""
-  />
+<div class="inventory-container">
+  <div class="items-container">
+    <div
+      cdkDropList
+      class="example-list"
+      (cdkDropListDropped)="drop($event, weaponsAndArmor)"
+    >
+      @for (item of weaponsAndArmor; track item) {
+      <div class="example-box" cdkDrag>{{ item.name }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="money-container">
+    Geld
+    <div>
+      <input type="number" placeholder="Platin" /><br />
+      <input type="number" placeholder="Gold" /><br />
+      <input type="number" placeholder="Silber" /><br />
+      <input type="number" placeholder="Kupfer" /><br />
+    </div>
+  </div>
+
+  <div class="food-container">
+    Nahrung
+    <div
+      cdkDropList
+      class="example-list"
+      (cdkDropListDropped)="drop($event, food)"
+    >
+      @for (item of food; track item) {
+      <div class="example-box" cdkDrag>{{ item.name }}</div>
+      }
+    </div>
+  </div>
 </div>

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -0,0 +1,75 @@
+.inventory-container{
+    width: 90vw;
+    height: 85vh;
+    margin: 3rem auto;
+    display: grid;
+    grid-template-rows: repeat(10, 1fr);
+    grid-template-columns: repeat(10, 1fr);
+}
+
+.item-container{
+    grid-area: 1 / 1 / 11 / 7;
+}
+
+.money-container{
+    grid-area: 1 / 8 / 6 / 11;
+}
+
+.food-container{
+    grid-area: 7 / 8 / 11 / 11;
+}
+
+
+
+
+
+
+.example-list {
+  width: 500px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+

src/app/journal/journal-inventory/journal-inventory.component.ts

@@ -1,10 +1,61 @@
 import { Component } from '@angular/core';
+import {
+  CdkDragDrop,
+  CdkDropList,
+  CdkDrag,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-journal-inventory',
   templateUrl: './journal-inventory.component.html',
-  styleUrls: ['./journal-inventory.component.scss']
+  styleUrls: ['./journal-inventory.component.scss'],
 })
 export class JournalInventoryComponent {
+  movies = [
+    'Episode I - The Phantom Menace',
+    'Episode II - Attack of the Clones',
+    'Episode III - Revenge of the Sith',
+    'Episode IV - A New Hope',
+    'Episode V - The Empire Strikes Back',
+    'Episode VI - Return of the Jedi',
+    'Episode VII - The Force Awakens',
+    'Episode VIII - The Last Jedi',
+    'Episode IX – The Rise of Skywalker',
+  ];
 
+  public food = [
+    { name: 'Ration', ready: true, amount: 7 },
+    { name: 'Ration', ready: true, amount: 4 },
+    { name: 'Ration', ready: true, amount: 3 },
+  ];
+
+  public weaponsAndArmor = [
+    {
+      name: 'Kurzschwert',
+      weight: 40,
+      value: 50,
+      quantity: 1,
+      description: 'Hallo',
+    },
+    {
+      name: 'Helebade',
+      weight: 40,
+      value: 50,
+      quantity: 1,
+      description: 'Hallo',
+    },
+    {
+      name: 'Armbrust',
+      weight: 40,
+      value: 50,
+      quantity: 1,
+      description: 'Hallo',
+    },
+  ];
+
+  drop(event: CdkDragDrop<string[]>, list: any[]) {
+    moveItemInArray(list, event.previousIndex, event.currentIndex);
+    console.log(list);
+  }
 }