質問編集履歴
14
コードの更新 反対側の●も保存
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -42,14 +42,20 @@
|
|
|
42
42
|
end
|
|
43
43
|
|
|
44
44
|
def win_or_lose
|
|
45
|
+
// 数字_数字を分解
|
|
46
|
+
resultAry = params[:id].split("_")
|
|
47
|
+
// 左側が勝利のtd
|
|
45
|
-
|
|
48
|
+
result_win = Result.find(resultAry[0])
|
|
49
|
+
// 右側が敗北のtd
|
|
50
|
+
result_lose = Result.find(resultAry[1])
|
|
51
|
+
|
|
46
|
-
if
|
|
52
|
+
if result_win.result == "○"
|
|
47
|
-
|
|
53
|
+
result_win.update(result: "")
|
|
54
|
+
result_lose.update(result: "")
|
|
48
|
-
else
|
|
55
|
+
else result_win.result == ""
|
|
49
|
-
|
|
56
|
+
result_win.update(result: "○")
|
|
57
|
+
result_lose.update(result: "●")
|
|
50
58
|
end
|
|
51
|
-
item = Result.find(params[:id])
|
|
52
|
-
render json: { result: item }
|
|
53
59
|
end
|
|
54
60
|
|
|
55
61
|
end
|
|
@@ -77,9 +83,11 @@
|
|
|
77
83
|
<tr class="result-cells">
|
|
78
84
|
<td id="rank_<%= i + 1 %>"></td>
|
|
79
85
|
<td class="self-name"><%= member.name %></td>
|
|
86
|
+
// 勝敗記入のtd
|
|
80
|
-
<td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
|
|
87
|
+
<td id="op_<%= i + 1 %>_1" data-id="<%= (i * 10) + 1 %>_<%= (10 * (i * 10 + 1)) - (100 * i + (9 - i)) %>"><%= Result.find((i * 10) + 1).result %></td>
|
|
81
88
|
// 途中略
|
|
82
|
-
<td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
|
|
89
|
+
<td id="op_<%= i + 1 %>_10" data-id="<%= (i * 10) + 10 %>_<%= (10 * (i * 10 + 10)) - (100 * i + (9 - i)) %>"><%= Result.find((i * 10) + 10).result %></td>
|
|
90
|
+
// 勝敗のtd
|
|
83
91
|
<td id="win_<%= i + 1 %>">0</td>
|
|
84
92
|
<td id="lose_<%= i + 1 %>">0</td>
|
|
85
93
|
<td id="sb_<%= i + 1 %>">0</td>
|
|
@@ -208,14 +216,7 @@
|
|
|
208
216
|
var json_data = {"_1":{
|
|
209
217
|
"member":"Aさん",
|
|
210
218
|
"_1":{"member":"Aさん","WinOrLose":9},
|
|
211
|
-
|
|
219
|
+
// 途中略
|
|
212
|
-
"_3":{"member":"Cさん","WinOrLose":0},
|
|
213
|
-
"_4":{"member":"Dさん","WinOrLose":0},
|
|
214
|
-
"_5":{"member":"Eさん","WinOrLose":0},
|
|
215
|
-
"_6":{"member":"Fさん","WinOrLose":0},
|
|
216
|
-
"_7":{"member":"Gさん","WinOrLose":0},
|
|
217
|
-
"_8":{"member":"Hさん","WinOrLose":0},
|
|
218
|
-
"_9":{"member":"Iさん","WinOrLose":0},
|
|
219
220
|
"_10":{"member":"Jさん","WinOrLose":0}
|
|
220
221
|
},
|
|
221
222
|
|
|
@@ -224,14 +225,7 @@
|
|
|
224
225
|
"_10":{
|
|
225
226
|
"member":"Jさん",
|
|
226
227
|
"_1":{"member":"Aさん","WinOrLose":0},
|
|
227
|
-
|
|
228
|
+
// 途中略
|
|
228
|
-
"_3":{"member":"Cさん","WinOrLose":0},
|
|
229
|
-
"_4":{"member":"Dさん","WinOrLose":0},
|
|
230
|
-
"_5":{"member":"Eさん","WinOrLose":0},
|
|
231
|
-
"_6":{"member":"Fさん","WinOrLose":0},
|
|
232
|
-
"_7":{"member":"Gさん","WinOrLose":0},
|
|
233
|
-
"_8":{"member":"Hさん","WinOrLose":0},
|
|
234
|
-
"_9":{"member":"Iさん","WinOrLose":0},
|
|
235
229
|
"_10":{"member":"Jさん","WinOrLose":9}
|
|
236
230
|
}
|
|
237
231
|
};
|
13
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -241,6 +241,8 @@
|
|
|
241
241
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
242
242
|
// 1行目はヘッダーだから飛ばして
|
|
243
243
|
for(var itr = 1; itr < trs.length; itr++){
|
|
244
|
+
var win = 0;
|
|
245
|
+
var lose = 0;
|
|
244
246
|
// テーブルの行毎に処理
|
|
245
247
|
var tds = trs[itr].getElementsByTagName('td');
|
|
246
248
|
for(var itd = 0; itd < tds.length; itd++){
|
|
@@ -249,26 +251,36 @@
|
|
|
249
251
|
var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
|
|
250
252
|
if(arr[1] == arr[2]){
|
|
251
253
|
// 対戦が同じ場合
|
|
252
|
-
tds[itd].classList.add('right_down_border');
|
|
254
|
+
tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
|
|
253
255
|
}
|
|
254
256
|
else {
|
|
257
|
+
// 勝ち数を加算
|
|
258
|
+
if(tds[itd].innerHTML == '○'){
|
|
259
|
+
win ++;
|
|
260
|
+
}
|
|
261
|
+
// 負け数を加算
|
|
262
|
+
else if(tds[itd].innerHTML == '●'){
|
|
263
|
+
lose ++;
|
|
264
|
+
}
|
|
255
265
|
// 対戦が違う場合、イベントを登録
|
|
256
266
|
// onclick="winorlose_click(this);" と同じ内容
|
|
257
267
|
tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
|
|
258
268
|
if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
|
|
259
269
|
tds[itd].innerHTML = "○";
|
|
260
|
-
}
|
|
270
|
+
}
|
|
261
271
|
else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
|
|
262
272
|
tds[itd].innerHTML = "●";
|
|
263
273
|
}
|
|
264
274
|
}
|
|
265
275
|
}
|
|
266
|
-
|
|
276
|
+
else if(tds[itd].id.indexOf('win_') != -1) {
|
|
267
|
-
// tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
|
|
268
|
-
|
|
277
|
+
// 勝ち表示
|
|
278
|
+
tds[itd].innerHTML = win;
|
|
279
|
+
}
|
|
269
|
-
|
|
280
|
+
else if(tds[itd].id.indexOf('lose_') != -1) {
|
|
270
|
-
// tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
|
|
271
|
-
|
|
281
|
+
// 負け表示
|
|
282
|
+
tds[itd].innerHTML = lose;
|
|
283
|
+
}
|
|
272
284
|
}
|
|
273
285
|
}
|
|
274
286
|
}
|
|
@@ -281,21 +293,22 @@
|
|
|
281
293
|
send_winorlose = true; // 処理中とする
|
|
282
294
|
|
|
283
295
|
// el にはどこでクリックされたかの情報が入っている
|
|
284
|
-
var arr = el.target.id.split('_'); // idを'_'で分ける
|
|
296
|
+
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
285
297
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
286
298
|
// 勝敗の記入と取消
|
|
287
299
|
if(el.target.innerHTML == ''){ // 勝敗を記入
|
|
288
300
|
el.target.innerHTML = '○'; // 勝ち
|
|
289
|
-
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
301
|
+
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
290
|
-
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1;
|
|
302
|
+
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1; //jsonのデータ自体を更新
|
|
291
|
-
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1;
|
|
303
|
+
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1; //jsonのデータ自体を更新
|
|
292
304
|
}
|
|
293
305
|
else if(el.target.innerHTML == '○'){ // 勝敗を取消
|
|
294
306
|
el.target.innerHTML = ''; // 空白
|
|
295
307
|
document.getElementById(oppid).innerHTML = ''; // 空白
|
|
296
|
-
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0;
|
|
308
|
+
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0; //jsonのデータ自体を更新
|
|
297
|
-
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0;
|
|
309
|
+
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0; //jsonのデータ自体を更新
|
|
298
310
|
}
|
|
311
|
+
|
|
299
312
|
// 勝ち数と負け数の計算
|
|
300
313
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
301
314
|
var win = 0;
|
|
@@ -311,7 +324,7 @@
|
|
|
311
324
|
// 勝ち負け数カウント
|
|
312
325
|
if(tds[itd].innerHTML == '○'){
|
|
313
326
|
win ++;
|
|
314
|
-
}else if(tds[itd].innerHTML == '●'){
|
|
327
|
+
} else if(tds[itd].innerHTML == '●'){
|
|
315
328
|
lose ++;
|
|
316
329
|
}
|
|
317
330
|
} else if(tds[itd].id.indexOf('win_') != -1){
|
12
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -274,8 +274,13 @@
|
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
// クリックしたときの処理
|
|
277
|
+
var send_winorlose = false;
|
|
278
|
+
var XHR;
|
|
277
279
|
function winorlose_click(el){
|
|
280
|
+
if(send_winorlose) return; // 送信中は実行できない
|
|
281
|
+
send_winorlose = true; // 処理中とする
|
|
282
|
+
|
|
278
|
-
|
|
283
|
+
// el にはどこでクリックされたかの情報が入っている
|
|
279
284
|
var arr = el.target.id.split('_'); // idを'_'で分ける
|
|
280
285
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
281
286
|
// 勝敗の記入と取消
|
|
@@ -318,20 +323,22 @@
|
|
|
318
323
|
}
|
|
319
324
|
}
|
|
320
325
|
}
|
|
326
|
+
|
|
327
|
+
//※ データの送信は処理の最後
|
|
328
|
+
//※ 非同期でも結果が返ってくるまでクリックを無視するように変更
|
|
321
|
-
|
|
329
|
+
let resultId = el.target.getAttribute("data-id");
|
|
330
|
+
if(!XHR){
|
|
322
|
-
|
|
331
|
+
XHR = new XMLHttpRequest();
|
|
323
|
-
XHR.open("GET", `/results/${resultId}`, false);
|
|
324
|
-
XHR.responseType = "
|
|
332
|
+
XHR.responseType = "json";
|
|
325
|
-
XHR.send();
|
|
326
|
-
XHR.onload = function
|
|
333
|
+
XHR.onload = function() {
|
|
327
|
-
if (xhr.readyState === 4) {
|
|
328
|
-
if (xhr.status === 200) {
|
|
329
|
-
|
|
334
|
+
send_winorlose = false; // 送信完了
|
|
330
|
-
} else {
|
|
331
|
-
console.error(xhr.statusText);
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
335
|
};
|
|
336
|
+
XHR.onerror = function() {
|
|
337
|
+
send_winorlose = false; // 送信完了
|
|
338
|
+
};
|
|
339
|
+
}
|
|
340
|
+
XHR.open("GET", `/results/${resultId}`, true);
|
|
341
|
+
XHR.send();
|
|
335
342
|
}
|
|
336
343
|
|
|
337
344
|
window.addEventListener("load", init);
|
11
データ送信部分のコード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -321,8 +321,17 @@
|
|
|
321
321
|
let resultId = el.target.getAttribute("data-id");
|
|
322
322
|
let XHR = new XMLHttpRequest();
|
|
323
323
|
XHR.open("GET", `/results/${resultId}`, false);
|
|
324
|
-
XHR.responseType = "
|
|
324
|
+
XHR.responseType = "text";
|
|
325
325
|
XHR.send();
|
|
326
|
+
XHR.onload = function (e) {
|
|
327
|
+
if (xhr.readyState === 4) {
|
|
328
|
+
if (xhr.status === 200) {
|
|
329
|
+
console.log(xhr.responseText);
|
|
330
|
+
} else {
|
|
331
|
+
console.error(xhr.statusText);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
};
|
|
326
335
|
}
|
|
327
336
|
|
|
328
337
|
window.addEventListener("load", init);
|
10
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -275,11 +275,6 @@
|
|
|
275
275
|
|
|
276
276
|
// クリックしたときの処理
|
|
277
277
|
function winorlose_click(el){
|
|
278
|
-
const resultId = el.target.getAttribute("data-id");
|
|
279
|
-
const XHR = new XMLHttpRequest();
|
|
280
|
-
XHR.open("GET", `/results/${resultId}`, true);
|
|
281
|
-
XHR.responseType = "json";
|
|
282
|
-
XHR.send();
|
|
283
278
|
// el にはどこでクリックされたかの情報が入っている
|
|
284
279
|
var arr = el.target.id.split('_'); // idを'_'で分ける
|
|
285
280
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
9
コードの変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -78,14 +78,7 @@
|
|
|
78
78
|
<td id="rank_<%= i + 1 %>"></td>
|
|
79
79
|
<td class="self-name"><%= member.name %></td>
|
|
80
80
|
<td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
|
|
81
|
-
|
|
81
|
+
// 途中略
|
|
82
|
-
<td id="op_<%= i + 1 %>_3" data-id=<%= (i * 10) + 3 %>><%= Result.find((i * 10) + 3).result %></td>
|
|
83
|
-
<td id="op_<%= i + 1 %>_4" data-id=<%= (i * 10) + 4 %>><%= Result.find((i * 10) + 4).result %></td>
|
|
84
|
-
<td id="op_<%= i + 1 %>_5" data-id=<%= (i * 10) + 5 %>><%= Result.find((i * 10) + 5).result %></td>
|
|
85
|
-
<td id="op_<%= i + 1 %>_6" data-id=<%= (i * 10) + 6 %>><%= Result.find((i * 10) + 6).result %></td>
|
|
86
|
-
<td id="op_<%= i + 1 %>_7" data-id=<%= (i * 10) + 7 %>><%= Result.find((i * 10) + 7).result %></td>
|
|
87
|
-
<td id="op_<%= i + 1 %>_8" data-id=<%= (i * 10) + 8 %>><%= Result.find((i * 10) + 8).result %></td>
|
|
88
|
-
<td id="op_<%= i + 1 %>_9" data-id=<%= (i * 10) + 9 %>><%= Result.find((i * 10) + 9).result %></td>
|
|
89
82
|
<td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
|
|
90
83
|
<td id="win_<%= i + 1 %>">0</td>
|
|
91
84
|
<td id="lose_<%= i + 1 %>">0</td>
|
|
@@ -256,7 +249,7 @@
|
|
|
256
249
|
var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
|
|
257
250
|
if(arr[1] == arr[2]){
|
|
258
251
|
// 対戦が同じ場合
|
|
259
|
-
tds[itd].classList.add('right_down_border');
|
|
252
|
+
tds[itd].classList.add('right_down_border');
|
|
260
253
|
}
|
|
261
254
|
else {
|
|
262
255
|
// 対戦が違う場合、イベントを登録
|
|
@@ -288,16 +281,20 @@
|
|
|
288
281
|
XHR.responseType = "json";
|
|
289
282
|
XHR.send();
|
|
290
283
|
// el にはどこでクリックされたかの情報が入っている
|
|
291
|
-
var arr = el.target.id.split('_'); // idを'_'で分ける
|
|
284
|
+
var arr = el.target.id.split('_'); // idを'_'で分ける
|
|
292
285
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
293
286
|
// 勝敗の記入と取消
|
|
294
287
|
if(el.target.innerHTML == ''){ // 勝敗を記入
|
|
295
288
|
el.target.innerHTML = '○'; // 勝ち
|
|
296
|
-
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
289
|
+
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
290
|
+
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1;
|
|
291
|
+
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1;
|
|
297
292
|
}
|
|
298
293
|
else if(el.target.innerHTML == '○'){ // 勝敗を取消
|
|
299
294
|
el.target.innerHTML = ''; // 空白
|
|
300
295
|
document.getElementById(oppid).innerHTML = ''; // 空白
|
|
296
|
+
json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0;
|
|
297
|
+
json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0;
|
|
301
298
|
}
|
|
302
299
|
// 勝ち数と負け数の計算
|
|
303
300
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
@@ -325,8 +322,12 @@
|
|
|
325
322
|
tds[itd].innerHTML = lose;
|
|
326
323
|
}
|
|
327
324
|
}
|
|
328
|
-
// json_dataの更新？
|
|
329
325
|
}
|
|
326
|
+
let resultId = el.target.getAttribute("data-id");
|
|
327
|
+
let XHR = new XMLHttpRequest();
|
|
328
|
+
XHR.open("GET", `/results/${resultId}`, false);
|
|
329
|
+
XHR.responseType = "json";
|
|
330
|
+
XHR.send();
|
|
330
331
|
}
|
|
331
332
|
|
|
332
333
|
window.addEventListener("load", init);
|
8
コードの変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -29,9 +29,8 @@
|
|
|
29
29
|
|
|
30
30
|
```ruby
|
|
31
31
|
Rails.application.routes.draw do
|
|
32
|
-
get 'json_p/parse'
|
|
33
32
|
root to: 'results#index'
|
|
34
|
-
|
|
33
|
+
get 'results/:id', to: 'results#win_or_lose'
|
|
35
34
|
end
|
|
36
35
|
```
|
|
37
36
|
|
|
@@ -42,30 +41,21 @@
|
|
|
42
41
|
@members = Member.all
|
|
43
42
|
end
|
|
44
43
|
|
|
44
|
+
def win_or_lose
|
|
45
|
+
result = Result.find(params[:id])
|
|
46
|
+
if result.result == "◯"
|
|
47
|
+
result.update(result: "")
|
|
48
|
+
else result.result == ""
|
|
49
|
+
result.update(result: "◯")
|
|
45
|
-
end
|
|
50
|
+
end
|
|
51
|
+
item = Result.find(params[:id])
|
|
52
|
+
render json: { result: item }
|
|
46
|
-
|
|
53
|
+
end
|
|
47
54
|
|
|
48
|
-
```ruby
|
|
49
|
-
class JsonPController < ApplicationController
|
|
50
|
-
def parse
|
|
51
|
-
json_str = request.body.read # リクエストのJSON
|
|
52
|
-
json_hash = JSON.parse(json_data,symbolize_names: true) # Hashに変換
|
|
53
|
-
|
|
54
|
-
# 見やすいように整形
|
|
55
|
-
response_str =
|
|
56
|
-
"JSON: " + json_str + "n" +
|
|
57
|
-
"Hash: " + json_hash.to_s + "n"
|
|
58
|
-
|
|
59
|
-
render plain: response_str
|
|
60
|
-
end
|
|
61
55
|
end
|
|
62
56
|
```
|
|
63
57
|
|
|
64
58
|
```html
|
|
65
|
-
<div class="header">
|
|
66
|
-
<h1 class="title">第7回しゅが研<span>毎週金曜日20時〜</span></h1>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
59
|
<div class="main">
|
|
70
60
|
<div class="league-table">
|
|
71
61
|
<h2 class="league-table-title">【リーグ表】</h2>
|
|
@@ -87,16 +77,16 @@
|
|
|
87
77
|
<tr class="result-cells">
|
|
88
78
|
<td id="rank_<%= i + 1 %>"></td>
|
|
89
79
|
<td class="self-name"><%= member.name %></td>
|
|
90
|
-
<td id="op_<%= i + 1 %>_1"></td>
|
|
80
|
+
<td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
|
|
91
|
-
<td id="op_<%= i + 1 %>_2"></td>
|
|
81
|
+
<td id="op_<%= i + 1 %>_2" data-id=<%= (i * 10) + 2 %>><%= Result.find((i * 10) + 2).result %></td>
|
|
92
|
-
<td id="op_<%= i + 1 %>_3"></td>
|
|
82
|
+
<td id="op_<%= i + 1 %>_3" data-id=<%= (i * 10) + 3 %>><%= Result.find((i * 10) + 3).result %></td>
|
|
93
|
-
<td id="op_<%= i + 1 %>_4"></td>
|
|
83
|
+
<td id="op_<%= i + 1 %>_4" data-id=<%= (i * 10) + 4 %>><%= Result.find((i * 10) + 4).result %></td>
|
|
94
|
-
<td id="op_<%= i + 1 %>_5"></td>
|
|
84
|
+
<td id="op_<%= i + 1 %>_5" data-id=<%= (i * 10) + 5 %>><%= Result.find((i * 10) + 5).result %></td>
|
|
95
|
-
<td id="op_<%= i + 1 %>_6"></td>
|
|
85
|
+
<td id="op_<%= i + 1 %>_6" data-id=<%= (i * 10) + 6 %>><%= Result.find((i * 10) + 6).result %></td>
|
|
96
|
-
<td id="op_<%= i + 1 %>_7"></td>
|
|
86
|
+
<td id="op_<%= i + 1 %>_7" data-id=<%= (i * 10) + 7 %>><%= Result.find((i * 10) + 7).result %></td>
|
|
97
|
-
<td id="op_<%= i + 1 %>_8"></td>
|
|
87
|
+
<td id="op_<%= i + 1 %>_8" data-id=<%= (i * 10) + 8 %>><%= Result.find((i * 10) + 8).result %></td>
|
|
98
|
-
<td id="op_<%= i + 1 %>_9"></td>
|
|
88
|
+
<td id="op_<%= i + 1 %>_9" data-id=<%= (i * 10) + 9 %>><%= Result.find((i * 10) + 9).result %></td>
|
|
99
|
-
<td id="op_<%= i + 1 %>_10"></td>
|
|
89
|
+
<td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
|
|
100
90
|
<td id="win_<%= i + 1 %>">0</td>
|
|
101
91
|
<td id="lose_<%= i + 1 %>">0</td>
|
|
102
92
|
<td id="sb_<%= i + 1 %>">0</td>
|
|
@@ -105,34 +95,7 @@
|
|
|
105
95
|
|
|
106
96
|
</table>
|
|
107
97
|
</div>
|
|
108
|
-
|
|
109
|
-
<div class="member-list">
|
|
110
|
-
<h2 class="member-list-title">【対局者紹介】</h2>
|
|
111
|
-
<table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
|
|
112
|
-
|
|
113
|
-
<tr class="member-info">
|
|
114
|
-
<th class="member-title">対局者</th>
|
|
115
|
-
<th class="account-title">アカウント</th>
|
|
116
|
-
<th class="achievement-title">実績</th>
|
|
117
|
-
</tr>
|
|
118
|
-
|
|
119
|
-
<% @members.each do |member| %>
|
|
120
|
-
<tr class="member-introduction">
|
|
121
|
-
<td class="member"><%= member.name %></td>
|
|
122
|
-
<td class="account"><%= member.account %></td>
|
|
123
|
-
<td class="achievement"><%= member.achievement %></td>
|
|
124
|
-
</tr>
|
|
125
|
-
<% end %>
|
|
126
|
-
|
|
127
|
-
</table>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
98
|
</div>
|
|
131
|
-
|
|
132
|
-
<div class="footer">
|
|
133
|
-
<div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
99
|
```
|
|
137
100
|
|
|
138
101
|
```css
|
|
@@ -245,10 +208,6 @@
|
|
|
245
208
|
.member-introduction td {
|
|
246
209
|
height: 30px;
|
|
247
210
|
}
|
|
248
|
-
|
|
249
|
-
.footer {
|
|
250
|
-
|
|
251
|
-
}
|
|
252
211
|
```
|
|
253
212
|
|
|
254
213
|
```js
|
|
@@ -323,7 +282,12 @@
|
|
|
323
282
|
|
|
324
283
|
// クリックしたときの処理
|
|
325
284
|
function winorlose_click(el){
|
|
285
|
+
const resultId = el.target.getAttribute("data-id");
|
|
286
|
+
const XHR = new XMLHttpRequest();
|
|
287
|
+
XHR.open("GET", `/results/${resultId}`, true);
|
|
288
|
+
XHR.responseType = "json";
|
|
289
|
+
XHR.send();
|
|
326
|
-
|
|
290
|
+
// el にはどこでクリックされたかの情報が入っている
|
|
327
291
|
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
328
292
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
329
293
|
// 勝敗の記入と取消
|
7
JSON.parseでパラメーターをHashに変換
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,24 +28,36 @@
|
|
|
28
28
|
# 現在のコード
|
|
29
29
|
|
|
30
30
|
```ruby
|
|
31
|
+
Rails.application.routes.draw do
|
|
32
|
+
get 'json_p/parse'
|
|
33
|
+
root to: 'results#index'
|
|
34
|
+
post 'json_p/parse'
|
|
35
|
+
end
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
```ruby
|
|
31
39
|
class ResultsController < ApplicationController
|
|
32
40
|
|
|
33
41
|
def index
|
|
34
42
|
@members = Member.all
|
|
35
43
|
end
|
|
36
44
|
|
|
37
|
-
# def win_or_lose
|
|
38
|
-
# result = Result.find(params[:id])
|
|
39
|
-
# binding.pry
|
|
40
|
-
# if result.op_2 == nil
|
|
41
|
-
# result.update(op_2: "○")
|
|
42
|
-
# else result.op_2 == "○"
|
|
43
|
-
# result.update(op_2: nil)
|
|
44
|
-
# end
|
|
45
|
-
# item = Result.find(params[:id])
|
|
46
|
-
# render json: { result: item }
|
|
47
|
-
|
|
45
|
+
end
|
|
46
|
+
```
|
|
48
47
|
|
|
48
|
+
```ruby
|
|
49
|
+
class JsonPController < ApplicationController
|
|
50
|
+
def parse
|
|
51
|
+
json_str = request.body.read # リクエストのJSON
|
|
52
|
+
json_hash = JSON.parse(json_data,symbolize_names: true) # Hashに変換
|
|
53
|
+
|
|
54
|
+
# 見やすいように整形
|
|
55
|
+
response_str =
|
|
56
|
+
"JSON: " + json_str + "n" +
|
|
57
|
+
"Hash: " + json_hash.to_s + "n"
|
|
58
|
+
|
|
59
|
+
render plain: response_str
|
|
60
|
+
end
|
|
49
61
|
end
|
|
50
62
|
```
|
|
51
63
|
|
6
ビューの微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
|
|
74
74
|
<% @members.each_with_index do |member, i| %>
|
|
75
75
|
<tr class="result-cells">
|
|
76
|
+
<td id="rank_<%= i + 1 %>"></td>
|
|
76
77
|
<td class="self-name"><%= member.name %></td>
|
|
77
|
-
<td id="rank_<%= i + 1 %>"></td>
|
|
78
78
|
<td id="op_<%= i + 1 %>_1"></td>
|
|
79
79
|
<td id="op_<%= i + 1 %>_2"></td>
|
|
80
80
|
<td id="op_<%= i + 1 %>_3"></td>
|
5
データベース設計の修正と、それに伴う他ファイルの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,30 +11,36 @@
|
|
|
11
11
|
結果の記入は出来るのですが、ページをリロードすると○と●が全て消えてしまいます。そこで、データベースの中で更新（例：空白→○）するように実装したいです。
|
|
12
12
|
|
|
13
13
|
# データベース設計
|
|
14
|
-
|
|
14
|
+
membersテーブル(10人)
|
|
15
|
+
・メンバーID
|
|
16
|
+
・メンバー名
|
|
17
|
+
・アカウント
|
|
18
|
+
・実績
|
|
19
|
+
・勝ち数
|
|
20
|
+
・負け数
|
|
21
|
+
・SB
|
|
15
22
|
|
|
23
|
+
resultsテーブル(1人に対して9人(10人))
|
|
24
|
+
・メンバーID
|
|
25
|
+
・対戦相手ID
|
|
26
|
+
・勝敗
|
|
27
|
+
|
|
16
28
|
# 現在のコード
|
|
17
29
|
|
|
18
30
|
```ruby
|
|
19
|
-
Rails.application.routes.draw do
|
|
20
|
-
root to: 'results#index'
|
|
21
|
-
get 'results/:id', to: 'results#win_or_lose'
|
|
22
|
-
end
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
```ruby
|
|
26
31
|
class ResultsController < ApplicationController
|
|
27
32
|
|
|
28
33
|
def index
|
|
29
|
-
@
|
|
34
|
+
@members = Member.all
|
|
30
35
|
end
|
|
31
36
|
|
|
32
37
|
# def win_or_lose
|
|
33
38
|
# result = Result.find(params[:id])
|
|
39
|
+
# binding.pry
|
|
34
|
-
# if result.
|
|
40
|
+
# if result.op_2 == nil
|
|
35
|
-
# result.update(
|
|
41
|
+
# result.update(op_2: "○")
|
|
36
|
-
# else result.
|
|
42
|
+
# else result.op_2 == "○"
|
|
37
|
-
# result.update(
|
|
43
|
+
# result.update(op_2: nil)
|
|
38
44
|
# end
|
|
39
45
|
# item = Result.find(params[:id])
|
|
40
46
|
# render json: { result: item }
|
|
@@ -45,19 +51,19 @@
|
|
|
45
51
|
|
|
46
52
|
```html
|
|
47
53
|
<div class="header">
|
|
48
|
-
<h1 class="title">第7回しゅが研</h1>
|
|
54
|
+
<h1 class="title">第7回しゅが研<span>毎週金曜日20時〜</span></h1>
|
|
49
55
|
</div>
|
|
50
56
|
|
|
51
57
|
<div class="main">
|
|
52
58
|
<div class="league-table">
|
|
53
|
-
<h2 class="league-table-title">リーグ表</h2>
|
|
59
|
+
<h2 class="league-table-title">【リーグ表】</h2>
|
|
54
60
|
<table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
|
|
55
61
|
<tr class="top-title">
|
|
56
62
|
<th class="rank-title">順位</th>
|
|
57
63
|
<th class="player-title">対局者</th>
|
|
58
64
|
|
|
59
|
-
<% @
|
|
65
|
+
<% @members.each do |member| %>
|
|
60
|
-
<td class="opponent-name"><%=
|
|
66
|
+
<td class="opponent-name"><%= member.name %></td>
|
|
61
67
|
<% end %>
|
|
62
68
|
|
|
63
69
|
<th class="win-count-title">勝</th>
|
|
@@ -65,15 +71,20 @@
|
|
|
65
71
|
<th class="sb-count-title">SB</th>
|
|
66
72
|
</tr>
|
|
67
73
|
|
|
68
|
-
<% @
|
|
74
|
+
<% @members.each_with_index do |member, i| %>
|
|
69
75
|
<tr class="result-cells">
|
|
70
|
-
<td class="rank"></td>
|
|
71
|
-
<td class="self-name"><%=
|
|
76
|
+
<td class="self-name"><%= member.name %></td>
|
|
77
|
+
<td id="rank_<%= i + 1 %>"></td>
|
|
72
|
-
<td id="op_<%= i + 1 %>_1"
|
|
78
|
+
<td id="op_<%= i + 1 %>_1"></td>
|
|
73
|
-
|
|
74
|
-
<%
|
|
79
|
+
<td id="op_<%= i + 1 %>_2"></td>
|
|
75
|
-
|
|
80
|
+
<td id="op_<%= i + 1 %>_3"></td>
|
|
81
|
+
<td id="op_<%= i + 1 %>_4"></td>
|
|
82
|
+
<td id="op_<%= i + 1 %>_5"></td>
|
|
83
|
+
<td id="op_<%= i + 1 %>_6"></td>
|
|
84
|
+
<td id="op_<%= i + 1 %>_7"></td>
|
|
85
|
+
<td id="op_<%= i + 1 %>_8"></td>
|
|
86
|
+
<td id="op_<%= i + 1 %>_9"></td>
|
|
76
|
-
<td id="op_<%= i + 1 %>_10"
|
|
87
|
+
<td id="op_<%= i + 1 %>_10"></td>
|
|
77
88
|
<td id="win_<%= i + 1 %>">0</td>
|
|
78
89
|
<td id="lose_<%= i + 1 %>">0</td>
|
|
79
90
|
<td id="sb_<%= i + 1 %>">0</td>
|
|
@@ -84,7 +95,7 @@
|
|
|
84
95
|
</div>
|
|
85
96
|
|
|
86
97
|
<div class="member-list">
|
|
87
|
-
<h2 class="member-list-title">対局者紹介</h2>
|
|
98
|
+
<h2 class="member-list-title">【対局者紹介】</h2>
|
|
88
99
|
<table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
|
|
89
100
|
|
|
90
101
|
<tr class="member-info">
|
|
@@ -93,11 +104,11 @@
|
|
|
93
104
|
<th class="achievement-title">実績</th>
|
|
94
105
|
</tr>
|
|
95
106
|
|
|
96
|
-
<% @
|
|
107
|
+
<% @members.each do |member| %>
|
|
97
108
|
<tr class="member-introduction">
|
|
98
|
-
<td class="member"><%=
|
|
109
|
+
<td class="member"><%= member.name %></td>
|
|
99
|
-
<td class="account"><%=
|
|
110
|
+
<td class="account"><%= member.account %></td>
|
|
100
|
-
<td class="achievement"><%=
|
|
111
|
+
<td class="achievement"><%= member.achievement %></td>
|
|
101
112
|
</tr>
|
|
102
113
|
<% end %>
|
|
103
114
|
|
|
@@ -105,15 +116,27 @@
|
|
|
105
116
|
</div>
|
|
106
117
|
</div>
|
|
107
118
|
</div>
|
|
119
|
+
|
|
120
|
+
<div class="footer">
|
|
121
|
+
<div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
108
124
|
```
|
|
109
125
|
|
|
110
126
|
```css
|
|
111
127
|
.header {
|
|
112
128
|
margin: 20px;
|
|
129
|
+
padding-bottom: 5px;
|
|
130
|
+
border-bottom: 2px solid lightgray;
|
|
113
131
|
}
|
|
114
132
|
|
|
133
|
+
.header span {
|
|
134
|
+
padding-left: 20px;
|
|
135
|
+
font-size: 25px;
|
|
136
|
+
}
|
|
137
|
+
|
|
115
138
|
.main {
|
|
116
|
-
margin:
|
|
139
|
+
margin: 30px;
|
|
117
140
|
}
|
|
118
141
|
|
|
119
142
|
.league-table {
|
|
@@ -210,6 +233,10 @@
|
|
|
210
233
|
.member-introduction td {
|
|
211
234
|
height: 30px;
|
|
212
235
|
}
|
|
236
|
+
|
|
237
|
+
.footer {
|
|
238
|
+
|
|
239
|
+
}
|
|
213
240
|
```
|
|
214
241
|
|
|
215
242
|
```js
|
|
@@ -228,7 +255,7 @@
|
|
|
228
255
|
"_10":{"member":"Jさん","WinOrLose":0}
|
|
229
256
|
},
|
|
230
257
|
|
|
231
|
-
|
|
258
|
+
// 途中略
|
|
232
259
|
|
|
233
260
|
"_10":{
|
|
234
261
|
"member":"Jさん",
|
|
@@ -253,7 +280,7 @@
|
|
|
253
280
|
// テーブルの行毎に処理
|
|
254
281
|
var tds = trs[itr].getElementsByTagName('td');
|
|
255
282
|
for(var itd = 0; itd < tds.length; itd++){
|
|
256
|
-
if(tds[itd].id.indexOf('op_') != -1){
|
|
283
|
+
if(tds[itd].id.indexOf('op_') != -1){ // idにop_を含む（勝敗記入のtd）
|
|
257
284
|
// 勝ち負け入力<td>タグの場合
|
|
258
285
|
var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
|
|
259
286
|
if(arr[1] == arr[2]){
|
|
@@ -272,6 +299,12 @@
|
|
|
272
299
|
}
|
|
273
300
|
}
|
|
274
301
|
}
|
|
302
|
+
// else if(tds[itd].id.indexOf('win_') != -1){ // idにwin_を含む（勝ち数のtd）
|
|
303
|
+
// tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
|
|
304
|
+
// }
|
|
305
|
+
// else { // 残るは負け数
|
|
306
|
+
// tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
|
|
307
|
+
// }
|
|
275
308
|
}
|
|
276
309
|
}
|
|
277
310
|
}
|
|
@@ -279,31 +312,16 @@
|
|
|
279
312
|
// クリックしたときの処理
|
|
280
313
|
function winorlose_click(el){
|
|
281
314
|
// el にはどこでクリックされたかの情報が入っている
|
|
282
|
-
const resultId = el.target.getAttribute("data-id");
|
|
283
|
-
const XHR = new XMLHttpRequest();
|
|
284
|
-
XHR.open("GET", `/results/${resultId}`, true);
|
|
285
|
-
XHR.responseType = "json";
|
|
286
|
-
XHR.send();
|
|
287
|
-
XHR.onload = () => {
|
|
288
|
-
const item = XHR.response.el.target;
|
|
289
|
-
if (item === "") {
|
|
290
|
-
el.setAttribute("data-result", "○");
|
|
291
|
-
}
|
|
292
|
-
else if (item === "○") {
|
|
293
|
-
el.setAttribute("data-result", "");
|
|
294
|
-
}
|
|
295
|
-
};
|
|
296
|
-
// el にはどこでクリックされたかの情報が入っている
|
|
297
315
|
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
298
316
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
299
317
|
// 勝敗の記入と取消
|
|
300
|
-
if(el.target.innerHTML == ''){
|
|
318
|
+
if(el.target.innerHTML == ''){ // 勝敗を記入
|
|
301
|
-
el.target.innerHTML = '○';
|
|
319
|
+
el.target.innerHTML = '○'; // 勝ち
|
|
302
|
-
document.getElementById(oppid).innerHTML = '●';
|
|
320
|
+
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
303
321
|
}
|
|
304
|
-
else if(el.target.innerHTML == '○'){
|
|
322
|
+
else if(el.target.innerHTML == '○'){ // 勝敗を取消
|
|
305
|
-
el.target.innerHTML = '';
|
|
323
|
+
el.target.innerHTML = ''; // 空白
|
|
306
|
-
document.getElementById(oppid).innerHTML = '';
|
|
324
|
+
document.getElementById(oppid).innerHTML = ''; // 空白
|
|
307
325
|
}
|
|
308
326
|
// 勝ち数と負け数の計算
|
|
309
327
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
@@ -331,6 +349,7 @@
|
|
|
331
349
|
tds[itd].innerHTML = lose;
|
|
332
350
|
}
|
|
333
351
|
}
|
|
352
|
+
// json_dataの更新？
|
|
334
353
|
}
|
|
335
354
|
}
|
|
336
355
|
|
4
routes.rbの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,7 +14,15 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
# 現在のコード
|
|
17
|
+
|
|
17
18
|
```ruby
|
|
19
|
+
Rails.application.routes.draw do
|
|
20
|
+
root to: 'results#index'
|
|
21
|
+
get 'results/:id', to: 'results#win_or_lose'
|
|
22
|
+
end
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```ruby
|
|
18
26
|
class ResultsController < ApplicationController
|
|
19
27
|
|
|
20
28
|
def index
|
3
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,6 +14,27 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
# 現在のコード
|
|
17
|
+
```ruby
|
|
18
|
+
class ResultsController < ApplicationController
|
|
19
|
+
|
|
20
|
+
def index
|
|
21
|
+
@results = Result.all
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
# def win_or_lose
|
|
25
|
+
# result = Result.find(params[:id])
|
|
26
|
+
# if result.クリックしたtdのop == ""
|
|
27
|
+
# result.update(クリックしたtdのop: "○")
|
|
28
|
+
# else result.クリックしたtdのop == "○"
|
|
29
|
+
# result.update(クリックしたtdのop: "")
|
|
30
|
+
# end
|
|
31
|
+
# item = Result.find(params[:id])
|
|
32
|
+
# render json: { result: item }
|
|
33
|
+
# end
|
|
34
|
+
|
|
35
|
+
end
|
|
36
|
+
```
|
|
37
|
+
|
|
17
38
|
```html
|
|
18
39
|
<div class="header">
|
|
19
40
|
<h1 class="title">第7回しゅが研</h1>
|
|
@@ -40,16 +61,11 @@
|
|
|
40
61
|
<tr class="result-cells">
|
|
41
62
|
<td class="rank"></td>
|
|
42
63
|
<td class="self-name"><%= result.player %></td>
|
|
43
|
-
<td id="op_<%= i + 1 %>_1"><%= result.op_1 %></td>
|
|
64
|
+
<td id="op_<%= i + 1 %>_1" data-id=<%= result.id %> data-result=<%= result.op_1 %>><%= result.op_1 %></td>
|
|
65
|
+
|
|
44
|
-
|
|
66
|
+
<%# 途中略 2~9を記述%>
|
|
45
|
-
|
|
67
|
+
|
|
46
|
-
<td id="op_<%= i + 1 %>_4"><%= result.op_4 %></td>
|
|
47
|
-
<td id="op_<%= i + 1 %>_5"><%= result.op_5 %></td>
|
|
48
|
-
<td id="op_<%= i + 1 %>_6"><%= result.op_6 %></td>
|
|
49
|
-
<td id="op_<%= i + 1 %>_7"><%= result.op_7 %></td>
|
|
50
|
-
<td id="op_<%= i + 1 %>_8"><%= result.op_8 %></td>
|
|
51
|
-
<td id="op_<%= i + 1 %>_9"><%= result.op_9 %></td>
|
|
52
|
-
<td id="op_<%= i + 1 %>_10"><%= result.op_10 %></td>
|
|
68
|
+
<td id="op_<%= i + 1 %>_10" data-id=<%= result.id %> data-result=<%= result.op_10 %>><%= result.op_10 %></td>
|
|
53
69
|
<td id="win_<%= i + 1 %>">0</td>
|
|
54
70
|
<td id="lose_<%= i + 1 %>">0</td>
|
|
55
71
|
<td id="sb_<%= i + 1 %>">0</td>
|
|
@@ -240,7 +256,6 @@
|
|
|
240
256
|
// 対戦が違う場合、イベントを登録
|
|
241
257
|
// onclick="winorlose_click(this);" と同じ内容
|
|
242
258
|
tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
|
|
243
|
-
|
|
244
259
|
if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
|
|
245
260
|
tds[itd].innerHTML = "○";
|
|
246
261
|
}
|
|
@@ -256,6 +271,21 @@
|
|
|
256
271
|
// クリックしたときの処理
|
|
257
272
|
function winorlose_click(el){
|
|
258
273
|
// el にはどこでクリックされたかの情報が入っている
|
|
274
|
+
const resultId = el.target.getAttribute("data-id");
|
|
275
|
+
const XHR = new XMLHttpRequest();
|
|
276
|
+
XHR.open("GET", `/results/${resultId}`, true);
|
|
277
|
+
XHR.responseType = "json";
|
|
278
|
+
XHR.send();
|
|
279
|
+
XHR.onload = () => {
|
|
280
|
+
const item = XHR.response.el.target;
|
|
281
|
+
if (item === "") {
|
|
282
|
+
el.setAttribute("data-result", "○");
|
|
283
|
+
}
|
|
284
|
+
else if (item === "○") {
|
|
285
|
+
el.setAttribute("data-result", "");
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
// el にはどこでクリックされたかの情報が入っている
|
|
259
289
|
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
260
290
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
261
291
|
// 勝敗の記入と取消
|
2
コードの更新を反映させました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
<th class="rank-title">順位</th>
|
|
28
28
|
<th class="player-title">対局者</th>
|
|
29
29
|
|
|
30
|
-
<%# 対戦相手の名前を動的に生成 %>
|
|
31
30
|
<% @results.each do |result| %>
|
|
32
31
|
<td class="opponent-name"><%= result.player %></td>
|
|
33
32
|
<% end %>
|
|
@@ -37,7 +36,6 @@
|
|
|
37
36
|
<th class="sb-count-title">SB</th>
|
|
38
37
|
</tr>
|
|
39
38
|
|
|
40
|
-
<%# 対局者の行を動的に生成 %>
|
|
41
39
|
<% @results.each_with_index do |result, i| %>
|
|
42
40
|
<tr class="result-cells">
|
|
43
41
|
<td class="rank"></td>
|
|
@@ -106,29 +104,10 @@
|
|
|
106
104
|
text-align: center;
|
|
107
105
|
}
|
|
108
106
|
|
|
109
|
-
// 指定したtdに斜線を引く
|
|
110
|
-
#op_1_1,
|
|
111
|
-
#op_2_2,
|
|
112
|
-
#op_3_3,
|
|
113
|
-
#op_4_4,
|
|
114
|
-
#op_5_5,
|
|
115
|
-
#op_6_6,
|
|
116
|
-
#op_7_7,
|
|
117
|
-
#op_8_8,
|
|
118
|
-
#op_9_9,
|
|
119
|
-
|
|
107
|
+
.right_down_border {
|
|
120
108
|
background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
|
|
121
109
|
}
|
|
122
110
|
|
|
123
|
-
// .right_down_border {
|
|
124
|
-
// background-image: linear-gradient(45deg, /*角度*/
|
|
125
|
-
// transparent 49%,
|
|
126
|
-
// black 49%, /*斜線の色*/
|
|
127
|
-
// black 51%, /*斜線の色*/
|
|
128
|
-
// transparent 51%,
|
|
129
|
-
// transparent);
|
|
130
|
-
// }
|
|
131
|
-
|
|
132
111
|
.top-title {
|
|
133
112
|
height: 30px;
|
|
134
113
|
}
|
|
@@ -163,14 +142,6 @@
|
|
|
163
142
|
background-color: #F3FFD8;
|
|
164
143
|
}
|
|
165
144
|
|
|
166
|
-
.win-count {
|
|
167
|
-
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.lose-count {
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
|
|
174
145
|
.result-cells {
|
|
175
146
|
height:40px ;
|
|
176
147
|
}
|
|
@@ -218,6 +189,38 @@
|
|
|
218
189
|
```
|
|
219
190
|
|
|
220
191
|
```js
|
|
192
|
+
// ※リーグ表の中身の定義
|
|
193
|
+
var json_data = {"_1":{
|
|
194
|
+
"member":"Aさん",
|
|
195
|
+
"_1":{"member":"Aさん","WinOrLose":9},
|
|
196
|
+
"_2":{"member":"Bさん","WinOrLose":0},
|
|
197
|
+
"_3":{"member":"Cさん","WinOrLose":0},
|
|
198
|
+
"_4":{"member":"Dさん","WinOrLose":0},
|
|
199
|
+
"_5":{"member":"Eさん","WinOrLose":0},
|
|
200
|
+
"_6":{"member":"Fさん","WinOrLose":0},
|
|
201
|
+
"_7":{"member":"Gさん","WinOrLose":0},
|
|
202
|
+
"_8":{"member":"Hさん","WinOrLose":0},
|
|
203
|
+
"_9":{"member":"Iさん","WinOrLose":0},
|
|
204
|
+
"_10":{"member":"Jさん","WinOrLose":0}
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
// 途中略
|
|
208
|
+
|
|
209
|
+
"_10":{
|
|
210
|
+
"member":"Jさん",
|
|
211
|
+
"_1":{"member":"Aさん","WinOrLose":0},
|
|
212
|
+
"_2":{"member":"Bさん","WinOrLose":0},
|
|
213
|
+
"_3":{"member":"Cさん","WinOrLose":0},
|
|
214
|
+
"_4":{"member":"Dさん","WinOrLose":0},
|
|
215
|
+
"_5":{"member":"Eさん","WinOrLose":0},
|
|
216
|
+
"_6":{"member":"Fさん","WinOrLose":0},
|
|
217
|
+
"_7":{"member":"Gさん","WinOrLose":0},
|
|
218
|
+
"_8":{"member":"Hさん","WinOrLose":0},
|
|
219
|
+
"_9":{"member":"Iさん","WinOrLose":0},
|
|
220
|
+
"_10":{"member":"Jさん","WinOrLose":9}
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
|
|
221
224
|
// 初期処理
|
|
222
225
|
function init(){
|
|
223
226
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
@@ -232,42 +235,12 @@
|
|
|
232
235
|
if(arr[1] == arr[2]){
|
|
233
236
|
// 対戦が同じ場合
|
|
234
237
|
tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
|
|
235
|
-
}
|
|
238
|
+
}
|
|
236
239
|
else {
|
|
237
240
|
// 対戦が違う場合、イベントを登録
|
|
238
241
|
// onclick="winorlose_click(this);" と同じ内容
|
|
239
242
|
tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
|
|
240
243
|
|
|
241
|
-
// ※リーグ表の中身の定義
|
|
242
|
-
var json_data = {"_1":{
|
|
243
|
-
"member":"Aさん",
|
|
244
|
-
"_1":{"member":"Aさん","WinOrLose":9},
|
|
245
|
-
"_2":{"member":"Bさん","WinOrLose":0},
|
|
246
|
-
"_3":{"member":"Cさん","WinOrLose":0},
|
|
247
|
-
"_4":{"member":"Dさん","WinOrLose":0},
|
|
248
|
-
"_5":{"member":"Eさん","WinOrLose":0},
|
|
249
|
-
"_6":{"member":"Fさん","WinOrLose":0},
|
|
250
|
-
"_7":{"member":"Gさん","WinOrLose":0},
|
|
251
|
-
"_8":{"member":"Hさん","WinOrLose":0},
|
|
252
|
-
"_9":{"member":"Iさん","WinOrLose":0},
|
|
253
|
-
"_10":{"member":"Jさん","WinOrLose":0}
|
|
254
|
-
},
|
|
255
|
-
// 途中略
|
|
256
|
-
"_10":{
|
|
257
|
-
"member":"Jさん",
|
|
258
|
-
"_1":{"member":"Aさん","WinOrLose":0},
|
|
259
|
-
"_2":{"member":"Bさん","WinOrLose":0},
|
|
260
|
-
"_3":{"member":"Cさん","WinOrLose":0},
|
|
261
|
-
"_4":{"member":"Dさん","WinOrLose":0},
|
|
262
|
-
"_5":{"member":"Eさん","WinOrLose":0},
|
|
263
|
-
"_6":{"member":"Fさん","WinOrLose":0},
|
|
264
|
-
"_7":{"member":"Gさん","WinOrLose":0},
|
|
265
|
-
"_8":{"member":"Hさん","WinOrLose":0},
|
|
266
|
-
"_9":{"member":"Iさん","WinOrLose":0},
|
|
267
|
-
"_10":{"member":"Jさん","WinOrLose":9}
|
|
268
|
-
}
|
|
269
|
-
};
|
|
270
|
-
|
|
271
244
|
if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
|
|
272
245
|
tds[itd].innerHTML = "○";
|
|
273
246
|
}
|
|
@@ -286,14 +259,15 @@
|
|
|
286
259
|
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
287
260
|
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
288
261
|
// 勝敗の記入と取消
|
|
289
|
-
if(el.target.innerHTML = ''){ // 勝敗を記入
|
|
262
|
+
if(el.target.innerHTML == ''){ // 勝敗を記入
|
|
290
263
|
el.target.innerHTML = '○'; // 勝ち
|
|
291
264
|
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
292
265
|
}
|
|
293
|
-
else if(el.target.innerHTML = '○'){ // 勝敗を取消
|
|
266
|
+
else if(el.target.innerHTML == '○'){ // 勝敗を取消
|
|
294
267
|
el.target.innerHTML = ''; // 空白
|
|
295
268
|
document.getElementById(oppid).innerHTML = ''; // 空白
|
|
296
269
|
}
|
|
270
|
+
// 勝ち数と負け数の計算
|
|
297
271
|
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
298
272
|
var win = 0;
|
|
299
273
|
var lose = 0;
|
|
@@ -321,6 +295,8 @@
|
|
|
321
295
|
}
|
|
322
296
|
}
|
|
323
297
|
}
|
|
298
|
+
|
|
299
|
+
window.addEventListener("load", init);
|
|
324
300
|
```
|
|
325
301
|
|
|
326
302
|
# 調べた内容
|
1
コードの加筆・修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -120,6 +120,15 @@
|
|
|
120
120
|
background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
// .right_down_border {
|
|
124
|
+
// background-image: linear-gradient(45deg, /*角度*/
|
|
125
|
+
// transparent 49%,
|
|
126
|
+
// black 49%, /*斜線の色*/
|
|
127
|
+
// black 51%, /*斜線の色*/
|
|
128
|
+
// transparent 51%,
|
|
129
|
+
// transparent);
|
|
130
|
+
// }
|
|
131
|
+
|
|
123
132
|
.top-title {
|
|
124
133
|
height: 30px;
|
|
125
134
|
}
|
|
@@ -209,57 +218,109 @@
|
|
|
209
218
|
```
|
|
210
219
|
|
|
211
220
|
```js
|
|
221
|
+
// 初期処理
|
|
222
|
+
function init(){
|
|
223
|
+
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
224
|
+
// 1行目はヘッダーだから飛ばして
|
|
225
|
+
for(var itr = 1; itr < trs.length; itr++){
|
|
226
|
+
// テーブルの行毎に処理
|
|
227
|
+
var tds = trs[itr].getElementsByTagName('td');
|
|
228
|
+
for(var itd = 0; itd < tds.length; itd++){
|
|
212
|
-
|
|
229
|
+
if(tds[itd].id.indexOf('op_') != -1){
|
|
213
|
-
|
|
230
|
+
// 勝ち負け入力<td>タグの場合
|
|
214
|
-
const op_1_3 = document.getElementById("op_1_3")
|
|
215
|
-
const op_1_4 = document.getElementById("op_1_4")
|
|
216
|
-
const op_1_5 = document.getElementById("op_1_5")
|
|
217
|
-
const op_1_6 = document.getElementById("op_1_6")
|
|
218
|
-
const op_1_7 = document.getElementById("op_1_7")
|
|
219
|
-
const op_1_8 = document.getElementById("op_1_8")
|
|
220
|
-
const op_1_9 = document.getElementById("op_1_9")
|
|
221
|
-
|
|
231
|
+
var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
|
|
232
|
+
if(arr[1] == arr[2]){
|
|
233
|
+
// 対戦が同じ場合
|
|
234
|
+
tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
|
|
235
|
+
}
|
|
236
|
+
else {
|
|
237
|
+
// 対戦が違う場合、イベントを登録
|
|
222
|
-
|
|
238
|
+
// onclick="winorlose_click(this);" と同じ内容
|
|
223
|
-
|
|
239
|
+
tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
|
|
224
240
|
|
|
241
|
+
// ※リーグ表の中身の定義
|
|
242
|
+
var json_data = {"_1":{
|
|
243
|
+
"member":"Aさん",
|
|
244
|
+
"_1":{"member":"Aさん","WinOrLose":9},
|
|
245
|
+
"_2":{"member":"Bさん","WinOrLose":0},
|
|
246
|
+
"_3":{"member":"Cさん","WinOrLose":0},
|
|
247
|
+
"_4":{"member":"Dさん","WinOrLose":0},
|
|
248
|
+
"_5":{"member":"Eさん","WinOrLose":0},
|
|
249
|
+
"_6":{"member":"Fさん","WinOrLose":0},
|
|
250
|
+
"_7":{"member":"Gさん","WinOrLose":0},
|
|
251
|
+
"_8":{"member":"Hさん","WinOrLose":0},
|
|
252
|
+
"_9":{"member":"Iさん","WinOrLose":0},
|
|
253
|
+
"_10":{"member":"Jさん","WinOrLose":0}
|
|
254
|
+
},
|
|
225
255
|
// 途中略
|
|
256
|
+
"_10":{
|
|
257
|
+
"member":"Jさん",
|
|
258
|
+
"_1":{"member":"Aさん","WinOrLose":0},
|
|
259
|
+
"_2":{"member":"Bさん","WinOrLose":0},
|
|
260
|
+
"_3":{"member":"Cさん","WinOrLose":0},
|
|
261
|
+
"_4":{"member":"Dさん","WinOrLose":0},
|
|
262
|
+
"_5":{"member":"Eさん","WinOrLose":0},
|
|
263
|
+
"_6":{"member":"Fさん","WinOrLose":0},
|
|
264
|
+
"_7":{"member":"Gさん","WinOrLose":0},
|
|
265
|
+
"_8":{"member":"Hさん","WinOrLose":0},
|
|
266
|
+
"_9":{"member":"Iさん","WinOrLose":0},
|
|
267
|
+
"_10":{"member":"Jさん","WinOrLose":9}
|
|
268
|
+
}
|
|
269
|
+
};
|
|
226
270
|
|
|
227
|
-
const op_10_1 = document.getElementById("op_10_1")
|
|
228
|
-
const op_10_2 = document.getElementById("op_10_2")
|
|
229
|
-
const op_10_3 = document.getElementById("op_10_3")
|
|
230
|
-
const op_10_4 = document.getElementById("op_10_4")
|
|
231
|
-
const op_10_5 = document.getElementById("op_10_5")
|
|
232
|
-
const op_10_6 = document.getElementById("op_10_6")
|
|
233
|
-
const op_10_7 = document.getElementById("op_10_7")
|
|
234
|
-
const op_10_8 = document.getElementById("op_10_8")
|
|
235
|
-
const op_10_9 = document.getElementById("op_10_9")
|
|
236
|
-
|
|
271
|
+
if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
|
|
237
|
-
const lose_10 = document.getElementById("lose_10")
|
|
238
|
-
|
|
239
|
-
op_1_2.addEventListener('click', function(){
|
|
240
|
-
if (op_1_2.innerHTML == ""){
|
|
241
|
-
|
|
272
|
+
tds[itd].innerHTML = "○";
|
|
273
|
+
}
|
|
274
|
+
else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
|
|
242
|
-
|
|
275
|
+
tds[itd].innerHTML = "●";
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
243
279
|
}
|
|
244
|
-
else if (op_1_2.innerHTML == "○"){
|
|
245
|
-
op_1_2.innerHTML = "";
|
|
246
|
-
op_2_1.innerHTML = "";
|
|
247
|
-
|
|
280
|
+
}
|
|
248
|
-
|
|
281
|
+
}
|
|
249
282
|
|
|
283
|
+
// クリックしたときの処理
|
|
284
|
+
function winorlose_click(el){
|
|
285
|
+
// el にはどこでクリックされたかの情報が入っている
|
|
286
|
+
var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
|
|
287
|
+
var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
|
|
250
|
-
//
|
|
288
|
+
// 勝敗の記入と取消
|
|
251
|
-
|
|
289
|
+
if(el.target.innerHTML = ''){ // 勝敗を記入
|
|
290
|
+
el.target.innerHTML = '○'; // 勝ち
|
|
252
|
-
|
|
291
|
+
document.getElementById(oppid).innerHTML = '●'; // 負け
|
|
253
|
-
if (op_10_9.innerHTML == "") {
|
|
254
|
-
op_10_9.innerHTML = "○";
|
|
255
|
-
op_9_10.innerHTML = "●";
|
|
256
|
-
|
|
292
|
+
}
|
|
257
|
-
|
|
293
|
+
else if(el.target.innerHTML = '○'){ // 勝敗を取消
|
|
294
|
+
el.target.innerHTML = ''; // 空白
|
|
258
|
-
|
|
295
|
+
document.getElementById(oppid).innerHTML = ''; // 空白
|
|
259
|
-
op_9_10.innerHTML = "";
|
|
260
|
-
|
|
296
|
+
}
|
|
297
|
+
var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
|
|
298
|
+
var win = 0;
|
|
299
|
+
var lose = 0;
|
|
300
|
+
// 1行目はヘッダーだから飛ばして
|
|
301
|
+
for(var itr = 1; itr < trs.length; itr++){
|
|
302
|
+
// テーブルの行毎に処理
|
|
303
|
+
win = 0;
|
|
304
|
+
lose = 0;
|
|
305
|
+
var tds = trs[itr].getElementsByTagName('td');
|
|
306
|
+
for(var itd = 0; itd < tds.length; itd++){
|
|
307
|
+
if(tds[itd].id.indexOf('op_') != -1){
|
|
308
|
+
// 勝ち負け数カウント
|
|
309
|
+
if(tds[itd].innerHTML == '○'){
|
|
310
|
+
win ++;
|
|
311
|
+
}else if(tds[itd].innerHTML == '●'){
|
|
312
|
+
lose ++;
|
|
261
|
-
|
|
313
|
+
}
|
|
314
|
+
} else if(tds[itd].id.indexOf('win_') != -1){
|
|
315
|
+
// 勝ち表示
|
|
316
|
+
tds[itd].innerHTML = win;
|
|
317
|
+
} else if(tds[itd].id.indexOf('lose_') != -1){
|
|
318
|
+
// 負け表示
|
|
319
|
+
tds[itd].innerHTML = lose;
|
|
262
|
-
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
263
324
|
```
|
|
264
325
|
|
|
265
326
|
# 調べた内容
|