profilepic 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ffc9a8e667f60136de35f02afcf76ffe1726b987630b06e5476f8319fc1389c
-  data.tar.gz: 35358297cc5182a6af8a7b83d1abdbfa9826e16f2dd5a20937e4162f1961042e
+  metadata.gz: 5d41ebabc80cb160ec234b527e6c1fc7d04ef28794a57fc7c1bba83fa9d357fc
+  data.tar.gz: 83175dee4ce2769394a40aff87ad1358082c9a3f89522e918977577b69eaf0e2
 SHA512:
-  metadata.gz: 35f8b682f2fe4985c47a5e34d3f1b711b4657e137bc324635b79e16e7fb7a63381dfc6f352f24ecf5236f821aedf0457357bf47a8fc1719f30d2359e563062d5
-  data.tar.gz: 36f6275b5c5fee241f489dc7f19206d786fe4204611a0bea83ff77c232ef77fc8cce0b9913b1e9799a3f96df4f041e338636f0e777bdd493397803ec08e3c2dd
+  metadata.gz: b47049d03f7a3d935b31e2e3d9682d02ba55e9bc0238b4b8a55b9b93d6cd84518e2384945acaf562de43a1661094657f3e2ffb3ef8ca51765ee567e631863b6a
+  data.tar.gz: 2cd589f2713dfa6f007290566037b8956fe11b1f4010b358dcfd07dc5f1487a01ceb23cce0d2a9cc2cef92d1ebf63f211cedefd4286f736409e68dfcf05aa0bb

data/Manifest.txt

@@ -5,7 +5,14 @@ Rakefile
 bin/profilepic
 lib/profilepic.rb
 lib/profilepic/builder.rb
+lib/profilepic/public/doge-24x24.csv
+lib/profilepic/public/doge-24x24.png
+lib/profilepic/public/marcs-24x24.csv
+lib/profilepic/public/marcs-24x24.png
+lib/profilepic/public/spritesheet.js
 lib/profilepic/public/style.css
+lib/profilepic/public/yeoldepunks-24x24.csv
+lib/profilepic/public/yeoldepunks-24x24.png
 lib/profilepic/service.rb
 lib/profilepic/version.rb
 lib/profilepic/views/doge.erb

data/lib/profilepic/public/doge-24x24.csv

@@ -0,0 +1,23 @@
+id, category, name, more_names
+0, , classic, 
+1, , dark, 
+2, , zombie, 
+3, , alien, 
+4, , crazyhair, 
+5, , beanie, 
+6, , cap, 
+7, , capforward, 
+8, , cowboyhat, 
+9, , fedora, 
+10, , knittedcap, 
+11, , tophat, 
+12, , bandana, 
+13, , headband, 
+14, , tiara, 
+15, , 3dglasses, 
+16, , bigshades, 
+17, , classicshades, 
+18, , regularshades, 
+19, , smallshades, 
+20, , nerdglasses, 
+21, , eyepatch, 

data/lib/profilepic/public/marcs-24x24.csv

