Skip to content

Instantly share code, notes, and snippets.

@siumhossain

siumhossain/1.html

Created February 6, 2024 08:58
Show Gist options
  • Save siumhossain/668acc28544e4cfa9549d2787889efa7 to your computer and use it in GitHub Desktop.
Save siumhossain/668acc28544e4cfa9549d2787889efa7 to your computer and use it in GitHub Desktop.
Download ZIP
html details
Raw
1.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game - User details</title>
<script src="https://cdn.tailwindcss.com"></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
</head>
<body>
<div>
<div class="p-10">
<div x-data="fecthUserData()">
<template x-if="auth">
<div>
<h1 class="text-xl md:text-3xl font-semibold text-gray-800">
CrackTech Limited
</h1>
<p class="text-md md:text-xl font-semibold text-gray-700">
Game Control Panel
</p>
<div class="mt-4 text-gray-600 hover:underline cursor-pointer" @click="window.location.href = '/users' "">
🏠 Home
</div>
</div>
</template>
<template x-if="!auth">
<div class="py-10">
<section class="">
<div
class="flex flex-col items-center justify-center py-28 mx-auto"
>
<div
class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0"
>
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1
class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl"
>
Login
</h1>
<form class="space-y-4 md:space-y-6" x-on:submit.prevent="authenticate()">
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900"
>Your phone number</label
>
<input
x-model="phone_number"
type="text"
name="phone_number"
id="phone_number"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
placeholder="01XXXXXXXXXX"
required
/>
</div>
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900"
>Password</label
>
<input
x-model="password"
type="password"
name="password"
id="password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
required
/>
</div>
<button
type="submit"
class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
>
Login
</button>
</form>
</div>
</div>
</div>
</section>
</div>
</template>
<template x-if="auth">
<div class="py-10" >
<div class="mb-4" >
<template x-if="loading">
<div class="text-center text-2xl my-10">Loading...</div>
</template>
<template x-if="!loading">
<!-- block max-w-sm p-6 bg- border border-gray-200 rounded-lg shadow hover:bg-gray-100 -->
<!-- user data -->
<div>
<div class="mb-6">
<div class="flex justify-between relative">
<div>
<h1 class="text-2xl font-sembold" x-text="username"></h1>
<p class="font-semibold"> Total game played - <span x-text="game_played"></span></p>
<p class="font-semibold"> Won - <span x-text="game_won"></span></p>
<p class="font-semibold"> Rank - <span x-text="rank"></span></p>
<p class="font-bold text-lg"> Coin - <span x-text="has_coin"></span> <span>🪙</span></p>
</div>
<div class="">
<button x-on:click="toggle_purchase()" class="bg-blue-600 hover:bg-blue-800 rounded-lg px-2.5 py-1.5 text-white transform ease-in-out duration-200">
Purchase Coin
</button>
</div>
<template x-if="show_coin_purchase_box" >
<div class="absolute z-[1000] w-[30em] top-10 right-0 rounded-lg bg-gray-100 p-4 shadow-md opacity-75 border border-2">
<div >
<div>
<div class="flex justify-between">
<label for="small-input" class="block mb-2 text-lg font-medium text-gray-900 ">How many coin you want to buy?</label>
<p x-on:click="toggle_purchase()" class="cursor-pointer">❌</p>
</div>
<input x-model="coin_want_to_buy" type="number" id="small-input" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 " >
</div>
</div>
<div class="mt-4 flex text-sm">
<template x-if="!coin_purchase_loading">
<div>
<button x-on:click="purchcase()" class="bg-green-400 px-2.5 py-1 rounded-lg font-bold hover:bg-green-600 transform ease-in-out duration-200 mr-2" >
Purchase
</button>
</div>
</template>
<template x-if="coin_purchase_loading">
<div>
<button class="bg-green-400 px-2.5 py-1 rounded-lg font-bold hover:bg-green-600 transform ease-in-out duration-200 animate-pulse mr-2" >
loading...
</button>
</div>
</template>
<button x-on:click="toggle_purchase()" class="bg-gray-300 px-2.5 py-1 rounded-lg font-bold hover:bg-gray-400 transform ease-in-out duration-200" >
Cancel
</button>
</div>
</div>
</template>
</div>
</div>
<div class="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<template x-for="game in games" >
<div :class="{ 'block max-w-sm p-6 bg-green-200 border border-gray-200 rounded-lg shadow hover:bg-green-300 transform ease-in-out duration-200': game.winner, 'block max-w-sm p-6 bg-red-200 border border-gray-200 rounded-lg shadow hover:bg-red-300 transform ease-in-out duration-200': !game.winner }">
<h5 class="mb-2 text-lg font-semibold tracking-tight text-gray-900 ">Room ID <span x-text="game.room_id" class="font-normal"></span></h5>
<div class="flex space-x-2">
<div class="font-semibold">
Ans
</div>
<div>
✅ <span x-text="game.correct_answere"></span>
</div>
<div>
❌ <span x-text="game.wrong_answere"></span>
</div>
</div>
<p>
<span class="font-semibold">Score</span>
<span x-text="game.score.toFixed(2)"></span>
</p>
<template x-if="game.winner">
<div>
<span class="font-semibold">Win</span>
<span >✅</span>
</div>
</template>
<template x-if="!game.winner">
<div>
<span class="font-semibold">Win</span>
❌
</div>
</template>
</div>
</template>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
</body>
</html>
<script>
function fecthUserData() {
return {
games: [],
loading: false,
auth: false,
phone_number: "",
password: "",
searchQuery:"",
has_coin:0,
username:"",
rank:0,
game_played:0,
game_won:0,
show_coin_purchase_box:false,
coin_want_to_buy:0,
user_id:'',
coin_purchase_loading:false,
async init() {
const token = localStorage.getItem("token");
if (token) {
this.auth = true;
await this.fetchUserDataObj();
} else {
this.auth = false;
}
},
// async search(){
// await this.fetchGameDataObj(this.searchQuery);
// },
async authenticate() {
const response = await fetch("http://hq.cracktech.org:8989/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
phone_number: this.phone_number,
password: this.password,
}),
});
const data = await response.json();
if(response.status !== 200) {
alert("Please check your login credentials")
return;
}
const token = data.results;
localStorage.setItem("token", token);
this.auth = true;
// await this.fetchGameDataObj();
},
async token_verify(){
this.loading = true
const local_token = localStorage.getItem("token");
const response = await fetch("http://hq.cracktech.org:8989/token-verify", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": local_token,
},
});
const data = await response.json();
this.loading = false
if(response.status !== 200) {
return false;
}
return true;
},
async fetchUserDataObj(){
this.loading = true
const local_token = localStorage.getItem("token");
const urlParams = new URLSearchParams(window.location.search);
this.user_id = urlParams.get('userId');
this.username = urlParams.get('username');
this.rank = urlParams.get('rank');
this.game_played = urlParams.get('game_played');
this.game_won = urlParams.get('game_won');
this.has_coin = urlParams.get('has_coin');
// 27.147.239.213:8080/user_game_log?page=1&user_id=2000
const response = await fetch(`http://27.147.239.213:8080/user_game_log?page=1&user_id=${this.user_id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
// "Authorization": local_token,
},
});
const res = await response.json();
if(response.status !== 200) {
return;
}
console.log(res.data);
this.games = res.data;
this.loading = false
},
toggle_purchase(){
this.show_coin_purchase_box = !this.show_coin_purchase_box
console.log("clicked", this.show_coin_purchase_box);
},
async purchcase(){
this.coin_purchase_loading = true
const local_token = localStorage.getItem("token");
const response = await fetch("http://27.147.239.213:8080/add_coin", {
method: "POST",
headers: {
"Content-Type": "application/json",
// "Authorization": local_token,
},
body: JSON.stringify({
user_id:this.user_id,
coin: parseInt(this.coin_want_to_buy)
}),
});
const data = await response.json();
console.log(data);
this.coin_purchase_loading = false
if(response.status !== 200) {
return false;
}
await this.fetchUserDataObj()
this.toggle_purchase()
return true;
}
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment