diff --git a/src/games/stendhal/server/entity/item/Item.java b/src/games/stendhal/server/entity/item/Item.java
index 6241a04cfa7..bb94499fea9 100644
--- a/src/games/stendhal/server/entity/item/Item.java
+++ b/src/games/stendhal/server/entity/item/Item.java
@@ -260,6 +260,9 @@ public static void generateRPClass() {
 
 		// marked scroll
 		entity.addAttribute("dest", Type.STRING, Definition.VOLATILE);
+
+		// state (e. g. broken)
+		entity.addAttribute("state", Type.INT);
 	}
 
 
diff --git a/src/games/stendhal/server/entity/item/RingOfLife.java b/src/games/stendhal/server/entity/item/RingOfLife.java
index 2457649a652..845197352f7 100644
--- a/src/games/stendhal/server/entity/item/RingOfLife.java
+++ b/src/games/stendhal/server/entity/item/RingOfLife.java
@@ -15,6 +15,7 @@
 
 import games.stendhal.server.entity.RPEntity;
 import games.stendhal.server.entity.player.Player;
+import marauroa.common.game.RPObject;
 
 
 /**
@@ -23,6 +24,7 @@
 public class RingOfLife extends Item {
 	public RingOfLife(final String name, final String clazz, final String subclass, final Map<String, String> attributes) {
 		super(name, clazz, subclass, attributes);
+		updateState();
 	}
 
 	/**
@@ -32,6 +34,7 @@ public RingOfLife(final String name, final String clazz, final String subclass,
 	 */
 	public RingOfLife(final RingOfLife item) {
 		super(item);
+		updateState();
 	}
 
 	/**
@@ -40,6 +43,21 @@ public RingOfLife(final RingOfLife item) {
 	public RingOfLife() {
 		super("emerald ring", "ring", "emerald-ring", null);
 		put("amount", 1);
+		updateState();
+	}
+	
+	private void updateState() {
+		if (isBroken()) {
+			put("state", 1);
+		} else {
+			put("state", 0);
+		}
+	}
+
+	@Override
+	public void fill(RPObject rpobject) {
+		super.fill(rpobject);
+		updateState();
 	}
 
 	/**
@@ -57,11 +75,13 @@ public boolean isBroken() {
 	 */
 	public void damage() {
 		put("amount", 0);
+		put("state", 1);
 	}
 
 	@Override
 	public void repair() {
 		put("amount", 1);
+		put("state", 0);
 	}
 
 	/**
diff --git a/srcjs/stendhal/entity/Item.ts b/srcjs/stendhal/entity/Item.ts
index 94cb8f7f9b9..791bc533db9 100644
--- a/srcjs/stendhal/entity/Item.ts
+++ b/srcjs/stendhal/entity/Item.ts
@@ -81,16 +81,8 @@ export class Item extends Entity {
 	}
 
 	override draw(ctx: CanvasRenderingContext2D) {
-		if (this["name"] === "emerald ring") {
-			// FIXME: can we put breakable item in its own class?
-			if (this["amount"] == 0) {
-				this.sprite.offsetY = 32;
-			} else {
-				this.sprite.offsetY = 0;
-			}
-		} else if (this.isAnimated()) {
-			this.stepAnimation();
-		}
+		this.sprite.offsetY = (this["state"] || 0) * 32
+		this.stepAnimation();
 
 		this.drawAt(ctx, this["x"] * 32, this["y"] * 32);
 	}
diff --git a/srcjs/stendhal/ui/component/ItemContainerImplementation.ts b/srcjs/stendhal/ui/component/ItemContainerImplementation.ts
index f67c78bf125..28c73259295 100644
--- a/srcjs/stendhal/ui/component/ItemContainerImplementation.ts
+++ b/srcjs/stendhal/ui/component/ItemContainerImplementation.ts
@@ -108,10 +108,8 @@ export class ItemContainerImplementation {
 				this.dirty = this.dirty || o !== (e as any).dataItem;
 				const item = <Item> o;
 				let xOffset = 0;
-				let yOffset = 0;
-				if (item["name"] === "emerald ring" && item["amount"] == 0) {
-					yOffset = -32;
-				} else if (item.isAnimated()) {
+				let yOffset = (item["state"] || 0) * -32;
+				if (item.isAnimated()) {
 					item.stepAnimation();
 					xOffset = -(item.getXFrameIndex() * 32);
 				}