hokusai-zero 0.2.5 → 0.2.6.pre.pinephone

data/ui/examples/game.rb

@@ -0,0 +1,143 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+require 'ostruct'
+
+TILES = [
+  ["Power Supply", 500],
+  ["Power Distribution", 400],
+  ["Farm", 100],
+  ["Medicine Production", 50],
+  ["Science Research", 400],
+  ["Lumberyard", 200],
+  ["Art Gallery", 20],
+  ["School", 100],
+  ["Commercial transportation", 300],
+  ["Mechanical Automation", 700],
+  ["Tailor shop", 50],
+  ["Housing Construction", 200],
+  ["Commerical Building Construction", 300],
+  ["Restaraunt", 50],
+  ["Furniture manufacturing", 200],
+  ["Cotton mill", 200],
+  ["Metals processing", 400],
+  ["Forestry center", 400],
+  ["Bar", 50],
+  ["Healthcare", 100]
+]
+
+
+class Game < Hokusai::Block
+  style <<-EOF
+  [style]
+  bg {
+    color: rgb(173, 207, 224);
+    width: 100;
+    height: 100;
+    outline: outline(1.0, 1.0, 1.0, 1.0);
+    outline_color: rgb(0, 0, 0);
+  }
+  board {
+    height: 500;
+    width: 500;
+  }
+  height {
+    height: 100;
+  }
+  textPadding {
+    padding: padding(10.0, 5.0, 10.0, 10.0);
+  }
+  EOF
+  template <<~EOF
+  [template]
+    vblock { ...board }
+      hblock
+        [for="tile in top"]
+          rect { :key="top_key(tile)" ...bg }
+            text {  :content="tile" ...textPadding}
+      [for="i in middle"]
+        hblock {...height :key="get(i)"}
+          rect {...bg}
+            text {  :key="get(i)" :content="get(i)" ...textPadding }
+          empty
+          empty
+          empty
+          rect {...bg }
+            text { :key="get_next(i)" :content="get_next(i)" ...textPadding}
+      hblock
+        [for="tile in bottom"]
+          rect { ...bg  :key="bottom_key(tile)" }
+            text { :key="tile" :content="tile" ...textPadding }
+  EOF
+
+  uses(
+    hblock: Hokusai::Blocks::Hblock,
+    vblock: Hokusai::Blocks::Vblock,
+    text: Hokusai::Blocks::Text,
+    empty: Hokusai::Blocks::Empty,
+    rect: Hokusai::Blocks::Rect
+  )
+
+  attr_reader :tiles
+
+  def get(i)
+    tiles[i[0]].title
+  end
+
+  def get_next(i)
+    tiles[i[1]].title
+  end
+
+  def middle
+   (5..10).each_slice(2).to_a
+  end
+
+  def bottom_key(t)
+    "bottom-#{t}"
+  end
+
+  def top_key(t)
+    "top-#{t}"
+  end
+
+  def top
+    tiles.take(5).map(&:title)
+  end
+
+  def bottom
+    a = tiles[-5, 5].map(&:title)
+    a
+  end
+
+  def after_updated
+    @tiles = TILES.map do |(label, cost)|
+      os = OpenStruct.new
+      os.title = label
+      os.cost = cost
+      os
+    end
+  end
+
+  def initialize(**args)
+    @tiles = TILES.map do |(label, cost)|
+      os = OpenStruct.new
+      os.title = label
+      os.cost = cost
+      os
+    end
+
+    super
+  end
+end
+
+
+Hokusai::Backends::RaylibBackend.run(Game) do |config|
+  config.width = 500
+  config.height = 500
+  
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/OpenSans-Regular.ttf", 160)
+    Hokusai.fonts.register "opensans", font
+    Hokusai.fonts.activate "opensans"
+  end
+end
+

data/ui/examples/overlay.rb

