このファイル: /home/web6047/www/cgi-bin/prj/20200515-RPG／基本的/20200620-ウィンドウ入力/20200725-パレット/simple - snapshot 20200726.html
1
<html><!--ESCAPEPROCESS-->2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <script>console.clear();</script>
5 <script>
9
10 class App {
11 constructor() {
12 this.cc = document.getElementById( "test" ).getContext( "2d" );
13 this.cc.font = "16px monospace";
14 this.drawings = new Array();
15 this.framings = new Array();
16
17 this.camp = {
18 title : "testtitle",
19 items : [
20 {
21 title : "どうぐ",
22 },
23 {
24 title : "test2",
25 },
26 {
27 title : "test3",
28 },
29 ],
30 }
31
32
33 this.timerMs = 100;
34 this.timerId = setInterval( this.frame.bind( this ), this.timerMs );
35
36 this.campEvent();
37 }//constructor
38 //App
39 async campEvent() {
40
41 let menu;
42 let pals = [
43 {
44 type : "first",
45 },
46 ];
47 let idx = 0;
48 while( 1 ) {
49 let pal = pals[ idx ];
50 switch( pal.type ) {
51 case "first":
52 menu = new Menu( 1, 1, null, null, this.camp.title, this.camp.items );
53 this.drawings.push( menu );
54 this.framings.push( menu );
55 pal.res = await menu.select();
56 console.log( pal.res );
57 break;
58 case "type2":
59 break;
60 }
61 }//while 1
62
63 }//campEvent
64 //App
65 frame() {
66 for( let i = 0; i < this.framings.length; i++ ) {
67 let framing = this.framings[ i ];
68 framing.frame( this.cc );
69 }
70 this.draw( this.cc );
71 }
72 //App
73 draw( cc ) {
74 cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
75 for( let i = 0; i < this.drawings.length; i++ ) {
76 let drawing = this.drawings[ i ];
77 drawing.draw( this.cc );
78 }
79 }
80 }
81 class Win {
82 constructor( cx, cy, cw, ch ) {
83 this.cx = cx;
84 this.cy = cy;
85 this.cw = cw;
86 this.ch = ch;
87 this.borderWidth = 1;
88 this.padding = 8;
89 }
90 draw( cc ) {
91 let areaGx = this.cx * 16; //area is drawing field
92 let areaGy = this.cy * 16;
93 let areaGw = this.cw * 16;
94 let areaGh = this.ch * 16;
95 let gx, gy, gw, gh;
96 cc.save();
97 gx = areaGx - this.padding - this.borderWidth;
98 gy = areaGy - this.padding - this.borderWidth;
99 gw = areaGw + this.padding * 2 + this.borderWidth * 2;
100 gh = areaGh + this.padding * 2 + this.borderWidth * 2;
101 cc.translate( gx, gy );
102 cc.fillStyle = "white";
103 cc.fillRect( 0, 0, gw, gh );
104 cc.strokeStyle = "black";
105 cc.strokeRect( 0, 0, gw, gh );
106 cc.restore();
107 }
108 }
109 class CtrlWin extends Win {
110 constructor( cx, cy, cw, ch ) {
111 super( cx, cy, cw, ch );
112
113 this.keys = new Object();
114 this.tellOk = function() {} //dummy
115 }
116 frame() {
117 for( let key in this.keys ) {
118 this.keysense( Number( key ) );
119 //check.
120 if( ! this.keys[ key ] ) {
121 delete this.keys[ key ];
122 }
123 }
124 }
125 activate( tellOk ) {
126 this.tellOk = tellOk;
127 window.onkeydown = this.onkeydownx.bind( this );
128 window.onkeyup = this.onkeyupx.bind( this );
129 }
130 onkeydownx( e ) {
131 this.keys[ e.which ] = true;
132 this.keytype( e.which );
133 }
134 onkeyupx( e ) {
135 this.keys[ e.which ] = false;
136 }
137 keytype( key ) {
138 console.log( key );
139 }
140 keysense( key ) {
141 }
142 }
143 class Menu extends CtrlWin {
144 constructor( cx, cy, cw, ch, title, items ) {
145 super( cx, cy, cw, ch );
146 //check.
147 if( this.cw == null ) {
148 this.cw = Math.max( ...items.map( item => Math.ceil( getLen( item.title ) / 2 ) ), title.length );
149 }
150 if( this.ch == null ) {
151 this.ch = items.length + ( title ? 1 : 0 );
152 }
153 this.title = title;
154 this.items = items;
155
156 this.cursorY = 0;
157 }
158 select() {
159 return new Promise(
160 function( tellOk ) {
161 this.activate( tellOk );
162 }.bind( this )
163 );
164 }
165 keytype( key ) {
166 switch( key ) {
167 case 38:
168 if( this.cursorY > 0 ) {
169 this.cursorY --;
170 }
171 break;
172 case 40:
173 if( this.cursorY < this.items.length - 1 ) {
174 this.cursorY ++;
175 }
176 break;
177 case 32:
178 let selectedItem = this.items[ this.cursorY ];
179 this.tellOk( selectedItem.title );
180 break;
181 }
182 }
183 draw( cc ) {
184 super.draw( cc );
185
186 let gx, gy, gw, gh;
187 cc.save();
188 gx = this.cx * 16;
189 gy = this.cy * 16;
190 gw = this.cw * 16;
191 gh = this.ch * 16;
192 if( this.title ) {
193 cc.fillText( this.title, gx, gy + 16 - 4 );
194 cc.fillText( this.title, gx + 1, gy + 16 - 4 );
195 gy += 16;
196 }
197 cc.translate( gx, gy );
198 for( let i = 0; i < this.items.length; i++ ) {
199 let item = this.items[ i ];
200 if( i == this.cursorY ) {
201 cc.fillStyle = "black";
202 cc.fillRect( 0, i * 16, gw, 16 );
203 cc.fillStyle = "white";
204 } else {
205 cc.fillStyle = "black";
206 }
207 cc.fillText( item.title, 0, i * 16 + 16 );
208 }
209 cc.restore();
210 }
211 }
212 class Serif extends CtrlWin {
213 constructor( cx, cy, cw, ch ) {
214 super( cx, cy, cw, ch );
215 }
216 }
217
218 //半角を1文字、全角を2文字で数えるlength関数
219 //https://javascript.programmer-reference.com/javascript-han1zen2/
238
239 </script>
240 <style>
241 </style>
242 </head>
243 <body onload="onloadx()" onclick="location.reload();">
244 <canvas id="test" width="512" height="448" style="
245 border : solid 1px black;
246 float : left;
247 border-radius : .5em;
248 box-shadow : .5em .5em 0 lightgray;
249 ">
250 </canvas>
251 <div style="float:left; width:512px; margin:1em; background-color:lightgray;">
252 説明：
253
254 </div>
255 <script>
256 div = document.getElementsByTagName( "div" )[ 0 ];
257 div.innerHTML = div.innerHTML.replace( /\n/g, "<BR>" );
258 </script>
259
260 </body>
261 </html>