Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
csstest
<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>
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")
}
)
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
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>
)
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.