@@ -0,0 +1,149 @@
+id, category, name, more_names
+0, , marc-classic, 
+1, , ape-classic, 
+2, , Marc 1, Marc Dark
+3, , Marc 2, Marc Mid | Marc Medium
+4, , Marc 3, Marc | Marc Light
+5, , Marc 4, Marc Albino
+6, , Marc Gold, Gold | Marc Golden
+7, , madlad, 
+8, , zombie, 
+9, , ape, 
+10, , Golden Ape, Ape Gold | Ape Golden
+11, , Pink Ape, Ape Pink
+12, , Blue Alien, Alien | Alien Blue
+13, , Green Alien, Alien Green
+14, , Devil 1, Devil | Demon | Demon 1
+15, , Devil 2, Demon 2
+16, , Devil 3, Demon 3
+17, , orc, 
+18, , skeleton, 
+19, , bot, 
+20, , blue_eyes, 
+21, , green_eyes, 
+22, , blue_eye_shadow, 
+23, , green_eye_shadow, 
+24, , purple_eye_shadow, 
+25, , bagner, 
+26, , horns, 
+27, , marc_tyson, 
+28, , cleft, 
+29, , mole, 
+30, , rosy_cheeks, 
+31, , shine, 
+32, , spots, 
+33, , black_lipstick, 
+34, , hot_lipstick, 
+35, , purple_lipstick, 
+36, , buck_teeth, 
+37, , clown_nose, 
+38, , gold_ring, 
+39, , diamond_earring, 
+40, , gold_earring, 
+41, , diamond_helix, 
+42, , gold_helix, 
+43, , frown, 
+44, , smile, 
+45, , big_beard_white, 
+46, , big_beard, 
+47, , chinstrap, 
+48, , front_beard, 
+49, , front_beard_dark, 
+50, , full_mustache, 
+51, , full_mustache_dark, 
+52, , goat, 
+53, , goat_dark, 
+54, , handlebar, 
+55, , luxurious_beard, 
+56, , mustache, 
+57, , mutton_chop, 
+58, , normal_beard, 
+59, , normal_beard_black, 
+60, , shadow_beard, 
+61, , soul_patch, 
+62, , bandana, 
+63, , beanie, 
+64, , bunny_ears, 
+65, , cap, 
+66, , skull_cap, 
+67, , cap_forward, 
+68, , police_cap, 
+69, , cowboy_hat, 
+70, , do_rag, 
+71, , fast_food, 
+72, , marcdonalds, 
+73, , fedora, 
+74, , headband, 
+75, , roaring_headband, 
+76, , hoodie, 
+77, , purple_hoodie, 
+78, , knitted_cap, 
+79, , laurels, 
+80, , shemagh, 
+81, , tassle_hat, 
+82, , tiarra, 
+83, , top_hat, 
+84, , uncle_sam, 
+85, , viking, 
+86, , welding_goggles, 
+87, , blonde_bob, 
+88, , chad, 
+89, , clown_hair, 
+90, , crazy_white_hair, 
+91, , crazy_hair, 
+92, , frumpy_hair, 
+93, , marc_three, 
+94, , purple_hair, 
+95, , stringy_hair, 
+96, , vampire_hair, 
+97, , wild_blonde_hair, 
+98, , wild_hair, 
+99, , clown_eyes_blue, 
+100, , clown_eyes_green, 
+101, , lasers, 
+102, , tears, 
+103, , 3d_glasses, 
+104, , aviators, 
+105, , big_shades, 
+106, , classic_shades, 
+107, , deal_with_it, 
+108, , glasses, 
+109, , gold_glasses, 
+110, , horned_rim_glasses, 
+111, , monocle, 
+112, , nerd_glasses, 
+113, , pink_shades, 
+114, , polarized, 
+115, , polarized_white, 
+116, , regular_shades, 
+117, , small_shades, 
+118, , VR Headset, VR
+119, , eye_mask, 
+120, , eye_patch, 
+121, , cigar, 
+122, , cigarette, 
+123, , hookah, 
+124, , pipe, 
+125, , vape, 
+126, , medical_mask, 
+127, , bubble_gum, 
+128, , black_tie, 
+129, , blue_tie, 
+130, , red_tie, 
+131, , blue_shirt, 
+132, , blue_t_shirt, 
+133, , Fast Food Shirt, 
+134, , green_shirt, 
+135, , grey_shirt, 
+136, , purple_t_shirt, 
+137, , white_t_shirt, 
+138, , jumpsuit, 
+139, , labcoat, 
+140, , choker, 
+141, , double_gold_chain, 
+142, , gold_chain, 
+143, , silver_chain, 
+144, , thick_chain, 
+145, , hemp, 
+146, , ice, 
+147, , medallion, 

data/lib/profilepic/public/spritesheet.js

