diff --git a/README.md b/README.md index 9ca71c8..c8934b9 100644 --- a/README.md +++ b/README.md @@ -71,4 +71,4 @@ use graffiti::{Tag, TagImpl}; ### Examples -Check the [examples](./examples/) folder to see how to build a minimal HTML page and the Starknet logo in SVG using the library. +Check the [examples](./examples/) folder to see how to build a minimal HTML page, the Starknet logo in SVG or a single Loot bag using this library. diff --git a/examples/a_loot_bag.cairo b/examples/a_loot_bag.cairo new file mode 100644 index 0000000..39666f7 --- /dev/null +++ b/examples/a_loot_bag.cairo @@ -0,0 +1,55 @@ +use graffiti::{Tag, TagImpl}; + +fn a_loot_bag() -> ByteArray { + // + // + // + // Warhammer + // Studded Leather Armor + // Ancient Helm + // Wool Sash of Rage + // Studded Leather Boots + // Linen Gloves + // "Dragon Roar" Amulet of Anger + // Bronze Ring + // + + let root: Tag = TagImpl::new("svg") + .attr("xmlns", "http://www.w3.org/2000/svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 350 350"); + + let style: Tag = TagImpl::new("style") + .content(".base { fill: white; font-family: serif; font-size: 14px; }"); + + let rect: Tag = TagImpl::new("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "black"); + + let text_base: Tag = TagImpl::new("text") + .attr("x", "10") + .attr("class", "base"); + + let text_warhammer: Tag = text_base.clone().attr("y", "20").content("Warhammer"); + let text_studded_leather_armor: Tag = text_base.clone().attr("y", "40").content("Studded Leather Armor"); + let text_ancient_helm: Tag = text_base.clone().attr("y", "60").content("Ancient Helm"); + let text_wool_sash_of_rage: Tag = text_base.clone().attr("y", "80").content("Wool Sash of Rage"); + let text_studded_leather_boots: Tag = text_base.clone().attr("y", "100").content("Studded Leather Boots"); + let text_linen_gloves: Tag = text_base.clone().attr("y", "120").content("Linen Gloves"); + let text_dragon_roar_amulet_of_anger: Tag = text_base.clone().attr("y", "140").content("\"Dragon Roar\" Amulet of Anger"); + // no need to clone for the last text + let text_bronze_ring: Tag = text_base.attr("y", "160").content("Bronze Ring"); + + root.insert(style) + .insert(rect) + .insert(text_warhammer) + .insert(text_studded_leather_armor) + .insert(text_ancient_helm) + .insert(text_wool_sash_of_rage) + .insert(text_studded_leather_boots) + .insert(text_linen_gloves) + .insert(text_dragon_roar_amulet_of_anger) + .insert(text_bronze_ring) + .build() +}