smalruby-editor 0.0.12 → 0.1.0

data/app/assets/stylesheets/editor.css.scss

@@ -2,18 +2,334 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+$margin: 20px;
+$character-size: 32px * 5;
+$left-pane-width: $character-size + $margin * 2;
+
+.dropdown-menu > li > a {
+    cursor: default;
+}
+
 #messages {
     position: absolute;
     right: 20px;
     z-index: 9999;
 }
 
-#text-editor {
+.left-pane {
+    position: relative;
+    height: 100%;
+    float: left;
+    margin-left: -100%;
+}
+
+.right-pane {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    float: left;
+}
+
+#modes-container {
     position: absolute;
+    width: 100%;
     left: 0;
     top: 60px;
     right: 0;
     bottom: 0;
 
-    font-size: 16pt;
+    .modes-tab-pane {
+        position: relative;
+        height: 98%;
+
+        #block-tab-left-pane {
+            width: $left-pane-width;
+
+            #selectors-container {
+                position: relative;
+                margin-left: $margin;
+                width: $character-size;
+                height: 100%;
+                overflow: hidden;
+
+                ul.nav-pills {
+                    margin: 0 0 4px 0;
+                    font-size: 0.8em;
+                    line-height: 1em;
+
+                    li {
+                        line-height: 12px;
+
+                        a {
+                            margin-right: 2px;
+                            margin-tiop: 2px;
+                            margin-bottom: 2px;
+
+                            padding-top: 8px;
+                            padding-bottom: 8px;
+                            padding-right: 5px;
+                            padding-left: 5px;
+
+                            line-height: 12px;
+                        }
+                    }
+                }
+
+                #selectors-tab-content {
+                    $border-size: 5px;
+                    $border-color: #0088cc;
+
+                    position: absolute;
+                    width: $character-size + $margin * 3;
+                    top: 32px;
+                    left: 0;
+                    right: 0;
+                    bottom: -2px;
+                    overflow-y: scroll;
+
+                    .selector-tab {
+                        .item {
+                            position: relative;
+                            width: $character-size;
+                            height: $character-size;
+
+                            a {
+                                text-decoration: none;
+                                cursor: pointer;
+                                font-size: 1.5em;
+                                vertical-align: middle;
+                                display: table-cell;
+                            }
+
+                            .item-info {
+                                position: absolute;
+                                left: 0;
+                                top: 0;
+                                right: 0;
+                                bottom: 0;
+                                width: $character-size;
+                                height: $character-size;
+
+                                color: gray;
+
+                                .name {
+                                    position: absolute;
+                                    left: $border-size * 2;
+                                    top: $border-size * 2;
+
+                                    font-size: 1.5em;
+                                }
+
+                                .attributes {
+                                    position: absolute;
+                                    left: $border-size * 2;
+                                    bottom: $border-size * 2;
+
+                                    font-size: 0.8em;
+                                    line-height: 1.1em;
+                                    text-align: left;
+                                }
+
+                                a.add-block-button {
+                                    position: absolute;
+                                    right: $border-size * 2;
+                                    bottom: $border-size * 2;
+                                    padding-left: 0.5em;
+                                    padding-top: 0.5em;
+
+                                    font-size: 2em;
+
+                                    z-index: 1;
+                                }
+
+                                a.remove-button {
+                                    position: absolute;
+                                    right: $border-size * 2;
+                                    top: $border-size * 2;
+                                    padding-left: 0.5em;
+                                    padding-bottom: 0.5em;
+
+                                    z-index: 1;
+                                }
+                            }
+
+                            a.character {
+                                position: relative;
+                                overflow: hidden;
+                                display: table-cell;
+                                text-align: center;
+                                vertical-align: middle;
+
+                                width: $character-size - $border-size * 2;
+                                height: $character-size - $border-size * 2;
+
+                                border: $border-size solid white;
+
+                                img, div {
+                                    margin: -$border-size;
+                                }
+                            }
+
+                            a.character:hover {
+                                border: $border-size solid $border-color;
+                            }
+
+                            a#add-character-button.character {
+                                text-align: center;
+                                vertical-align: middle;
+                                font-size: 1em;
+
+                                border: $border-size dashed lightgray;
+
+                                i {
+                                    font-size: 2em;
+                                }
+                            }
+
+                            a#add-character-button.character:hover {
+                                border: $border-size dashed $border-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        #block-tab-right-pane {
+            #blockly-div {
+                margin-left: $left-pane-width;
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: $margin;
+                bottom: 0;
+
+                -ms-touch-action: none;
+
+                svg.blocklySvg {
+                    overflow: hidden;
+                }
+            }
+        }
+
+        #text-editor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+
+            font-size: 16pt;
+        }
+    }
+}
+
+#character-modal {
+    $modal-frame-size: 1px;
+    $modal-body-margin: 15px;
+
+    $modal-margin: $modal-frame-size + $modal-body-margin;
+
+    $preview-width: 320px;
+    $preview-height: 240px;
+
+    $attributes-height: 160px;
+
+    $left-pane-width: $preview-width;
+    $right-pane-width: $character-size * 3 + $modal-body-margin;
+
+    $modal-width: $left-pane-width + $right-pane-width + $modal-margin * 2;
+    $modal-height: $preview-height + $attributes-height + $modal-margin * 2;
+
+    width: $modal-width;
+    height: $modal-height;
+    margin-left: -($modal-width / 2);
+
+    .modal-body {
+        position: relative;
+        height: 100%;
+        max-height: $modal-height - $modal-body-margin * 2;
+
+        #character-modal-left-pane {
+            width: $left-pane-width;
+            overflow: hidden;
+
+            #character-modal-preview {
+                position: relative;
+
+                width: $preview-width;
+                height: $preview-height;
+                background-color: black;
+                overflow: hidden;
+
+                #character-modal-character {
+                    position: absolute;
+
+                    -ms-touch-action: none;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+
+            #character-modal-attributes {
+                position: absolute;
+                width: $preview-width;
+                top: $preview-height + $modal-body-margin;
+                left: 0;
+                right: 0;
+                bottom: 0;
+
+                #character-modal-form {
+                    margin-bottom: 0;
+
+                    .control-group {
+                        margin-bottom: 8px;
+
+                        .control-label {
+                            width: 100px;
+                        }
+
+                        .controls {
+                            margin-left: 100px + $modal-body-margin;
+
+                            input[type=range] {
+                                padding: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        #character-modal-right-pane {
+            overflow: hidden;
+
+            #character-modal-costume-selector {
+                margin-left: $left-pane-width;
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                width: $right-pane-width + $modal-body-margin * 2;
+                overflow-y: scroll;
+
+                ul.thumbnails {
+                    margin: 0 0 10px 0;
+
+                    li {
+                        margin-left: $modal-body-margin;
+                        margin-bottom: $modal-body-margin;
+
+                        a.active {
+                            background-color: #0088cc;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

data/app/assets/stylesheets/toolbox.css.scss.erb

@@ -0,0 +1,62 @@
+<%
+  # hsv_to_rgb メソッドは http://c4se.hatenablog.com/entry/2013/08/04/190937 をほぼコピーした
+  def hsv_to_rgb(h, s, v)
+    s /= 100.0
+    v /= 100.0
+    c = v * s
+    x = c * (1 - ((h / 60.0) % 2 - 1).abs)
+    m = v - c
+    r, g, b = *(
+      case
+      when h < 60  then [c, x, 0]
+      when h < 120 then [x, c, 0]
+      when h < 180 then [0, c, x]
+      when h < 240 then [0, x, c]
+      when h < 300 then [x, 0, c]
+      else              [c, 0, x]
+      end
+    )
+    [r, g, b].map { |channel|
+      ((channel + m) * 255).ceil
+    }.map { |c|
+      '%02x' % c
+    }.join
+  end
+
+  hues = %w(
+    225
+    264
+    296
+    33
+    43
+    43
+    43
+    200
+    93
+    93
+    340
+    208
+  ).map(&:to_i)
+
+  colors = hues.map { |h|
+    [hsv_to_rgb(h, 100, 80), hsv_to_rgb(h, 100, 100)]
+  }
+
+  colors.each.with_index(1) do |(color, active_color), index|
+%>
+
+#\:<%= '%x' % index %> {
+    .blocklyTreeRow {
+        padding-top: 0.25em;
+        padding-bottom: 0.25em;
+        border-left: 0.75em solid #<%= color %>;
+    }
+
+    .blocklyTreeRow.blocklyTreeSelected {
+        color: white;
+        font-weight: bold;
+        background-color: #<%= active_color %> !important;
+    }
+}
+
+<% end %>

data/app/controllers/application_controller.rb

@@ -1,5 +1,24 @@
+# -*- coding: utf-8 -*-
 class ApplicationController < ActionController::Base
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
+
+  helper_method :standalone?
+
+  private
+
+  # スタンドアローンモードかどうかを返す
+  def standalone?
+    return false if Rails.env == 'production'
+    return true if Rails.env == 'standalone'
+
+    if Rails.env != 'test' &&
+        (ENV['SMALRUBY_EDITOR_STANDALONE_MODE'] ||
+         File.exist?(Rails.root.join('tmp', 'standalone')))
+      true
+    else
+      false
+    end
+  end
 end

data/app/controllers/editor_controller.rb

@@ -2,4 +2,8 @@
 class EditorController < ApplicationController
   def index
   end
+
+  def demo
+    @filename = (File.basename(params[:filename]) || 'default') + '.xml'
+  end
 end

data/app/controllers/source_codes_controller.rb

@@ -2,7 +2,7 @@
 require 'nkf'
 
 class SourceCodesController < ApplicationController
-  before_filter :check_whether_standalone, only: :write
+  before_filter :check_whether_standalone, only: [:write, :run]
 
   def check
     render json: SourceCode.new(source_code_params).check_syntax
@@ -51,10 +51,16 @@ class SourceCodesController < ApplicationController
     render json: { source_code: info }, content_type: request.format
   end
 
+  def run
+    source_code = SourceCode.new(source_code_params)
+    path = Pathname("~/#{source_code.filename}").expand_path
+    render json: source_code.run(path)
+  end
+
   private
 
   def check_whether_standalone
-    unless Rails.env == 'standalone'
+    unless standalone?
       fail "#{self.class.name}##{action_name}はstandaloneモードのみの機能です"
     end
   end