smalruby-editor 0.3.5-x86-mingw32 → 0.4.0-x86-mingw32

data/app/assets/javascripts/views/character_selector_view.js.coffee

@@ -17,6 +17,8 @@ Smalruby.CharacterSelectorView = Backbone.View.extend({
         if (last = _.last(charSet.models))
           name: charSet.uniqueName(last.costume())
           costumes: _.clone(last.get('costumes'))
+          costumeNames: _.clone(last.get('costumeNames'))
+          costumeIndex: _.clone(last.get('costumeIndex'))
         else
           name: charSet.uniqueName()
       c = new Smalruby.Character(attrs)

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

@@ -5,6 +5,9 @@
 $margin: 20px;
 $character-size: 32px * 5;
 $left-pane-width: $character-size + $margin * 2;
+$border-size: 5px;
+$border-color: #0088cc;
+$scrollbar-width: 20px;
 
 html {
     -ms-touch-action: manipulation;
@@ -84,9 +87,6 @@ html {
                 }
 
                 #selectors-tab-content {
-                    $border-size: 5px;
-                    $border-color: #0088cc;
-
                     position: absolute;
                     width: $character-size + $margin * 3;
                     top: 32px;
@@ -246,10 +246,10 @@ html {
     $preview-width: 320px;
     $preview-height: 240px;
 
-    $attributes-height: 160px;
+    $attributes-height: 260px;
 
     $left-pane-width: $preview-width + 2px;
-    $right-pane-width: $character-size * 3 + $modal-body-margin;
+    $right-pane-width: $character-size * 4 + $scrollbar-width * 2 + $modal-body-margin;
 
     $modal-width: $left-pane-width + $right-pane-width + $modal-margin * 2;
     $modal-height: $preview-height + 2px + $attributes-height + $modal-margin * 2;
@@ -328,25 +328,210 @@ html {
 
             overflow: hidden;
 
-            #character-modal-costume-selector {
-                margin-left: $left-pane-width;
+            #character-modal-right-pane-inner {
+                $inner-left-pane-width: $character-size + $scrollbar-width;
+
+                margin-left: $left-pane-width + $modal-body-margin;
                 position: absolute;
                 left: 0;
                 top: 0;
                 right: 0;
                 bottom: 0;
-                width: $right-pane-width + $modal-body-margin * 2;
-                overflow-y: scroll;
+                width: $right-pane-width;
+                height: $modal-height - $modal-body-margin * 2;
 
-                ul.thumbnails {
-                    margin: 0 0 10px 0;
+                #character-modal-right-pane-inner-left-pane {
+                    width: $inner-left-pane-width;
+                    height: $modal-height - $modal-body-margin * 2;
 
-                    li {
-                        margin-left: $modal-body-margin;
-                        margin-bottom: $modal-body-margin;
+                    margin-left: 0;
+
+                    overflow: hidden;
+
+                    #character-modal-costume-set-header {
+                        width: $inner-left-pane-width;
+                    }
+
+                    #character-modal-costume-set-container {
+                        overflow-y: scroll;
+                        width: $inner-left-pane-width;
+                        height: 504px - 20px;
+
+                        .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.remove-button {
+                                    position: absolute;
+                                    right: $border-size * 2;
+                                    top: $border-size * 2;
+                                    padding-left: 0.5em;
+                                    padding-bottom: 0.5em;
+
+                                    z-index: 1;
+                                }
+                            }
+                        }
+
+                        .item.active, .item.active.error {
+                            a.costume {
+                                border: $border-size solid $border-color;
+                            }
+                        }
+
+                        .item.error {
+                            a.costume {
+                                border: $border-size solid #b94a48;
+                            }
+                        }
+
+                        a.costume {
+                            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;
+                            }
+
+                            img {
+                                max-width: $character-size;
+                                max-height: $character-size;
+                            }
+                        }
+
+                        a.costume:hover {
+                            border: $border-size solid $border-color;
+                        }
+
+                        a#character-modal-add-costume-button {
+                            text-align: center;
+                            vertical-align: middle;
+                            font-size: 1em;
+
+                            border: $border-size dashed lightgray;
+
+                            i {
+                                font-size: 2em;
+                            }
+                        }
+
+                        a#character-modal-add-costume-button:hover {
+                            border: $border-size dashed $border-color;
+                        }
+                    }
+                }
 