@@ -0,0 +1,233 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+
+class DropdownItem < Hokusai::Block
+  style <<~EOF
+  [style]
+  textStyle {
+    padding: padding(5.0, 5.0, 5.0, 5.0);
+    size: 23;
+    color: rgb(255,255,255);
+    cursor: "pointer";
+  }
+  EOF
+
+  template <<~EOF
+  [template]
+    text#second {
+      :content="content" 
+      ...textStyle
+      @click="emit_option" 
+      @height_updated="udpate_height"
+    }
+  EOF
+
+  uses(text: Hokusai::Blocks::Text)
+
+  computed! :content
+  computed! :index
+
+  def udpate_height(height)
+    node.portal.meta.set_prop(:height, height)
+    emit("height", height, index)
+  end
+
+  def emit_option(e)
+    emit("option", content)
+  end
+end
+
+class Dropdown < Hokusai::Block
+  style <<-EOF
+  [style]
+  panelStyle {
+    z: 1;
+    width: 200;
+    height: 300;
+    background: rgb(67, 64, 92);
+  }
+
+  labelStyle {
+    size: 22;
+    content: "Please choose your fruit?";
+  }
+  EOF
+  
+  template <<~EOF
+  [template]
+    vblock { @click="toggle_dropdown" height="70"}
+      label { ...labelStyle }
+      label { :content="selected" size="25" }
+      [if="toggled"]
+        panel#first { ...panelStyle @click="stop"}
+          [for="option in options"]
+            item { 
+              :height="get_height(index)"
+              :content="option" 
+              :key="index" 
+              :index="index" 
+              @option="select" 
+              @height="update_height" 
+            }
+  EOF
+  
+  uses(label: Hokusai::Blocks::Label, vblock: Hokusai::Blocks::Vblock, item: DropdownItem, panel: Hokusai::Blocks::Panel)
+
+  attr_reader :toggled
+
+  computed! :options
+
+  def list_height
+    @heights ||= {}
+    @heights.values.reduce(&:+) || 0.0
+  end
+
+  def get_height(index)
+    @heights ||= {}
+    @heights[index] || 0.0
+  end
+
+  def update_height(height, index)
+    @heights ||= {}
+    @heights[index] = height
+  end
+
+  def stop(e)
+  end
+
+  def toggle_dropdown(_)
+    @toggled = !@toggled
+  end
+
+  def select(option)
+    @selected = option
+    @toggled = false
+  end
+
+  # def options
+  #   %w[apple pear mango pineapple orange pear bananana kiwi grapes melon lemon lime]
+  # end
+
+  def selected
+    @selected || options.first
+  end
+
+  def initialize(**args)
+    @toggled = true
+
+    super
+  end
+end
+
+class Modal < Hokusai::Block
+  template <<~EOF
+  [template]
+    hblock#top
+      empty
+      empty#topempty
+      text { @click="emit_close" content="X" size="40" color="255,255,255}
+    hblock#middle { height="300"}
+      slot
+    hblock#last
+      empty#lastempty
+  EOF
+
+  uses(vblock: Hokusai::Blocks::Vblock, empty: Hokusai::Blocks::Empty, hblock: Hokusai::Blocks::Hblock, text: Hokusai::Blocks::Label)
+
+  computed :color, default: [0, 0, 0, 200], convert: Hokusai::Color
+
+  def emit_close(event)
+    emit("close")
+
+    event.stop
+  end
+
+  def render(canvas)
+    draw do
+      rect(canvas.x, canvas.y, canvas.width, canvas.height) do |command|
+        command.color = color
+      end
+    end
+
+    yield canvas
+  end
+end
+
+class Thing < Hokusai::Block
+  style <<~EOF
+  [style]
+  textStyle {
+    size: 30;
+    color: rgb(0, 0, 0);
+    content: "Hello modal!";
+  }
+
+  otherText {
+    size: 25;
+    content: "Hello World";
+  }
+  contentStyle {
+    height: 300.0;
+    width: 300.0;
+    background: rgb(255, 255, 255, 255);
+  }
+  backgroundStyle {
+    background: rgb(43, 151, 117);
+  }
+  modalStyle {
+    z: 1;
+    position: "absolute";
+  }
+  EOF
+  
+  template <<~EOF
+  [template]
+    vblock#topnot
+      hblock#not{ ...backgroundStyle }
+        text#not { ...otherText @click="open_modal" }
+        dropdown { :options="outer_options" }
+      hblock { background="233,0,0" }
+        text#second { content="Second" }
+        modal {
+          @close="close"
+          :active="modal_open"
+        }
+          vblock { ...contentStyle }
+            dropdown { :options="inner_options" }
+            color_picker
+            text#last { size="30" content="last"}
+  EOF
+
+  attr_reader :modal_open
+
+  def log(event)
+    pp ["clicked!"]
+  end
+
+  def outer_options
+    %w[sam betty fred candace justin lucy annabelle nick janessa sean]
+  end
+
+  def inner_options
+    %w[apple pear mango pineapple orange pear bananana kiwi grapes melon lemon lime]
+  end
+
+  def open_modal(event)
+    @modal_open = true
+  end
+
+  def close
+    @modal_open = false
+  end
+
+  uses(
+    color_picker: Hokusai::Blocks::ColorPicker, modal: Hokusai::Blocks::Modal, dropdown: Hokusai::Blocks::Dropdown, vblock: Hokusai::Blocks::Vblock, text: Hokusai::Blocks::Text,empty: Hokusai::Blocks::Empty, hblock: Hokusai::Blocks::Hblock)
+end
+
+Hokusai::Backends::RaylibBackend.run(Thing) do |config|
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from("#{__dir__}/assets/Inter-Regular.ttf")
+    Hokusai.fonts.register "inter", font
+    Hokusai.fonts.activate "inter"
+  end
+end

data/ui/examples/provider.rb

@@ -0,0 +1,56 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+
+class Child < Hokusai::Block
+  template <<~EOF
+  [template]
+    text { :content="get_content" @selected="handle_selected" @height_updated="update_height"}
+  EOF
+
+  uses(
+    vblock: Hokusai::Blocks::Vblock,
+    text: Hokusai::Blocks::Text,
+    input: Hokusai::Blocks::Input
+  )
+
+  def update_height(height)
+    node.meta.set_prop(:height, height)
+  end
+
+  def handle_selected(start, stop)
+    pp [start, stop]
+  end
+
+  def get_content
+    @file ||= File.read(__FILE__)
+  end
+end
+
+class ProviderExample < Hokusai::Block
+  template <<~EOF
+  [template]
+  selectable
+    panel
+      text { :content="get_content" }
+  EOF
+
+  uses(
+    vblock: Hokusai::Blocks::Vblock,
+    selectable: Hokusai::Blocks::Selectable,
+    panel: Hokusai::Blocks::Panel,
+    child: Child,
+    text: Hokusai::Blocks::Text
+  )
+
+  def get_content
+    @file ||= File.read(__FILE__)
+  end
+end
+
+
+Hokusai::Backends::RaylibBackend.run(ProviderExample) do |config|
+  config.width = 500
+  config.height = 500
+  config.title = "Provider application"
+end
+

data/ui/examples/shader/test.rb

@@ -0,0 +1,145 @@
+require_relative "../../src/hokusai"
+require_relative "../../src/hokusai/backends/raylib"
+require "date"
+
+class ShaderWrapper < Hokusai::Block
+  template <<~EOF
+  [template]
+    shader_begin {
+      @mousemove="update_value"
+      :vertex_shader="vertex_shader"
+      :uniforms="uniforms"
+    }
+      slot
+      shader_end
+  EOF
+
+  uses(
+    shader_begin: Hokusai::Blocks::ShaderBegin,
+    shader_end: Hokusai::Blocks::ShaderEnd,
+    texture: Hokusai::Blocks::Texture
+  )
+
+  def update_value(event)
+    @pos = (event.pos.x + event.pos.y) / 1000
+  end
+
+  def uniforms
+    return unless @start && @pos
+    done = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    elapsed = (done - @start).round(3)
+
+    {
+      millis: [elapsed / 2, Hokusai::SHADER_UNIFORM_FLOAT]
+    }
+  end
+
+  def on_mounted
+    @start = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+  end
+
+  def fragment_shader
+    <<-EOF
+    #version 330
+    in vec4 fragColor;
+    out vec4 finalColor;
+
+    void main() {
+      finalColor =  fragColor; //vec4(0., 1., 0., 1.);
+    }
+    EOF
+  end
+
+  def vertex_shader
+    <<-EOF
+    #version 330
+    in vec3 vertexPosition;
+    in vec2 vertexTexCoord;
+    in vec4 vertexColor;
+
+    uniform mat4 mvp;
+    uniform float millis;
+
+    out vec2 fragTexCoord;
+    out vec4 fragColor;
+  
+    void main() {
+      fragTexCoord = vertexTexCoord;
+      fragColor = vertexColor;
+      vec4 position = mvp * vec4(vertexPosition, 1.);
+      
+      position.x += sin(millis + position.y * 8) / 8;
+      gl_Position = position;
+    }
+    EOF
+  end
+
+  def render(canvas)
+    canvas.vertical = true
+    @x = canvas.x
+
+    yield canvas
+  end
+end
+
+class ShaderTest < Hokusai::Block
+  style <<~EOF
+  [style]
+  circleStyle {
+    color: rgb(47, 112, 106);
+  }
+
+  textStyle {
+    content: "Whoa, coool dude.";
+    size: 15.0;
+  }
+  EOF
+  
+  template <<~EOF
+  [template]
+    hblock
+      empty
+    hblock
+      hblock
+        empty
+      hblock
+        wrapper
+          image { :source="addy_png" :width="500" :height="400" }
+          text { ...textStyle }
+          circle {
+            :radius="50.0"
+            ...circleStyle
+          }
+      hblock
+        empty
+    hblock
+      empty
+    
+  EOF
+
+  uses(
+    wrapper: ShaderWrapper,
+    picker: Hokusai::Blocks::ColorPicker,
+    image: Hokusai::Blocks::Image,
+    text: Hokusai::Blocks::Text,
+    circle: Hokusai::Blocks::Circle,
+    vblock: Hokusai::Blocks::Vblock,
+    hblock: Hokusai::Blocks::Hblock,
+    empty: Hokusai::Blocks::Empty
+  )
+
+  def addy_png
+    "#{__dir__}/../assets/addy.png"
+  end
+end
+
+
+Hokusai::Backends::RaylibBackend.run(ShaderTest) do |config|
+  config.width = 900
+  config.height = 800
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from("#{__dir__}/assets/Inter-Regular.ttf")
+    Hokusai.fonts.register "inter", font
+    Hokusai.fonts.activate "inter"
+  end
+end

data/ui/examples/shader.rb

@@ -0,0 +1,100 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+
+class ShaderExample < Hokusai::Block
+  style <<~EOF
+  [style]
+  textureThing {
+    width: 500;
+    height: 900;
+    scale: 100.0;
+  }
+  EOF
+  
+  template <<~EOF
+  [template]
+    colorpicker
+    shader_begin {
+      @mousemove="change_rotation"
+      @click="switch_color"
+      :fragment_shader="fragment_shader"
+      :uniforms="uniforms"
+    }
+      texture {
+        ...textureThing
+        :rotation="rotate"
+      }
+      shader_end
+  EOF
+
+  uses(
+    colorpicker: Hokusai::Blocks::ColorPicker,
+    shader_begin: Hokusai::Blocks::ShaderBegin,
+    shader_end: Hokusai::Blocks::ShaderEnd,
+    texture: Hokusai::Blocks::Texture,
+    rect: Hokusai::Blocks::Rect,
+    vblock: Hokusai::Blocks::Vblock
+  )
+
+  attr_reader :rotate
+
+  def initialize(**args)
+    @color = [1.0, 0.0, 0.0, 1.0]
+    @position = [0.0, 100.0, 0.0, 1.0]
+
+    super
+  end
+
+  def change_rotation(event)
+    @rotate = event.delta[:y]
+  end
+
+  def switch_color(event)
+    @color = [
+      [0.3, 0.3, 0.3, 1.0],
+      [0.0, 1.0, 0.0, 1.0],
+      [0.0, 0.0, 1.0, 1.0]
+    ].sample
+  end
+
+  # def move_mouse(event)
+  #   @position[0] = [0.0, 0.3, 0.6, 0.9, 1.0].sample
+  # end
+
+  def vertex_shader
+    <<-EOF
+    #version 330 core
+
+    uniform vec4 position;
+
+    void main() {
+      gl_Position = position;
+    }
+    EOF
+  end
+
+  def fragment_shader
+    <<-EOF
+    #version 330 core
+
+    in vec4 position;
+    out vec4 FragColor; 
+    
+    uniform vec4 color;
+
+    void main() {
+      FragColor = color;
+    }
+    EOF
+  end
+
+  def uniforms
+    [
+      ["color", @color, Hokusai::SHADER_UNIFORM_VEC4]
+    ]
+  end
+end
+
+Hokusai::Backends::RaylibBackend.run(ShaderExample) do |config|
+  config.background = Raylib::BLUE
+end