Restructured frontend 💯
This commit is contained in:
Seoxi Ryouko
113
web/src/script.ls
Normal file
113
web/src/script.ls
Normal file
@ -0,0 +1,113 @@
|
||||
(->>
|
||||
const err = -> console.error it
|
||||
const $opponent-hand = document.query-selector '#opponent-hand'
|
||||
const $own-hand = document.query-selector '#own-hand'
|
||||
const $view-card = document.query-selector '#view-card'
|
||||
const $view-card-container = document.query-selector '#view-card-container'
|
||||
const $param = document.query-selector '#param'
|
||||
const [push-param, pop-param] = (->
|
||||
param = ""
|
||||
clear-param-timer = 0
|
||||
setInterval (->
|
||||
clear-param-timer-- if clear-param-timer
|
||||
param := "" unless clear-param-timer
|
||||
$param.inner-text = param
|
||||
), 100
|
||||
const push-param = ->
|
||||
param += it
|
||||
$param.inner-text = param
|
||||
clear-param-timer := 20
|
||||
const pop-full-param = ->
|
||||
ret = param
|
||||
param := ""
|
||||
$param.inner-text = param
|
||||
if ret == ""
|
||||
1
|
||||
else
|
||||
+ret
|
||||
[push-param, pop-full-param]
|
||||
)!
|
||||
|
||||
const gen-array = -> Array.from { length: it }, (_, i) -> i
|
||||
const cards = await fetch \./cards.json .then (.json!) .catch err
|
||||
const make-card = ->
|
||||
img = document.create-element \img
|
||||
img.src = it
|
||||
img
|
||||
const make-blank-card = -> make-card \./card_back.png
|
||||
const gen-opponent-cards$ = ->
|
||||
diff = it - $opponent-hand.child-element-count
|
||||
switch
|
||||
| diff < 0
|
||||
while diff++
|
||||
$opponent-hand.remove-child $opponent-hand.first-child
|
||||
| diff > 0
|
||||
$opponent-hand.append ...(gen-array diff .map make-blank-card)
|
||||
| _
|
||||
void
|
||||
const get-state = ->>
|
||||
player-state-json = await fetch \./get_state .then (.text!) .catch err
|
||||
player-state = JSON.parse player-state-json
|
||||
events-json = await fetch \/get_events .then (.text!) .catch err
|
||||
events = JSON.parse events-json
|
||||
play-map = new Map player-state.play.map -> [it.id, it]
|
||||
return { player-state-json, player-state, events-json, events, play-map }
|
||||
|
||||
const show-card$ = (e) ->
|
||||
const hide-card$ = ->
|
||||
$view-card.style.opacity = 0
|
||||
e.target.remove-event-listener \mouseleave hide-card$
|
||||
$view-card.src = e.target.get-attribute \data-png
|
||||
$view-card.style.opacity = 1
|
||||
e.target.add-event-listener \mouseleave hide-card$
|
||||
state = await get-state!
|
||||
const apply-state$ = ->
|
||||
gen-opponent-cards$ it.opponent_cards_in_hand
|
||||
if document.body.class-list.contains \my-turn
|
||||
document.body.class-list.remove \my-turn if it.you != it.turn_player
|
||||
else
|
||||
document.body.class-list.add \my-turn if it.you == it.turn_player
|
||||
if it.hand.length != $own-hand.children.length
|
||||
$own-hand.innerHTML = ''
|
||||
it.hand.for-each (card-id, index) ->
|
||||
card-data = cards[card-id]
|
||||
card = make-card card-data.jpg
|
||||
card.set-attribute \data-index index
|
||||
card.set-attribute \data-text card-data.txt
|
||||
card.add-event-listener \mouseenter show-card$
|
||||
card.set-attribute \data-png card-data.png
|
||||
$own-hand.append-child card
|
||||
apply-state$ state.player-state
|
||||
|
||||
set-interval (->>
|
||||
const new-state = await get-state!
|
||||
unless new-state.player-state-json == state.player-state-json
|
||||
apply-state$ new-state.player-state
|
||||
state := new-state
|
||||
window.state = state
|
||||
), 1000
|
||||
mouse-x = mouse-y = 0
|
||||
document
|
||||
..addEventListener \mousemove ->
|
||||
mouse-x = it.client-x
|
||||
mouse-y = it.client-y
|
||||
if mouse-x > window.inner-width / 2
|
||||
$view-card-container.class-list.remove \right
|
||||
else
|
||||
$view-card-container.class-list.add \right
|
||||
..addEventListener \keyup ->
|
||||
current-mouse-node = [...document.query-selector-all \:hover][* - 1]
|
||||
switch it.key
|
||||
| \c => fetch "./draw/#{pop-param!}"
|
||||
| \e => fetch "./pass"
|
||||
| \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that
|
||||
| \t =>
|
||||
if current-mouse-node?.has-attribute \data-index
|
||||
fetch "./fade/#{current-mouse-node.get-attribute \data-index}"
|
||||
| \y =>
|
||||
if current-mouse-node?.has-attribute \data-index
|
||||
fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-index}"
|
||||
| ' ' =>
|
||||
if current-mouse-node?.has-attribute \data-index
|
||||
fetch "./play/#{current-mouse-node.get-attribute \data-index}"
|
||||
)!
|
||||
95
web/src/style.scss
Normal file
95
web/src/style.scss
Normal file
@ -0,0 +1,95 @@
|
||||
$view-container-side-offset: 5%;
|
||||
$param-container-side-offset: 5%;
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hand {
|
||||
height: 14%;
|
||||
width: 100%;
|
||||
background-color: #0002;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 0.2%;
|
||||
align-items: center;
|
||||
img {
|
||||
display: flex;
|
||||
height: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: $view-container-side-offset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
img {
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
left: initial;
|
||||
right: $view-container-side-offset;
|
||||
}
|
||||
|
||||
#param-container {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: $param-container-side-offset;
|
||||
}
|
||||
|
||||
.right #param-container {
|
||||
left: initial;
|
||||
right: $param-container-side-offset;
|
||||
}
|
||||
|
||||
#param {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.right #param {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#border {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
bottom: 48%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #f002;
|
||||
}
|
||||
|
||||
.my-turn #border {
|
||||
background-color: #0ff2;
|
||||
}
|
||||
|
||||
#play {
|
||||
flex-grow: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user