kame-remocon 0.2.2 → 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 739470f51dedff9d33f47a0f0c8d011e2e090f2ebad37139f7aeb900c8e84593
|
|
4
|
+
data.tar.gz: 385eb802c17457fbc46b00c3fb8039d7493238d0657e767e86ab5cabb5072f4f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b835c9f5b53323be80dbc73347fed450befc9758183cc7d4eceb9ef5b0530065c06633cfdcf0c3536ee55fe1ae1fcf70b5d8990a5df8ca86b6e49e603a7f0946
|
|
7
|
+
data.tar.gz: 2f0c2f8eb75c95260fa55098b4fd88cefdad1b70ac9ec7915b413d385b4a394c1e52c631349817b194da9161c7d119dde719b8dc3600a85495e6244b2af1c0e8
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
body {
|
|
2
|
+
background-color: #f0f4f8;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.content {
|
|
6
|
+
margin: 0 auto;
|
|
7
|
+
width: 824px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.wrap-canvas {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
float: left;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.wrap-canvas canvas {
|
|
16
|
+
width: 400px;
|
|
17
|
+
height: 400px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.wrap-code-text {
|
|
21
|
+
width: 400px;
|
|
22
|
+
height: 400px;
|
|
23
|
+
display: inline-block;
|
|
24
|
+
margin-left: 24px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.wrap-code-text textarea {
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.exec-button {
|
|
34
|
+
text-align: right;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.exec-button button {
|
|
39
|
+
width: 200px;
|
|
40
|
+
font-size: 24px;
|
|
41
|
+
font-weight: bold;
|
|
42
|
+
text-decoration: none;
|
|
43
|
+
display: inline-block;
|
|
44
|
+
text-align: center;
|
|
45
|
+
padding: 8px 0 10px;
|
|
46
|
+
color: #fff;
|
|
47
|
+
background-color: #49a9d4;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
ul {
|
|
52
|
+
list-style: none;
|
|
53
|
+
padding-left: 1em;
|
|
54
|
+
}
|
|
@@ -64,16 +64,29 @@ class Kame::Remocon::Opal::AppView
|
|
|
64
64
|
program = @program
|
|
65
65
|
render_image = @state[:render_image]
|
|
66
66
|
bg_color = @state[:bg_color]
|
|
67
|
+
|
|
67
68
|
div do
|
|
68
|
-
h2(nil,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
h2(nil, "タートルグラフィックスに挑戦！！")
|
|
70
|
+
div do
|
|
71
|
+
Kame::Remocon::Opal::CanvasView.el(onMounted: -> canvas { mounted(canvas) }, render_image: render_image, bg_color: bg_color)
|
|
72
|
+
div({class: "wrap-code-text"}, textarea({style: {width: "400px", height: "400px"}, ref: :program}, program))
|
|
73
|
+
end
|
|
74
|
+
Hyalite.create_element(:p, {class: "exec-button"}, button({onClick: -> { exec }, name: "exec"}, "実行する"))
|
|
75
|
+
|
|
76
|
+
div do
|
|
77
|
+
h2(nil, "設定")
|
|
78
|
+
ul do
|
|
79
|
+
li do
|
|
80
|
+
input({type: :checkbox, checked: true, id: :wait, ref: :wait})
|
|
81
|
+
label({for: :wait}, "描く過程を表示する")
|
|
82
|
+
end
|
|
83
|
+
li do
|
|
84
|
+
input({type: :checkbox, checked: true, id: :bg_color, ref: :bg_color, onClick: -> {set_background}})
|
|
85
|
+
label({for: :bg_color}, "黒背景")
|
|
86
|
+
end
|
|
87
|
+
end
|
|
88
|
+
#button({onClick: -> { create_image }, name: "create_image"}, "画像を作成")
|
|
89
|
+
end
|
|
77
90
|
end
|
|
78
91
|
end
|
|
79
92
|
end
|
|
@@ -21,7 +21,7 @@ class Kame::Remocon::Opal::CanvasView
|
|
|
21
21
|
|
|
22
22
|
bg_color = @props[:bg_color]
|
|
23
23
|
|
|
24
|
-
div do
|
|
24
|
+
div({class: "wrap-canvas"}) do
|
|
25
25
|
canvas(width: "400", height: "400", id: :canvas, ref: :canvas, style: {"background-color": bg_color})
|
|
26
26
|
if image
|
|
27
27
|
img(src: image, style: {"background-color": bg_color})
|
data/lib/kame/remocon/version.rb
CHANGED