Skip to content

Details challenge #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PetitPuni wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Details challenge #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75fa7e6
add modal on challenges
PetitPuni Mar 28, 2023
0e564b9
change front modal
PetitPuni Mar 29, 2023
5240037
allow sidekiq in with dev command for test
PetitPuni Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Procfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
web: bin/rails server -p 3000 -b 0.0.0.0
js: yarn build --watch
# worker: redis-cli flushall ; bundle exec sidekiq -C config/sidekiq.yml
worker: redis-cli flushall ; bundle exec sidekiq -C config/sidekiq.yml
1 change: 1 addition & 0 deletions app/assets/stylesheets/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
@import "footer";
@import "card";
@import "popup";
@import "modal";
17 changes: 17 additions & 0 deletions app/assets/stylesheets/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.modal{
height: auto;
bottom: 0;
top: 200px;
}

.modal-content{
top: 300px;

}

.modal-header {
position: sticky;
top: 0;
z-index: 1056;
background-color: #FFF;
}
1 change: 1 addition & 0 deletions app/assets/stylesheets/config/_bootstrap_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ $border-radius-lg: 2px;
$border-radius-sm: 2px;

// Override other variables below!

2 changes: 1 addition & 1 deletion app/assets/stylesheets/pages/_myleague.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ table tbody tr {
.card-challenges {
position: relative;
display: flex;
width: 88vw;
width: auto;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
Expand Down
15 changes: 14 additions & 1 deletion app/controllers/challenges_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,32 @@
class ChallengesController < ApplicationController
before_action :set_league
before_action :set_challenge, only: [:show]

def index
@challenges = @league.user_league_challenges
end

def show
@challenge = Challenge.find(params[:id])
@details_challenge = UserLeagueChallenge.joins(user_league: :league).includes(:user_league)
.where(challenge_id: @challenge.id, user_league: { league_id: @league.id })
.order('progress DESC')
respond_to do |format|
format.html
format.text { render partial: "challenges/show_details_challenge", locals: { details_challenge: @details_challenge}, formats: [:html] }
end
end


private

def set_league
@league = League.find(params[:league_id])
end

def set_challenge
@challenge = Challenge.find(params[:id])
end

end

# Faire un tableau avec les kills / Hit
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/leagues_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ def index

def show
@league_challenges = @league.challenges
@details_challenge = []
@user_challenges = UserLeagueChallenge.joins(user_league: [:league]).includes(:challenge)
.where(user_leagues: { user_id: current_user, league_id: @league })
.order('progress DESC')

@url = "#{join_league_url}?token=#{@league.token}"
@users = @league.users
@league = League.find(params[:id])
Expand Down
15 changes: 14 additions & 1 deletion app/javascript/controllers/league_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { createConsumer } from "@rails/actioncable"
// Connects to data-controller="league"
export default class extends Controller {
static values = { leagueId: Number, currentUserId: Number }
static targets = ["userChallenges", "ranking", "players", "leagueChallenges"]
static targets = ["userChallenges", "ranking", "players", "leagueChallenges", "detailsChallenge"]

initialize() {
this.received = this.received.bind(this)
Expand All @@ -14,6 +14,7 @@ export default class extends Controller {
console.log("coucou")
console.log(this.leagueIdValue)
console.log(this.currentUserIdValue)
console.log(this.detailsChallengeTarget)
this.channel = createConsumer().subscriptions.create(
{ channel: "LeagueChannel", id: this.leagueIdValue },
{ received: this.received }
Expand Down Expand Up @@ -61,4 +62,16 @@ export default class extends Controller {
received(json) {
this[json.key](json.data)
}

showDetails(event) {
console.log(event.currentTarget.dataset.cid)
const challengeId = event.currentTarget.dataset.cid
const url = `/leagues/${this.leagueIdValue}/challenges/${challengeId}`
fetch(url, {headers: {"Accept": "text/plain"}})
.then(response => response.text())
.then((data) => {
console.log(data)
this.detailsChallengeTarget.outerHTML = data;
})
}
}
14 changes: 14 additions & 0 deletions app/views/challenges/_show_details_challenge.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<% details_challenge.each do |challenge| %>
<div class="card-challenges">
<h3><%= challenge.user_league.user.steam_username %></h3>
<p><%= challenge.succes? ? "Completed" : "In progress" %></p>
<div class="progress">
<div class="progress-bar <%= challenge.progress >= 75 ? "progress-high" : challenge.progress >= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= challenge.progress %>%;"></div>
</div>
<div class="card-details">
<div>
<%= challenge.progress %> %
</div>
</div>
</div>
<% end %>
15 changes: 15 additions & 0 deletions app/views/leagues/_details_challenge.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<% user_challenges.each do |user_challenge| %>
<div class="modal fade" id="chal<%=user_challenge.id%>" tabindex="-20" aria-labelledby="exampleModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><%= user_challenge.challenge.name %></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div data-league-target="detailsChallenge"></div>
</div>
</div>
</div>
</div>
<% end %>
12 changes: 0 additions & 12 deletions app/views/leagues/_popup.html.erb
View file
Open in desktop

This file was deleted.

44 changes: 1 addition & 43 deletions app/views/leagues/_show_friend.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,7 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="profile-background"></div>
<div class="profile-container">
<div class="profile-avatar">
<div class="profile-image">
<h1><%= user.steam_username.upcase %></h1>
</div>
<img class="profile-picture" src="<%= user.steam_image %>" alt="User Image">
</div>
<div class="profile-info">
<h4>Rank: <%= user.rank %></h4>
</div>
<div class="user-card-container">
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Leagues 👾</h5>
<p class="user-card-text"><%= user.user_leagues.count %></p>
</div>
</div>
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Favorite Game 🎮</h5>
<p class="user-card-text"><%#= @league.game.name %> CS GO</p>
</div>
</div>
<div class="user-card">
<div class="user-card-challenges">
<h5 class="user-card-title">Challenges completed 🎯</h5>
<p class="user-card-text"><%= user.completed_challenges_count %></p>
</div>
</div>
<div class="user-card">
<div class="user-card-body">
<h5 class="user-card-title">Member since ⏲</h5>
<p class="user-card-text"><%= user.created_at.strftime("%B %Y") %></p>
</div>
</div>
</div>
</div>
</div>
</div>



<%= render "users/show_user", user: user %>
</div>
</div>
</div>
Expand Down
26 changes: 13 additions & 13 deletions app/views/leagues/_user_challenges.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@

<div data-league-target="userChallenges">
<% user_challenges.each do |user_challenge| %>
<div class="card-challenges">
<%#= image_tag challenge.photo %>
<h3><%= user_challenge.challenge.name %></h3>
<p><%= user_challenge.challenge.description %></p>
<div class="progress">
<div class="progress-bar <%= user_challenge.progress >= 75 ? "progress-high" : user_challenge.progress >= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= user_challenge.progress %>%;"></div>
</div>
<div class="card-details">
<div>
<%= user_challenge.challenge.points %> points
<%#= link_to league_challenge_path(league, user_challenge.challenge), data: { bs_toggle: "modal", bs_target: "#chaldetails" } do %>
<div class="card-challenges" data-action="click->league#showDetails" data-cid="<%=user_challenge.challenge_id%>" data-bs-toggle="modal" data-bs-target="#chal<%=user_challenge.id%>">
<%#= image_tag challenge.photo %>
<h3><%= user_challenge.challenge.name %></h3>
<p><%= user_challenge.challenge.description %></p>
<div class="progress">
<div class="progress-bar <%= user_challenge.progress >= 75 ? "progress-high" : user_challenge.progress >= 50 ? "progress-medium" : "progress-low" %>" style="width: <%= user_challenge.progress %>%;"></div>
</div>
<div class="card-details">
<div>
<%= user_challenge.challenge.points %> points
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
2 changes: 0 additions & 2 deletions app/views/leagues/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div class="container">
<center><h1>CREATE YOUR LEAGUE</h1></center>
<%= render 'form_league', league: @league%>
<p></p>

</div>
9 changes: 7 additions & 2 deletions app/views/leagues/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
<%= render "invite_player" %>
<%= render "player_list" %>

<%= render "popup"%>
<%= render "timer" %>


<%#<p><%= @league.game.genre %></p>
<%#<p><%= @league.game.description %></p>

Expand All @@ -26,8 +26,13 @@
<%= render "league_challenges", challenges: @league_challenges, league: @league %>

<div class="league-space-bottom">
<%= render "user_challenges", user_challenges: @user_challenges %>
<%= render "user_challenges", user_challenges: @user_challenges, league: @league, details_challenge: @details_challenge%>
</div>

<%= render "details_challenge", user_challenges: @user_challenges, details_challenge: @details_challenge, league: @league %>




<%= render "show_friend", users: @users %>
</div>
38 changes: 38 additions & 0 deletions app/views/users/_show_user.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div class="profile-background"></div>
<div class="profile-container">
<div class="profile-avatar">
<div class="profile-image">
<h1><%= user.steam_username.upcase %></h1>
</div>
<img class="profile-picture" src="<%= user.steam_image %>" alt="User Image">
</div>
<div class="profile-info">
<h4>Rank: <%= user.rank %></h4>
</div>
<div class="user-card-container">
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Leagues 👾</h5>
<p class="user-card-text"><%= user.user_leagues.count %></p>
</div>
</div>
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Favorite Game 🎮</h5>
<p class="user-card-text"><%#= @league.game.name %> CS GO</p>
</div>
</div>
<div class="user-card">
<div class="user-card-challenges">
<h5 class="user-card-title">Challenges completed 🎯</h5>
<p class="user-card-text"><%= user.completed_challenges_count %></p>
</div>
</div>
<div class="user-card">
<div class="user-card-body">
<h5 class="user-card-title">Member since ⏲</h5>
<p class="user-card-text"><%= user.created_at.strftime("%B %Y") %></p>
</div>
</div>
</div>
</div>
40 changes: 1 addition & 39 deletions app/views/users/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1 @@
<div class="profile-background"></div>
<div class="profile-container">
<div class="profile-avatar">
<div class="profile-image">
<h1><%= @user.steam_username.upcase %></h1>
</div>
<img class="profile-picture" src="<%= @user.steam_image %>" alt="User Image">
</div>
<div class="profile-info">
<h4>Rank: <%= @user.rank %></h4>
</div>
<div class="user-card-container">
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Leagues 👾</h5>
<p class="user-card-text"><%= @user.user_leagues.count %></p>
</div>
</div>
<div class="user-card">
<div class="card-body">
<h5 class="user-card-title">Favorite Game 🎮</h5>
<p class="user-card-text"><%#= @league.game.name %> CS GO</p>
</div>
</div>
<div class="user-card">
<div class="user-card-challenges">
<h5 class="user-card-title">Challenges completed 🎯</h5>
<p class="user-card-text"><%= @user.completed_challenges_count %></p>
</div>
</div>
<div class="user-card">
<div class="user-card-body">
<h5 class="user-card-title">Member since ⏲</h5>
<p class="user-card-text"><%= @user.created_at.strftime("%B %Y") %></p>
</div>
</div>
</div>
</div>

<%= render "show_user", user: @user %>