-                        a.active {
-                            background-color: #0088cc;
+                #character-modal-right-pane-inner-right-pane {
+                    margin-left: $inner-left-pane-width;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: $character-size * 3 + $scrollbar-width;
+                    height: 100%;
+
+                    overflow: hidden;
+
+                    #character-modal-costume-selector {
+                        overflow-y: scroll;
+                        height: 504px - 30px - $scrollbar-width;
+
+                        ul.thumbnails {
+                            margin: 0 0 $modal-body-margin 0;
+
+                            li {
+                                margin-left: $modal-body-margin;
+                                margin-bottom: $modal-body-margin;
+                                position: relative;
+
+                                a {
+                                    text-decoration: none;
+                                    cursor: pointer;
+                                }
+
+                                a#character-modal-upload-costume {
+                                    width: $character-size;
+                                    height: $character-size;
+
+                                    vertical-align: middle;
+                                    display: table-cell;
+                                    text-align: center;
+                                    font-size: 1em;
+
+                                    border: $border-size dashed lightgray;
+
+                                    i {
+                                        font-size: 2em;
+                                    }
+                                }
+
+                                a#character-modal-upload-costume:hover {
+                                    border: $border-size dashed $border-color;
+                                }
+
+                                a.active {
+                                    background-color: #0088cc;
+                                }
+
+                                a.remove-button {
+                                    font-size: 1.5em;
+                                    position: absolute;
+                                    right: 0;
+                                    top: 0;
+                                    padding-left: 0.5em;
+                                    padding-bottom: 0.5em;
+                                    color: #b94a48;
+
+                                    z-index: 1;
+                                }
+                            }
                         }
                     }
                 }

data/app/controllers/application_controller.rb

@@ -7,8 +7,9 @@ class ApplicationController < ActionController::Base
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
 
-  helper_method :standalone?, :raspberrypi?, :current_user,
-                :current_preferences
+  helper_method :standalone?, :raspberrypi?,
+                :signed_in?,
+                :current_user, :current_preferences
 
   before_filter :set_locale
   before_filter :reload_preference if Rails.env.development?
@@ -66,6 +67,11 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  # whether signed in or not.
+  def signed_in?
+    session[:username]
+  end
+
   def current_user
     @current_user ||= User.where(name: session[:username]).first
   end

data/app/controllers/costumes_controller.rb

@@ -0,0 +1,58 @@
+class CostumesController < ApplicationController
+  layout false
+
+  before_filter :check_whether_standalone, only: [:show, :create, :destroy]
+
+  def index
+    if signed_in?
+      @costumes = current_user.costumes.with_preset
+    else
+      @costumes = Costume.presets
+    end
+    @costumes = @costumes.merge(Costume.default_order)
+  end
+
+  def show
+    name = params[:basename].sub(/\.png$/, "")
+    costume = current_user.costumes.where(name: name).first
+    send_file costume.path,
+              type: "image/png", disposition: "inline", x_send_file: true
+  end
+
+  def create
+    max_position =
+      current_user.costumes.order(position: :desc).first.try(:position) || -1
+    attrs = {
+      basename: costume_params[:file].original_filename,
+      preset: false,
+      position: max_position + 1,
+    }
+    costume = current_user.costumes.create!(attrs)
+
+    path = costume.path
+    FileUtils.mkdir_p(path.dirname)
+    File.open(path, "wb") do |f|
+      f.write(costume_params[:file].read)
+    end
+
+    index
+
+    render action: "index"
+  end
+
+  def destroy
+    costume = current_user.costumes.where(id: params[:id]).first
+    FileUtils.rm_f(costume.path)
+    costume.destroy
+
+    index
+
+    render action: "index"
+  end
+
+  private
+
+  def costume_params
+    params.require(:costume).permit(:file)
+  end
+end

data/app/controllers/editor_controller.rb

@@ -1,4 +1,6 @@
 # -*- coding: utf-8 -*-