@@ -0,0 +1,126 @@
+function parseCsv( str ) {
+  const lines = str.split( /\r?\n/ );
+  let rows = [];
+
+  for( let line of lines ) {
+      line = line.trim();
+
+      // skip empty & comment lines
+      if( line.length === 0 || line.startsWith('#') ) {
+         continue;
+      }
+      values = line.split(',');
+
+      values = values.map( (val, index) => val.trim() );
+      console.log( values );
+
+      rows.push( values );
+  }
+
+  return rows
+}
+
+
+class Spritesheet {
+   constructor( img, names,
+                tileWidth=24,
+                tileHeight=24 ) {
+     this.img   = img;
+     this.names = this._build_names( names );
+     this.tileWidth =  tileWidth;
+     this.tileHeight = tileHeight;
+   }
+   static read( src, names,
+                tileWidth=24,
+                tileHeight=24 ) {
+      let img = new Image();
+      img.src = src;
+      return new Spritesheet( img, names, tileWidth, tileHeight );
+   }
+
+
+   _build_names( str ) {
+      // assume text records in comma-separated values (.csv)
+      // e.g.
+      //   0, Male 1
+      //   1, Male 2
+      //   ...
+      //   11, Rosy Cheeks (m)
+
+      const rows = parseCsv( str );
+      let names = {};
+      for( let row of rows ) {
+         let id = parseInt( row[0] );
+         let name = this._norm_name( row[1] );
+
+         names[ name ] = id;
+      }
+
+      return names;
+   }
+
+  _norm_name( str ) {
+    str = str.toLowerCase();
+    str = str.replaceAll( /[ _-]/ig, '' );
+    console.log( str );
+    return str;
+  }
+
+  drawSprite( name, sel, zoom=1 ) {
+    let el = (typeof sel === 'string') ?
+                 document.querySelector( sel )
+                :
+              sel;
+
+    let num =  this.names[ this._norm_name( name ) ];
+    this._drawSprite( num, el, zoom );
+  }
+
+  _drawSprite( num, el, zoom=1 ) {
+
+     let canvas = document.createElement( 'canvas' );
+
+    canvas.width = this.tileWidth*zoom;
+    canvas.height =this.tileHeight*zoom;
+
+    console.log( "==> Spritesheet.drawSprite" );
+    console.log( canvas.width, canvas.height );
+
+    let cols = this.img.naturalWidth / this.tileHeight;
+    let rows = this.img.naturalHeight / this.tileWidth;
+    console.log( cols, rows );
+
+    let dy = Math.floor( num / cols );
+    let dx = num % cols;
+    console.log( dx, dy );
+
+    let cx = canvas.getContext( "2d" );
+    cx.clearRect( 0, 0, this.tileWidth, this.tileHeight );
+    cx.imageSmoothingEnabled = false;
+    cx.drawImage( this.img,
+                  // source rect
+                  dx*this.tileWidth, dy*this.tileHeight, this.tileWidth, this.tileHeight,
+                  // dest rect
+                  0, 0, this.tileWidth*zoom, this.tileHeight*zoom );
+
+    el.appendChild( canvas );
+}
+
+  draw( sel='span.sprite', zoom=1 ) {
+    // note: use onload (async) callback to wait for (required) image download to complete
+    this.img.onload = () => {
+       console.log( "  image.onload callback " );
+       let els = document.querySelectorAll( sel );
+       // console.log( els );
+
+       for( let el of Array.from( els ) ) {
+         let name = el.dataset.name;
+         console.log( name );
+
+         this.drawSprite( name, el, zoom );
+       }
+       console.log( "done Spritesheet.draw()" );
+      }
+    }
+}
+

data/lib/profilepic/public/yeoldepunks-24x24.csv

