Add CSS and content

app/controllers/bootcamp/base_controller.rb

@@ -0,0 +1,15 @@
+class Bootcamp::BaseController < ApplicationController
+  layout "bootcamp-ui"
+
+  def use_project
+    @project = Bootcamp::Project.find_by!(slug: params[:project_slug])
+  end
+
+  def use_exercise
+    @exercise = @project.exercises.find_by!(slug: params[:exercise_slug])
+  end
+
+  def use_solution
+    @solution = current_user.bootcamp_solutions.find_by!(uuid: params[:solution_uuid])
+  end
+end

app/controllers/bootcamp/concepts_controller.rb

@@ -0,0 +1,9 @@
+class Bootcamp::ConceptsController < Bootcamp::BaseController
+  def index
+    @concepts = Bootcamp::Concept.all
+  end
+
+  def show
+    @concept = Bootcamp::Concept.find_by!(slug: params[:slug])
+  end
+end

app/controllers/bootcamp/dashboard_controller.rb

@@ -0,0 +1,6 @@
+class Bootcamp::DashboardController < Bootcamp::BaseController
+  def index
+    @exercise = Bootcamp::SelectNextExercise.(current_user)
+    @solution = current_user.bootcamp_solutions.find_by(exercise: @exercise)
+  end
+end

app/controllers/bootcamp/exercises_controller.rb

@@ -0,0 +1,22 @@
+class Bootcamp::ExercisesController < Bootcamp::BaseController
+  before_action :use_project
+  before_action :use_exercise, only: %i[show edit]
+
+  def index
+    @exercises = Bootcamp::Exercise.all
+  end
+
+  def show
+    redirect_to action: :edit
+  end
+
+  def edit
+    @solution = Bootcamp::Solution::Create.(current_user, @exercise)
+  rescue ExerciseLockedError
+    redirect_to action: :show
+  end
+
+  def use_exercise
+    @exercise = @project.exercises.find_by!(slug: params[:slug])
+  end
+end

app/controllers/bootcamp/levels_controller.rb

@@ -0,0 +1,9 @@
+class Bootcamp::LevelsController < Bootcamp::BaseController
+  def index
+    @levels = Bootcamp::Level.all.index_by(&:idx)
+  end
+
+  def show
+    @level = Bootcamp::Level.find_by!(idx: params[:idx])
+  end
+end

app/controllers/bootcamp/projects_controller.rb

@@ -0,0 +1,17 @@
+class Bootcamp::ProjectsController < Bootcamp::BaseController
+  before_action :use_project, only: %i[show]
+
+  def index
+    @user_projects = current_user.bootcamp_user_projects
+  end
+
+  def show
+    @exercises = @project.exercises
+    @solutions = current_user.bootcamp_solutions.where(exercise: @exercises).index_by(&:exercise_id)
+  end
+
+  def use_project
+    @project = Bootcamp::Project.find_by!(slug: params[:slug])
+    @user_project = current_user.bootcamp_user_projects.find_by!(project: @project)
+  end
+end

app/css/bootcamp/components/breadcrumbs.css

