Compare commits
3 Commits
44c3790ddf
...
66cc647a52
Author | SHA1 | Date | |
---|---|---|---|
66cc647a52 | |||
a14c56092c | |||
06cbfc78fc |
2
.gitignore
vendored
2
.gitignore
vendored
@ -9,4 +9,4 @@ erl_crash.dump
|
||||
*.beam
|
||||
/config/*.secret.exs
|
||||
.elixir_ls/
|
||||
|
||||
/priv/static/assets
|
@ -2,4 +2,16 @@
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
/* This file is for your main application CSS */
|
||||
@layer utilities {
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
}
|
||||
|
||||
.text-outline {
|
||||
text-shadow: 2px 2px 2px #801B71, -2px 2px 2px #801B71, 2px -2px 2px #801B71, -2px -2px 2px #801B71;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@apply overflow-hidden;
|
||||
}
|
@ -22,8 +22,18 @@ import {Socket} from "phoenix"
|
||||
import {LiveSocket} from "phoenix_live_view"
|
||||
import topbar from "../vendor/topbar"
|
||||
|
||||
let Hooks = {}
|
||||
Hooks.ChickenEgg = {
|
||||
mounted() {
|
||||
this.el.addEventListener("touchstart", _e => {
|
||||
this.pushEvent("boak", {})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
||||
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
|
||||
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
|
||||
|
||||
// Show progress bar on live navigation and form submits
|
||||
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
|
||||
|
@ -3,7 +3,7 @@ defmodule ChickenEggWeb.ChickenComponents do
|
||||
|
||||
def chicken(assigns) do
|
||||
~H"""
|
||||
<div class="w-32 h-32 absolute" style={"top: #{@y}px; left: #{@x}px;"}>
|
||||
<div class="z-0 max-w-[144px] h-auto absolute" style={"width: 12%; top: #{@y}%; left: #{@x}%;"}>
|
||||
<img src={~p"/images/chicken.svg"} />
|
||||
</div>
|
||||
"""
|
||||
@ -11,7 +11,7 @@ defmodule ChickenEggWeb.ChickenComponents do
|
||||
|
||||
def egg(assigns) do
|
||||
~H"""
|
||||
<div class="w-12 h-12 absolute" style={"top: #{@y}px; left: #{@x}px;"}>
|
||||
<div class="z-10 max-w-[48px] h-auto absolute" style={"width: 4%; top: #{@y}%; left: #{@x}%;"}>
|
||||
<img src={~p"/images/egg.svg"} />
|
||||
</div>
|
||||
"""
|
||||
|
@ -1,7 +1,5 @@
|
||||
<header class="px-4 sm:px-6 lg:px-8 p-0"></header>
|
||||
<main class="">
|
||||
<div class="">
|
||||
<.flash_group flash={@flash} />
|
||||
<%= @inner_content %>
|
||||
</div>
|
||||
<main>
|
||||
<.flash_group flash={@flash} />
|
||||
<%= @inner_content %>
|
||||
</main>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="scrollbar-gutter: stable;">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
@ -6,10 +6,16 @@ defmodule ChickenEggWeb.IndexLive do
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div
|
||||
class="board relative overflow-hidden bg-green-200 w-screen h-screen"
|
||||
class="board relative bg-green-700 w-screen h-screen select-none"
|
||||
id="chicken-egg"
|
||||
phx-window-keyup="boak"
|
||||
phx-key=" "
|
||||
phx-hook="ChickenEgg"
|
||||
>
|
||||
<div class="score absolute right-0 z-50 text-fuchsia-50 text-4xl font-semibold p-4 text-outline">
|
||||
<%= @score %>
|
||||
</div>
|
||||
|
||||
<ChickenComponents.chicken x={@chicken.x} y={@chicken.y} />
|
||||
|
||||
<div id="chicken-eggs" phx-update="stream">
|
||||
@ -22,25 +28,24 @@ defmodule ChickenEggWeb.IndexLive do
|
||||
end
|
||||
|
||||
def mount(_params, _session, socket) do
|
||||
eggs = []
|
||||
|
||||
{:ok,
|
||||
socket
|
||||
|> assign(:chicken, %{x: 300, y: 200})
|
||||
|> stream(:eggs, eggs)}
|
||||
|> assign(:chicken, %{x: 42, y: 47})
|
||||
|> assign(:score, 0)
|
||||
|> stream(:eggs, [])}
|
||||
end
|
||||
|
||||
def handle_event("boak", _params, socket) do
|
||||
score = socket.assigns.score
|
||||
%{x: cx, y: cy} = socket.assigns.chicken
|
||||
new_chicken = %{x: Enum.random(1..800), y: Enum.random(1..600)}
|
||||
|
||||
new_egg =
|
||||
%{id: "egg#{cx}#{cy}", x: cx, y: cy}
|
||||
|> IO.inspect()
|
||||
new_egg = %{id: "egg#{cx}#{cy}", x: cx, y: cy}
|
||||
new_chicken = %{x: Enum.random(1..99), y: Enum.random(1..99)}
|
||||
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(:chicken, new_chicken)
|
||||
|> assign(:score, score + 1)
|
||||
|> stream_insert(:eggs, new_egg)}
|
||||
end
|
||||
end
|
||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user