@@ -0,0 +1,134 @@
+id, name, gender, size, type, more_names
+0, Male 1, m, l, Archetype, 
+1, Male 2, m, l, Archetype, 
+2, Male 3, m, l, Archetype, 
+3, Male 4, m, l, Archetype, 
+4, Female 1, f, s, Archetype, 
+5, Female 2, f, s, Archetype, 
+6, Female 3, f, s, Archetype, 
+7, Female 4, f, s, Archetype, 
+8, Zombie, m, l, Archetype, 
+9, Ape, m, l, Archetype, 
+10, Alien, m, l, Archetype, 
+11, Rosy Cheeks, m, l, ?, 
+12, Luxurious Beard, m, l, ?, 
+13, Clown Hair Green, m, l, ?, 
+14, Mohawk Dark, m, l, ?, 
+15, Cowboy Hat, m, l, ?, 
+16, Mustache, m, l, ?, 
+17, Clown Nose, m, l, ?, 
+18, Cigarette, m, l, ?, 
+19, Nerd Glasses, m, l, ?, 
+20, Regular Shades, m, l, ?, 
+21, Knitted Cap, m, l, ?, 
+22, Shadow Beard, m, l, ?, 
+23, Frown, m, l, ?, 
+24, Cap Forward, m, l, ?, 
+25, Goat, m, l, ?, 
+26, Mole, m, l, ?, 
+27, Purple Hair, m, l, ?, 
+28, Small Shades, m, l, ?, 
+29, Shaved Head, m, l, ?, 
+30, Classic Shades, m, l, ?, 
+31, Vape, m, l, ?, 
+32, Silver Chain, m, l, ?, 
+33, Smile, m, l, ?, 
+34, Big Shades, m, l, ?, 
+35, Mohawk Thin, m, l, ?, 
+36, Beanie, m, l, ?, 
+37, Cap, m, l, ?, 
+38, Clown Eyes Green, m, l, ?, 
+39, Normal Beard Black, m, l, ?, 
+40, Medical Mask, m, l, ?, 
+41, Normal Beard, m, l, ?, 
+42, VR, m, l, ?, 
+43, Eye Patch, m, l, ?, 
+44, Wild Hair, m, l, ?, 
+45, Top Hat, m, l, ?, 
+46, Bandana, m, l, ?, 
+47, Handlebars, m, l, ?, 
+48, Frumpy Hair, m, l, ?, 
+49, Crazy Hair, m, l, ?, 
+50, Police Cap, m, l, ?, 
+51, Buck Teeth, m, l, ?, 
+52, Do-rag, m, l, ?, 
+53, Front Beard, m, l, ?, 
+54, Spots, m, l, ?, 
+55, Big Beard, m, l, ?, 
+56, Vampire Hair, m, l, ?, 
+57, Peak Spike, m, l, ?, 
+58, Chinstrap, m, l, ?, 
+59, Fedora, m, l, ?, 
+60, Earring, m, l, ?, 
+61, Horned Rim Glasses, m, l, ?, 
+62, Headband, m, l, ?, 
+63, Pipe, m, l, ?, 
+64, Messy Hair, m, l, ?, 
+65, Front Beard Dark, m, l, ?, 
+66, Hoodie, m, l, ?, 
+67, Gold Chain, m, l, ?, 
+68, Muttonchops, m, l, ?, 
+69, Stringy Hair, m, l, ?, 
+70, Eye Mask, m, l, ?, 
+71, 3D Glasses, m, l, ?, 
+72, Clown Eyes Blue, m, l, ?, 
+73, Mohawk, m, l, ?, 
+74, Pilot Helmet, f, s, ?, 
+75, Tassle Hat, f, s, ?, 
+76, Hot Lipstick, f, s, ?, 
+77, Blue Eye Shadow, f, s, ?, 
+78, Straight Hair Dark, f, s, ?, 
+79, Choker, f, s, ?, 
+80, Crazy Hair, f, s, ?, 
+81, Regular Shades, f, s, ?, 
+82, Wild Blonde, f, s, ?, 
+83, 3D Glasses, f, s, ?, 
+84, Mole, f, s, ?, 
+85, Wild White Hair, f, s, ?, 
+86, Spots, f, s, ?, 
+87, Frumpy Hair, f, s, ?, 
+88, Nerd Glasses, f, s, ?, 
+89, Tiara, f, s, ?, 
+90, Orange Side, f, s, ?, 
+91, Red Mohawk, f, s, ?, 
+92, Messy Hair, f, s, ?, 
+93, Clown Eyes Blue, f, s, ?, 
+94, Pipe, f, s, ?, 
+95, Wild Hair, f, s, ?, 
+96, Purple Eye Shadow, f, s, ?, 
+97, Stringy Hair, f, s, ?, 
+98, Dark Hair, f, s, ?, 
+99, Eye Patch, f, s, ?, 
+100, Blonde Short, f, s, ?, 
+101, Classic Shades, f, s, ?, 
+102, Eye Mask, f, s, ?, 
+103, Clown Hair Green, f, s, ?, 
+104, Cap, f, s, ?, 
+105, Medical Mask, f, s, ?, 
+106, Bandana, f, s, ?, 
+107, Purple Lipstick, f, s, ?, 
+108, Clown Nose, f, s, ?, 
+109, Headband, f, s, ?, 
+110, Pigtails, f, s, ?, 
+111, Straight Hair Blonde, f, s, ?, 
+112, Knitted Cap, f, s, ?, 
+113, Clown Eyes Green, f, s, ?, 
+114, Cigarette, f, s, ?, 
+115, Welding Goggles, f, s, ?, 
+116, Mohawk Thin, f, s, ?, 
+117, Gold Chain, f, s, ?, 
+118, VR, f, s, ?, 
+119, Vape, f, s, ?, 
+120, Pink With Hat, f, s, ?, 
+121, Blonde Bob, f, s, ?, 
+122, Mohawk, f, s, ?, 
+123, Big Shades, f, s, ?, 
+124, Earring, f, s, ?, 
+125, Green Eye Shadow, f, s, ?, 
+126, Straight Hair, f, s, ?, 
+127, Rosy Cheeks, f, s, ?, 
+128, Half Shaved, f, s, ?, 
+129, Mohawk Dark, f, s, ?, 
+130, Black Lipstick, f, s, ?, 
+131, Horned Rim Glasses, f, s, ?, 
+132, Silver Chain, f, s, ?, 

data/lib/profilepic/service.rb

@@ -3,6 +3,62 @@
 # helpers
 #  to generate
 