@@ -0,0 +1,36 @@
+.c-breadcrumbs {
+    @apply border-b-1 border-[#c8d5ef] mb-20;
+
+    .container {
+        @apply flex items-center;
+        @apply py-12;
+        @apply text-14 text-gray-800 leading-150;
+        @apply overflow-x-auto;
+    }
+
+    a {
+        @apply text-lightBlue;
+        @apply font-medium;
+        @apply mr-16;
+        @apply flex items-center;
+        @apply whitespace-nowrap;
+
+        .c-icon {
+            height: 20px;
+            width: 20px;
+            @apply mr-8;
+            filter: var(--primary-blue-filter);
+        }
+    }
+    .seperator {
+        @apply text-15 text-[#6E82AA];
+        @apply mr-16;
+    }
+    .title {
+        @apply mr-16;
+        @apply whitespace-nowrap;
+    }
+    .seperator {
+        @apply mr-16;
+    }
+}

app/css/bootcamp/components/codemirror.css

@@ -0,0 +1,87 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+.editor-wrapper {
+    overflow: hidden;
+    @apply h-[60%] flex-grow-0;
+    @apply rounded-br-3;
+    @apply border-1 border-slate-400;
+}
+.editor {
+    height: 100%;
+    background: #fff;
+    overflow-y: auto;
+    @apply flex flex-grow;
+
+    .cm-gutters {
+        background: transparent;
+        @apply border-r-0;
+    }
+    .cm-lineNumbers .cm-gutterElement,
+    .cm-icon-container-gutter .cm-gutterElement {
+        @apply grid items-center;
+        /* @apply p-0; */
+    }
+
+    .cm-icon-container-gutter .cm-gutterElement {
+        @apply px-4;
+    }
+    .cm-line {
+        padding: 2px 2px 2px 6px;
+    }
+    .cm-lockedLine,
+    .cm-lockedGutter {
+        opacity: 0.6;
+        background: #eee;
+    }
+    .ͼ1 .cm-underline {
+        text-decoration: none;
+        border-bottom: 2px solid red;
+        background: rgba(255, 0, 0, 0.2);
+    }
+}
+.cm-editor {
+    font-family: "Source Code Pro", "Courier New", Courier, monospace;
+    text-align: left;
+    width: 100%;
+    color: #aaa;
+    font-size: 16px;
+
+    .cm-scroller {
+        font-family: "Source Code Pro", "Courier New", Courier, monospace;
+    }
+    .cm-foldGutter span {
+        display: none;
+    }
+    .cm-gutterElement {
+        @apply pl-12 pr-8;
+    }
+}
+
+.declaration-arrow {
+    position: absolute;
+}
+
+.cm-line {
+    display: flex;
+    align-items: center;
+}
+
+.custom-tooltip {
+    font-family: Poppins;
+    font-size: 14px;
+    padding: 4px;
+    color: #130b43;
+    line-height: 160%;
+    background: #ffd38f;
+    border-radius: 8px;
+}
+
+.cm-tooltip {
+    border: none !important;
+}
+
+.cm-lineNumbers {
+    /* width: 2em; */
+    text-align: right;
+}

app/css/bootcamp/components/completed-bar.css

@@ -0,0 +1,25 @@
+.c-completed-bar {
+    @apply flex items-center py-12 px-32 shadow-lg rounded-8 mb-24;
+    @apply border-2 border-darkGreen;
+    @apply bg-[#B8EADB];
+
+    .check-mark-icon {
+        height: 32px;
+        width: 32px;
+        @apply mr-16;
+    }
+    .text {
+        @apply flex-grow;
+        @apply text-18 leading-150 font-semibold text-gray-900;
+    }
+    .stat {
+        @apply font-semibold text-gray-600;
+    }
+
+    c-prominent-link {
+        @apply text-lightBlue;
+        /* .c-icon {
+          filter: var(--iconFilterNotificationsProminentLink);
+      } */
+    }
+}

app/css/bootcamp/components/concept-widget.css

@@ -0,0 +1,15 @@
+.c-concept-widget {
+    @apply py-12 px-16 rounded-8 border-1 block;
+    @apply flex flex-col items-stretch;
+    @apply bg-white;
+    @apply shadow-base;
+
+    .title {
+        @apply text-17 leading-140;
+        @apply font-semibold;
+        @apply mb-4;
+    }
+    .description {
+        @apply text-15 leading-140;
+    }
+}

app/css/bootcamp/components/editor-information-tooltip.css

@@ -0,0 +1,54 @@
+.information-tooltip {
+    max-width: 450px;
+    transition: opacity 0.3s;
+    @apply z-tooltip;
+    /* pointer-events: none; */
+    @apply text-15 leading-150;
+    @apply absolute rounded-8 opacity-0;
+
+    & :not(pre) > code {
+        @apply bg-thick-border-blue px-[6px] py-[1px] rounded-5;
+    }
+
+    pre {
+        @apply mt-4;
+    }
+
+    p:not(:last-of-type) {
+        @apply mb-10;
+    }
+
+    &.description {
+        @apply py-16 px-20;
+        @apply bg-white text-primary-blue;
+
+        filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));
+        .tooltip-arrow {
+            @apply bg-white;
+        }
+    }
+
+    &.error {
+        @apply bg-white border-2 border-red-500;
+
+        filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));
+
+        .tooltip-arrow {
+            @apply bg-white border-2 border-red-500;
+        }
+
+        h2 {
+            @apply text-red-900;
+            @apply font-semibold;
+            @apply py-8 px-20;
+            @apply relative z-tooltip-content bg-red-100;
+            @apply rounded-t-8;
+        }
+        .content {
+            @apply text-primary-blue;
+            @apply pt-10 px-20 pb-12;
+            @apply relative z-tooltip-content bg-white;
+            @apply rounded-b-8;
+        }
+    }
+}

app/css/bootcamp/components/exercise-widget.css

@@ -0,0 +1,63 @@
+.c-exercise-widget {
+    @apply py-12 px-12 rounded-8 border-1 block;
+    @apply flex flex-col items-stretch;
+    @apply bg-white;
+
+    &.available,
+    &.in_progress {
+        @apply shadow-base;
+
+        .tag {
+            @apply border-gray-300;
+            background-image: url("icons/available.svg");
+        }
+    }
+    &.completed {
+    }
+    &.locked {
+        @apply bg-gray-200;
+        @apply opacity-[0.5] cursor-not-allowed;
+
+        .tag {
+            @apply border-gray-400;
+            background-image: url("icons/lock.svg");
+        }
+    }
+
+    img {
+        @apply w-[80px] h-[80px] mr-12;
+    }
+
+    .title {
+        @apply mr-12;
+    }
+    .project-title {
+        @apply text-14 leading-150;
+        @apply font-semibold text-gray-900;
+    }
+    .exercise-title {
+        @apply text-17 leading-140;
+        @apply font-semibold;
+        @apply mb-2;
+    }
+    .description {
+        @apply text-15 leading-140;
+    }
+    .tag {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+        background-position: center center;
+        background-size: 12px;
+        background-repeat: no-repeat;
+
+        @apply ml-auto;
+        @apply border-1 rounded-circle;
+
+        &.completed {
+            background: #e7fdf6;
+            border-color: #43b593;
+            color: #43b593;
+        }
+    }
+}

app/css/bootcamp/components/nav.css

@@ -0,0 +1,7 @@
+.c-nav {
+    @apply flex flex-row items-center gap-10;
+    @apply mb-12;
+    a {
+        @apply font-semibold text-16 text-[blue];
+    }
+}