index.html
<div>
<!-- 모달창 적용시 type="button" 추가 -->
<button type="button" class="btn btn-outline-secondary border-0 border-height-100" id="user" name="user"
value="가위" data-bs-toggle="modal" data-bs-target="#resultModal" onclick="submitForm('가위')">
</button>
<button type="button" class="btn btn-outline-secondary border-0" id="user" name="user" value="바위"
data-bs-toggle="modal" data-bs-target="#resultModal" onclick="submitForm('바위')">
</button>
<button type="button" class="btn btn-outline-secondary border-0" id="user" name="user" value="보"
data-bs-toggle="modal" data-bs-target="#resultModal" onclick="submitForm('보')">
</button>
</div>
우선 <body> 내부에 type="button"을 추가.
<!-- 결과 모달창 띄우기 -->
<div class="modal fade" id="resultModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="resultModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultModalLabel">결과</h5>
</div>
<div class="modal-body" id="resultModalBody">
</div>
<div class="modal-footer">
<p class="text-muted small">계속하시려면 바깥 공간을 클릭하세요.</p>
</div>
</div>
</div>
</div>
띄울 모달창.
모달창 외부 공간을 클릭하면 모달창이 닫히도록 하였기 때문에 바깥 공간을 클릭하라는 footer 구문을 넣었음.
function submitForm(userChoice) {
// 컴퓨터 선택 값 가져오기
var computerChoice = document.getElementById('ComputerVal').value;
// 사용자의 선택을 form에 설정
var form = document.getElementById('gameForm');
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'user';
input.value = userChoice;
form.appendChild(input);
// Ajax 요청으로 form 데이터 전송
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function (response) {
// 모달에 결과 표시
// 사용자:, 컴퓨터:, 결과:, 추가
var resultText = `사용자 : ${response.user}\n컴퓨터 : ${response.computer}\n결과 : ${response.result}`;
document.getElementById('resultModalBody').innerText = resultText;
$('#resultModal').modal('show');
},
error: function (error) {
console.log('Error:', error);
}
});
}
form 데이터를 Ajax로 전송.
- 사용자 : 선택
- 컴퓨터 : 선택
- 결과 : 승/패/무
형태가 되도록 모달창 출력.
문제 발생
사용자의 선택이 모달창을 닫은 뒤에도 고정으로 변하지 않음.
처음 "가위"를 골랐다면 모달창에서 벗어나 다음 게임을 하더라도 사용자의 선택이 "가위"로 고정됨.
해결 (by 민성님)
// 모달이 닫힐 때 페이지 새로고침
$('#resultModal').on('hidden.bs.modal', function () {
location.reload();
});
모달이 닫히면서 페이지를 새로고침하는 코드를 추가함.
form에 저장된 값을 새로고침하여 초기화 한다고 이해하였음.
app.py
from flask import Flask, render_template, request, redirect, url_for, jsonify
jsonify 추가로 import
return jsonify(user=user, computer=computer, result=result)
jsonify를 통해 유저, 컴퓨터, 승패결과 반환
실행 결과
오늘의 회고
gpt야 참 고마워.
과제마감이 얼마 안남았다. 잘 마무리해보자
내일의 목표는 가위바위보 과제 마무리 + 멘토님 2번째 강의 참가
'매일 TIL' 카테고리의 다른 글
| [내일배움캠프 17일차] 가위바위보 게임 마무리 (0) | 2024.07.10 |
|---|---|
| [내일배움캠프 16일차] 가위바위보 게임 (0) | 2024.07.09 |
| [내일배움캠프 12일차] SQLite, SQLAlchemy (0) | 2024.07.05 |
| [내일배움캠프 11일차] member_class (0) | 2024.07.04 |
| [내일배움캠프 9일차] Updown 게임, 가위바위보 게임 (0) | 2024.07.02 |
