hokusai-zero 0.2.6 → 0.2.7

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,155 @@
+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]
+  vblock
+    [if="pickered"]
+      picker
+    [else]
+      vblock
+        hblock { @click="set_pickered" }
+          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
+  )
+
+  attr_accessor :pickered
+
+  def set_pickered(event)
+    self.pickered = true
+  end
+
+  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

data/ui/examples/spreadsheet.rb

@@ -119,22 +119,23 @@ module Demos
   end
 end
 
-Hokusai::Backends::RaylibBackend.run(Demos::Spreadsheet::App) 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"
+Hokusai::Backends::SDLBackend.run(Demos::Spreadsheet::App) 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"
 
-    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Delius-Regular.ttf", 160)
-    Hokusai.fonts.register "dohyeon", font
-  end 
+  #   font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Delius-Regular.ttf", 160)
+  #   Hokusai.fonts.register "dohyeon", font
+  # end 
 
   config.fps = 60
   config.width = 800
   config.height = 500
   config.title = "Spreadsheet application"
 
-  config.config_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_VSYNC_HINT | Raylib::FLAG_WINDOW_TRANSPARENT
-  config.window_state_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_WINDOW_UNDECORATED | Raylib::FLAG_WINDOW_TRANSPARENT
-  config.background = Raylib::BLANK
+
+  # config.config_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_VSYNC_HINT | Raylib::FLAG_WINDOW_TRANSPARENT
+  # config.window_state_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_WINDOW_UNDECORATED | Raylib::FLAG_WINDOW_TRANSPARENT
+  # config.background = Raylib::BLANK
 end

data/ui/examples/wiki.rb

@@ -0,0 +1,82 @@
+require "wikipedia"
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+
+module Wiki
+  class Widget < Hokusai::Block
+    style <<-EOF
+    [style]
+    wikiStyle {
+      color: rgb(49, 49, 49);
+      size: 20;
+      markdown: true;
+      padding: padding(5.0, 10.0, 5.0, 10.0);
+    }
+    search {
+      height: 45;
+      background: rgb(239, 243, 255);
+    }
+    EOF
+    template <<-EOF
+    [template]
+    selectable
+      vblock
+        vblock { 
+          ...search
+        }
+          label { 
+            content="Search by Term"
+          }
+          input {
+            size="25"
+            @change="update_term"
+          }
+        [if="summary"]
+          panel
+            text {
+              @selected="handle_selected"
+              :content="summary"
+              ...wikiStyle
+            }
+    EOF
+
+    uses(
+      selectable: Hokusai::Blocks::Selectable,
+      vblock: Hokusai::Blocks::Vblock,
+      text: Hokusai::Blocks::Text,
+      label: Hokusai::Blocks::Label,
+      input: Hokusai::Blocks::Input,
+      panel: Hokusai::Blocks::Panel,
+    )
+
+    attr_reader :summary
+
+    def update_term(term)  
+      page = Wikipedia.find(term)
+
+      @summary = <<~EOF
+      **[#{term}](#{page.fullurl})**
+
+      #{page.summary}
+      EOF
+
+      @summary
+    end
+
+    def handle_selected(start, stop)
+      pp [start, stop]
+    end
+  end
+end
+
+Hokusai::Backends::RaylibBackend.run(Wiki::Widget) do |config|
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Inter-Regular.ttf", 160)
+    Hokusai.fonts.register "inter", font
+    Hokusai.fonts.activate "inter"
+  end
+
+  config.width = 500
+  config.height = 500
+  config.title = "Wiki Widget"
+end