253 lines
11 KiB
HTML
253 lines
11 KiB
HTML
<!DOCTYPE HTML>
|
||
<html xmlns:th="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<link rel="stylesheet" href="/static/css/game.css">
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
||
<title th:text="${title} ? ${title} : 'Nosedive'"></title>
|
||
<link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico">
|
||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
|
||
<api-tag th:data-access-token="${auth_obj.accessToken}" th:data-uid="${auth_obj.uid}" th:data-room-id="${roomId}"></api-tag>
|
||
<div id="contract_field" style="display: none">
|
||
<div style="display: inline-flex;">
|
||
<div class="contract_image" style="margin-left: 10px"><img src="../static/images/mitsubishi.png" style="width: 55px;"></div>
|
||
<div class="contract_info" style="margin-left: 10px; display: inline-block; text-align: left">
|
||
<div class="contract_name">Mitsubishi</div>
|
||
<div class="contract_cost"style="font-size: 14px">3.000$</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</head>
|
||
<body>
|
||
<!--<div id="loading" style="width: 100%; height: 100%;">
|
||
<div style="text-align: center">
|
||
<p id="loading_status" style="color: white">Идёт загрузка игры...</p>
|
||
<div id="returnBtn" onclick="window.location = '/games?gtype=monopoly'" class="btn green" style="margin-top: 5px; display: none; margin-bottom: auto; margin-left: auto; margin-right: auto;">Назад</div>
|
||
</div>
|
||
</div>-->
|
||
<div class="wrapper" style="width: 100%; height: 100%">
|
||
<div class="game">
|
||
<div class="players">
|
||
<!--<div class="player" th:data-pid="${p.id}" onClick="drop(this)">
|
||
<p class="timeout"></p>
|
||
<p class="nickname" th:text="${p.name}"></p>
|
||
<p class="money" th:text="${p.money}"></p>
|
||
<div class="dropbox" style="display: none"></div> margin-top: -35px;
|
||
</div>-->
|
||
</div>
|
||
<div class="table">
|
||
<div class="table_center">
|
||
|
||
<!--<div id="log" style="position: fixed; padding: 5px; overflow: scroll;">
|
||
<div style="display: inline-flex;"><p class="font-red">Name: </p><p> lol</p></div>
|
||
<div style="display: inline-flex;"><p class="font-red">Name: </p><p> lol</p></div>
|
||
<div style="display: inline-flex;"><p class="font-red">Name: </p><p> lol</p></div>
|
||
<div style="display: inline-flex;"><p class="font-red">Name: </p><p> lol</p></div>
|
||
</div> -->
|
||
<div id="log">
|
||
<!-- <div>Игрок <span style="color: red">lol</span> ходит</div> -->
|
||
</div>
|
||
<div style="position: absolute; margin-top: 485px" >
|
||
<input placeholder="Напишите в чат" type="text" id="chatinput"/>
|
||
</div>
|
||
|
||
<div id="dice_cubes" style="margin-top: 100px; display: none;">
|
||
<div class="dice_view" style="margin-left: 100px;">
|
||
<div class="dice" id="first_dice">
|
||
<div class="diceFace dice_front"></div>
|
||
<div class="diceFace dice_right"></div>
|
||
<div class="diceFace dice_back"></div>
|
||
<div class="diceFace dice_left"></div>
|
||
<div class="diceFace dice_top"></div>
|
||
<div class="diceFace dice_bottom"></div>
|
||
</div>
|
||
</div>
|
||
<div class="dice_view" style="margin-left: 225px; margin-top: 125px">
|
||
<div class="dice" id="second_dice">
|
||
<div class="diceFace dice_front"></div>
|
||
<div class="diceFace dice_right"></div>
|
||
<div class="diceFace dice_back"></div>
|
||
<div class="diceFace dice_left"></div>
|
||
<div class="diceFace dice_top"></div>
|
||
<div class="diceFace dice_bottom"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="contract" style="display: none;">
|
||
<p>Договор</p>
|
||
<div style="display: inline-flex; width: 511px">
|
||
<p style="font-size: 16px; text-align: left; margin-left: 10px" class="font-red contract-player">Вы: </p>
|
||
<p style="font-size: 16px; text-align: left; margin-left: 230px" class="font-green contract-player">User: </p>
|
||
</div>
|
||
<div id="my_contract_fields" style="position: absolute; display: grid">
|
||
<div style="display: inline-flex;">
|
||
<div style="margin-left: 10px"><img src="../static/images/money.png" style="width: 55px;"></div>
|
||
<div style="margin-left: 10px; display: inline-block; text-align: left">
|
||
<input type="number" id="self_money" class="contract_money single-line" value="0" />
|
||
<div style="font-size: 14px">Наличные</div>
|
||
</div>
|
||
</div>
|
||
<!--<div style="display: inline-flex;">
|
||
<div style="margin-left: 10"><img src="images/mitsubishi.png" style="width: 55px;"></div>
|
||
<div style="margin-left: 10; display: inline-block; text-align: left">
|
||
<div>Mitsubishi</div>
|
||
<div style="font-size: 14">3.000$</div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
<div id="contract_fields" style="position: absolute; display: grid; margin-left: 260px">
|
||
<div style="display: inline-flex;">
|
||
<div style="margin-left: 10px"><img src="../static/images/money.png" style="width: 55px;"></div>
|
||
<div style="margin-left: 10px; display: inline-block; text-align: left">
|
||
<input type="number" id="other_money" class="contract_money single-line" value="0" />
|
||
<div style="font-size: 14px">Наличные</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr width="1" size="320" style="height: 60%">
|
||
<div style="display: flex; width: 100%">
|
||
<div style="width: 33.3%">
|
||
<div id="allSelfMoney" style="font-size: 16px;">0$</div>
|
||
</div>
|
||
<div style="width: 33.3%">
|
||
<div style="font-size: 16px;">Общая сумма</div>
|
||
</div>
|
||
<div style="width: 33.3%">
|
||
<div id="allOtherMoney" style="font-size: 16px;">0$</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn_string">
|
||
<div id="contractAgree" onClick="contractAgree()" class="btn green" style="width: 100px;">Принять</div><div id="contractDeny" onClick="contractDeny()" class="btn red" style="width: 100px;">Отказать</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: none;" id="dialog" class="dialogturn">
|
||
<p id="dialog_title">Покупаем?</p>
|
||
<p id="dialog_desc">Lorem ipsum dolor sit amet...</p></br>
|
||
<div class="btn_string" id="twobtns">
|
||
<div id="buybtn" onClick="leftBtnClicked(this)" class="btn green">Купить за 1,000k</div><div id="ignorebtn" onClick="rightBtnClicked()" class="btn grey">На аукцион</div>
|
||
</div>
|
||
<div class="btn_string" id="onebtn">
|
||
<div class="btn_long green" onClick="centerBtnClicked()" id="ogbtn">Купить за 1,000k</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- style="top:270px;left:400px" -->
|
||
<div style="display: none;" id="cell_descr">
|
||
<div class="cell_descr_top">
|
||
<div class="cell_descr_title">Apple</div>
|
||
<div class="cell_descr_subtitle"><!--Электроника--></div>
|
||
</div>
|
||
|
||
<table class="rent_table">
|
||
<tr>
|
||
<div id="buyOrSell" style="display: none;" >
|
||
<div style="width: 100%; display: inline-flex;">
|
||
<div onClick="bnf(this)" id="tbbb" class="btn green" style="width: 100%">Купить</div><div onClick="sfof(this)" id="tbsb" style="width: 100%" class="btn red">Продать</div>
|
||
</div>
|
||
</div>
|
||
<div id="onlySell" style="display: none;">
|
||
<div style="width: 100%; display: inline-flex;">
|
||
<div class="btn_long red" onClick="sfof(this)">Продать</div>
|
||
</div>
|
||
</div>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">Стройте филиалы, чтобы увеличить ренту</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Базовая рента</td>
|
||
<td align="right"><b id="baserent">350</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="star">★</span></td>
|
||
<td align="right"><b id="firstrent">1,750</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="star">★ ★</span></td>
|
||
<td align="right"><b id="secondrent">5,000</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="star">★ ★ ★</span></td>
|
||
<td align="right"><b id="thirdrent">11,050</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="star">★ ★ ★ ★</span></td>
|
||
<td align="right"><b id="fourthrent">13,000</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="star_big">★</span></td>
|
||
<td align="right"><b id="fithrent">15,000</b><span class="currency">k</span></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td style="padding-top:10px;">Стоимость поля</td>
|
||
<td style="padding-top:10px;" align="right"><b id="buyprice">3,500</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr style="visibility: hidden;">
|
||
<td>Залог поля</td>
|
||
<td align="right"><b id="depositprice">1,750</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr style="visibility: hidden;">
|
||
<td>Выкуп поля</td>
|
||
<td align="right"><b id="redeemprice">2,100</b><span class="currency">k</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Покупка филиала</td>
|
||
<td align="right"><b id="fprice">2,000</b><span class="currency">k</span></td>
|
||
</tr>
|
||
|
||
</table>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!-- <div class="chips"> -->
|
||
<!-- {262,55} {318,55} {375,55} -->
|
||
<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
|
||
<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
|
||
<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
|
||
<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
|
||
<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
|
||
<!-- </div> -->
|
||
<div class="up">
|
||
<div class="board_field corner">
|
||
<img src="" style="width: 100%; height: 100%;" />
|
||
</div>
|
||
</div>
|
||
|
||
<div id="top_board_tiles"></div>
|
||
|
||
<div class="up" style="grid-column: 11">
|
||
<div class="board_field corner">
|
||
<img src="" style="width: 100%; height: 100%;" />
|
||
</div>
|
||
</div>
|
||
|
||
<div id="right_board_tiles"></div>
|
||
|
||
<div class="board_field corner" style="grid-column: 11">
|
||
<img src="" style="width:100%; height:100%;" />
|
||
</div>
|
||
|
||
<div id="bottom_board_tiles"></div>
|
||
|
||
|
||
<div class="board_field corner" style="grid-column: 1; grid-row: 11">
|
||
<img src="" style="width: 100%; height: 100%;" />
|
||
</div>
|
||
|
||
<div id="left_board_tiles"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<footer>
|
||
<script type="text/javascript" src="/static/javascript/game.js"></script>
|
||
<script type="text/javascript" src="/static/javascript/scale.js"></script>
|
||
</footer>
|
||
</html> |