+def radio_options_w_sprites( options,
+                      name:,
+                      legend: )
+
+  buf = <<TXT
+<fieldset>
+    <legend>#{legend}:</legend>
+TXT
+
+options.each_with_index do |option,i|
+
+  value = option.downcase
+
+  ## auto-extract qualifiers e.g. (m)ale/(f)emale
+  qualifiers = if    value.index( '(m)' )   then ['m']
+               elsif value.index( '(f)' )   then ['f']
+               elsif value.index( '(m/f)' ) then ['m', 'f']
+               else  []
+               end
+
+  value = value.sub( '(m)', '' ).sub( '(f)', '' ).sub( '(m/f)', '' ).sub( '¹', '' )
+  value = value.strip
+
+
+
+  label = option
+
+buf += <<TXT
+<div>
+  <input type="radio" id="#{name}#{i}" name="#{name}" value="#{value}"
+            #{ i==0 ? 'checked' : '' }>
+TXT
+
+if ['none'].include?( value )
+   ## do nothing  - no sprite(s) - for none & friends
+elsif qualifiers.empty?
+  buf +=  %Q[    <span class="sprite" data-name="#{value}"></span>\n]
+else
+  qualifiers.each do |qualifier|
+    buf +=  %Q[    <span class="sprite" data-name="#{value} (#{qualifier})"></span>\n]
+  end
+end
+
+buf += <<TXT
+       <label for="#{name}#{i}">#{label}</label>
+</div>
+TXT
+end
+
+
+buf += "</fieldset>\n"
+buf
+
+end
+
+
 def radio_options( options,
                      name:,
                      legend: )
@@ -16,12 +72,14 @@ options.each_with_index do |option,i|
 
   value = option.downcase
   value = value.sub( '(m)', '' ).sub( '(f)', '' ).sub( '(m/f)', '' ).sub( '¹', '' )
+  value = value.strip
+
   label = option
 
 buf += <<TXT
 <div>
   <input type="radio" id="#{name}#{i}" name="#{name}" value="#{value}"
-            #{ i==0 ? 'checked' : '' }
+            #{ i==0 ? 'checked' : '' }>
        <label for="#{name}#{i}">#{label}</label>
 </div>
 TXT

data/lib/profilepic/version.rb

@@ -3,7 +3,7 @@
 module Profilepic
   MAJOR = 0
   MINOR = 1
-  PATCH = 3
+  PATCH = 4
   VERSION = [MAJOR,MINOR,PATCH].join('.')
 
   def self.version

data/lib/profilepic/views/doge.erb

@@ -16,22 +16,22 @@ own 100% forever.
 <form action="/generate_doge" method="get" id="form1">
 
 