+require "ostruct"
+
 class EditorController < ApplicationController
   def index
   end

data/app/helpers/costumes_helper.rb

@@ -0,0 +1,2 @@
+module CostumesHelper
+end

data/app/helpers/sessions_helper.rb

@@ -1,6 +1,2 @@
 module SessionsHelper
-  # whether signed in or not.
-  def signed_in?
-    session[:username]
-  end
 end

data/app/models/concerns/ruby_to_block/block/base.rb

@@ -4,6 +4,8 @@ module RubyToBlock
   module Block
     # すべてのブロックのベースクラス
     class Base
+      STRING_RE = '\s*("[^"]*"|\'[^\']*\')\s*'
+
       attr_accessor :parent
       attr_accessor :prev_sibling
       attr_accessor :sibling

data/app/models/concerns/ruby_to_block/block/character.rb

@@ -4,12 +4,22 @@ module RubyToBlock
     # ソースコードに含まれるキャラクターを表現するクラス
     class Character < Base
       # rubocop:disable LineLength
-      blocknize '^\s*(\S+)\s*=\s*Character\.new\(costume:\s*"(\s*[^"]+\s*)"\s*,\s*x:\s*(\s*\d+\s*)\s*,\s*y:\s*(\s*\d+\s*)\s*,\s*angle:\s*(\s*\d+\s*)(?:,\s*rotation_style:\s*\s*:(free|left_right|none)\s*)?\)\s*$',
+      blocknize ['^\s*',
+                 '(\S+)', '\s*=\s*', 'Character\.new\(',
+                 'costume:\s*("[^"]+"|\[\s*"[^"]+"\s*(?:,\s*"[^"]+".*)*\])\s*',
+                 '(?:,\s*costume_index:\s*(\d+)\s*)?',
+                 ',\s*x:\s*(\d+)\s*',
+                 ',\s*y:\s*(\d+)\s*',
+                 ',\s*angle:\s*(\d+)\s*',
+                 '(?:,\s*rotation_style:\s+:(free|left_right|none)\s*)?',
+                 '\)',
+                 '\s*$'].join(""),
                 statement: true
       # rubocop:enable LineLength
 
       attr_accessor :name
       attr_accessor :costumes
+      attr_accessor :costume_index
       attr_accessor :x
       attr_accessor :y
       attr_accessor :angle
@@ -18,9 +28,14 @@ module RubyToBlock
       def self.process_match_data(md, context)
         md2 = regexp.match(md[type])
         name = md2[1]
-        context[:characters][name] = new(name: name, costumes: [md2[2]],
-                                         x: md2[3], y: md2[4], angle: md2[5],
-                                         rotation_style: md2[6] || 'free')
+        costumes = md2[2].scan(/"([^"]+)"/).flatten
+        context[:characters][name] = new(name: name,
+                                         costumes: costumes,
+                                         costume_index: md2[3] || "0",
+                                         x: md2[4],
+                                         y: md2[5],
+                                         angle: md2[6],
+                                         rotation_style: md2[7] || "free")
 
         true
       end
@@ -28,6 +43,7 @@ module RubyToBlock
       def initialize(options)
         @name = options[:name]
         @costumes = options[:costumes]
+        @costume_index = options[:costume_index]
         @x = options[:x]
         @y = options[:y]
         @angle = options[:angle]
@@ -36,14 +52,19 @@ module RubyToBlock
 
       def to_xml(parent)
         attrs = {
-          'name' => @name,
-          'x' => @x,
-          'y' => @y,
-          'angle' => @angle,
-          'costumes' => @costumes.join(',')
+          "name" => @name,
+          "x" => @x,
+          "y" => @y,
+          "angle" => @angle,
+          "costumes" => @costumes.join(","),
         }
-        attrs['rotation_style'] = @rotation_style if @rotation_style != 'free'
-        parent.add_element('character', attrs)
+        if @costume_index != "0"
+          attrs["costume_index"] = @costume_index
+        end
+        if @rotation_style != "free"
+          attrs["rotation_style"] = @rotation_style
+        end
+        parent.add_element("character", attrs)
       end
     end
   end