up

.gitignore

@@ -0,0 +1,19 @@
+#############
+# ignore all tmp directories
+
+tmp/
+tmp2/
+tmp3/
+tmp4/
+tmp5/
+
+
+#############
+# ignore all (sqlite) dbs for now - why? why not?
+*.db
+
+##
+# ignnore all env files
+.env
+.env.yml
+.env.yaml

builder/helper.rb

@@ -0,0 +1,135 @@
+################
+# (view) helpers
+
+
+def spritesheet( path )  ## spritesheet metadata / record helpers
+  recs = read_csv( path )
+
+###
+# id, category, name, more_names
+# 0, , classic,
+# 1, , dark,
+# 2, , zombie,
+
+##
+# 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,
+
+
+  buf = String.new('')
+  buf << "id, name\n"
+
+  recs.each do |rec|
+    id         =  rec['id']
+    name       =  rec['name']
+    more_names = (rec['more_names'] || '').split( '|' )
+
+    names = [name]
+    names += more_names
+
+    buf << "#{id}, #{names.join(' | ')}\n"
+  end
+
+  buf
+end
+
+
+
+
+def render_options( spec )
+
+  buf = String.new('')
+
+  spec.each do |name, h|
+
+    options = h[:options]
+    options = ['None'] + options   if h[:none]
+
+    legend = h[:legend]
+
+    buf += radio_options_w_sprites( options,
+                                      name:    name,
+                                      legend:  legend )
+
+
+    buf += "\n#{h[:notes]}\n\n"    if h[:notes]
+  end
+
+  buf
+end
+
+
+
+
+def radio_button_tag( name, value, checked: false, id: )
+  buf = %Q[  <input type="radio" id="#{id}" name="#{name}" value="#{value}" ]
+  buf += " checked "   if checked
+  buf += ">\n"
+  buf
+end
+
+def label_tag( content, id: )
+  %Q[    <label for="#{id}">#{content}</label>\n]
+end
+
+def sprite_tag( name )
+  %Q[    <span class="sprite" data-name="#{name}"></span>\n]
+end
+
+
+
+
+def radio_options_w_sprites( options, name:, legend: )
+   radio_options( options, name: name,
+                           legend: legend,
+                           sprites: true )
+end
+
+
+def radio_options( options, name:,
+                            legend:,
+                            sprites: false )
+
+buf = <<TXT
+<fieldset>
+<legend>#{legend}:</legend>
+TXT
+
+options.each_with_index do |option,i|
+
+  value = option.downcase.strip
+
+  label = option
+  id    = "#{name}#{i}"    ## use for input (dom) id / label for [id]
+
+
+  ## note. add class columns - via css turns div into 250px inline-blocks
+buf += "<div class='columns'>\n"
+buf +=  radio_button_tag( name, value,
+                          id: id,
+                          checked: i==0  )
+
+buf2 = String.new( '' )
+if sprites
+  if ['none'].include?( value )
+    ## do nothing  - no sprite(s) - for none & friends
+  else
+    buf2 +=  sprite_tag( value )
+  end
+  ## note: add sprites (spans) inside label e.g. <label> HERE </label>
+  buf += label_tag( buf2 + label, id: id )
+else
+  buf += label_tag( label, id: id )
+end
+
+buf += "</div>\n"
+end
+
+
+buf += "</fieldset>\n"
+buf
+
+end
+

builder/punk.html.erb

@@ -0,0 +1,137 @@
+<script src="https://learnpixelart.github.io/pixelart.js/dataset.js/dataset.js"></script>
+<script src="https://learnpixelart.github.io/pixelart.js/pixelart.js/composite.js"></script>
+<script src="https://learnpixelart.github.io/pixelart.js/pixelart.js/spritesheet.js"></script>
+<script src="https://learnpixelart.github.io/pixelart.js/pixelart.js/generator.js"></script>
+
+
+<style>
+  fieldset div {
+      display: inline-block;
+      width: 240px;
+  }
+</style>
+
+
+<p style="font-size: 80%;">
+    <a href="https://github.com/orc721/nodepunks">« Node Punks</a>
+</p>
+
+
+<h1>Build Your Own Node Punk (24×24) Wizard</h1>
+
+
+<p>Yes, you can!
+Build your own originals that you
+own 100% forever.
+Questions? Comments? 
+Join us in the <a href="https://discord.gg/dDhvHKjm2t">Ordbase discord (chat server)</a>.
+
+<br>
+Looking for monkes? 
+See <a href="../../monkes21/build">Monke (28×28) Wizard »</a>
+</p>
+
+
+
+<table>
+  <tr>
+    <td width="248px" valign="top">
+      <!-- first column -->
+
+      10x (240×240px)<br>
+      <canvas id="punk10x"></canvas>  <br>
+
+      4x (96×96px)<br>
+      <canvas id="punk4x"></canvas>  <br>
+
+      1x (24×24px)<br>
+      <canvas id="punk1x"></canvas>
+
+    </td>
+    <td><!-- second column -->
+
+
+<%= render_options( PUNK ) %>
+
+</td>
+</tr>
+</table>
+
+<p style="font-size: 80%;">
+   Open source public domain.
+   No rights reserved.
+  See
+  <a href="https://github.com/orc721/nodepunks/tree/master/builder">/nodepunks/builder »</a>
+</p>
+
+
+<script>
+
+     var g;    // (global) generator  (see document load)
+
+
+   function autoupdate() {
+    let els = document.querySelectorAll( "input[type='radio']" );
+       for( let el of Array.from( els ) ) {
+          el.addEventListener('click', () => update() );
+       }
+
+     // pre-select 
+     let el = document.querySelector( "input[value='joe']" );
+     el.checked = true;
+     el = document.querySelector( "input[value='small shades']" );
+     el.checked = true;
+     el = document.querySelector( "input[value='cap blue']" );
+     el.checked = true;
+
+   }
+
+  function update() {
+    let els = document.querySelectorAll( "input[type='radio']" );
+       // console.log( els );
+
+       let attributes = [];
+
+       for( let el of Array.from( els ) ) {
+         let value = el.value
+
+         if (el.checked) {
+           console.log( value );
+
+           if( value == 'none' ) {
+              continue;
+           }
+
+           attributes.push( value );
+         }
+       }
+
+       console.log( attributes );
+       generate( ...attributes );
+      }
+
+  function generate( ...args ) {
+       g.generate( '#punk10x', ...args, {zoom: 10, background: '#FD5401'} );
+       g.generate( '#punk4x', ...args, {zoom: 4, background: '#FD5401'} );
+       g.generate( '#punk1x', ...args, {zoom: 1, background: '#FD5401'} );
+  }
+
+
+document.addEventListener( "DOMContentLoaded", async () => {
+
+  const dataset = Dataset.parseCsv( `<%= spritesheet( 'tmp/spritesheet.csv' ) %>`
+                                  );
+
+   const composite = await ImageComposite.read( 'spritesheet.png', 24, 24 );
+   const sheet = new Spritesheet( composite, dataset );
+
+   sheet.drawSprites();
+
+
+   g = Generator.use( sheet );
+
+    autoupdate();
+    update();
+});
+
+</script>