-<%= radio_options( DOGE_ARCHETYPE,
+<%= radio_options_w_sprites( DOGE_ARCHETYPE,
                    name: 't',
                    legend: 'Select a doge shiba inu base (archetype)' ) %>
 
 Options:
 
-<%= radio_options( ['None']+DOGE_HAIR,
+<%= radio_options_w_sprites( ['None']+DOGE_HAIR,
                    name: 'hair',
                    legend: 'Select hair' ) %>
 
-<%= radio_options( ['None']+DOGE_HEADWEAR,
+<%= radio_options_w_sprites( ['None']+DOGE_HEADWEAR,
                    name: 'headwear',
                    legend: 'Select headwear' ) %>
 
 
-<%= radio_options( ['None']+DOGE_EYEWEAR,
+<%= radio_options_w_sprites( ['None']+DOGE_EYEWEAR,
                    name: 'eyewear',
                    legend: 'Select eyewear' ) %>
 
@@ -41,30 +41,34 @@ Options:
 </div>
 
 
-
-Or
-
-<fieldset>
-    <legend>Type (more) attribute description / specification:</legend>
-
-<div>
-<input type="text" id="attributes" name="attributes"
-       minlength="0" maxlength="200" size="80"
-       style="font-size: 200%;"
-       placeholder="Attribute 1, Attribute 2, Attribute 3, ...">
-
-<p>
-  Examples:
-</p>
-  <ul>
-    <li>Crazy Hair, 3D Glasses</li>
-    <li>Headband</li>
-  </ul>
-
-</div>
-   </fieldset>
-
-
 <%= erb :'shared/_more_options' %>
 
 </form>
+
+
+<script>
+var sheet = Spritesheet.read( 'doge-24x24.png',
+`0, classic
+1, dark
+2, zombie
+3, alien
+4, crazyhair
+5, beanie
+6, cap
+7, capforward
+8, cowboyhat
+9, fedora
+10, knittedcap
+11, tophat
+12, bandana
+13, headband
+14, tiara
+15, 3dglasses
+16, bigshades
+17, classicshades
+18, regularshades
+19, smallshades
+20, nerdglasses
+21, eyepatch` );
+sheet.draw();
+</script>

data/lib/profilepic/views/layout.erb

@@ -6,6 +6,7 @@
   <title>Profile Pic(ture) As A Service</title>
 
   <link href="<%= url('/style.css') %>" rel='stylesheet'>
+  <script src="spritesheet.js"></script>
 </head>
 <body>
 

data/lib/profilepic/views/marcs.erb

@@ -15,39 +15,39 @@ own 100% forever.
 <form action="/generate_marcs" method="get" id="form1">
 
 
-<%= radio_options( MARC_ARCHETYPE,
+<%= radio_options_w_sprites( MARC_ARCHETYPE,
                    name: 't',
                    legend: 'Select a marc base (archetype)' ) %>
 
 Options:
 
 
-<%= radio_options( ['None']+MARC_EYES,
+<%= radio_options_w_sprites( ['None']+MARC_EYES,
                    name: 'eyes',
                    legend: 'Select eyes (extras)' ) %>
 
-<%= radio_options( ['None']+MARC_FACE,
+<%= radio_options_w_sprites( ['None']+MARC_FACE,
                    name: 'face',
                    legend: 'Select face (extras)' ) %>
 
-<%= radio_options( ['None']+MARC_BEARD,
+<%= radio_options_w_sprites( ['None']+MARC_BEARD,
                    name: 'beard',
                    legend: 'Select beard' ) %>
 
-<%= radio_options( ['None']+MARC_HAIR,
+<%= radio_options_w_sprites( ['None']+MARC_HAIR,
                    name: 'hair',
                    legend: 'Select hair' ) %>
 
-<%= radio_options( ['None']+MARC_HEADWEAR,
+<%= radio_options_w_sprites( ['None']+MARC_HEADWEAR,
                    name: 'headwear',
                    legend: 'Select headwear' ) %>
 
 
-<%= radio_options( ['None']+MARC_EYEWEAR,
+<%= radio_options_w_sprites( ['None']+MARC_EYEWEAR,
                    name: 'eyewear',
                    legend: 'Select eyewear' ) %>
 
-<%= radio_options( ['None']+MARC_MOUTH_PROP,
+<%= radio_options_w_sprites( ['None']+MARC_MOUTH_PROP,
                    name: 'mouth',
                    legend: 'Select mouth prop' ) %>
 
@@ -57,32 +57,162 @@ Options:
       style="font-size: 400%; color: white; background-color: blue;">Generate Profile Pic(ture) in .PNG Format</button>
 </div>
 
+<%= erb :'shared/_more_options' %>
 
+</form>
 
-Or
-
-<fieldset>
-    <legend>Type (more) attribute description / specification:</legend>
-
-<div>
-<input type="text" id="attributes" name="attributes"
-       minlength="0" maxlength="200" size="80"
-       style="font-size: 200%;"
-       placeholder="Attribute 1, Attribute 2, Attribute 3, ...">
-
-<p>
-  Examples:
-</p>
-  <ul>
-    <li>Normal Beard,  Big Shades</li>
-    <li>Crazy Hair, 3D Glasses</li>
-    <li>Headband</li>
-  </ul>
-
-</div>
-   </fieldset>
 
 
-<%= erb :'shared/_more_options' %>
 
-</form>
+<script>
+var sheet = Spritesheet.read( 'marcs-24x24.png',
+`0, marc classic
+1, ape classic
+2, Marc Dark
+3, Marc Mid
+4, Marc
+5, Marc Albino
+6, Marc Golden
+7, madlad
+8, zombie
+9, ape
+10, Ape Golden
+11, Ape Pink
+12, Alien
+13, Alien Green
+14, Devil
+15, Devil 2
+16, Devil 3
+17, orc
+18, skeleton
+19, bot
+20, blue_eyes
+21, green_eyes
+22, blue_eye_shadow
+23, green_eye_shadow
+24, purple_eye_shadow
+25, bagner
+26, horns
+27, marc_tyson
+28, cleft
+29, mole
+30, rosy_cheeks
+31, shine
+32, spots
+33, black_lipstick
+34, hot_lipstick
+35, purple_lipstick
+36, buck_teeth
+37, clown_nose
+38, gold_ring
+39, diamond_earring
+40, gold_earring
+41, diamond_helix
+42, gold_helix
+43, frown
+44, smile
+45, big_beard_white
+46, big_beard
+47, chinstrap
+48, front_beard
+49, front_beard_dark
+50, full_mustache
+51, full_mustache_dark
+52, goat
+53, goat_dark
+54, handlebar
+55, luxurious_beard
+56, mustache
+57, mutton_chop
+58, normal_beard
+59, normal_beard_black
+60, shadow_beard
+61, soul_patch
+62, bandana
+63, beanie
+64, bunny_ears
+65, cap
+66, skull_cap
+67, cap_forward
+68, police_cap
+69, cowboy_hat
+70, do_rag
+71, fast_food
+72, marcdonalds
+73, fedora
+74, headband
+75, roaring_headband
+76, hoodie
+77, purple_hoodie
+78, knitted_cap
+79, laurels
+80, shemagh
+81, tassle_hat
+82, tiarra
+83, top_hat
+84, uncle_sam
+85, viking
+86, welding_goggles
+87, blonde_bob
+88, chad
+89, clown_hair
+90, crazy_white_hair
+91, crazy_hair
+92, frumpy_hair
+93, marc_three
+94, purple_hair
+95, stringy_hair
+96, vampire_hair
+97, wild_blonde_hair
+98, wild_hair
+99, clown_eyes_blue
+100, clown_eyes_green
+101, lasers
+102, tears
+103, 3d_glasses
+104, aviators
+105, big_shades
+106, classic_shades
+107, deal_with_it
+108, glasses
+109, gold_glasses
+110, horned_rim_glasses
+111, monocle
+112, nerd_glasses
+113, pink_shades
+114, polarized
+115, polarized_white
+116, regular_shades
+117, small_shades
+118, VR Headset
+119, eye_mask
+120, eye_patch
+121, cigar
+122, cigarette
+123, hookah
+124, pipe
+125, vape
+126, medical_mask
+127, bubble_gum
+128, black_tie
+129, blue_tie
+130, red_tie
+131, blue_shirt
+132, blue_t_shirt
+133, Fast Food Shirt
+134, green_shirt
+135, grey_shirt
+136, purple_t_shirt
+137, white_t_shirt
+138, jumpsuit
+139, labcoat
+140, choker
+141, double_gold_chain
+142, gold_chain
+143, silver_chain
+144, thick_chain
+145, hemp
+146, ice
+147, medallion` );
+sheet.draw();
+</script>

data/lib/profilepic/views/yeoldepunks.erb

@@ -16,65 +16,65 @@ own 100% forever.
 <form action="/generate_yeoldepunks" method="get" id="form1">
 
 
-<%= radio_options( YEOLDEPUNK_ARCHETYPE,
+<%= radio_options_w_sprites( YEOLDEPUNK_ARCHETYPE,
                    name: 't',
                    legend: "Select a ye olde' punk  base (archetype)" ) %>
 
 Options:
 
-<%= radio_options( ['None']+YEOLDEPUNK_HAIR,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_HAIR,
                    name: 'hair',
                    legend: 'Select hair' ) %>
 
 ¹: Note: Pink With Hat is a hair+headwear combo.
 
-<%= radio_options( ['None']+YEOLDEPUNK_BEARD,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_BEARD,
                    name: 'beard',
                    legend: 'Select beard' ) %>
 
-<%= radio_options( ['None']+YEOLDEPUNK_EYES,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_EYES,
                    name: 'eyes',
                    legend: 'Select eyes (make-up)' ) %>
 
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_EYEWEAR,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_EYEWEAR,
                    name: 'eyewear',
                    legend: 'Select eyewear' ) %>
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_NOSE,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_NOSE,
                    name: 'nose',
                    legend: 'Select nose accessory' ) %>
 
-<%= radio_options( ['None']+YEOLDEPUNK_BLEMISH,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_BLEMISH,
                    name: 'blemish',
                    legend: 'Select blemish' ) %>
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_MOUTH,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_MOUTH,
                    name: 'mouth',
                    legend: 'Select mouth expression / lipstick make-up' ) %>
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_MOUTH_PROP,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_MOUTH_PROP,
                    name: 'mouthprop',
                    legend: 'Select mouth prop' ) %>
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_EARRING,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_EARRING,
                    name: 'earring',
                    legend: 'Select earring' ) %>
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_HEADWEAR,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_HEADWEAR,
                    name: 'headwear',
                    legend: 'Select headwear' ) %>
 
 ¹: Note: Headband (f) is a (black) hair+headwear combo.
 
 
-<%= radio_options( ['None']+YEOLDEPUNK_NECK,
+<%= radio_options_w_sprites( ['None']+YEOLDEPUNK_NECK,
                    name: 'neck',
                    legend: 'Select neck accessory' ) %>
 
@@ -89,3 +89,143 @@ Options:
 <%= erb :'shared/_more_options' %>
 
 </form>
+
+
+
+<script>
+var sheet = Spritesheet.read( 'yeoldepunks-24x24.png',
+`0, Male 1
+1, Male 2
+2, Male 3
+3, Male 4
+4, Female 1
+5, Female 2
+6, Female 3
+7, Female 4
+8, Zombie
+9, Ape
+10, Alien
+11, Rosy Cheeks (m)
+12, Luxurious Beard (m)
+13, Clown Hair Green (m)
+14, Mohawk Dark (m)
+15, Cowboy Hat (m)
+16, Mustache (m)
+17, Clown Nose (m)
+18, Cigarette (m)
+19, Nerd Glasses (m)
+20, Regular Shades (m)
+21, Knitted Cap (m)
+22, Shadow Beard (m)
+23, Frown (m)
+24, Cap Forward (m)
+25, Goat (m)
+26, Mole (m)
+27, Purple Hair (m)
+28, Small Shades (m)
+29, Shaved Head (m)
+30, Classic Shades (m)
+31, Vape (m)
+32, Silver Chain (m)
+33, Smile (m)
+34, Big Shades (m)
+35, Mohawk Thin (m)
+36, Beanie (m)
+37, Cap (m)
+38, Clown Eyes Green (m)
+39, Normal Beard Black (m)
+40, Medical Mask (m)
+41, Normal Beard (m)
+42, VR (m)
+43, Eye Patch (m)
+44, Wild Hair (m)
+45, Top Hat (m)
+46, Bandana (m)
+47, Handlebars (m)
+48, Frumpy Hair (m)
+49, Crazy Hair (m)
+50, Police Cap (m)
+51, Buck Teeth (m)
+52, Do-rag (m)
+53, Front Beard (m)
+54, Spots (m)
+55, Big Beard (m)
+56, Vampire Hair (m)
+57, Peak Spike (m)
+58, Chinstrap (m)
+59, Fedora (m)
+60, Earring (m)
+61, Horned Rim Glasses (m)
+62, Headband (m)
+63, Pipe (m)
+64, Messy Hair (m)
+65, Front Beard Dark (m)
+66, Hoodie (m)
+67, Gold Chain (m)
+68, Muttonchops (m)
+69, Stringy Hair (m)
+70, Eye Mask (m)
+71, 3D Glasses (m)
+72, Clown Eyes Blue (m)
+73, Mohawk (m)
+74, Pilot Helmet (f)
+75, Tassle Hat (f)
+76, Hot Lipstick (f)
+77, Blue Eye Shadow (f)
+78, Straight Hair Dark (f)
+79, Choker (f)
+80, Crazy Hair (f)
+81, Regular Shades (f)
+82, Wild Blonde (f)
+83, 3D Glasses (f)
+84, Mole (f)
+85, Wild White Hair (f)
+86, Spots (f)
+87, Frumpy Hair (f)
+88, Nerd Glasses (f)
+89, Tiara (f)
+90, Orange Side (f)
+91, Red Mohawk (f)
+92, Messy Hair (f)
+93, Clown Eyes Blue (f)
+94, Pipe (f)
+95, Wild Hair (f)
+96, Purple Eye Shadow (f)
+97, Stringy Hair (f)
+98, Dark Hair (f)
+99, Eye Patch (f)
+100, Blonde Short (f)
+101, Classic Shades (f)
+102, Eye Mask (f)
+103, Clown Hair Green (f)
+104, Cap (f)
+105, Medical Mask (f)
+106, Bandana (f)
+107, Purple Lipstick (f)
+108, Clown Nose (f)
+109, Headband (f)
+110, Pigtails (f)
+111, Straight Hair Blonde (f)
+112, Knitted Cap (f)
+113, Clown Eyes Green (f)
+114, Cigarette (f)
+115, Welding Goggles (f)
+116, Mohawk Thin (f)
+117, Gold Chain (f)
+118, VR (f)
+119, Vape (f)
+120, Pink With Hat (f)
+121, Blonde Bob (f)
+122, Mohawk (f)
+123, Big Shades (f)
+124, Earring (f)
+125, Green Eye Shadow (f)
+126, Straight Hair (f)
+127, Rosy Cheeks (f)
+128, Half Shaved (f)
+129, Mohawk Dark (f)
+130, Black Lipstick (f)
+131, Horned Rim Glasses (f)
+132, Silver Chain (f)` );
+sheet.draw();
+</script>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: profilepic
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Gerald Bauer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-06 00:00:00.000000000 Z
+date: 2022-08-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: originals
@@ -103,7 +103,14 @@ files:
 - bin/profilepic
 - lib/profilepic.rb
 - lib/profilepic/builder.rb
+- lib/profilepic/public/doge-24x24.csv
+- lib/profilepic/public/doge-24x24.png
+- lib/profilepic/public/marcs-24x24.csv
+- lib/profilepic/public/marcs-24x24.png
+- lib/profilepic/public/spritesheet.js
 - lib/profilepic/public/style.css
+- lib/profilepic/public/yeoldepunks-24x24.csv
+- lib/profilepic/public/yeoldepunks-24x24.png
 - lib/profilepic/service.rb
 - lib/profilepic/version.rb
 - lib/profilepic/views/doge.erb