Skip to content

Commit f8480b1

Browse files
Parking-MasterParking-Master
committed
Finish car-buying page (Root/cars.html)
1 parent cd9ef32 commit f8480b1

5 files changed

Lines changed: 39 additions & 19 deletions

File tree

‎cars.html‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,41 @@
1313
font-weight: bold;
1414
}
1515
.wrapper {
16-
position: absolute;
17-
margin: 0 !important;
18-
width: 70vw;
16+
position: relative;
17+
margin: 0;
18+
width: 90vw;
1919
left: 50%;
20-
margin-left: -35vw !important;
20+
margin-top: 10%;
21+
margin-left: -45vw !important;
2122
}
2223
.tab {
24+
position: relative;
2325
background: #fff;
2426
width: 130px;
2527
height: 130px;
2628
border-radius: 6px;
2729
box-shadow: 0 0 5px 3px #ddd;
2830
display: inline-block;
2931
margin: 1vw;
30-
margin-right: 5vw;
32+
margin-right: 4vw;
3133
justify-content: center;
3234
padding: 10px;
3335
cursor: pointer !important;
3436
user-select: none !important;
3537
transition: transform .2s;
38+
left: 7.5%;
39+
}
40+
/* .tab:active, .tab:focus {
41+
box-shadow: 0 0 0px 10px #ddd !important;
42+
outline: none !important;
43+
} */
44+
.tab img {
45+
transition: transform .2s, box-shadow .15s;
46+
}
47+
.tab img:hover {
48+
transform: scale(1.2);
49+
cursor: zoom-in;
50+
box-shadow: none !important;
3651
}
3752
.tab:hover {
3853
transform: scale(1.2);
@@ -45,35 +60,40 @@
4560
}
4661
</style>
4762
</head>
48-
<body>
63+
<body onmousedown="for (let i = 0; i < document.querySelectorAll('.tab').length; i++) { event.target == document.querySelectorAll('.tab')[i] || (document.querySelectorAll('.tab')[i].style.boxShadow = '0 0 5px 3px #ddd') }">
64+
<h1 class="-center" style="fill:#ddd;color:#ddd;margin-top:5%;"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 1c-4.418 0-8 3.582-8 8 0 .585.063 1.155.182 1.704l-8.182 7.296v5h6v-2h2v-2h2l3.066-2.556c.909.359 1.898.556 2.934.556 4.418 0 8-3.582 8-8s-3.582-8-8-8zm-6.362 17l3.244-2.703c.417.164 1.513.703 3.118.703 3.859 0 7-3.14 7-7s-3.141-7-7-7c-3.86 0-7 3.14-7 7 0 .853.139 1.398.283 2.062l-8.283 7.386v3.552h4v-2h2v-2h2.638zm.168-4l-.667-.745-7.139 6.402v1.343l7.806-7zm10.194-7c0-1.104-.896-2-2-2s-2 .896-2 2 .896 2 2 2 2-.896 2-2zm-1 0c0-.552-.448-1-1-1s-1 .448-1 1 .448 1 1 1 1-.448 1-1z"/></svg> Available Cars</h1>
4965
<div class="wrapper">
50-
<div class="tab" id="0" onclick="simple.alert('You already own this car.')"><img src="images/default_car.png" style="width:100%;margin:0!important;padding:0!important;" /><br><p class="-center" style="font-size:12px;">OWNED</p></div>
51-
<div class="tab" id="2" onclick="let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '1') { owned = true } } !owned && simple.confirm('Do you want to purchase the Town Car for 500 PTS?', () => (equip(500, 'town_car') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img src="https://parkingmaster-2.w3spaces.com/images/pickup_truck.png" /></div>
52-
<div class="tab" id="1" onclick="let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '2') { owned = true } } !owned && simple.confirm('Do you want to purchase the Pickup Truck for 800 PTS?', () => (equip(800, 'pickup_truck') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img src="images/town_car.png" style="width:100%;margin:0!important;padding:0!important;" /><br><p class="-center" style="font-size:14px;">500 PTS</p></div>
53-
<div class="tab" id="3" onclick="simple.confirm('Do you want to purchase the Race Car for 1500 PTS?')"><img src="https://parkingmaster-2.w3spaces.com/images/race_car.png" /></div>
54-
<div class="tab" id="4" onclick="simple.confirm('Do you want to purchase a Surprise Car for 650 PTS?')"><img src="https://parkingmaster-2.w3spaces.com/images/surprise.png" /></div>
66+
<div onfocus="this.style.boxShadow = '0 0 0px 10px #ddd';" tabindex="1" class="tab" id="0" onclick="simple.alert('You already own this car.')"><img src="images/default_car.png" style="box-shadow:-5px 5px 5px #ddd, 5px 5px 5px #ddd;width:100%;margin:0!important;padding:0!important;" /><br><p class="-center" style="font-size:12px;">OWNED</p></div>
67+
<div onfocus="this.style.boxShadow = '0 0 0px 10px #ddd';" tabindex="2" class="tab" id="1" onclick="let owned = false; if (!localStorage['owned_cars']) { return (equip(500, 'small_car') == false && simple.alert('You do not have enough PTS to purchase this car.')); } for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'] && localStorage['owned_cars'].split(',')[i] == '1') { owned = true } } !owned && simple.confirm('Do you want to purchase the Small Car for 100 PTS?', () => (equip(800, 'small_car') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img style="box-shadow:-5px 5px 5px #ddd, 5px 5px 5px #ddd;" width="100%" src="images/small_car.png" /><br><p class="-center" style="font-size:12px;">100 PTS</p></div>
68+
<div onfocus="this.style.boxShadow = '0 0 0px 10px #ddd';" tabindex="3" class="tab" id="2" onclick="let owned = false; if (!localStorage['owned_cars']) { return (equip(500, 'town_car') == false && simple.alert('You do not have enough PTS to purchase this car.')); } for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'] && localStorage['owned_cars'].split(',')[i] == '2') { owned = true } } !owned && simple.confirm('Do you want to purchase the Town Car for 500 PTS?', () => (equip(800, 'town_car') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img style="box-shadow:-5px 5px 5px #ddd, 5px 5px 5px #ddd;" width="100%" src="images/town_car.png" /><br><p class="-center" style="font-size:12px;">500 PTS</p></div>
69+
<div onfocus="this.style.boxShadow = '0 0 0px 10px #ddd';" tabindex="4" class="tab" id="3" onclick="let owned = false; if (!localStorage['owned_cars']) { return (equip(800, 'pickup_truck') == false && simple.alert('You do not have enough PTS to purchase this car.')); } for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'] && localStorage['owned_cars'].split(',')[i] == '3') { owned = true } } !owned && simple.confirm('Do you want to purchase the Pickup Truck for 800 PTS?', () => (equip(800, 'pickup_truck') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img style="box-shadow:-5px 5px 5px #ddd, 5px 5px 5px #ddd;" width="100%" src="images/pickup_truck.png" /><br><p class="-center" style="font-size:12px;">800 PTS</p></div>
70+
<div onfocus="this.style.boxShadow = '0 0 0px 10px #ddd';" tabindex="5" class="tab" id="4" onclick="let owned = false; if (!localStorage['owned_cars']) { return (equip(1500, 'limo_car') == false && simple.alert('You do not have enough PTS to purchase this car.')); } for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'] && localStorage['owned_cars'].split(',')[i] == '4') { owned = true } } !owned && simple.confirm('Do you want to purchase the Limousine for 1500 PTS?', () => (equip(800, 'limo_car') == false && simple.alert('You do not have enough PTS to purchase this car.')))"><img style="box-shadow:-5px 5px 5px #ddd, 5px 5px 5px #ddd;" width="100%" src="images/limo_car.png" /><br><p class="-center" style="font-size:12px;">1500 PTS</p></div>
5571
</div>
5672
<script>
5773
(() => { let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '1') { owned = true } } (!!owned && (document.querySelector('p#1').textContent = 'OWNED')) });
5874
(() => { let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '2') { owned = true } } (!!owned && (document.querySelector('p#2').textContent = 'OWNED')) });
5975
(() => { let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '3') { owned = true } } (!!owned && (document.querySelector('p#3').textContent = 'OWNED')) });
6076
(() => { let owned = false; for (let i = 0; i < localStorage['owned_cars'].split(',').length; i++) { if (localStorage['owned_cars'].split(',')[i] == '4') { owned = true } } (!!owned && (document.querySelector('p#4').textContent = 'OWNED')) });
6177
function equip(price, car) {
62-
if (parseFloat(localStorage["current_pts"], 0) < price) {
78+
if (parseFloat(localStorage["current_pts"], 0) < price || !localStorage["owned_cars"]) {
6379
return false;
6480
}
65-
if (car == "town_car") {
66-
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - 500).toString());
81+
if (car == "small_car") {
82+
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - price).toString());
83+
localStorage.setItem("owned_cars", localStorage["owned_cars"] + ",3")
84+
localStorage.setItem("car", "{\"baseColor\":\"#eee\",\"windowColor\":\"#333\",\"roofColor\":\"#fff\",\"minSpeed\":10,\"maxSpeed\":50,\"default_specs\":[45,-15,12,35,-4]}");
85+
} else if (car == "town_car") {
86+
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - price).toString());
6787
localStorage.setItem("owned_cars", localStorage["owned_cars"] + ",1")
6888
localStorage.setItem("car", "{\"baseColor\":\"#fefefe\",\"wheelColor\":\"#333\",\"windowColor\":\"#333\",\"minSpeed\":5,\"maxSpeed\":30,\"default_specs\":[80, -22, 26, 40]}");
6989
} else if (car == "pickup_truck") {
70-
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - 800).toString());
90+
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - price).toString());
7191
localStorage.setItem("owned_cars", localStorage["owned_cars"] + ",2")
7292
localStorage.setItem("car", "{\"baseColor\":\"#ff4400\",\"wheelColor\":\"#444\",\"windowColor\":\"#333\",\"minSpeed\":5,\"maxSpeed\":30,\"default_specs\":[80, -22, 26, 100]}");
73-
} else if (car == "race_car") {
74-
75-
} else if (car == "surprise_car") {
76-
93+
} else if (car == "limo_car") {
94+
localStorage.setItem("current_pts", (parseFloat(localStorage["current_pts"], 0) - price).toString());
95+
localStorage.setItem("owned_cars", localStorage["owned_cars"] + ",3")
96+
localStorage.setItem("car", "{\"baseColor\":\"#eee\",\"windowColor\":\"#333\",\"roofColor\":\"#fff\",\"minSpeed\":10,\"maxSpeed\":50,\"default_specs\":[45,-15,12,35,-4]}");
7797
}
7898
}
7999
</script>

‎images/limo_car.png‎

91.9 KB
Loading

‎images/pickup_truck.png‎

99.3 KB
Loading

‎images/small_car.png‎

75.3 KB
Loading

‎images/town_car.png‎

23.7 KB
Loading

0 commit comments

Comments
 (0)