Skip to content

Commit 3c5c6c0

Browse files
bioinfogurubioinfoguru
committed
2 parents d309046 + ebd0787 commit 3c5c6c0

File tree

3 files changed

+222
-0
lines changed

3 files changed

+222
-0
lines changed

‎.github/workflows/static.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Simple workflow for deploying static content to GitHub Pages
2+
name: Deploy static content to Pages
3+
4+
on:
5+
# Runs on pushes targeting the default branch
6+
push:
7+
branches: ["main"]
8+
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20+
concurrency:
21+
group: "pages"
22+
cancel-in-progress: false
23+
24+
jobs:
25+
# Single deploy job since we're just deploying
26+
deploy:
27+
environment:
28+
name: github-pages
29+
url: ${{ steps.deployment.outputs.page_url }}
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
- name: Setup Pages
35+
uses: actions/configure-pages@v4
36+
- name: Upload artifact
37+
uses: actions/upload-pages-artifact@v3
38+
with:
39+
# Upload entire repository
40+
path: '.'
41+
- name: Deploy to GitHub Pages
42+
id: deployment
43+
uses: actions/deploy-pages@v4

‎.nojekyll‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎RPS.html‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
6+
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<title>RPS</title>
10+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
11+
12+
</head>
13+
14+
<body>
15+
16+
<div id="app">
17+
18+
19+
<div class="grid grid-cols-3 pt-20 mx-auto max-w-lg min-h-[22%]">
20+
<div class="text-center">
21+
<i class="fa-solid fa-user text-5xl text-transparent bg-clip-text bg-gradient-to-b from-lime-400 to-lime-600"></i><br>
22+
<span class="text-4xl" v-html="result2"></span>
23+
</div>
24+
<div class="flex justify-center items-center">
25+
26+
<span class="text-4xl" v-html="rawHtml"></span>
27+
28+
</div>
29+
<div class="text-center">
30+
<i class="fa-solid fa-desktop text-5xl text-transparent bg-clip-text bg-gradient-to-b from-amber-400 to-amber-600"></i><br>
31+
<span class="text-4xl" v-html="result1"></span>
32+
</div>
33+
34+
</div>
35+
36+
<div class="grid grid-cols-3 p-10 text-4xl mx-auto max-w-lg">
37+
<div class="text-center">
38+
<label>{{ Player_score }}</label>
39+
</div>
40+
41+
<div class="text-center ">
42+
&nbsp;
43+
</div>
44+
45+
<div class="text-center">
46+
<label class="items-center">{{ Comp_score }}</label>
47+
</div>
48+
</div>
49+
50+
<div class="grid grid-cols-3 px-10 py-10 mx-auto max-w-lg min-h-[15%]">
51+
<div class="text-center">
52+
<button v-if="showRock" class="bg-transparent" @click="rand_select(); sel_rock()">
53+
<i id="rock" class="rounded fa-solid fa-hill-rockslide text-7xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600 hover:bg-gradient-to-t"></i>
54+
</button>
55+
</div>
56+
<div class="text-center">
57+
<button v-if="showPaper" @click="rand_select(); sel_paper()">
58+
<i id="pap" class="rounded fa-solid fa-scroll text-7xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600 hover:bg-gradient-to-t"></i>
59+
</button>
60+
</div>
61+
<div class="text-center">
62+
<button v-if="showScissors" @click="rand_select(); sel_scissors()">
63+
<i id="sci" class="bg-fuchsia-100 rounded fa-solid fa-scissors text-7xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600 hover:bg-gradient-to-t"></i>
64+
</button>
65+
</div>
66+
</div>
67+
68+
69+
70+
<div class="flex justify-center mx-auto max-w-lg p-10">
71+
<button class="w-12 h-12 bg-fuchsia-400 text-white font-bold shadow-2xl rounded-full" @click="reset_score()">
72+
<i class="text-3xl text-fuchsia-800 justify-center fa-solid fa-power-off hover:text-fuchsia-200"></i>
73+
</button>
74+
</div>
75+
76+
</div>
77+
</body>
78+
79+
<script type="module">
80+
const app = Vue.createApp({
81+
data() {
82+
return {
83+
result1: " ",
84+
result2: ' ',
85+
output: ' ',
86+
Comp_score: 0,
87+
Player_score: 0,
88+
rawHtml: '',
89+
showRock: true,
90+
showPaper: true,
91+
showScissors: true
92+
}
93+
},
94+
methods: {
95+
rand_select() {
96+
var items = Array("Rock", "Paper", "Scissors")
97+
var a = Math.floor(Math.random()*items.length)
98+
var item = items[a];
99+
this.result1 = item;
100+
},
101+
// console.log(this.result1, //this.result2,this.output);
102+
103+
sel_rock() {
104+
this.showRock = false;
105+
this.result2 = '<i id="rock" class="rounded fa-solid fa-hill-rockslide text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
106+
if(this.result1=="Paper"){
107+
this.output = "Computer Won";
108+
this.Comp_score++;
109+
this.rawHtml = '<i class="fa-solid fa-thumbs-down fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-amber-400 to-amber-600" style="--fa-animation-duration: 2s;"></i>';
110+
this.result1='<i id="pap" class="rounded fa-solid fa-scroll text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
111+
} else if(this.result1=="Scissors"){
112+
this.output = "You Won";
113+
this.Player_score++;
114+
115+
this.rawHtml = '<i class="fa-solid fa-thumbs-up fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-lime-400 to-lime-600"></i>';
116+
this.result1 = '<i id="sci" class="rounded fa-solid fa-scissors text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
117+
} else {
118+
this.output = "It's a tie"
119+
this.rawHtml = '<i class="fa-brands fa-black-tie fa-beat text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-amber-400" style="--fa-animation-duration: 2s;"></i>';
120+
this.result1 = '<i id="sci" class="rounded fa-solid fa-hill-rockslide text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
121+
}
122+
setTimeout(() => this.showRock = true, 200);
123+
},
124+
sel_paper() {
125+
this.showPaper = false;
126+
this.result2 = '<i id="pap" class="rounded fa-solid fa-scroll text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
127+
if(this.result1=="Rock"){
128+
this.output = "You Won";
129+
this.Player_score++;
130+
this.rawHtml = '<i class="fa-solid fa-thumbs-up fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-lime-400 to-lime-600"></i>';
131+
this.result1 = '<i id="rock" class="rounded fa-solid fa-hill-rockslide text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
132+
} else if(this.result1=="Scissors"){
133+
this.output = "Computer Won";
134+
this.Comp_score++;
135+
this.rawHtml = '<i class="fa-solid fa-thumbs-down fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-amber-400 to-amber-600" style="--fa-animation-duration: 2s;"></i>';
136+
this.result1 = '<i id="sci" class="rounded fa-solid fa-scissors text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
137+
} else {
138+
this.output = "It's a tie"
139+
this.rawHtml = '<i class="fa-brands fa-black-tie fa-beat text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-amber-400" style="--fa-animation-duration: 2s;"></i>';
140+
this.result1='<i id="pap" class="rounded fa-solid fa-scroll text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
141+
}
142+
setTimeout(() => this.showPaper = true, 200);
143+
},
144+
sel_scissors() {
145+
this.showScissors = false;
146+
this.result2 = '<i id="pap" class="rounded fa-solid fa-scissors text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
147+
if(this.result1=="Rock"){
148+
this.output = "Computer Won";
149+
this.Comp_score++;
150+
this.rawHtml = '<i class="fa-solid fa-thumbs-down fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-amber-400 to-amber-600" style="--fa-animation-duration: 2s;"></i>';
151+
this.result1='<i id="rock" class="rounded fa-solid fa-hill-rockslide text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">'
152+
} else if(this.result1=="Paper"){
153+
this.output = "You Won";
154+
this.Player_score++;
155+
this.rawHtml = '<i class="fa-solid fa-thumbs-up fa-bounce text-transparent bg-clip-text bg-gradient-to-b from-lime-400 to-lime-600"></i>';
156+
this.result1='<i id="pap" class="rounded fa-solid fa-scroll text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">'
157+
} else {
158+
this.output = "It's a tie";
159+
this.rawHtml = '<i class="fa-brands fa-black-tie fa-beat text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-amber-400" style="--fa-animation-duration: 2s;"></i>';
160+
this.result1 = '<i id="sci" class="rounded fa-solid fa-scissors text-2xl text-transparent bg-clip-text bg-gradient-to-b from-fuchsia-400 to-fuchsia-600">';
161+
}
162+
setTimeout(() => this.showScissors = true, 200);
163+
},
164+
reset_score(){
165+
this.Comp_score = 0;
166+
this.Player_score = 0;
167+
this.result1 = '';
168+
this.result2 = '';
169+
this.output = '';
170+
this.rawHtml = '';
171+
},
172+
},
173+
})
174+
175+
app.mount('#app')
176+
</script>
177+
178+
</html>

0 commit comments

Comments
 (0)