낚시에 성공하면
물고기 데이터 베이스에서
물고기 정보를 가져와서
인벤토리에 해당 물고기를 추가하려고 합니다.
물고기 DB
물고기 DB에는 현재 물고기 번호,
물고기 이름, 물고기 가격에 대한 데이터가 12개 들어있습니다.
1부터 12까지의 랜덤한 숫자를 정해서
해당 번호에 해당하는 물고기의 데이터를
인벤토리에 추가하려고 합니다.
f (gagePercent >= 100) {
isFishing = false;
canFightFishing = false;
gagePercent = 30;
clearInterval(intervalId);
intervalId = null;
$("#fight-fishing").css("display", "none");
let randomNum = Math.floor(Math.random() * 12) + 1;
$.ajax({
url: "fish.searchJSON?f_no=" + randomNum,
type: "GET",
success: function(zxc) {
$.each(zxc.fish, function(i, f) {
let randomNumber = Math.floor(Math.random() * (70 - 30 + 1)) + 30;
$("#status").css("background-image", "url('resources/img/background/status.png')");
$("#status").html("<h3>" + "<span class='Enter'>" + f.f_name + "</span>" + "획득!" + " 💰<span class = 'gold'>" + Math.floor(f.f_price * (randomNumber / 30)) + "</span>" + " 크기 : " + randomNumber + "</h3>");
$.ajax({
url: '/game/insertInventory',
type: 'POST',
data: { f_name: f.f_name, f_price: f.f_price, f_size: randomNumber },
success: function(response) {
console.log("Insert Inventory 성공:", response);
$("#fish-list").append(
"<img id='catched-fish-" + f.f_name + randomNumber+ "' class='catched-fish' src='resources/img/Fish/" + f.f_name + ".png' onclick='showInfo(\"" + f.f_name + "\", \"" + f.f_price + "\", \"" + randomNumber + "\", event)' />"
);
$("#catched-fish-" + f.f_name + randomNumber).css("border", "none");
$.ajax({
url: '/game/getAllInventory',
type: 'GET',
success: function(response) {
console.log("물고기 사이즈:", randomNumber);
$(".fish-img").css("width", randomNumber);
$(".fish-img").css("height", randomNumber);
$(".catched-fish").css("border", "none");
//인벤토리에 id값이 각자 다른 물고기의 이미지를 추가
console.log("추가된 이미지:", '#catched-fish-' + f.f_name + randomNumber);
$("#catched-fish-" + f.f_name + randomNumber).css("border", "3px solid #1abc9c");
$("#catched-fish-" + f.f_name + randomNumber).css("width", randomNumber + "px");
$("#catched-fish-" + f.f_name + randomNumber).css("height", randomNumber + "px");
$("#catched-fish-" + f.f_name + randomNumber + ":hover").css("cursor", "pointer");
},
error: function(xhr, status, error) {
console.error("인벤토리 목록 갱신 실패", error);
}
});
},
error: function(xhr, status, error) {
console.error("인벤토리 항목 추가 실패", error);
}
});
});
},
error: function(xhr, status, error) {
console.error("물고기 검색 실패", error);
}
});
}
}, 600);
}
이때 크기는 30~70으로 랜덤으로 정하고
물고기 데이터를 인벤토리에 넘긴 후,
인벤토리를 다시 불러오는 요청을 해서
인벤토리 갱신도 시켜주었습니다.
그러면 흐름을 알았으니
서버가 어떻게 돌아가는지 확인해볼까요?
@RequestMapping(value = "/fish.searchJSON", method = RequestMethod.GET,
produces = "application/json; charset=UTF-8")
public @ResponseBody Fishes searchErrorJSON(Fish f, HttpServletRequest req) {
return fDAO.searchJSON(f, req);
}
fish.searchJSON으로 GET요청이들어오면
fDAO의 searchJSON메소드를 실행합니다.
public Fishes searchJSON(Fish f, HttpServletRequest req) {
return new Fishes(ss.getMapper(FishMapper.class).searchFish(f));
}
fDAO의 searchJSON은
Mapping된 searchFish라는 메소드를 실행하는데
이 메소드는 추상메소드로
MyBatis의 쿼리문을 실행합니다.
<select id="searchFish" resultType="com.puft.game.Fish">
SELECT * FROM gameFish WHERE f_no = #{f_no}
</select>
f_no을 파라미터로 입력받아서
해당 f_no인 물고기의 데이터를 전부 조회합니다.
저희는 f_no에 랜덤한 숫자를 넣어서 주소로 요청을 보냈기 때문에
랜덤한 물고기의 데이터가 넘어올 것입니다.
다음은 인벤토리에 넣는 요청을 실행하는데요.
@RequestMapping(value = "/insertInventory", method = RequestMethod.POST)
public String addInventory(@RequestParam("f_name") String f_name, @RequestParam("f_price") int f_price,@RequestParam("f_size") int f_size, HttpServletRequest req) {
try {
iDAO.insertInventory(f_name, f_price, f_size);
iDAO.selectAllInventory(req);
} catch (Exception e) {
e.printStackTrace();
}
return "main";
}
insertInventory로 POST 요청이 들어오면
이름, 가격, 사이즈를 파라미터로 넘겨 받아서
InventoryDAO의 insertInventory 메소드를 실행합니다.
@Autowired
SqlSession ss;
public void insertInventory(String f_name, int f_price,int f_size) {
try {
Inventory inventory = new Inventory();
inventory.setF_name(f_name);
inventory.setF_price(f_price);
inventory.setF_size(f_size);
InventoryMapper mapper = ss.getMapper(InventoryMapper.class);
mapper.insertInventory(inventory);
} catch (Exception e) {
e.printStackTrace();
}
}
insertInventory에는 들어온 데이터를
java 클래스에 맵핑시키고,
InventoryMapper의 추상메소드를 실행시킵니다.
<insert id="insertInventory" parameterType="com.puft.game.Inventory">
INSERT INTO userInventory VALUES (#{f_name}, #{f_price}, #{f_size})
</insert>
추상메소드는 INSERT 쿼리문을 실행시킵니다.
이때 파라미터로 넘어온 데이터들을 DB에 INSERT시킵니다.
DB에 물고기가 등록되면
인벤토리도 갱신해야하는데요.
@RequestMapping(value = "/getAllInventory", method = RequestMethod.GET)
public String viewInventory(HttpServletRequest req) {
try {
iDAO.selectAllInventory(req);
} catch (Exception e) {
e.printStackTrace();
}
return "main";
}
/getAllInventory로 GET요청이 들어오면
InventoryDAO의 selectAllInventory 메소드를 실행시킵니다.
public void selectAllInventory(HttpServletRequest req) {
try {
InventoryMapper mapper = ss.getMapper(InventoryMapper.class);
List<Inventory> inventoryList = mapper.selectAllInventory();
Map<String, Integer> inventoryCount = new HashMap<>();
for (Inventory item : inventoryList) {
inventoryCount.put(item.getF_name(), inventoryCount.getOrDefault(item.getF_name(), 0) + 1);
}
System.out.println("Inventory List: " + inventoryList);
req.setAttribute("inventoryList", inventoryList);
req.setAttribute("inventoryCount", inventoryCount);
} catch (Exception e) {
e.printStackTrace();
}
}
이 메소드는 Mapper의 selectAllInventory라는 추상메소드를 실행하고
<select id="selectAllInventory" resultType="com.puft.game.Inventory">
select * from userInventory
</select>
추상메소드는 모든 데이터를 조회하는 쿼리문을 실행합니다.
DAO코드를 보시면
조회 완료후 조회된 인벤토리 리스트를 순회하여
인벤토리의 카운트를 샌 후
인벤토리 리스트와 인벤토리 카운트를 각각
Attribute로 지정해서
JSP쪽에서 EL로 사용할 수 있게합니다.
<c:forEach var="f" items="${inventoryList}">
<div class="fish-item">
<img class="fish-img" id="fish-img-${f.f_name}${f.f_size}"
src="resources/img/Fish/${f.f_name}.png"
style="width: ${f.f_size}px; height: ${f.f_size}px"
onclick="showInfo('${f.f_name}', '${f.f_price}', '${f.f_size}', event)" />
</div>
</c:forEach>
JSP쪽에서 EL로 inventoryList에 접근해서
해당 데이터를 인벤토리에 이미지로 표시합니다.
(원래 카운트도 표시했었는데 조잡해서 제거했습니다.)
이번 리뷰에서 다뤄본 낚시 성공에 쓰인 기능을 정리하자면
1. 게이지가 100에 도달할 시 낚시 성공처리
2. Fish DB에서 랜덤한 데이터를 하나 가져와서 인벤토리에 추가
3. Inventory DB에 해당 데이터를 저장 후 인벤토리 갱신
시현 영상 보여드리고 이번 포스팅은 마무리하도록 하겠습니다.
