csstest

cellularautomaton.html

<style>
label{
  position:absolute;left:100px;top:100px;width:100px;height:100px;background:red;
  display:none
}

input:checked+*+input:not(:checked)+*+*+*+*+*+*+input:not(:checked)+*{display:block}

input:not(:checked)+*+input:checked+*+*+*+*+*+*+input:not(:checked)+*{display:block}

</style>


<input type=checkbox id=1><label for=1 style='z-index:9'></label>
<input type=checkbox id=2 checked><label for=2 style='z-index:8'></label>
<input type=checkbox id=3><label for=3 style='z-index:7'></label><br>
<input type=checkbox id=4><label for=4 style='z-index:6'></label>
<input type=checkbox id=5><label for=5 style='z-index:5'></label>
<input type=checkbox id=6><label for=6 style='z-index:4'></label><br>
<input type=checkbox id=7><label for=7 style='z-index:3'></label>
<input type=checkbox id=8><label for=8 style='z-index:2'></label>
<input type=checkbox id=9><label for=9 style='z-index:1'></label>

gen1d.rb

w=20
css=%(
label{position:absolute;left:0;top:0;width:100%;height:100%;display:none;background:rgba(0,0,0,0);}
input:not(:checked)+*+input:checked+#{'*+'*(w*2)}input:not(:checked)+label,
input:checked+*+input:not(:checked)+#{'*+'*(w*2)}input:not(:checked)+label{
  display: block;
}
)
puts %(
  <style>
  #{css}
  </style>
  #{
    20.times.map{|i|
      w.times.map{|j|
        idx=i*w+j
        id="c#{idx}"
        %(
          <input type=checkbox id=#{id} #{idx==1?'checked':''}>
          <label for=#{id} style="z-index:#{65536-idx}"></label>
        )
      }+["<br>"]
    }.flatten.join("\n")
  }
)

generator.rb

class CssBf
  attr_reader :mem_size
  def initialize(mem_size: 1)
    @mem_size = mem_size
    @elements = []
    @elements_index_by_id = {}
    @css = []
  end

  def add_element tag, id: nil
    @elements_index_by_id[id] = @elements.size if id
    @elements << tag
  end


  def add_mem_radios(size)
    size.times do |i|
      256.times do |n|
        add_element(
          "<input type=radio name=mr#{i} id=mr#{i}-#{n} class=mr#{' checked' if n.zero?}>",
          id: "mr#{i}-#{n}"
        )
      end
      add_element('<div></div>')
    end
  end

  def add_mem_labels(size)
    size.times do |i|
      256.times do |n|
        add_element "<label for=mr#{i}-#{n} id=ml#{i}-#{n}>ml#{i}-#{n}</label>", id: "ml#{i}-#{n}"
      end
    end
  end

  def show_label(*id_states)
    add_style(id_states, 'display: block')
  end

  def add_style(id_states, css)
    prev_idx = nil
    selector = ''
    id_states.each do |sel, state|
      idx = @elements_index_by_id[sel.split(':').first]
      raise "id not found: #{sel.inspect}" unless idx
      selector << '+*' * (idx - prev_idx - 1) + '+' if prev_idx
      selector << "##{sel}"
      selector << state if state
      prev_idx = idx
    end
    @css << "#{selector}{#{css}}"
  end

  def styles
    base_css = []
    base_css << <<~CSS
      .mr{/*display:none*/}
      label.normal-label {position: unset; left: unset; top: unset;width: unset;height: unset; background: unset; display: unset;}
      label {
        cursor:pointer;
        position:absolute;left:0;bottom: 0;width:100px;height: 100px; background: red;
        display: none;
      }
    CSS
    256.times do |n|
      base_css << ".mr:checked#{'+.mr' * n}+div:after{content:'#{'%02X' % (255 - n)}'}"
    end
    base_css + @css
  end

  def html
    add_element('<input type=radio name=addsub id=add checked>', id: 'add')
    add_element('<label for=add class=normal-label>add</label>')
    add_element('<input type=radio name=addsub id=sub>', id: 'sub')
    add_element('<label for=sub class=normal-label>sub</label>')
    add_element('<input type=radio name=addsub id=none>', id: 'none')
    add_element('<label for=none class=normal-label>none</label>')
    add_element('<br>')
    add_element('<label for=add style="display:block;background:gray">add</label>')
    add_mem_radios 2
    add_mem_labels 2
    add_element('<label for=none id=lnone>none</label>', id: 'lnone')
    256.times do |n|
      show_label 'add:checked', "mr0-#{n}:checked", "mr1-#{n}:checked", "ml1-#{(n+1)%256}"
      show_label 'sub:checked', "mr0-#{n}:checked", "mr1-#{n}:checked", "ml1-#{(n-1)%256}"
      show_label 'none:not(:checked)', "mr0-#{n}:checked", "mr1-#{n}:not(:checked)", 'lnone'
      show_label 'none:checked', "mr0-#{n}:not(:checked)", "mr1-#{n}:checked", "ml0-#{n}"
    end
    [
      '<style>' + styles.join("\n") + '</style>',
      @elements
    ].join("\n")
  end
end

puts CssBf.new.html

lifegame.rb

size=10
patterns = 512.times.map{|i|
  cnt = i.to_s(2).count('1')
  [i, i[4]==0 ? cnt==3 : cnt==3||cnt==4]
}.map{|i,flag|
  (512+i).to_s(2).chars.map(&:to_i).drop(1).each_slice(3).map{|abc|
    abc.map{|i|i==1 ? 'input:checked+*+*' : 'input:not(:checked)+*+*' }.join('+')
  }.join('+'+'*+*+*+'*(size-3))+
  '+*'*(3*size*(size-1)-6)+(flag ?'+input:not(:checked)':'+input:checked')+'+*+*{display:block}'
}

patterns += [
  '#mode:checked+div label.a{height: 0}',
  '#mode:not(:checked)+div label.b{height: 0}',
  "input:checked+#{'*+'*(3*size*size-1)}input:not(:checked)+*{display:block}",
  "input:not(:checked)+#{'*+'*(3*size*size-1)}input:checked+*{display:block}",
]

css=%(
  input{position:absolute;}
label{position:absolute;left:400px;top:0;width:40px;height:40px;display:none;}
label.a{background:red}
label.b{background:green}
#{patterns.join("\n")}
)
puts %(
  <style>
  #{css}
  </style>
  <label for=mode style='display:block;background:blue;'></label>
  <input type=checkbox id=mode>
  <div>
  #{
    size.times.map{|i|
      size.times.map{|j|
        %(
          <input type=checkbox id=a#{i}_#{j} style='left:#{i*10}px;top:#{40+j*10}px'>
          <span></span><span></span>
        )
      }
    }.join("\n")
  }
  #{
    size.times.map{|i|
      size.times.map{|j|
        %(
          <input type=checkbox id=b#{i}_#{j} style='left:#{i*10}px;top:#{size*10+50+j*10}px'>
          <label for=a#{i}_#{j} class=a></label>
          <label for=b#{i}_#{j} class=b></label>
        )
      }
    }.join("\n")
  }
  </div>
)

server.rb

require 'sinatra'
get '/' do
  `ruby generator.rb 2>&1`
end

get '/1d' do
  `ruby gen1d.rb 2>&1`
end

get '/lifegame' do
  `ruby lifegame.rb 2>&1`
end